/* ==========================================================================
   makefloridablue.com - single stylesheet.
   Ported from /prototype/index.html. Design tokens are from MFB-SITE-SPEC.md
   section 6. No design value is invented here; every color below appears in
   the spec or in the approved prototype.
   ========================================================================== */

:root {
  /* Spec section 6 tokens, verbatim. */
  --ink: #101D33;
  --paper: #F6F4EC;
  --blue: #1D5FD1;
  --blue-deep: #123A85;
  --stamp: #C22F2A;
  --line: #D9D4C4;
  --mut: #5A6270;

  /* Carried from the approved prototype but NOT yet listed in spec section 6.
     Flagged for spec amendment. Values are unchanged from the prototype. */
  --surface: #FDFCF8;     /* ledger and card fill */
  --band-text: #D8DCE4;   /* body copy inside the dark Change It band */
  --band-accent: #8FB3F2; /* eyebrow inside the dark Change It band */
  --white: #fff;          /* type on saturated blue buttons */

  --disp: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box }
html { scroll-behavior: smooth }
body { background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 18px; line-height: 1.6 }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px }
a:hover { color: var(--blue-deep) }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px }

.skip-link { position: absolute; left: 24px; top: 12px; z-index: 20; transform: translateY(-250%); background: var(--ink); color: var(--paper); font-family: var(--disp); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; padding: 10px 16px }
.skip-link:focus { transform: translateY(0); color: var(--paper) }

/* ---------- masthead ---------- */
.mast { border-bottom: 2px solid var(--ink) }
.mast-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px 0; flex-wrap: wrap }
.wordmark { font-family: var(--disp); font-weight: 900; font-size: 20px; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap }
.wordmark b { color: var(--blue) }
.nav { display: flex; gap: 22px; flex-wrap: wrap }
.nav a { font-family: var(--disp); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); text-decoration: none }
.nav a:hover { color: var(--blue) }
.nav a[aria-current="page"] { color: var(--blue); text-decoration: underline; text-underline-offset: 5px }
.mast-note { width: 100%; border-top: 1px solid var(--line); padding: 8px 0 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--mut) }
.mast-note b { color: var(--ink); font-weight: 500 }

/* ---------- hero ---------- */
.hero { padding: 72px 0 56px }
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); margin-bottom: 18px }
.hero-row { display: flex; align-items: flex-start; gap: 32px; flex-wrap: wrap }
.bignum { font-family: var(--disp); font-weight: 900; font-size: clamp(96px, 17vw, 200px); line-height: .9; letter-spacing: -.03em; color: var(--blue) }
.bignum small { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(17px, 2vw, 21px); letter-spacing: 0; line-height: 1.45; color: var(--ink); max-width: 24ch; margin-top: 14px }
.stampwrap { padding-top: clamp(8px, 2vw, 28px) }
.stamp { display: inline-block; font-family: var(--mono); font-weight: 500; font-size: clamp(20px, 3.4vw, 34px); letter-spacing: .14em; text-transform: uppercase; color: var(--stamp); border: 3px solid var(--stamp); padding: 10px 18px; transform: rotate(-2deg) }
.hero-mech { margin-top: 34px; max-width: 62ch; font-size: 19px }
.hero-ctas { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap }
.btn { display: inline-block; font-family: var(--disp); font-weight: 700; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; padding: 13px 20px; border: 2px solid var(--ink); color: var(--ink); background: transparent }
.btn:hover { background: var(--ink); color: var(--paper) }
.btn-blue { background: var(--blue); border-color: var(--blue); color: var(--white) }
.btn-blue:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--white) }

.thesis { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 36px 0; margin-bottom: 72px }
.thesis p { font-family: var(--serif); font-weight: 600; font-size: clamp(21px, 2.6vw, 27px); line-height: 1.5; max-width: 34em }
.thesis p b { color: var(--blue) }

