/* ============================================================
   MINERAL RIGHTS ATLAS — visual family #3: the survey record.
   Not the field-guide family (cream paper, bookish serif).
   Cool stone paper, hairline plat linework, oxblood + plat blue,
   engraved display face, plate-numbered sections, stamped records.
   ============================================================ */
:root {
  --paper:      #f1f0ea;   /* cool stone, not cream */
  --paper-deep: #e9e8e0;
  --card:       #f7f6f2;
  --ink:        #191b1d;
  --ink-soft:   #494e52;
  --rule:       #d4d2c6;
  --hairline:   #dedcd2;
  --oxblood:    #8f2f1c;   /* iron / mineral */
  --oxblood-deep:#6e2413;
  --plat:       #2f4e66;   /* surveyor's linework blue */
  --plat-soft:  #5a7891;
  --stamp:      #9a3a24;
  --gold:       #8a6c2f;
  --grid-line:  rgba(47, 78, 102, 0.16);
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17191c; --paper-deep: #121417; --card: #1e2125;
    --ink: #e7e5dc; --ink-soft: #a7aaa6;
    --rule: #33373b; --hairline: #2a2e32;
    --oxblood: #d2704f; --oxblood-deep: #e08a6a;
    --plat: #85a8c2; --plat-soft: #6a8ba3;
    --stamp: #d2704f; --gold: #c2a35f;
    --grid-line: rgba(133, 168, 194, 0.13);
  }
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: hidden; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--plat); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--oxblood); }

/* ---------- record bar ---------- */
.recordbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  padding: 8px 28px; border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--ink-soft); background: var(--paper-deep);
}
.recordbar b { color: var(--oxblood); font-weight: 500; }

/* ---------- masthead ---------- */
header.mast {
  max-width: 1120px; margin: 0 auto; padding: 34px 28px 0;
}
.mast-rule { display: flex; align-items: center; gap: 14px; }
.mast-rule::before, .mast-rule::after {
  content: ''; flex: 1; height: 3px;
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
}
p.wordmark, h1.wordmark {
  font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3.2vw, 38px);
  letter-spacing: .12em; text-transform: uppercase; text-align: center;
  white-space: nowrap; font-variation-settings: 'opsz' 100;
}
h1.wordmark .amp { color: var(--oxblood); }
p.est {
  text-align: center; font-family: var(--mono); font-size: 11px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft);
  margin-top: 8px;
}
nav.hubs {
  display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
  margin: 22px 0 0; padding: 12px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
nav.hubs a {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; padding: 4px 16px;
}
nav.hubs a:hover, nav.hubs a.active { color: var(--oxblood); }
nav.hubs a.active { border-bottom: 2px solid var(--oxblood); margin-bottom: -14px; padding-bottom: 12px; }

/* ---------- hero ---------- */
.hero {
  max-width: 1120px; margin: 0 auto; padding: 64px 28px 30px;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center top;
}
.hero-inner { max-width: 780px; }
.kicker {
  font-family: var(--mono); font-size: 12px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--oxblood); margin-bottom: 18px;
}
.kicker::before { content: '§ '; color: var(--ink-soft); }
h2.hero-h {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(34px, 5vw, 58px); line-height: 1.12;
  letter-spacing: -0.01em; font-variation-settings: 'opsz' 144;
}
h2.hero-h em { font-style: italic; color: var(--oxblood); }
p.hero-sub {
  margin-top: 22px; font-size: 19px; line-height: 1.6; color: var(--ink-soft);
  max-width: 620px;
}
p.hero-promise {
  margin-top: 18px; font-family: var(--mono); font-size: 13px;
  color: var(--ink-soft); border-left: 2px solid var(--oxblood);
  padding-left: 14px; max-width: 560px; line-height: 1.7;
}

/* ---------- state grid map ---------- */
.plate {
  max-width: 1120px; margin: 26px auto 0; padding: 0 28px 26px;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
}
.plate-head {
  display: flex; align-items: baseline; gap: 16px;
  border-top: 2px solid var(--ink); padding-top: 10px; margin-bottom: 26px;
}
.plate-no {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  color: var(--oxblood); text-transform: uppercase; white-space: nowrap;
}
.plate-title {
  font-family: var(--serif); font-size: 24px; font-weight: 500;
}
.plate-note { margin-left: auto; font-size: 13px; color: var(--ink-soft); font-family: var(--mono); }

