/* Power To The People — 2a design system (A1 scaffold).
 * Ported from wireframe/v3/handoff/README.md + "PTP 2a Combined.dc.html" +
 * wireframe/v3/template.html (D4 stages 1–3 and record, final per S6-R1:
 * question lines as expandable <details>, answer boxes removed, headline
 * line-height opened to >=1.04).
 * Classes only — rendered markup carries no design inline styles. Data-driven
 * values (bar widths, strip positions) are set as inline custom properties by
 * the render modules; everything visual lives here.
 *
 * Colour jobs (handoff "Colour: what each colour means"):
 *   ink   #0E2233  text; ink bands (hero, price today, already here)
 *   paper #F4F1EA  page and neutral bands
 *   paper2#EBE6DB  appendix band, portrait stripes
 *   red   #8B2E2E  top of escalation: bill increase, NDAs, proposed, veto
 *   redb  #C0463F  proposed squares on the ink band
 *   amber #C98421  urgency fills; never text on paper (2.7:1)
 *   amtint#F0D8B0  kickers on red and teal bands
 *   teal  #155E63  verified or approved, neutral-positive
 *   teall #4FA3A8  permitted squares on the ink band
 *   warn  #7F5410  amber when it has to be text
 * Stage colour code (one code everywhere): running amber · under
 * construction paper · permitted teal · proposed red.
 */