/* ---------- section scaffolding ---------- */
section { padding: 0 0 84px }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 10px }
.sect-h { font-family: var(--disp); font-weight: 900; font-size: clamp(30px, 4.4vw, 44px); letter-spacing: -.015em; line-height: 1.05; margin-bottom: 10px }
.sect-sub { color: var(--mut); max-width: 58ch; margin-bottom: 34px }

/* ---------- the ledger (signature) ---------- */
.ledger { border: 2px solid var(--ink); background: var(--surface) }
.ledger-head, .lrow { display: grid; grid-template-columns: 1.35fr .8fr 1.6fr auto; gap: 18px; align-items: center; padding: 16px 20px }
.ledger-head { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); border-bottom: 2px solid var(--ink) }
.lrow { border-bottom: 1px solid var(--line) }
.lrow:last-child { border-bottom: none }
.lm-year { font-family: var(--mono); font-size: 12px; color: var(--mut) }
.lm-name { font-family: var(--disp); font-weight: 700; font-size: 17px; line-height: 1.25 }
.lvote { font-family: var(--disp); font-weight: 900; font-size: clamp(26px, 3.4vw, 36px); color: var(--blue); letter-spacing: -.02em; white-space: nowrap }
.lvote span { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .1em; color: var(--mut); display: block }
/* Spec section 2.2: a measure with no verified percentage shows this state,
   never a number. */
.lvote-pending { font-family: var(--mono); font-weight: 400; font-size: 13px; line-height: 1.45; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); white-space: normal }
.lout .lstamp { display: inline-block; font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--stamp); border: 2px solid var(--stamp); padding: 3px 8px; transform: rotate(-1.5deg); margin-bottom: 8px }
.lout p { font-size: 15.5px; line-height: 1.5; color: var(--ink) }
.chip { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--blue); color: var(--blue-deep); padding: 4px 8px; white-space: nowrap; justify-self: end }
.chip.pending { border-color: var(--mut); color: var(--mut) }
.ledger-note { font-family: var(--mono); font-size: 12px; color: var(--mut); padding: 14px 2px 0; line-height: 1.7 }
.ledger-more { margin-top: 22px }

/* ---------- investigations ---------- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px }
.card { border: 2px solid var(--ink); background: var(--surface); padding: 24px; display: flex; flex-direction: column; gap: 12px }
.card h3 { font-family: var(--disp); font-weight: 900; font-size: 22px; letter-spacing: -.01em; line-height: 1.15 }
.card h3 a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px }
.card h3 a:hover { color: var(--blue-deep); text-decoration-thickness: 3px }
.card p { font-size: 16px; line-height: 1.55; flex: 1 }
.card .chip { justify-self: start; align-self: flex-start }

/* ---------- counties ---------- */
.cty { display: flex; gap: 44px; align-items: flex-start; flex-wrap: wrap }
.cty-grid { display: grid; grid-template-columns: repeat(10, 22px); gap: 6px; padding: 20px; border: 2px solid var(--ink); background: var(--surface) }
.cty-sq { width: 22px; height: 22px; border: 1.5px solid var(--ink); background: transparent }
.cty-sq.on { background: var(--blue); border-color: var(--blue) }
.cty-copy { flex: 1; min-width: 280px; max-width: 52ch }
.cty-copy .lm-year { margin-bottom: 6px; display: block }
.cty-copy p { margin-bottom: 14px }

/* ---------- glossary ---------- */
.terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px }
.term { border-top: 2px solid var(--ink); padding-top: 16px }
.term h3 { font-family: var(--mono); font-weight: 500; font-size: 15px; letter-spacing: .02em; margin-bottom: 10px }
.term p { font-size: 15.5px; line-height: 1.55; color: var(--ink) }
.terms-more { margin-top: 30px }

/* ---------- change band ---------- */
.band { background: var(--ink); color: var(--paper); padding: 64px 0; margin-bottom: 84px }
.band .sect-h { color: var(--white) }
.band .eyebrow { color: var(--band-accent) }
.band p { max-width: 56ch; margin-bottom: 26px; color: var(--band-text) }
.band .btn { border-color: var(--paper); color: var(--paper) }
.band .btn:hover { background: var(--paper); color: var(--ink) }