.map-legend {
  display: flex; gap: 26px; margin-top: 18px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
}
.map-legend span { display: inline-flex; align-items: center; gap: 8px; }
.lg { width: 10px; height: 10px; border: 1px solid var(--hairline); background: var(--card); }
.lg.live { background: var(--oxblood); border-color: var(--oxblood-deep); }
.lg.next { border-color: var(--plat); background: var(--card); box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3.5px var(--plat); }


/* ---------- geographic map ---------- */
.geomap { width: 100%; max-width: 1000px; height: auto; display: block; }
.platebg { fill: var(--paper); }
.stp {
  fill: var(--card);
  stroke: color-mix(in srgb, var(--ink) 42%, var(--paper));
  stroke-width: .8; stroke-linejoin: round;
  transition: fill .12s ease; cursor: pointer;
}
a.stl:focus { outline: none; }
a.stl:focus .stp, .stl:hover .stp { fill: var(--plat); }
.stp.live { fill: var(--oxblood); stroke: var(--oxblood-deep); }
.stl:hover .stp.live { fill: var(--oxblood-deep); }
.stp.next { fill: color-mix(in srgb, var(--plat) 24%, var(--card)); }
.stlab {
  font-family: var(--mono); font-size: 11px; fill: var(--ink-soft);
  text-anchor: middle; pointer-events: none; letter-spacing: .04em;
}
/* graticule + neatline: the atlas plate */
.grat { fill: none; stroke: var(--plat); stroke-width: .55; opacity: .16; pointer-events: none; }
.grat.gmaj { opacity: .26; }
.gratlab { font-family: var(--mono); font-size: 9.5px; fill: var(--plat-soft); opacity: .85; pointer-events: none; }
.neat { fill: none; stroke: var(--ink-soft); stroke-width: .7; opacity: .55; pointer-events: none; }
.neat-outer { stroke-width: 1.4; opacity: .7; }
.inset-plate { fill: var(--paper); stroke: var(--ink-soft); stroke-width: .7; }
.insetlab { font-family: var(--mono); font-size: 8.5px; letter-spacing: .18em; fill: var(--ink-soft); opacity: .8; pointer-events: none; }
/* relief: engraved hachures, background texture only */
.topo { fill: none; stroke: var(--ink); stroke-width: .7; opacity: .12; pointer-events: none; }
/* status dots; the record beacon breathes */
.stdot { fill: color-mix(in srgb, var(--ink) 30%, var(--paper)); pointer-events: none; }
.stdot.next { fill: var(--plat); }
.beacon { fill: #ffd98a; pointer-events: none; animation: beacon 2.6s ease-in-out infinite; }
.beacon-halo { fill: #ffd98a; pointer-events: none; opacity: 0; animation: halo 2.6s ease-in-out infinite; }
@keyframes beacon { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes halo { 0%,100% { opacity: 0; } 50% { opacity: .38; } }
@media (prefers-reduced-motion: reduce) {
  .beacon, .beacon-halo { animation: none; }
  .beacon { opacity: 1; } .beacon-halo { opacity: .2; }
}
.leader { stroke: var(--rule); stroke-width: 1; transition: stroke .12s ease, stroke-width .12s ease; }
/* pill <-> state crossfire: hover either end, both light plus the thread.
   Generated per rail state by mapCss() in src/map.ts and injected below. */
.geomap:has(a[data-st="vt"]:hover) a[data-st="vt"] .stp,
.geomap:has(a[data-st="vt"]:focus-visible) a[data-st="vt"] .stp { fill: var(--plat); }
.geomap:has(a[data-st="vt"]:hover) a[data-st="vt"] .pill rect,
.geomap:has(a[data-st="vt"]:focus-visible) a[data-st="vt"] .pill rect { stroke: var(--plat); stroke-width: 1.4; fill: color-mix(in srgb, var(--plat) 16%, var(--card)); }
.geomap:has(a[data-st="vt"]:hover) a[data-st="vt"] .pill text,
.geomap:has(a[data-st="vt"]:focus-visible) a[data-st="vt"] .pill text { fill: var(--ink); }
.geomap:has(a[data-st="vt"]:hover) .leader[data-st="vt"],
.geomap:has(a[data-st="vt"]:focus-visible) .leader[data-st="vt"] { stroke: var(--plat); stroke-width: 1.6; opacity: 1; }
.geomap:has(a[data-st="nh"]:hover) a[data-st="nh"] .stp,
.geomap:has(a[data-st="nh"]:focus-visible) a[data-st="nh"] .stp { fill: var(--plat); }
.geomap:has(a[data-st="nh"]:hover) a[data-st="nh"] .pill rect,
.geomap:has(a[data-st="nh"]:focus-visible) a[data-st="nh"] .pill rect { stroke: var(--plat); stroke-width: 1.4; fill: color-mix(in srgb, var(--plat) 16%, var(--card)); }
.geomap:has(a[data-st="nh"]:hover) a[data-st="nh"] .pill text,
.geomap:has(a[data-st="nh"]:focus-visible) a[data-st="nh"] .pill text { fill: var(--ink); }
.geomap:has(a[data-st="nh"]:hover) .leader[data-st="nh"],
.geomap:has(a[data-st="nh"]:focus-visible) .leader[data-st="nh"] { stroke: var(--plat); stroke-width: 1.6; opacity: 1; }
.geomap:has(a[data-st="ma"]:hover) a[data-st="ma"] .stp,
.geomap:has(a[data-st="ma"]:focus-visible) a[data-st="ma"] .stp { fill: var(--plat); }
.geomap:has(a[data-st="ma"]:hover) a[data-st="ma"] .pill rect,
.geomap:has(a[data-st="ma"]:focus-visible) a[data-st="ma"] .pill rect { stroke: var(--plat); stroke-width: 1.4; fill: color-mix(in srgb, var(--plat) 16%, var(--card)); }
.geomap:has(a[data-st="ma"]:hover) a[data-st="ma"] .pill text,
.geomap:has(a[data-st="ma"]:focus-visible) a[data-st="ma"] .pill text { fill: var(--ink); }
.geomap:has(a[data-st="ma"]:hover) .leader[data-st="ma"],
.geomap:has(a[data-st="ma"]:focus-visible) .leader[data-st="ma"] { stroke: var(--plat); stroke-width: 1.6; opacity: 1; }
.geomap:has(a[data-st="ri"]:hover) a[data-st="ri"] .stp,
.geomap:has(a[data-st="ri"]:focus-visible) a[data-st="ri"] .stp { fill: var(--plat); }
.geomap:has(a[data-st="ri"]:hover) a[data-st="ri"] .pill rect,
.geomap:has(a[data-st="ri"]:focus-visible) a[data-st="ri"] .pill rect { stroke: var(--plat); stroke-width: 1.4; fill: color-mix(in srgb, var(--plat) 16%, var(--card)); }
.geomap:has(a[data-st="ri"]:hover) a[data-st="ri"] .pill text,
.geomap:has(a[data-st="ri"]:focus-visible) a[data-st="ri"] .pill text { fill: var(--ink); }
.geomap:has(a[data-st="ri"]:hover) .leader[data-st="ri"],
.geomap:has(a[data-st="ri"]:focus-visible) .leader[data-st="ri"] { stroke: var(--plat); stroke-width: 1.6; opacity: 1; }
.geomap:has(a[data-st="ct"]:hover) a[data-st="ct"] .stp,
.geomap:has(a[data-st="ct"]:focus-visible) a[data-st="ct"] .stp { fill: var(--plat); }
.geomap:has(a[data-st="ct"]:hover) a[data-st="ct"] .pill rect,
.geomap:has(a[data-st="ct"]:focus-visible) a[data-st="ct"] .pill rect { stroke: var(--plat); stroke-width: 1.4; fill: color-mix(in srgb, var(--plat) 16%, var(--card)); }
.geomap:has(a[data-st="ct"]:hover) a[data-st="ct"] .pill text,
.geomap:has(a[data-st="ct"]:focus-visible) a[data-st="ct"] .pill text { fill: var(--ink); }
.geomap:has(a[data-st="ct"]:hover) .leader[data-st="ct"],
.geomap:has(a[data-st="ct"]:focus-visible) .leader[data-st="ct"] { stroke: var(--plat); stroke-width: 1.6; opacity: 1; }
.geomap:has(a[data-st="nj"]:hover) a[data-st="nj"] .stp,
.geomap:has(a[data-st="nj"]:focus-visible) a[data-st="nj"] .stp { fill: var(--plat); }
.geomap:has(a[data-st="nj"]:hover) a[data-st="nj"] .pill rect,
.geomap:has(a[data-st="nj"]:focus-visible) a[data-st="nj"] .pill rect { stroke: var(--plat); stroke-width: 1.4; fill: color-mix(in srgb, var(--plat) 16%, var(--card)); }
.geomap:has(a[data-st="nj"]:hover) a[data-st="nj"] .pill text,
.geomap:has(a[data-st="nj"]:focus-visible) a[data-st="nj"] .pill text { fill: var(--ink); }
.geomap:has(a[data-st="nj"]:hover) .leader[data-st="nj"],
.geomap:has(a[data-st="nj"]:focus-visible) .leader[data-st="nj"] { stroke: var(--plat); stroke-width: 1.6; opacity: 1; }
.geomap:has(a[data-st="de"]:hover) a[data-st="de"] .stp,
.geomap:has(a[data-st="de"]:focus-visible) a[data-st="de"] .stp { fill: var(--plat); }
.geomap:has(a[data-st="de"]:hover) a[data-st="de"] .pill rect,
.geomap:has(a[data-st="de"]:focus-visible) a[data-st="de"] .pill rect { stroke: var(--plat); stroke-width: 1.4; fill: color-mix(in srgb, var(--plat) 16%, var(--card)); }
.geomap:has(a[data-st="de"]:hover) a[data-st="de"] .pill text,
.geomap:has(a[data-st="de"]:focus-visible) a[data-st="de"] .pill text { fill: var(--ink); }
.geomap:has(a[data-st="de"]:hover) .leader[data-st="de"],
.geomap:has(a[data-st="de"]:focus-visible) .leader[data-st="de"] { stroke: var(--plat); stroke-width: 1.6; opacity: 1; }
.geomap:has(a[data-st="md"]:hover) a[data-st="md"] .stp,
.geomap:has(a[data-st="md"]:focus-visible) a[data-st="md"] .stp { fill: var(--plat); }
.geomap:has(a[data-st="md"]:hover) a[data-st="md"] .pill rect,
.geomap:has(a[data-st="md"]:focus-visible) a[data-st="md"] .pill rect { stroke: var(--plat); stroke-width: 1.4; fill: color-mix(in srgb, var(--plat) 16%, var(--card)); }
.geomap:has(a[data-st="md"]:hover) a[data-st="md"] .pill text,
.geomap:has(a[data-st="md"]:focus-visible) a[data-st="md"] .pill text { fill: var(--ink); }
.geomap:has(a[data-st="md"]:hover) .leader[data-st="md"],
.geomap:has(a[data-st="md"]:focus-visible) .leader[data-st="md"] { stroke: var(--plat); stroke-width: 1.6; opacity: 1; }
.pill rect { stroke: var(--plat); stroke-width: 1.4; fill: color-mix(in srgb, var(--plat) 16%, var(--card)); }
.geomap:has(a[data-st="vt"]:hover) a[data-st="vt"] .pill text { fill: var(--ink); }
.geomap:has(a[data-st="vt"]:hover) .leader[data-st="vt"] { stroke: var(--plat); stroke-width: 1.6; opacity: 1; }
.geomap:has(a[data-st="nh"]:hover) a[data-st="nh"] .stp { fill: var(--plat); }
.geomap:has(a[data-st="nh"]:hover) a[data-st="nh"] .pill rect { stroke: var(--plat); stroke-width: 1.4; fill: color-mix(in srgb, var(--plat) 16%, var(--card)); }
.geomap:has(a[data-st="nh"]:hover) a[data-st="nh"] .pill text { fill: var(--ink); }
.geomap:has(a[data-st="nh"]:hover) .leader[data-st="nh"] { stroke: var(--plat); stroke-width: 1.6; opacity: 1; }
.geomap:has(a[data-st="ma"]:hover) a[data-st="ma"] .stp { fill: var(--plat); }
.geomap:has(a[data-st="ma"]:hover) a[data-st="ma"] .pill rect { stroke: var(--plat); stroke-width: 1.4; fill: color-mix(in srgb, var(--plat) 16%, var(--card)); }
.geomap:has(a[data-st="ma"]:hover) a[data-st="ma"] .pill text { fill: var(--ink); }
.geomap:has(a[data-st="ma"]:hover) .leader[data-st="ma"] { stroke: var(--plat); stroke-width: 1.6; opacity: 1; }
.geomap:has(a[data-st="ri"]:hover) a[data-st="ri"] .stp { fill: var(--plat); }
.geomap:has(a[data-st="ri"]:hover) a[data-st="ri"] .pill rect { stroke: var(--plat); stroke-width: 1.4; fill: color-mix(in srgb, var(--plat) 16%, var(--card)); }
.geomap:has(a[data-st="ri"]:hover) a[data-st="ri"] .pill text { fill: var(--ink); }
.geomap:has(a[data-st="ri"]:hover) .leader[data-st="ri"] { stroke: var(--plat); stroke-width: 1.6; opacity: 1; }
.geomap:has(a[data-st="ct"]:hover) a[data-st="ct"] .stp { fill: var(--plat); }
.geomap:has(a[data-st="ct"]:hover) a[data-st="ct"] .pill rect { stroke: var(--plat); stroke-width: 1.4; fill: color-mix(in srgb, var(--plat) 16%, var(--card)); }
.geomap:has(a[data-st="ct"]:hover) a[data-st="ct"] .pill text { fill: var(--ink); }
.geomap:has(a[data-st="ct"]:hover) .leader[data-st="ct"] { stroke: var(--plat); stroke-width: 1.6; opacity: 1; }
.geomap:has(a[data-st="nj"]:hover) a[data-st="nj"] .stp { fill: var(--plat); }
.geomap:has(a[data-st="nj"]:hover) a[data-st="nj"] .pill rect { stroke: var(--plat); stroke-width: 1.4; fill: color-mix(in srgb, var(--plat) 16%, var(--card)); }
.geomap:has(a[data-st="nj"]:hover) a[data-st="nj"] .pill text { fill: var(--ink); }
.geomap:has(a[data-st="nj"]:hover) .leader[data-st="nj"] { stroke: var(--plat); stroke-width: 1.6; opacity: 1; }
.geomap:has(a[data-st="de"]:hover) a[data-st="de"] .stp { fill: var(--plat); }
.geomap:has(a[data-st="de"]:hover) a[data-st="de"] .pill rect { stroke: var(--plat); stroke-width: 1.4; fill: color-mix(in srgb, var(--plat) 16%, var(--card)); }
.geomap:has(a[data-st="de"]:hover) a[data-st="de"] .pill text { fill: var(--ink); }
.geomap:has(a[data-st="de"]:hover) .leader[data-st="de"] { stroke: var(--plat); stroke-width: 1.6; opacity: 1; }
.geomap:has(a[data-st="md"]:hover) a[data-st="md"] .stp { fill: var(--plat); }
.geomap:has(a[data-st="md"]:hover) a[data-st="md"] .pill rect { stroke: var(--plat); stroke-width: 1.4; fill: color-mix(in srgb, var(--plat) 16%, var(--card)); }
.geomap:has(a[data-st="md"]:hover) a[data-st="md"] .pill text { fill: var(--ink); }
.geomap:has(a[data-st="md"]:hover) .leader[data-st="md"] { stroke: var(--plat); stroke-width: 1.6; opacity: 1; }
.pill rect { fill: var(--card); stroke: var(--hairline); }
.pill text {
  font-family: var(--mono); font-size: 11px; fill: var(--ink-soft);
  text-anchor: middle; letter-spacing: .06em;
}
.stl:hover .pill rect { stroke: var(--plat); fill: color-mix(in srgb, var(--plat) 14%, var(--card)); }
.stl:hover .pill text { fill: var(--ink); }
/* legend swatch beacon */
.lg { position: relative; }
.lg.live::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 4px; height: 4px; border-radius: 50%; background: #ffd98a;
  animation: beacon 2.6s ease-in-out infinite;
}

/* ---------- record card / key answer ---------- */
.two-col {
  max-width: 1120px; margin: 30px auto 0; padding: 0 28px;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px;
}
@media (max-width: 880px) { .two-col { grid-template-columns: 1fr; } }

.key-answer {
  background: var(--card); border: 1px solid var(--rule);
  border-top: 3px solid var(--oxblood); padding: 30px 32px 26px;
  position: relative;
}
.ka-q {
  font-family: var(--serif); font-size: 25px; font-weight: 500; line-height: 1.25;
  margin-bottom: 14px; padding-right: 120px;
}
.ka-a { font-size: 16.5px; }
.ka-a p + p { margin-top: 12px; }
.chip {
  display: inline-block; font-family: var(--mono); font-size: 12px;
  border: 1px solid var(--plat-soft); color: var(--plat);
  padding: 1px 9px; border-radius: 2px; text-decoration: none;
  white-space: nowrap; vertical-align: 1px;
}
.chip:hover { border-color: var(--oxblood); color: var(--oxblood); }
.stamp {
  position: absolute; top: 22px; right: 22px; transform: rotate(4deg);
  border: 2px solid var(--stamp); color: var(--stamp);
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; text-align: center; line-height: 1.5;
  border-radius: 3px; opacity: .85;
}
.ka-date {
  margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--rule);
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
}

/* ---------- law figure ---------- */
figure.law {
  border-left: 3px solid var(--plat); background: var(--paper-deep);
  padding: 24px 28px 20px; margin-top: 30px;
}
figure.law blockquote {
  font-family: var(--serif); font-size: 19px; font-style: italic;
  line-height: 1.55; font-weight: 400;
}
figure.law blockquote::before { content: '\201C'; color: var(--plat); font-size: 28px; }
figure.law figcaption {
  margin-top: 16px; display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-family: var(--mono); font-size: 12.5px; align-items: baseline;
}
figure.law figcaption a { color: var(--ink); font-weight: 500; }
.mir { color: var(--gold); }
.mir::before { content: '◈ '; }
.eff { color: var(--ink-soft); }

/* ---------- calc worksheet ---------- */
figure.calc {
  border: 1px solid var(--rule); background: var(--card); margin-top: 30px;
}
figure.calc figcaption {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft);
  padding: 12px 20px; border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between;
}
figure.calc .sample-tag { color: var(--gold); letter-spacing: .08em; }
figure.calc table { width: 100%; border-collapse: collapse; }
figure.calc th, figure.calc td {
  text-align: left; padding: 11px 20px; font-size: 15px;
  border-bottom: 1px solid var(--hairline);
}
figure.calc th { font-weight: 500; color: var(--ink-soft); width: 60%; }
figure.calc td { font-family: var(--mono); font-size: 14.5px; text-align: right; font-variant-numeric: tabular-nums; }
tr.calc-result th, tr.calc-result td {
  border-bottom: none; border-top: 2px solid var(--ink);
  font-weight: 600; color: var(--ink); font-size: 16px;
}
tr.calc-result td { color: var(--oxblood); }