:root {
  --ink: #0E2233;
  --paper: #F4F1EA;
  --paper2: #EBE6DB;
  --ink2: #33434F;
  --ink3: #4F5F66;
  --line: #C5CCC9;
  --line2: #9AA8A4;
  --red: #8B2E2E;
  --redb: #C0463F;
  --amber: #C98421;
  --amtint: #F0D8B0;
  --teal: #155E63;
  --teall: #4FA3A8;
  --warn: #7F5410;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Gill Sans", "Gill Sans MT", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--serif);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4, p { margin: 0; text-wrap: pretty; }
a { color: var(--red); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
img { max-width: 100%; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}

.wrap { max-width: 1120px; margin: 0 auto; }
.wrap.narrow { max-width: 880px; }

/* ── bands ───────────────────────────────────────────────────────────── */

.band { padding: 104px 32px; overflow-wrap: break-word; }
.band.s  { padding: 96px 32px; }
.band.xs { padding: 72px 32px 56px; }   /* D0 place head */
.band.md { padding: 88px 32px; }        /* D4e honest record */

.b-paper  { background: var(--paper);  color: var(--ink); }
.b-paper2 { background: var(--paper2); color: var(--ink); }
.b-ink    { background: var(--ink);    color: var(--paper); }
.b-red    { background: var(--red);    color: #fff; }
.b-amber  { background: var(--amber);  color: var(--ink); }
.b-teal   { background: var(--teal);   color: #fff; }

.rule-b { border-bottom: 1px solid var(--ink); }
.b-ink.rule-b, .b-red.rule-b, .b-teal.rule-b { border-bottom-color: var(--ink2); }

/* The whole ZIP record starts with a 14px amber top border (handoff). */
.recordhead { border-top: 14px solid var(--amber); }

/* ── type ────────────────────────────────────────────────────────────── */

.kick { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.kick-teal   { color: var(--teal); }
.kick-red    { color: var(--red); }
.kick-warn   { color: var(--warn); }
.kick-amber  { color: var(--amber); }
.kick-amtint { color: var(--amtint); }
.kick-ink3   { color: var(--ink3); }

/* Big numerals: serif 700, line-height .8, −.05em (handoff typography). */
.num    { font: 700 clamp(120px, 19vw, 260px)/.8 var(--serif); letter-spacing: -.05em; }
.num-l  { font: 700 clamp(120px, 18vw, 240px)/.8 var(--serif); letter-spacing: -.05em; }
.num-h  { font: 700 clamp(140px, 22vw, 300px)/.8 var(--serif); letter-spacing: -.05em; }
.num-m  { font: 700 clamp(96px, 14vw, 180px)/.8 var(--serif);  letter-spacing: -.05em; }
.num-xl { font: 700 clamp(160px, 26vw, 340px)/.8 var(--serif); letter-spacing: -.05em; }
.num-dollar { font: 700 clamp(96px, 15vw, 200px)/.85 var(--serif); letter-spacing: -.04em; }
.num-price  { font: 700 clamp(96px, 15vw, 200px)/.85 var(--mono);  letter-spacing: -.06em; }
.num-red    { color: var(--red); }
.num-amber  { color: var(--amber); }
.num-teal   { color: var(--teal); }

.num-head { font: 700 clamp(40px, 5.6vw, 76px)/1.08 var(--serif); letter-spacing: -.02em; }

.deck { font: 400 clamp(28px, 3.4vw, 44px)/1.2 var(--serif); margin-top: 28px; max-width: 24ch; }
.body { font: 400 19px/1.5 var(--serif); margin-top: 18px; max-width: 52ch; }
.it   { font-style: italic; }

/* the italic unit that sits beside a big numeral */
.unit { font: italic 400 clamp(28px, 3.4vw, 44px)/1 var(--serif); }
.b-teal .unit { color: #CFE3E0; }
.body-soft { color: #E6EFED; }
.deck-ink2 { color: var(--ink2); }

/* reading-width utilities (design ch widths as classes) */
.w18ch { max-width: 18ch; }
.w22ch { max-width: 22ch; }
.w26ch { max-width: 26ch; }
.w30ch { max-width: 30ch; }
.w40ch { max-width: 40ch; }
.w44ch { max-width: 44ch; }
.mt-16 { margin-top: 16px; }
.mt-44 { margin-top: 44px; }

/* Source line: serif italic 15px; dark-band variants (handoff components). */
.src { font: italic 400 15px/1.4 var(--serif); color: var(--ink3); margin-top: 18px; }
.src a { color: inherit; }
.b-ink  .src { color: #8F9EA3; }
.b-red  .src { color: #F3DCD8; }
.b-teal .src { color: #CFE3E0; }

.tag {
  display: inline-block;
  font: 600 12px/1 var(--sans);
  letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px;
}
.tag-solid-red   { background: var(--red);  color: #fff; }
.tag-solid-teal  { background: var(--teal); color: #fff; }
.tag-solid-amber { background: var(--amber); color: var(--ink); }
.tag-solid-paper { background: var(--paper); color: var(--red); }
.tag-outline     { border: 1px solid var(--ink); color: var(--ink); }
.tag-outline-paper { border: 1px solid var(--paper); color: var(--paper); }

.head-rule { padding-bottom: 12px; border-bottom: 2px solid var(--ink); }

.row-flex { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }

/* static spacing utilities (design-system values as classes, not inline) */
.mt-24 { margin-top: 24px; }
.mt-28 { margin-top: 28px; }
.mt-32 { margin-top: 32px; }
.mt-36 { margin-top: 36px; }
.mt-40 { margin-top: 40px; }
.mt-48 { margin-top: 48px; }
.mt-20 { margin-top: 20px; }

/* ── section bubble ──────────────────────────────────────────────────── */

.bub { display: flex; gap: 14px; align-items: center; }
.bub i {
  font-style: normal; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 17px/1 var(--serif);
}
.bub i.c-red   { background: #fff; color: var(--red); }
.bub i.c-amber { background: var(--amber); color: var(--ink); }
.bub i.c-amtint{ background: var(--amtint); color: var(--teal); }
.bub i.c-ink   { background: var(--ink); color: var(--paper); }
.bub i.outline { border: 2px solid var(--ink); color: var(--ink); }

/* ── masthead (H0) ───────────────────────────────────────────────────── */

.masthead { padding: 24px 32px 0; background: var(--paper); }
.masthead-in { text-align: center; }
.masthead-strip {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font: 400 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink3); padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
}
.masthead-brand {
  display: flex; justify-content: center; align-items: center; gap: 18px;
  padding: 22px 0 16px; flex-wrap: wrap;
  font: 400 clamp(36px, 6vw, 76px)/1 var(--serif);
  letter-spacing: -.02em;
}
.masthead-mark { width: 54px; height: 54px; flex-shrink: 0; }
.masthead-nav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px;
  padding: 12px 0; border-bottom: 1px solid var(--ink);
  font: 600 12px/1.6 var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.masthead-nav a { color: var(--ink2); text-decoration: none; }
.masthead-nav a:hover { color: var(--red); text-decoration: underline; }
.masthead-tag {
  font: 400 11px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  padding: 10px 0;
  border-top: 3px double var(--ink); border-bottom: 1px solid var(--ink);
}

/* ── hero (H1) and repeat CTA (H8) ───────────────────────────────────── */

.hero { margin-top: 28px; }
.hero .kick { color: var(--amber); }
.hero-h1 {
  font: 700 clamp(52px, 8.4vw, 124px)/.95 var(--serif);
  letter-spacing: -.03em; margin-top: 22px;
}
.hero-h1 .hl-amber { color: var(--amber); }
.hero-nobody {
  font: italic 400 clamp(30px, 4vw, 56px)/1.05 var(--serif);
  color: #8F9EA3; margin-top: 20px;
}
.hero-deck {
  font: 400 23px/1.5 var(--serif); color: #DFE5E3;
  max-width: 40ch; margin-top: 48px; padding-top: 28px;
  border-top: 1px solid var(--ink2);
}
.cta-h { font: 700 clamp(36px, 5vw, 64px)/1 var(--serif); letter-spacing: -.02em; }

/* ── ZIP field (component) ───────────────────────────────────────────── */

.zip-hold { max-width: 620px; margin-top: 40px; }
.zip-hold .kick { color: #C9D2CF; }
.zipbox {
  display: flex; flex-wrap: wrap;
  border: 3px solid var(--paper); margin-top: 12px;
}
.zipbox .zip-input {
  flex: 1 1 200px; min-width: 200px;
  background: var(--paper); color: var(--ink); border: 0;
  font: 700 44px/1 var(--mono); padding: 16px 20px; outline: none;
}
.zipbox .zip-btn {
  flex: 1 0 auto;
  background: var(--amber); color: var(--ink); border: 0;
  font: 700 15px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  padding: 18px 26px; white-space: nowrap; cursor: pointer;
}
.zipbox .zip-btn:hover { background: var(--amtint); }
.zip-err { font: 400 15px/1.4 var(--sans); color: var(--amtint); margin-top: 12px; min-height: 1.4em; }
.zip-note { font: 400 14px/1.4 var(--sans); color: #C9D2CF; margin-top: 12px; }

/* sample-ZIP chips + coverage note (carried from the v1 app, restyled) */
.samples { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.sample {
  font: 600 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  background: transparent; color: #C9D2CF;
  border: 1px solid var(--ink2); padding: 10px 12px; cursor: pointer;
}
.sample:hover { border-color: var(--amber); color: var(--amber); }
.coverage { font: 400 13px/1.5 var(--sans); color: #8F9EA3; margin-top: 16px; max-width: 62ch; }

/* ── national figure bands (H2–H5) ───────────────────────────────────── */

.nat-line { font: 400 clamp(28px, 3.4vw, 44px)/1.2 var(--serif); margin-top: 28px; max-width: 24ch; }
.nat-src  { font: 400 13px/1 var(--mono); margin-top: 24px; }
.b-amber .nat-src, .b-paper .nat-src, .b-paper2 .nat-src { color: var(--ink3); }
.b-teal .nat-src { color: #CFE3E0; }
.b-red  .nat-src { color: #E8C3BD; }
.nat-of { font: italic 400 clamp(36px, 5vw, 64px)/1 var(--serif); color: #E8C3BD; }

/* 31-bar NDA row (H5) */
.ndarow {
  display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 4px;
  max-width: 760px; margin-top: 36px;
}
.ndarow div { aspect-ratio: 1 / 2; background: var(--paper); border: 1px solid var(--paper); }
.ndarow div.off { background: transparent; }

/* ── counterweight (H6, D4e) and mission (H7) ────────────────────────── */

.counter {
  border-top: 2px dashed var(--line2); border-bottom: 2px dashed var(--line2);
  padding: 36px 0; margin-top: 24px;
}
.counter-none {
  font: italic 400 clamp(56px, 8vw, 112px)/.95 var(--serif);
  color: var(--ink3);
}
.counter-line { font: 400 clamp(24px, 2.8vw, 34px)/1.3 var(--serif); margin-top: 20px; max-width: 34ch; }
.mission { font: 400 clamp(28px, 3.4vw, 42px)/1.35 var(--serif); }
.mission-strong { font: 700 clamp(28px, 3.4vw, 42px)/1.3 var(--serif); margin-top: 32px; clear: both; }
.mission-teal { font: italic 400 clamp(22px, 2.4vw, 28px)/1.4 var(--serif); margin-top: 24px; color: var(--teal); }
.dropcap {
  float: left;
  font: 700 clamp(96px, 12vw, 150px)/.8 var(--serif);
  color: var(--red); margin: 10px 16px 0 0;
}

/* ── D0 place ────────────────────────────────────────────────────────── */

.dateline {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 3px double var(--ink);
}
.dateline .dl-place { color: var(--red); }
.dateline .dl-date { color: var(--ink3); font-weight: 400; }
.county-h1 {
  font: 700 clamp(60px, 10vw, 148px)/1.05 var(--serif);
  letter-spacing: -.035em; margin-top: 36px;
}
.state-it { font: italic 400 clamp(26px, 3vw, 40px)/1.2 var(--serif); color: var(--teal); margin-top: 12px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.chip { font: 400 14px/1 var(--mono); border: 1px solid var(--ink); padding: 9px 12px; }

/* ── D1 short version ────────────────────────────────────────────────── */

.brief-row {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 24px; align-items: center; padding: 28px 0;
  border-bottom: 1px solid var(--line2);
  color: var(--ink); text-decoration: none;
}
.brief-row .b-n {
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 22px/1 var(--serif);
}
.brief-row .b-text { font: 400 clamp(22px, 2.8vw, 34px)/1.25 var(--serif); }
.brief-row .b-label {
  font: 400 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink3); white-space: nowrap;
}
.d1 { padding-top: 0; }

/* ── D2b bill chart ──────────────────────────────────────────────────── */

.billchart { display: grid; gap: 22px; margin-top: 36px; }
.billchart .bc-labels {
  display: flex; justify-content: space-between;
  font: 400 16px/1 var(--mono); margin-bottom: 8px;
}
.billchart .bc-last .bc-labels { font-weight: 700; color: var(--red); }
.billchart .bc-bar { height: 44px; }

/* ── D2d rank strip ──────────────────────────────────────────────────── */

.rankstrip { margin-top: 48px; max-width: 900px; position: relative; height: 64px; }
.rankstrip .rs-you {
  position: absolute; top: 0; transform: translateX(-50%);
  font: 700 14px/1 var(--mono); color: var(--amber); white-space: nowrap;
}
.rankstrip .rs-bar {
  position: absolute; left: 0; right: 0; top: 34px; height: 14px;
  background: linear-gradient(90deg, var(--teal), var(--amber) 40%, var(--red));
}
.rankstrip .rs-median {
  position: absolute; top: 26px; width: 2px; height: 30px;
  background: var(--paper);
}
.rankstrip .rs-mark {
  position: absolute; top: 22px; width: 14px; height: 38px;
  background: var(--paper); transform: translateX(-50%);
}
.rankstrip .rs-labels {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font: 400 13px/1.3 var(--mono); color: #C9D2CF; margin-top: 10px;
}

/* ── square grids (D3, D3c) ──────────────────────────────────────────── */

.sq { display: grid; gap: 8px; }
.sq div { aspect-ratio: 1; }
.lg { display: grid; gap: 10px; margin-top: 24px; font: 400 16px/1.3 var(--sans); }
.lg span { display: flex; gap: 12px; align-items: center; }
.lg i { width: 16px; height: 16px; display: inline-block; }
.b-ink .lg { color: #DFE5E3; }
.b-paper .lg, .b-paper2 .lg { color: var(--ink2); }

/* Speech-bubble callout (D3c) */
.callout {
  margin-top: 44px; border-radius: 24px;
  background: var(--ink); color: var(--paper);
  padding: 28px 32px; max-width: 720px; position: relative;
}
.callout p { font: 400 clamp(22px, 2.4vw, 28px)/1.35 var(--serif); }
.callout::after {
  content: ""; position: absolute; left: 44px; bottom: -14px;
  width: 28px; height: 28px; background: var(--ink); transform: rotate(45deg);
}

/* ── D3d biggest names ───────────────────────────────────────────────── */

.namerow {
  display: grid; grid-template-columns: 72px minmax(0, 1fr);
  gap: 24px; padding: 32px 0; border-bottom: 1px solid var(--line2);
}
.namerow .n { font: 700 48px/1 var(--serif); color: var(--amber); }
.namerow .nm { font: 700 clamp(28px, 3.4vw, 44px)/1.1 var(--serif); letter-spacing: -.01em; }
.namerow .nmeta {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px;
  font: 400 14px/1 var(--sans); color: var(--ink3);
}
.namerow .nmeta a { font: inherit; }
.morelink {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 28px 0; color: var(--ink); text-decoration: none;
  border-bottom: 2px solid var(--ink);
}
.morelink .ml-more { font: italic 400 clamp(22px, 2.6vw, 30px)/1.2 var(--serif); }
.morelink .ml-cta {
  font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--red);
}

/* ── stage marker (D4b/c/d) ──────────────────────────────────────────── */

.stage { display: flex; gap: 14px; align-items: center; }
.stage .st-label { font: 400 13px/1 var(--mono); color: var(--ink3); }
.b-red .stage .st-label { color: var(--amtint); }
.stage .st-bar { flex: 1; height: 6px; max-width: 240px; }
.st-bar-1 { background: linear-gradient(90deg, var(--ink) 33%, var(--line) 33%); }
.st-bar-2 { background: linear-gradient(90deg, var(--teal) 66%, var(--line) 66%); }
.st-bar-3 { background: var(--paper); }

/* ── stage site cards (D4b/c; template.html) ─────────────────────────── */

.site {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px; padding: 36px 0; border-bottom: 1px solid var(--line2);
}
.photo {
  position: relative; aspect-ratio: 16/10;
  border: 1px solid var(--ink); overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--paper2) 0 6px, #E2DCCF 6px 7px);
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85) contrast(1.02); }
.photo .none {
  position: absolute; inset: 0; display: grid; place-items: center;
  text-align: center; padding: 20px;
  font: 400 14px/1.4 var(--sans); color: var(--ink3);
}
.photo .none b {
  display: block; font: 600 11px/1 var(--sans); letter-spacing: .14em;
  text-transform: uppercase; margin-bottom: 8px; color: var(--ink2);
}
.photo-wide { aspect-ratio: 21/9; }
.credit { font: 400 12px/1.3 var(--mono); color: var(--ink3); margin-top: 8px; }
.site h3 { font: 700 clamp(26px, 3vw, 38px)/1.08 var(--serif); letter-spacing: -.01em; }
.meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; font: 400 15px/1.3 var(--sans); color: var(--ink3); }
.mw { font: 700 15px/1 var(--mono); border: 1px solid currentColor; padding: 6px 9px; color: var(--ink); }
.mw.none { border-style: dashed; color: var(--ink3); font-weight: 400; }
.facts { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.facts li { font: 400 17px/1.45 var(--serif); color: var(--ink2); padding-left: 18px; position: relative; }
.facts li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 2px; background: var(--ink); }
.facts a { font: 400 13px/1 var(--sans); white-space: nowrap; }
.minitake {
  margin-top: 20px; display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 14px; align-items: start; padding-top: 16px;
  border-top: 1px dashed var(--line2);
}
.minitake p { font: 400 15px/1.45 var(--serif); color: var(--ink2); }

/* take colours (one code, template.html) */
.t-notfair { background: var(--red); color: #fff; }
.t-mixed   { background: var(--amber); color: var(--ink); }
.t-fair    { background: var(--teal); color: #fff; }
.t-nei     { background: transparent; color: var(--ink); outline: 2px dashed var(--line2); outline-offset: -2px; }

/* ── D4d proposed intro (red band) ───────────────────────────────────── */

.tally {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px; margin-top: 48px;
}
.tally a {
  display: flex; flex-direction: column; gap: 12px; text-decoration: none;
  color: inherit; border: 2px dashed var(--paper);
  padding: 20px 20px 18px; background: rgba(14, 34, 51, .18);
}
.tally a:hover { background: rgba(14, 34, 51, .34); }
.tally .n { font: 700 44px/1 var(--serif); }
.tally .nm { font: 700 22px/1.15 var(--serif); flex: 1; }
.tally .tk { align-self: flex-start; line-height: 1.25; }
.tally .tk.t-nei { outline-color: var(--paper); color: #fff; }
.sumline { font: 400 clamp(22px, 2.4vw, 28px)/1.45 var(--serif); margin-top: 36px; max-width: 46ch; }
.sumline b { font-weight: 700; }
.proposed-h2 {
  font: 700 clamp(48px, 7vw, 100px)/1.06 var(--serif);
  letter-spacing: -.03em; margin-top: 24px; max-width: 14ch;
}

/* ── dossier (D4 per-site; template.html, S6-R1 final) ────────────────── */

.dos { border-top: 14px solid var(--red); }
.dos .dateline .dl-place { font-weight: 600; }
.dos h2 {
  font: 700 clamp(48px, 7.6vw, 108px)/1.04 var(--serif);
  letter-spacing: -.035em; margin-top: 36px; max-width: 16ch;
}
.dos .who { font: italic 400 clamp(22px, 2.6vw, 32px)/1.25 var(--serif); color: var(--teal); margin-top: 14px; }
.dos .hero-hold { margin-top: 40px; }

.verdict { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.verdict .lbl { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.stamp {
  display: inline-block; margin-top: 14px; padding: 18px 26px 18px;
  font: 700 clamp(40px, 6vw, 84px)/1.05 var(--serif); letter-spacing: -.03em;
}
.stamp.t-nei { outline-width: 3px; outline-offset: -3px; }
.verdict .why { font: 400 clamp(24px, 2.8vw, 34px)/1.3 var(--serif); margin-top: 22px; max-width: 30ch; }
.verdict .fine { font: italic 400 15px/1.4 var(--serif); color: var(--ink3); margin-top: 14px; max-width: 62ch; }

.meter { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 56px; }
.meter div { aspect-ratio: 1; display: grid; place-items: center; font: 700 clamp(18px, 2.4vw, 30px)/1 var(--sans); }
.meter-l {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 8px;
  font: 600 11px/1.25 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink3);
}
.a-good { background: var(--teal); color: #fff; }
.a-bad  { background: var(--red);  color: #fff; }
.a-nor  { background: transparent; border: 2px dashed var(--line2); color: var(--ink3); }

.legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; font: 400 14px/1.3 var(--sans); color: var(--ink2); }
.legend span { display: flex; gap: 8px; align-items: center; }
.legend i { width: 14px; height: 14px; display: inline-block; }

/* question lines as expandable <details> (S6-R1) */
.qs { margin-top: 56px; }
.qs > .kick { border-bottom: 2px solid var(--ink); padding-bottom: 12px; color: var(--ink3); }
.q { display: block; border-bottom: 1px solid var(--line2); }
.qh {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 28px;
  gap: 20px; align-items: center; padding: 22px 0; list-style: none;
}
.q h4 { font: 700 clamp(20px, 2.2vw, 26px)/1.25 var(--serif); }
details.q > summary { cursor: pointer; }
details.q > summary::-webkit-details-marker { display: none; }
details.q > summary:hover h4 { color: var(--red); }
.chev { font: 400 28px/1 var(--sans); color: var(--ink3); text-align: center; transition: transform .15s; }
details.q[open] .chev { transform: rotate(45deg); }
.qb { padding: 0 48px 26px 0; }
.q blockquote { margin: 10px 0 0; font: italic 400 17px/1.5 var(--serif); color: var(--ink2); border: 0; padding: 0; max-width: 64ch; }
.q .note { font: 400 15px/1.45 var(--serif); color: var(--ink3); margin-top: 8px; max-width: 64ch; }
.q .ans {
  justify-self: end; text-align: center; min-width: 150px; white-space: nowrap;
  padding: 10px 12px; font: 700 15px/1 var(--sans);
  letter-spacing: .1em; text-transform: uppercase;
}
.q .ans.a-nor { color: var(--ink3); font-weight: 600; }
.q a { font: 400 13px/1 var(--sans); }

/* hearing panel */
.hear { margin-top: 64px; background: var(--ink); color: var(--paper); padding: 40px 40px 36px; }
.hear .kick { color: var(--amber); }
.hear .vote { font: 700 clamp(26px, 3.2vw, 40px)/1.2 var(--serif); margin-top: 18px; max-width: 34ch; }
.hear .body2 { font: 400 17px/1.5 var(--serif); color: #C9D2CF; margin-top: 14px; max-width: 64ch; }
.hear a { color: var(--amber); }
.split { margin-top: 30px; }
.split .nums { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.split .nums b { font: 700 clamp(64px, 9vw, 120px)/.85 var(--serif); letter-spacing: -.04em; }
.split .nums small {
  display: block; font: 600 12px/1 var(--sans); letter-spacing: .14em;
  text-transform: uppercase; color: #C9D2CF; margin-top: 10px;
}
.split .bar { display: flex; height: 18px; margin-top: 16px; }
.split .bar .sp-for { background: var(--teall); }
.split .bar .sp-against { background: var(--redb); }

/* not-on-record list */
.nor { margin-top: 48px; border: 1.5px dashed var(--line2); padding: 24px 28px; }
.nor ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.nor li { font: 400 17px/1.45 var(--serif); color: var(--ink2); }
.nor li::before { content: "— "; color: var(--line2); }

/* record facts block */
.factsblock { margin-top: 56px; }

/* docket row */
.where {
  margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px; align-items: center; padding: 24px 0;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
}
.where p { font: 400 clamp(20px, 2.2vw, 26px)/1.35 var(--serif); }
.btn {
  display: inline-block; background: var(--ink); color: var(--paper);
  text-decoration: none; font: 700 14px/1 var(--sans); letter-spacing: .12em;
  text-transform: uppercase; padding: 16px 20px; white-space: nowrap;
}
.btn:hover { background: var(--red); color: #fff; }

/* the take rule, as a details */
details.rule { margin-top: 28px; max-width: 780px; }
details.rule summary {
  cursor: pointer; font: 600 13px/1 var(--sans); letter-spacing: .14em;
  text-transform: uppercase; padding: 14px 0;
  border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;
  list-style: none;
}
details.rule summary::-webkit-details-marker { display: none; }
details.rule ol { margin: 18px 0 0; padding-left: 22px; font: 400 17px/1.5 var(--serif); display: grid; gap: 8px; }

/* ── D5 directory ────────────────────────────────────────────────────── */

.dir { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.dir .dcard { padding: 20px 0; min-width: 0; }
.dir .p {
  width: 100%; aspect-ratio: 4/5; border: 1px solid var(--ink);
  object-fit: cover; display: block;
  background: repeating-linear-gradient(135deg, var(--paper2) 0 5px, #E2DCCF 5px 6px);
}
.dir .ini { display: grid; place-items: center; font: 700 32px/1 var(--serif); color: var(--ink3); }
.dir .dseat {
  font: 400 11px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink3); margin-top: 12px;
}
.dir .dname { font: 700 20px/1.2 var(--serif); margin-top: 4px; }
.dir .dparty { font: 400 13px/1.3 var(--sans); color: var(--ink3); margin-top: 2px; }
.telbtn {
  display: inline-block; font: 700 14px/1 var(--mono);
  background: var(--ink); color: var(--paper); padding: 9px 10px;
  text-decoration: none; margin-top: 10px;
}
.telbtn:hover { background: var(--red); color: #fff; }
.dir-note {
  margin-top: 36px; border: 1.5px dashed var(--line2);
  padding: 20px 24px; max-width: 780px;
}
.dir-note p { font: 400 17px/1.5 var(--serif); color: var(--ink2); }
.dir-note b { color: var(--ink); }
.who-h2 { font: 700 clamp(44px, 6vw, 84px)/1.06 var(--serif); letter-spacing: -.025em; margin-top: 24px; max-width: 16ch; }
.dir-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap;
  border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-top: 56px;
}
.dir-head .kick { letter-spacing: .14em; }
.dir-head .dh-note { font-style: italic; font-size: 14px; color: var(--ink3); }

/* ── D5b say this ────────────────────────────────────────────────────── */

.saythis .wrap { border-left: 14px solid var(--red); padding-left: 40px; }
.saythis .say-1 { font: 400 clamp(28px, 3.4vw, 44px)/1.35 var(--serif); margin-top: 24px; }
.saythis .say-2 { font: 700 clamp(28px, 3.4vw, 44px)/1.35 var(--serif); margin-top: 20px; }
.saythis .say-note { font: 400 14px/1.5 var(--sans); color: var(--ink2); margin-top: 32px; }

/* ── D6 mix bar ──────────────────────────────────────────────────────── */

.mixbar { display: flex; height: 32px; margin-top: 40px; }
.mixbar div { height: 100%; }
.mixbar .mb-rest { flex: 1; background: var(--line); }
.mixline { font: 400 17px/1.5 var(--serif); color: var(--ink2); margin-top: 16px; }

/* ── D7 state bill ───────────────────────────────────────────────────── */

.bill-tag { font-size: 14px; padding: 8px 14px; }
.bill-id { font: 400 16px/1 var(--mono); }
.bill-h2 { font: 700 clamp(40px, 5.4vw, 72px)/1.08 var(--serif); letter-spacing: -.02em; margin-top: 20px; max-width: 22ch; }

/* ── D8 appendix ─────────────────────────────────────────────────────── */

.apx-h3 { font: 700 28px/1.2 var(--serif); margin-top: 48px; }
.apx-h3.first { margin-top: 28px; }
.apx-lede { font-size: 16px; color: var(--ink2); margin-top: 6px; }
.rate-row {
  display: grid; grid-template-columns: 170px minmax(0, 1fr) auto;
  gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px;
}
.rate-row .rr-id { font: 400 14px/1.4 var(--mono); }
.rate-row .rr-status { color: var(--ink3); font: 400 13px/1.4 var(--mono); }
.ledger-row {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1fr) auto;
  gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px;
}
.ledger-row .lr-a { color: var(--ink); }
.ledger-row .lr-b, .ledger-row .lr-c { color: var(--ink2); }
.ledger-row .lr-d { font: 400 13px/1.5 var(--mono); color: var(--ink3); }
.gaplist { margin: 14px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.gaplist li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px;
  padding: 14px 0; border-bottom: 1px dashed var(--line2);
  font-size: 16px; color: var(--ink2);
}
.gaplist .g-n { font: 400 14px/1.5 var(--mono); color: var(--ink3); }
.gaplist b { color: var(--ink); }
.apx-block { margin-top: 14px; border-top: 1px solid var(--ink); }
.mt-14 { margin-top: 14px; }

/* ── footer ──────────────────────────────────────────────────────────── */

.site-footer { background: var(--ink); color: #C9D2CF; padding: 40px 32px; }
.site-footer .wrap { display: grid; gap: 8px; font: 400 14px/1.5 var(--sans); }
.site-footer a { color: var(--amber); }
.site-footer a:hover { color: var(--paper); }

/* ── responsive (template.html @760px, adapted) ───────────────────────── */

@media (max-width: 760px) {
  .band { padding: 72px 20px; }
  .band.s { padding: 64px 20px; }
  .band.xs, .band.md { padding: 64px 20px; }
  .masthead { padding: 20px 20px 0; }
  .site { grid-template-columns: 1fr; gap: 20px; }
  .qh { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; }
  .qh h4 { grid-column: 1 / -1; }
  .q .ans { justify-self: start; min-width: 0; }
  .chev { justify-self: end; }
  .qb { padding-right: 0; }
  .where { grid-template-columns: 1fr; }
  .meter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .meter-l { display: none; }
  .dir { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hear { padding: 28px 22px; }
  .num    { font-size: clamp(72px, 24vw, 120px); }
  .num-l  { font-size: clamp(72px, 24vw, 120px); }
  .num-h  { font-size: clamp(72px, 24vw, 120px); }
  .num-m  { font-size: clamp(72px, 22vw, 120px); }
  .num-xl { font-size: clamp(72px, 24vw, 120px); }
  .num-dollar, .num-price { font-size: clamp(64px, 22vw, 120px); }
  .minitake { grid-template-columns: 1fr; }
  .brief-row { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; }
  .brief-row .b-label { display: none; }
  .stamp { font-size: clamp(34px, 10vw, 48px); }
  .dos h2 { font-size: clamp(40px, 12vw, 60px); line-height: 1.06; }
  .proposed-h2 { font-size: clamp(36px, 11vw, 60px); line-height: 1.08; }
  .county-h1 { font-size: clamp(40px, 12vw, 60px); }
  .rate-row { grid-template-columns: 1fr; gap: 4px; }
  .ledger-row { grid-template-columns: 1fr 1fr; }
  .gaplist li { grid-template-columns: 32px minmax(0, 1fr); }
  .namerow { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
  .namerow .n { font-size: 32px; }
  .saythis .wrap { padding-left: 20px; border-left-width: 10px; }
  .callout { padding: 22px 20px; }
  .callout::after { left: 28px; }
  /* 2.1.2 — paid traffic is ~all mobile, and the ZIP box sat at ~1000px on a 390×844 phone, below the fold.
     Compress the masthead and hero on phones so the one action is on the first screen. Content unchanged. */
  .masthead { padding: 10px 16px 0; }
  .masthead-strip { padding-bottom: 8px; font-size: 10px; }
  .masthead-brand { padding: 10px 0 8px; gap: 10px; font-size: 30px; }
  .masthead-mark { width: 34px; height: 34px; }
  .masthead-tag { display: none; }
  .masthead-nav { gap: 2px 14px; padding: 6px 0; font-size: 10.5px; }
  .band.hero { padding-top: 26px; padding-bottom: 48px; }
  .hero { margin-top: 0; }
  .hero-h1 { font-size: clamp(38px, 11vw, 52px); margin-top: 10px; }
  .hero-nobody { font-size: 26px; margin-top: 8px; }
  .hero .zip-hold { margin-top: 18px; }
  .hero-deck { font-size: 18px; margin-top: 22px; padding-top: 16px; }
  .zipbox .zip-input { font-size: 34px; padding: 12px 14px; min-width: 150px; }
  .zipbox .zip-btn { padding: 16px 18px; }
  .hero > .wrap { display: flex; flex-direction: column; }
  .hero > .wrap > .zip-hold { order: 3; }
  .hero > .wrap > .hero-deck { order: 4; }
  .hero > .wrap > .samples { order: 5; }
  .hero > .wrap > .coverage { order: 6; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ══ B4 (t_e94e1830) — append-only additions for the here band ═════════
   A1 provided .sq (gap only, no column count), .lg, .callout, .namerow,
   .morelink. Everything below is new: grid column variants, the square
   stage colours, the dashed "no figure" square and legend swatches, the
   ink-band big numeral used by D3b, and source spacing. Nothing above
   this block is edited. */

/* D3 grid: 15 columns per handoff; 20 for counties above 45 sites;
   D3c running-grid: 12 columns per handoff. */
.sq.sq-15 { grid-template-columns: repeat(15, minmax(0, 1fr)); max-width: 900px; }
.sq.sq-20 { grid-template-columns: repeat(20, minmax(0, 1fr)); max-width: 900px; }
.sq.sq-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); max-width: 720px; }

/* Stage colours — one code everywhere (handoff): running amber,
 * under construction paper, permitted teal, proposed red. On the ink
 * band the handoff's bright variants keep every stage readable. */
.sq-amber { background: var(--amber); }
.sq-paper { background: var(--paper); }
.sq-teal  { background: var(--teall); }
.sq-red   { background: var(--redb); }

/* D3c: a running site that publishes a figure vs one that publishes
 * nothing (2px dashed line2 outline per handoff). */
.sq-dashed { border: 2px dashed var(--line2); }

/* Legend swatches for both grids. */
.lg i.lg-amber  { background: var(--amber); }
.lg i.lg-paper  { background: var(--paper); }
.lg i.lg-teal   { background: var(--teall); }
.lg i.lg-red    { background: var(--redb); }
.lg i.lg-dashed { border: 2px dashed var(--line2); background: transparent; }

/* Big serif numeral on the amber D3b band (ink, per handoff). */
.num-ink { color: var(--ink); }

/* === B6 === appending block (B6 ASKING PERMISSION, t_f2ed921d, 2026-09-23).
   Three helpers the dossier hearing panel needed that A1 did not carry.
   Append-only per card law: everything above this block belongs to A1. */
.split .nums .nums-right { text-align: right; }
.split .nums .num-against { color: var(--redb); }
.hear .body2.note-it { font-style: italic; }

/* === B2 === (appended by card B2 PLACE — everything above belongs to A1; do not edit here) */
/* D1 short-version bubble colours (handoff D1: 1 red, 2 amber with ink text, 3 teal, 4 ink) */
.brief-row .b-n-1 { background: var(--red); color: #fff; }
.brief-row .b-n-2 { background: var(--amber); color: var(--ink); }
.brief-row .b-n-3 { background: var(--teal); color: #fff; }
.brief-row .b-n-4 { background: var(--ink); color: var(--paper); }

/* ═══ B5 ═══ D4/D4b/D4c (on its way; template.html stage bands). Rules A1
   did not provide. Append-only; nothing above this block is edited. ═══ */

/* The stage numeral row: template.html .row-flex pair, numeral + title. */
.stage-title { font: 700 clamp(32px, 4vw, 52px)/1 var(--serif); }

/* Card list top rule: template.html uses border-top in the stage colour. */
.stage-sites { margin-top: 36px; border-top: 2px solid var(--ink); }
.stage-sites-teal { border-top-color: var(--teal); }

/* The card's own tag needs headroom above the name (template.html margin). */
.site .tag { margin-bottom: 14px; }

/* Way-band top rule inside stage-sites stays visible on 390px: cards keep
   one column (A1 media query provides it) with the photo above the copy. */
/* B6 (scoped to dossiers; .facts is shared with B5's stage cards): dossier
   fact lines carry sentence-length source labels; A1's nowrap (right for short
   domain links on stage cards) forces a 444px line at 390px here. Let them
   wrap and break long tokens — inside .dos only. */
.dos .facts a { white-space: normal; overflow-wrap: anywhere; }
.dos .facts li { overflow-wrap: anywhere; }

/* === B8 === appended block (B8 APPENDIX, t_d2c1c6fc, 2026-09-23).
   Everything above this block belongs to A1 or another Wave B card; this
   block is append-only and never edits earlier rules. */

/* D6 mix bar segments — one class per source family (handoff D6):
   gas ink, nuclear teal, solar amber, wood warn, coal red; families the
   handoff map does not colour (hydro, wind, petroleum, EIA "other") take
   the neutral alt tone, never an urgency colour they do not mean. */
.mixseg-ink   { background: var(--ink); }
.mixseg-teal  { background: var(--teal); }
.mixseg-amber { background: var(--amber); }
.mixseg-warn  { background: var(--warn); }
.mixseg-red   { background: var(--red); }
.mixseg-alt   { background: var(--line); }

/* D6/D7 reading lines — handoff D6 sub-line and D7 action line. */
.deck-s { font: 400 clamp(22px, 2.4vw, 28px)/1.4 var(--serif); color: var(--ink2); max-width: 40ch; }

/* D8 appendix head rule — the handoff draws a 3px double rule here
   (A1's .head-rule, used elsewhere, is the 2px solid). */
.apx-head { padding-bottom: 12px; border-bottom: 3px double var(--ink); }

/* D8 note under the rate-case rows when the state has more than shown. */
.apx-note { font: italic 400 14px/1.5 var(--serif); color: var(--ink3); margin-top: 10px; }

/* === B1 === source links inside the national-band source lines (H2–H6).
 * A1 styled the source-line text per band (styles.css §H2–H5, .nat-src) but the
 * global anchor rule (red, styles.css line 56) outranks it for the <a> inside.
 * Keep each band's designed source-line colour on the link; underline stays. */
.nat-src a { text-decoration: underline; text-underline-offset: 3px; }
.b-amber .nat-src a { color: var(--ink); }
.b-paper .nat-src a, .b-paper2 .nat-src a { color: var(--ink3); }
.b-teal .nat-src a { color: #CFE3E0; }
.b-red .nat-src a { color: #E8C3BD; }

/* === B3 === (t_30c75b61 — D2 bill bands; rules A1 did not provide) */
/* The bold rank numeral inside the D2d sentence — handoff: "#22 of 51." in amber on ink. */
b.amber { color: var(--amber); }


/* ══ 2.3.0 (2026-09-29) — the redraft layer, kept by Boss. Figures are one sentence, number and words
   the same size. Source: operations/homepage-redraft-2026-09/. ══ */



/* ── the figure sentence ─────────────────────────────────────────────── */
.fig {
  font: 700 clamp(46px, 7.4vw, 112px)/1.02 var(--serif);
  letter-spacing: -.028em;
  max-width: 15ch;
  margin: 0;
  text-wrap: balance;
}
.fig .fig-n { white-space: nowrap; }
.fig-ast {
  font-size: .5em; vertical-align: .75em; margin-left: .06em;
  font-weight: 400; letter-spacing: 0;
}
.fig-kick { margin-bottom: 28px; }
.fig-src {
  font: 600 15px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  margin-top: 28px;
}
.fig-full {
  margin-top: 36px; padding-top: 22px; max-width: 62ch;
  border-top: 1px solid currentColor;
}
.fig-full-k { opacity: .8; }
.fig-q {
  margin: 14px 0 0; padding: 0;
  font: italic 400 clamp(19px, 1.7vw, 22px)/1.5 var(--serif);
}
.fig-meta { font: 400 15px/1.5 var(--sans); margin-top: 14px; opacity: .9; }
.fig-meta a { font-weight: 600; }

/* band colours for the number and the source furniture */
.b-amber .fig-n { color: var(--red); }
.b-amber .fig-full { border-color: rgba(14, 34, 51, .35); }
.b-amber .fig-meta a, .b-amber .fig-src { color: var(--ink); }
.b-red .fig-n { color: var(--amtint); }
.b-red a, .b-teal a { color: #fff; }
.b-red .fig-full, .b-teal .fig-full { border-color: rgba(255, 255, 255, .45); }
.b-teal .fig-n { color: var(--amtint); }
.b-paper .fig-n, .b-paper2 .fig-n { color: var(--teal); }
.b-paper .fig-full, .b-paper2 .fig-full { border-color: var(--line2); }
.b-paper .fig-meta, .b-paper2 .fig-meta { color: var(--ink2); }
.b-paper .fig-meta a, .b-paper2 .fig-meta a { color: var(--teal); }

/* the counterweight: same size as the others (brand law 5.4), drawn between
 * dashed contours (brand law 4.4) so it reads as the other side. */
.fig-counter .wrap { border-top: 2px dashed var(--line2); border-bottom: 2px dashed var(--line2); padding: 40px 0; }
.fig-counter .fig { color: var(--ink); max-width: 17ch; }
.fig-counter .fig-kick { color: var(--ink3); }

/* the NDA bars sit under the sentence */
.fig-band .ndarow { margin-top: 32px; }

/* ── the same treatment inside the record page ───────────────────────── */
.fig-on-red   { color: #fff; }
.fig-on-red .fig-n { color: var(--amtint); }
.fig-on-ink   { color: var(--paper); }
.fig-on-ink .fig-n { color: var(--amber); }
.fig-on-amber { color: var(--ink); }
.fig-on-amber .fig-n { color: var(--red); }
.fig-on-teal  { color: #fff; }
.fig-on-teal .fig-n { color: var(--amtint); }
.fig-on-paper { color: var(--ink); }
.fig-on-paper .fig-n { color: var(--red); }
.fig-on-paper .fig-n.num-teal { color: var(--teal); }
.b-red .deck-s, .deck-on-red { color: #F6E6E3; }
.deck-on-ink  { color: #DFE5E3; }
.deck-on-amber { color: var(--ink); }
.deck-on-teal { color: #E6EFED; }
.b-red .deck-s { max-width: 44ch; }
.fig.mt-24 { margin-top: 24px; }
.fig.mt-32 { margin-top: 32px; }

/* ── small additions the new copy needed ─────────────────────────────── */
.chips-note { font: 400 14px/1.45 var(--sans); color: var(--ink3); margin-top: 12px; max-width: 62ch; }
.spoke {
  font: 700 clamp(28px, 3.6vw, 46px)/1.12 var(--serif); letter-spacing: -.015em;
  color: var(--paper); margin-top: 16px; max-width: 22ch;
}
.hear .spoke + .vote { font-weight: 400; font-size: clamp(20px, 2.2vw, 26px); }
.rule-lede { font: 400 17px/1.5 var(--serif); margin: 14px 0 0; max-width: 62ch; }
.bill-h2-long { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35; }
.b-ink .deck-s { color: #DFE5E3; }

/* a same-size figure never pushes the page sideways on a phone */
@media (max-width: 760px) {
  .fig { font-size: clamp(34px, 10.6vw, 52px); max-width: none; }
  .fig .fig-n { white-space: normal; }
  .fig-src { font-size: 13px; }
  .fig-q { font-size: 18px; }
  .spoke { font-size: clamp(26px, 8vw, 34px); }
}

/* Boss 2026-09-29: the hero headline and the ZIP box, ~20% smaller. */
.hero-h1 { font-size: clamp(42px, 6.72vw, 99px); }
.zipbox .zip-input { font-size: 35px; padding: 13px 16px; }
.zipbox .zip-btn { font-size: 13px; padding: 14px 21px; }
.hero .zip-hold { max-width: 496px; }
@media (max-width: 760px) {
  .hero-h1 { font-size: clamp(30px, 8.8vw, 42px); }
  .zipbox .zip-input { font-size: 27px; padding: 10px 11px; min-width: 120px; }
  .zipbox .zip-btn { padding: 13px 14px; }
}