/* ---------- interior pages ---------- */
.page { padding: 64px 0 84px }
.page-h { font-family: var(--disp); font-weight: 900; font-size: clamp(32px, 5vw, 52px); letter-spacing: -.02em; line-height: 1.03; margin-bottom: 16px }
.dek { font-size: 20px; line-height: 1.5; color: var(--mut); max-width: 56ch; margin-bottom: 28px }
.page-note { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); border-top: 2px solid var(--ink); padding-top: 14px; max-width: 56ch }

/* ---------- story pages, the two-layer template ---------- */
.record { max-width: 62ch }
.record h2 { font-family: var(--disp); font-weight: 900; font-size: 26px; line-height: 1.15; margin: 40px 0 12px }
.record h3 { font-family: var(--disp); font-weight: 700; font-size: 20px; line-height: 1.2; margin: 30px 0 10px }
.record p { margin-bottom: 18px }
.record ul, .record ol { margin: 0 0 18px 22px }
.record li { margin-bottom: 8px }
.layer-label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--mut); border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 22px }
/* Layer 2. Visually distinct from the Record, and always downstream of it. */
.position { border: 2px solid var(--blue); background: var(--surface); padding: 28px; margin: 48px 0; max-width: 62ch }
.position .layer-label { color: var(--blue-deep); border-bottom-color: var(--blue) }
.position h2 { font-family: var(--disp); font-weight: 900; font-size: 24px; margin-bottom: 12px }
.position p { margin-bottom: 14px }
.position p:last-child { margin-bottom: 0 }
.sources { border-top: 2px solid var(--ink); padding-top: 20px; margin-top: 48px; max-width: 72ch }
.sources h2, .corrections h2 { font-family: var(--disp); font-weight: 900; font-size: 22px; margin-bottom: 14px }
.sources ol { margin-left: 20px }
.sources li { font-size: 15.5px; line-height: 1.55; margin-bottom: 12px }
.src-meta { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--mut); display: block; margin-top: 3px }
.corrections { border-top: 2px solid var(--ink); padding-top: 20px; margin-top: 40px; max-width: 72ch }
.corrections p { font-size: 15.5px; color: var(--mut) }
.todo { border-left: 3px solid var(--stamp); background: var(--surface); padding: 16px 20px; margin: 24px 0; max-width: 62ch }
.todo p { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--stamp); margin-bottom: 10px }
.todo ul { margin: 0 0 0 20px }
.todo li { font-size: 15px; line-height: 1.5; margin-bottom: 6px }

/* ---------- index lists ---------- */
.stub-list { list-style: none; border-top: 2px solid var(--ink) }
.stub-list li { border-bottom: 1px solid var(--line); padding: 18px 0 }
.stub-list h2 { font-family: var(--disp); font-weight: 700; font-size: 19px; line-height: 1.25; margin-bottom: 6px }
.stub-list h2 a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px }
.stub-list h2 a:hover { color: var(--blue-deep); text-decoration-thickness: 3px }
.stub-list p { font-size: 15.5px; color: var(--mut); max-width: 62ch }

/* ---------- footer ---------- */
footer { border-top: 2px solid var(--ink); padding: 44px 0 60px }
.foot-disc { max-width: 64ch; font-size: 16px; margin-bottom: 26px }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 26px }
.foot-links a { font-family: var(--disp); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--ink) }
.foot-links a:hover { color: var(--blue) }
.foot-mono { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--mut) }