/* ---------- county activity panel ---------- */
.panel { max-width: 1120px; margin: 56px auto 0; padding: 0 28px; }
.tbl-scroll { overflow-x: auto; border: 1px solid var(--rule); }
table.activity { width: 100%; border-collapse: collapse; background: var(--card); min-width: 640px; }
table.activity caption { text-align: left; }
table.activity thead th {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 500;
  padding: 12px 18px; border-bottom: 2px solid var(--ink); text-align: left;
  background: var(--paper-deep);
}
table.activity td { padding: 12px 18px; border-bottom: 1px solid var(--hairline); font-size: 15px; }
table.activity td.n { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; text-align: right; }
table.activity td.up { color: var(--oxblood); font-weight: 600; }
table.activity tr:last-child td { border-bottom: none; }
.panel-foot { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); margin-top: 10px; }
.panel-foot b { color: var(--gold); font-weight: 500; }

/* ---------- newsletter ---------- */
.abstract {
  max-width: 1120px; margin: 64px auto 0; padding: 44px 28px;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center;
}
@media (max-width: 720px) { .abstract { grid-template-columns: 1fr; } }
.abstract h3 { font-family: var(--serif); font-size: 27px; font-weight: 500; }
.abstract p { color: var(--ink-soft); margin-top: 6px; max-width: 560px; }
.abstract .signup { display: flex; gap: 0; align-items: stretch; }
.abstract input {
  font-family: var(--mono); font-size: 14px; padding: 12px 16px;
  border: 1px solid var(--ink); border-right: none; background: var(--card);
  color: var(--ink); width: 240px; outline: none;
}
.abstract input:disabled { color: var(--ink-soft); cursor: not-allowed; }
.abstract .button {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  background: var(--oxblood); color: #f4ede8; border: 1px solid var(--oxblood-deep);
  padding: 12px 22px; cursor: pointer; display: flex; align-items: center;
}
.abstract .button:hover { background: var(--oxblood-deep); color: #fff; }

/* ---------- footer ---------- */
footer {
  max-width: 1120px; margin: 0 auto; padding: 36px 28px 56px;
  font-size: 14px; color: var(--ink-soft);
}
footer .foot-rule { font-family: var(--mono); font-size: 12px; line-height: 1.8; max-width: 640px; }
footer .foot-rule b { color: var(--ink); font-weight: 500; }
footer nav { margin-top: 18px; display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; }
footer nav a { color: var(--ink-soft); }
.disclaimer {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--hairline);
  font-size: 13px; max-width: 720px;
}

/* ============================================================
   Everything below is the page furniture the homepage mock did
   not need: article pages, the rules matrix, the states hub,
   the buyer CTA. Same tokens, same plate logic, no new palette.
   ============================================================ */

/* ---------- skip link + focus ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  background: var(--oxblood); color: #f4ede8; padding: 10px 18px;
  font-family: var(--mono); font-size: 13px;
}
.skip:focus { left: 0; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--plat); outline-offset: 2px;
}
a.stl:focus-visible { outline: none; }
a.stl:focus-visible .stp { fill: var(--plat); }

/* ---------- article shell ---------- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.article { max-width: 1120px; margin: 0 auto; padding: 0 28px; display: grid;
  grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
@media (max-width: 940px) { .article { grid-template-columns: 1fr; gap: 34px; } }
.crumbs {
  max-width: 1120px; margin: 0 auto; padding: 20px 28px 0;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--oxblood); }
.crumbs span { margin: 0 8px; opacity: .6; }
.page-head {
  max-width: 1120px; margin: 0 auto; padding: 26px 28px 8px;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
}
.page-head h1 {
  font-family: var(--serif); font-weight: 400; font-variation-settings: 'opsz' 144;
  font-size: clamp(30px, 4.2vw, 46px); line-height: 1.15; letter-spacing: -0.01em;
  max-width: 900px;
}
.dateline {
  margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
  display: flex; flex-wrap: wrap; gap: 6px 22px;
}
.dateline b { color: var(--ink); font-weight: 500; }

/* ---------- prose ---------- */
.prose { max-width: 720px; font-size: 17px; }
.prose > p { margin-top: 18px; }
.prose h2 {
  font-family: var(--serif); font-size: 27px; font-weight: 500; line-height: 1.25;
  margin-top: 44px; padding-top: 12px; border-top: 2px solid var(--ink);
}
.prose h3 {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--oxblood);
  margin-top: 32px;
}
.prose ul, .prose ol { margin: 16px 0 0 22px; }
.prose li { margin-top: 9px; }
.prose li > ul, .prose li > ol { margin-top: 8px; }
.lit { font-family: var(--mono); font-size: .94em; font-variant-numeric: tabular-nums; }
.prose a { color: var(--plat); }