/* ---------- motion ---------- */
@keyframes slam {
  0% { opacity: 0; transform: scale(1.7) rotate(-7deg) }
  100% { opacity: 1; transform: scale(1) rotate(-2deg) }
}
.stamp { animation: slam .4s cubic-bezier(.2, 1.4, .35, 1) .45s both }
.rev { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease }
.rev.in { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  .stamp { animation: none }
  .rev { opacity: 1; transform: none; transition: none }
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .cards { grid-template-columns: 1fr }
  .terms { grid-template-columns: 1fr }
  .ledger-head { display: none }
  .lrow { grid-template-columns: 1fr; gap: 10px; padding: 18px 16px }
  .chip { justify-self: start }
  .cty-grid { grid-template-columns: repeat(10, 18px) }
  .cty-sq { width: 18px; height: 18px }
}

/* ---------- claim tagging and the disputed panel ----------
   Added for the two-layer story pages. Every value below resolves to a token
   already declared in :root. No new color is introduced. */
.claimtag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 26px 0 10px }
.claimtag .chip { justify-self: start }
.claimref { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut) }
.legaltag { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--stamp); color: var(--stamp); padding: 4px 8px }

.disputed { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 2px solid var(--ink); background: var(--surface); margin: 24px 0 }
.disputed__col { padding: 24px; border-right: 1px solid var(--line) }
.disputed__col:last-child { border-right: none }
.disputed__label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-deep); border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 14px }
.disputed__col p { font-size: 15.5px; line-height: 1.55; margin-bottom: 12px }
.disputed__col p:last-child { margin-bottom: 0 }
.opinion-label { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--stamp); display: block; margin-top: 10px }

.timeline { list-style: none; margin: 0; border-top: 2px solid var(--ink) }
.timeline li { border-bottom: 1px solid var(--line); padding: 18px 0 }
.timeline .tl-date { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); display: block; margin-bottom: 6px }
.timeline p { margin-bottom: 10px }
.timeline p:last-child { margin-bottom: 0 }

.copy-note { border-left: 3px solid var(--blue); background: var(--surface); padding: 16px 20px; margin: 24px 0; font-size: 15.5px; line-height: 1.55 }
.src-group { margin-bottom: 26px }
.src-group h3 { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-deep); margin-bottom: 10px }
.src-dead { color: var(--stamp) }

@media (max-width: 860px) {
  .disputed { grid-template-columns: 1fr }
  .disputed__col { border-right: none; border-bottom: 1px solid var(--line) }
  .disputed__col:last-child { border-bottom: none }
}

/* The disputed panel is a comparison, not running prose, so it is allowed to
   break out of the reading measure to the right where the page has room.
   Constrained to wide viewports so it never causes horizontal overflow. */
@media (min-width: 1000px) {
  .record .disputed { width: calc(100% + 12ch) }
}

/* Spec 2.3 rung 4 disclosure: a claim whose every source is unarchived. */
.single-source { border-left: 3px solid var(--stamp); background: var(--surface); padding: 12px 16px; margin-bottom: 12px; font-size: 14.5px; line-height: 1.5; color: var(--ink) }