/* ---------- callouts ---------- */
.callout {
  margin-top: 26px; padding: 18px 22px; background: var(--card);
  border: 1px solid var(--rule); border-left: 3px solid var(--plat-soft);
  font-size: 16px;
}
.callout p + p { margin-top: 10px; }
.callout::before {
  display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px;
}
.callout-note::before { content: 'Note'; }
.callout-warn { border-left-color: var(--oxblood); }
.callout-warn::before { content: 'Where money is lost'; color: var(--oxblood); }
.callout-myth { border-left-color: var(--gold); }
.callout-myth::before { content: 'Widely repeated, and wrong'; color: var(--gold); }

/* ---------- caveat: a 'partial' claim never renders bare ---------- */
.caveat {
  margin-top: 14px; padding: 12px 16px; background: var(--paper-deep);
  border: 1px dashed var(--gold); font-size: 14.5px; color: var(--ink-soft);
}
.caveat b {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); font-weight: 500;
  display: block; margin-bottom: 5px;
}

/* ---------- the rules matrix, as rendered on a state page ---------- */
.rule {
  border: 1px solid var(--rule); background: var(--card);
  padding: 20px 24px; margin-top: 18px;
}
.rule-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.rule-topic {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--plat);
}
.rule h3 {
  font-family: var(--serif); font-size: 20px; font-weight: 500;
  text-transform: none; letter-spacing: normal; color: var(--ink); margin: 0;
}
.rule > p { margin-top: 10px; }
/* The authority the rule rests on, stated once, directly under the claim. Sits
   tighter to the head than body copy does, because it is a label not a
   sentence. A rule with no quote carries its provenance here; a quoted rule
   carries it in the quote's own figcaption instead. */