/* ---------- county record pages ---------- */
.src-attrib { font-family: var(--mono); font-size: 12px; line-height: 1.6; letter-spacing: .03em; color: var(--mut); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; margin-bottom: 32px }
.lead-in { font-family: var(--disp); font-weight: 900; font-size: clamp(24px, 3.4vw, 34px); line-height: 1.15; margin-bottom: 18px }
.emphasis { border-left: 3px solid var(--blue); padding: 12px 18px; margin: 20px 0; font-size: 16.5px; line-height: 1.55; background: var(--surface) }
.dtable { width: 100%; border-collapse: collapse; border: 2px solid var(--ink); background: var(--surface); margin: 18px 0; font-size: 15.5px }
.dtable caption { text-align: left; font-family: var(--disp); font-weight: 900; font-size: 20px; margin-bottom: 8px; color: var(--ink) }
.dtable th { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-align: left; color: var(--mut); border-bottom: 2px solid var(--ink); padding: 10px 14px }
.dtable td { border-bottom: 1px solid var(--line); padding: 10px 14px; line-height: 1.45 }
.dtable tr:last-child td { border-bottom: none }
.dtable .yr-now { font-family: var(--mono); font-weight: 500; color: var(--stamp) }
.tbl-note { font-size: 15.5px; line-height: 1.55; color: var(--mut); max-width: 62ch; margin-bottom: 6px }
.tbl-foot { font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--mut); max-width: 68ch; margin-top: 8px }
.held { border: 2px solid var(--stamp); background: var(--surface); padding: 24px; margin: 40px 0; max-width: 68ch }
.held h2 { font-family: var(--disp); font-weight: 900; font-size: 22px; margin-bottom: 12px; color: var(--stamp) }
.held ul { margin: 12px 0 12px 22px }
.held li { font-size: 15.5px; line-height: 1.5; margin-bottom: 6px }
.checklist { border-top: 2px solid var(--ink); padding-top: 20px; margin-top: 40px; max-width: 72ch }
.checklist h3 { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); margin: 18px 0 8px }
.checklist ul { list-style: none; margin: 0 }
.checklist li { font-size: 15.5px; line-height: 1.5; margin-bottom: 8px; padding-left: 26px; position: relative }
.checklist li::before { position: absolute; left: 0; font-family: var(--mono); font-size: 12px }
.checklist .done::before { content: "[x]"; color: var(--blue-deep) }
.checklist .todo::before { content: "[ ]"; color: var(--stamp) }

/* Persistent trademark disclaimer, handoff brief section 7. */
.foot-disclaimer { font-family: var(--mono); font-size: 11px; line-height: 1.7; letter-spacing: .03em; color: var(--mut); max-width: 72ch; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px }

/* ---------- logo, hero placement ----------
   The source PNG has no transparency and a white background, so it sits on a
   deliberate white plate with an ink border. It reads as a printed exhibit
   rather than a stray white rectangle on the paper background. A transparent
   export would let this drop straight onto the paper and the plate could go. */
.logo-hero { margin: 0 0 34px; max-width: 560px }
.logo-plate { border: 2px solid var(--ink); background: var(--white); padding: 10px; line-height: 0 }
.logo-plate img { width: 100%; height: auto; display: block }
.logo-hero figcaption { font-size: 14.5px; line-height: 1.55; color: var(--mut); margin-top: 12px }
.logo-hero .cap-lead { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink) }
.logo-hero .cap-pending { font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em; color: var(--stamp); display: block; margin-top: 6px }
@media (max-width: 700px) { .logo-hero { max-width: 100% } }

/* ---------- verification tiers, the operational core of the methodology page ---------- */
.tiers { border: 2px solid var(--ink); background: var(--surface); margin: 28px 0 }
.tier { display: grid; grid-template-columns: 1fr 2fr 1.2fr; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--line); align-items: start }
.tier:last-child { border-bottom: none }
.tier__name { font-family: var(--disp); font-weight: 900; font-size: 18px; line-height: 1.2 }
.tier__means { font-size: 15.5px; line-height: 1.5 }
.tier__pub { font-size: 15px; line-height: 1.5 }
.tier__flag { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 4px 8px; border: 2px solid var(--blue); color: var(--blue-deep); margin-bottom: 8px }
.tier--no .tier__flag { border-color: var(--stamp); color: var(--stamp) }
.tier--no .tier__name { color: var(--stamp) }
.tiers-head { display: grid; grid-template-columns: 1fr 2fr 1.2fr; gap: 20px; padding: 12px 22px; border-bottom: 2px solid var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut) }
.stage { border-left: 3px solid var(--blue); padding: 14px 20px; margin: 18px 0; background: var(--surface) }
.stage h3 { font-family: var(--disp); font-weight: 900; font-size: 19px; margin-bottom: 8px }
.pointer { border: 2px solid var(--blue); background: var(--surface); padding: 16px 20px; margin: 0 0 28px; font-size: 16px; line-height: 1.55 }
@media (max-width: 760px) {
  .tier, .tiers-head { grid-template-columns: 1fr }
  .tiers-head { display: none }
}