.rule-cite {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; font-size: 12.5px;
}
/* A full case citation is far longer than the inline cite pills .chip was
   sized for, so it wraps here rather than running off the plate. .chip keeps
   nowrap everywhere else, where it is a short statutory pill inside a
   sentence and breaking it would read as two references. */
.rule-cite .chip { white-space: normal; }
.rule .verified-note {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--rule);
  font-family: var(--mono); font-size: 12px; color: var(--ink-soft);
}
.rule .verified-note b { color: var(--ink); font-weight: 500; }
.conf {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; border: 1px solid currentColor;
  padding: 1px 7px; border-radius: 2px; margin-left: auto;
}
.conf-verified { color: var(--stamp); }
.conf-partial { color: var(--gold); }

/* ---------- not covered: the gaps, in public ---------- */
.gaps {
  margin-top: 34px; border: 1px solid var(--rule); border-top: 3px solid var(--gold);
  background: var(--paper-deep); padding: 22px 26px;
}
.gaps h2 {
  font-family: var(--serif); font-size: 21px; font-weight: 500; margin: 0;
  border: none; padding: 0;
}
.gaps p { margin-top: 8px; color: var(--ink-soft); font-size: 15px; }
.gaps ul { margin: 14px 0 0 20px; font-size: 15.5px; }
.gaps li { margin-top: 8px; }

/* ---------- FAQ ---------- */
.faq { margin-top: 44px; }
.faq h2 {
  font-family: var(--serif); font-size: 27px; font-weight: 500;
  padding-top: 12px; border-top: 2px solid var(--ink);
}
.faq-q {
  font-family: var(--sans); font-size: 17px; font-weight: 600;
  margin-top: 26px; color: var(--ink);
}
.faq-a { margin-top: 8px; max-width: 720px; }
.faq-a p + p { margin-top: 10px; }

/* ---------- sources ---------- */
.sources { margin-top: 48px; border-top: 2px solid var(--ink); padding-top: 16px; }
.sources h2 {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 500;
}
.sources ol { margin: 14px 0 0 20px; font-family: var(--mono); font-size: 13px; line-height: 1.9; }
.sources li { margin-top: 4px; }
.sources .note { color: var(--ink-soft); }
.sources .tier {
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); margin-left: 6px;
}

/* ---------- sidebar rail ---------- */
.rail { position: sticky; top: 22px; font-size: 15px; }
@media (max-width: 940px) { .rail { position: static; } }
.rail section + section { margin-top: 26px; }
.rail h2 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 500;
  padding-bottom: 8px; border-bottom: 1px solid var(--rule);
}
.rail ul { list-style: none; margin-top: 12px; }
.rail li { margin-top: 9px; line-height: 1.45; }
.rail a { text-decoration: none; }
.rail a:hover { text-decoration: underline; }
.rail .fact {
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft);
  line-height: 1.7; margin-top: 12px;
}
.rail .fact b { color: var(--ink); font-weight: 500; }