/* Glossary citations: the quoted operative text sits with its citation. */
.cites { margin-left: 20px }
.cites li { font-size: 15.5px; line-height: 1.55; margin-bottom: 20px }
.cite-quote { border-left: 3px solid var(--line); margin: 8px 0 6px; padding: 4px 0 4px 16px; font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--ink) }

/* Standing notice. Used where the site states plainly that something is not
   live yet, so an invitation does not read as a promise it cannot keep. */
.notice { border: 2px solid var(--stamp); background: var(--surface); padding: 22px 26px; margin: 36px 0; max-width: 62ch }
.notice__head { font-family: var(--disp); font-weight: 900; font-size: 20px; line-height: 1.2; color: var(--stamp); margin-bottom: 10px }
.notice p { font-size: 16px; line-height: 1.6 }
.notice p:last-child { margin-bottom: 0 }

/* ---------- submission form ---------- */
.mfb-form { border: 2px solid var(--ink); background: var(--surface); padding: 26px; max-width: 62ch; margin: 8px 0 36px }
.mfb-form .field { margin-bottom: 22px }
.mfb-form label { display: block; font-family: var(--disp); font-weight: 700; font-size: 15px; margin-bottom: 6px }
.mfb-form .opt { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); display: block; margin-top: 3px }
.mfb-form .field-help { font-size: 14.5px; line-height: 1.5; color: var(--mut); margin-bottom: 8px }
.mfb-form input[type="text"], .mfb-form input[type="email"], .mfb-form textarea, .mfb-form select {
  width: 100%; font-family: var(--serif); font-size: 16px; line-height: 1.5; color: var(--ink);
  background: var(--white); border: 2px solid var(--ink); border-radius: 0; padding: 10px 12px }
.mfb-form textarea { resize: vertical }
.mfb-form select { font-family: var(--disp); font-weight: 500 }
.mfb-form input:focus-visible, .mfb-form textarea:focus-visible, .mfb-form select:focus-visible {
  outline: 3px solid var(--blue); outline-offset: 2px }
.mfb-form button { cursor: pointer; border: 2px solid var(--blue); font-family: var(--disp) }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }

/* ---------- all-67 counties index ---------- */
.cty-filter { border: 2px solid var(--ink); background: var(--surface); padding: 18px 20px; margin: 8px 0 28px; max-width: 62ch }
.cty-filter label { display: block; font-family: var(--disp); font-weight: 700; font-size: 15px; margin-bottom: 6px }
.cty-filter input { width: 100%; font-family: var(--serif); font-size: 16px; color: var(--ink); background: var(--white); border: 2px solid var(--ink); padding: 10px 12px }
.cty-filter input:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px }
.cty-filter p { margin-top: 8px; min-height: 1.2em }
.cty-list { list-style: none; margin: 0; border-top: 2px solid var(--ink) }
.cty-item { border-bottom: 1px solid var(--line); padding: 20px 0 }
.cty-item[hidden] { display: none }
.cty-name { font-family: var(--disp); font-weight: 900; font-size: 21px; line-height: 1.2; margin-bottom: 4px }
.cty-name a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px }
.cty-name a:hover { color: var(--blue-deep); text-decoration-thickness: 3px }
.cty-meta { font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--mut); margin-bottom: 8px }
.cty-sep { color: var(--line); margin: 0 6px }
.cty-munis-flat, .cty-munis p { font-size: 15.5px; line-height: 1.55; max-width: 72ch; color: var(--ink) }
.cty-munis summary { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-deep); cursor: pointer; padding: 4px 0 }
.cty-munis summary:hover { color: var(--blue) }
.cty-munis[open] summary { margin-bottom: 8px }
.cty-notbuilt { border-left: 3px solid var(--line); padding: 10px 0 2px 16px; margin-top: 12px; max-width: 62ch }
.cty-notbuilt p { font-size: 15px; line-height: 1.55; color: var(--mut); margin-bottom: 6px }
.cty-notbuilt p:first-child { color: var(--ink) }

/* Claims system: the IN REVIEW chip is machine-extracted, not yet human-read,
   and is deliberately distinct from the PENDING chip. Citation markers and the
   source list render from the claims shortcodes. */
.chip.inreview { border-color: var(--stamp); color: var(--stamp) }
.gap-marker { color: var(--mut) }
.cite-mark { font-family: var(--mono); font-size: .72em }
.cite-mark a { text-decoration: none }
.cite-list li { margin-bottom: .5rem }
.src-sep { color: var(--mut) }
.cite-pointers { color: var(--mut); font-size: .9em }

/* ---------- by the numbers, /numbers/ ----------
   Series data layer page. Every value below resolves to a token already
   declared in :root. No new color and no new font is introduced. Chips,
   tables, attribution strips, and the stage aside reuse the existing rules. */
.metric-sect { border-top: 2px solid var(--ink); padding: 44px 0 64px }
.metric-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 44px; align-items: start }
.metric-body { min-width: 0 }
.metric-h { font-family: var(--disp); font-weight: 900; font-size: clamp(26px, 3.6vw, 36px); letter-spacing: -.015em; line-height: 1.1; margin: 4px 0 12px }
.metric-chip { margin: 0 0 8px }
.metric-chip .chip:empty { display: none }
.num-stat { font-family: var(--disp); font-weight: 900; font-size: clamp(38px, 5vw, 60px); line-height: .95; letter-spacing: -.02em; color: var(--blue); margin-top: 14px }
.num-stat-label { display: block; font-family: var(--serif); font-size: 15.5px; line-height: 1.5; color: var(--mut); margin-top: 10px; max-width: 24ch }
.metric-lede { max-width: 62ch; margin-bottom: 22px }
.chart-box { position: relative; height: 340px }
.chart-events { list-style: none; margin: 18px 0 0; display: grid; gap: 8px }
.chart-events li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; max-width: 66ch }
.chart-flag { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--stamp); color: var(--white); font-family: var(--mono); font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px }
.provenance { margin-top: 22px; margin-bottom: 0 }
.provenance span { margin-right: 22px }
.stage h2 { font-family: var(--disp); font-weight: 900; font-size: 19px; margin-bottom: 8px }
details.numtable { margin-top: 16px }
details.numtable summary { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--blue-deep); cursor: pointer; padding: 4px 0 }
details.numtable summary:hover { color: var(--blue) }
details.numtable[open] summary { margin-bottom: 4px }
.dtable td.num, .dtable th.num { text-align: right; white-space: nowrap; font-feature-settings: "tnum" }
@media (max-width: 860px) {
  .metric-grid { grid-template-columns: 1fr; gap: 20px }
  .chart-box { height: 270px }
}

/* by the numbers: education additions. Tokens only, no new color or font. */
.legend-static { display: flex; gap: 22px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--mut); margin-bottom: 14px }
.legend-static .sw { display: inline-block; width: 16px; height: 3px; vertical-align: middle; margin-right: 7px }
.mini-grid { display: grid; grid-template-columns: 1fr; gap: 24px 32px }
@media (min-width: 760px) { .mini-grid { grid-template-columns: 1fr 1fr } }
.mini h3 { font-family: var(--disp); font-weight: 700; font-size: 17px; line-height: 1.2 }
.mini .sub { font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--mut); margin: 2px 0 8px }
.mini-box { position: relative; height: 190px }
.num-stat.sm { font-size: clamp(32px, 4vw, 44px); margin-top: 18px }
.table-scroll { overflow-x: auto }
.metric-body > h3 { font-family: var(--mono); font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-deep); margin: 30px 0 10px }
.metric-grid + .metric-grid { margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(16,29,51,0.15) }
.table-scroll .dtable { min-width: 640px }
.legend-static .sw-fl { background: var(--blue) }
.legend-static .sw-us { background: var(--mut) }