/* ---------- states hub table ---------- */
table.states { width: 100%; border-collapse: collapse; background: var(--card); min-width: 620px; }
table.states thead th {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 500;
  padding: 12px 18px; border-bottom: 2px solid var(--ink); text-align: left;
  background: var(--paper-deep);
}
table.states td { padding: 11px 18px; border-bottom: 1px solid var(--hairline); font-size: 15px; }
table.states tr:target td { background: var(--paper-deep); box-shadow: inset 3px 0 0 var(--oxblood); }
table.states td.code { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); width: 1%; }
.status {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap;
}
.status-live { color: var(--oxblood); font-weight: 500; }
.status-next { color: var(--plat); }
.status-planned { color: var(--ink-soft); }

/* ---------- buyer CTA ---------- */
.cta {
  margin-top: 40px; border: 1px solid var(--rule); border-top: 3px solid var(--plat);
  background: var(--card); padding: 24px 26px;
}
.cta h2 {
  font-family: var(--serif); font-size: 22px; font-weight: 500; margin: 0;
  border: none; padding: 0;
}
.cta p { margin-top: 10px; font-size: 15.5px; color: var(--ink-soft); max-width: 640px; }
.cta .terms {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--rule);
  font-family: var(--mono); font-size: 12px; line-height: 1.75;
}

/* ---------- generic table figure ---------- */
figure.tbl { margin-top: 30px; }
figure.tbl figcaption {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px;
}
figure.tbl table { width: 100%; border-collapse: collapse; background: var(--card); }
figure.tbl thead th {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 500;
  padding: 11px 16px; border-bottom: 2px solid var(--ink); text-align: left;
  background: var(--paper-deep);
}
figure.tbl td, figure.tbl tbody th {
  padding: 11px 16px; border-bottom: 1px solid var(--hairline);
  font-size: 15px; text-align: left; font-weight: 400;
}
figure.tbl td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
figure.tbl tr:last-child td, figure.tbl tr:last-child th { border-bottom: none; }

/* ---------- print: the record should photocopy ---------- */
@media print {
  .recordbar, nav.hubs, .abstract, .cta, .rail { display: none; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .hero, .plate, .page-head, .abstract { background-image: none; }
  a { color: #000; }
}

/* ---------- the record card, on an inner page ---------- */
/* The h1 is already above the card, so the card is labelled rather than
   repeating it. The block still lifts cleanly: the page title travels with it
   in the structured data. */
.ka-kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--oxblood); margin-bottom: 12px;
  padding-right: 120px;
}
.states td .none { color: var(--ink-soft); font-family: var(--mono); font-size: 12px; }

@media (max-width: 560px) {
  .recordbar { font-size: 10.5px; padding: 7px 16px; }
  header.mast { padding: 22px 16px 0; }
  .hero, .plate, .page-head, .article, .wrap, .crumbs, .panel, footer, .two-col { padding-left: 16px; padding-right: 16px; }
  .abstract { padding: 32px 16px; }
  .stamp { position: static; display: inline-block; margin-bottom: 12px; transform: none; }
  .ka-q, .ka-kicker { padding-right: 0; }
  .key-answer { padding: 22px 20px; }
}