/* ===========================================================
   Articles: the walkthroughs under /city-of-franklin/<slug> and the
   explainers under /how-franklin-works/<slug>. Loaded after
   monocle.css by src/components/article/ArticlePage.astro.
   One component set for every article; an article that differs from
   it carries a few lines in src/content/articles/<slug>/style.css,
   which the page inlines after this sheet.

   The components were written against the old site.css token names,
   so the :root block maps those names onto the Monocle palette.
   monocle.css also defines .ledger (the section-front list); the
   .ledger here is the won/unresolved panel and wins on these pages
   because this sheet loads second.
   =========================================================== */
:root {
  --canvas:        var(--editorial-white);
  --surface-soft:  var(--paper-grey);
  --surface-tint:  var(--paper-grey);
  --hairline:      var(--gallery-border);
  --rule-strong:   var(--gallery-border);
  --ink:           var(--press-black);
  --ink-muted:     var(--ink-charcoal);
  --ink-soft:      var(--dispatch-grey);
  --mint:          var(--dispatch-grey);  /* sage roles go monochrome */
  --mint-border:   var(--press-black);
  --mint-deep:     var(--press-black);
  --mint-wash:     var(--paper-grey);     /* "won" ledger panel */
  --uv:            var(--press-black);    /* terracotta accents become press black */
  --uv-rule:       var(--ink-charcoal);
  --link-hover:    var(--dispatch-grey);
  --flame:         var(--press-black);    /* russet accents become press black */
  --flame-rule:    var(--alert-red);      /* "unresolved" warning voice only */
  --flame-wash:    var(--paper-grey);     /* "unresolved" ledger panel */
  --radius-sm: 2px; --radius: var(--radius-cards); --radius-lg: 8px; --r-pill: var(--radius-buttons);
}

/* Article section rhythm */
main > section { padding: 52px 24px; border-bottom: 1px solid var(--rule-strong); }
main > section:last-of-type { border-bottom: 0; }
/* Sections already carry the 24px gutter; don't stack .wrap's on top. */
main section .wrap { padding-left: 0; padding-right: 0; }
@media (max-width: 640px) { main > section { padding: 40px 20px; } }

/* Centered reading column for long-form prose + figures */
.read { max-width: 760px; margin-left: auto; margin-right: auto; }

/* ------- Lead figure under the header ------- */
.hero-figure { margin: 40px auto 0; }

/* ------- Figures ------- */
figure { margin: 0; }
.read figure { margin: 36px 0; }
figcaption {
  font-family: var(--sans);
  font-size: 10px; line-height: 1.6;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-soft); margin-top: 12px;
}
figcaption .credit { color: var(--ink); }

.read figure img,
.hero-figure img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
}

/* ------- Stat strip ------- */
.statstrip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--hairline);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  overflow: hidden; margin: 0 auto;
}
.statstrip .cell { background: var(--surface-soft); padding: 22px 18px; }
.statstrip .n {
  font-family: var(--serif);
  font-weight: 700; font-size: 34px; line-height: 1;
  letter-spacing: -0.01em; color: var(--ink);
}
.statstrip .n .uvtxt    { color: var(--uv); }
.statstrip .n .flametxt { color: var(--flame); }
.statstrip .n .pct      { font-size: 20px; }
.statstrip .n .sm       { font-size: 22px; }
.statstrip .l {
  font-family: var(--sans);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--ink-muted); margin-top: 9px; line-height: 1.4;
}

/* ------- Body prose ------- */
.body-block + .body-block { margin-top: 4px; }
.body-block h2 {
  font-family: var(--serif);
  font-weight: 700; font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.13; letter-spacing: -0.01em;
  margin: 52px 0 6px; display: flex; align-items: baseline; gap: 14px;
}
.body-block:first-child h2 { margin-top: 4px; }
.body-block h2 .num {
  font-family: var(--sans);
  font-size: 13px; font-weight: 700; color: var(--uv);
  letter-spacing: 0.04em; flex: none; transform: translateY(-0.3em);
}
.body-block p {
  margin: 18px 0; color: var(--ink-muted);
  font-size: 18px; line-height: 1.62; max-width: 64ch;
}
.body-block p a {
  color: var(--uv); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.body-block p a:hover { color: var(--link-hover); }
.body-block strong { color: var(--ink); font-weight: 700; }
.lead-cap::first-letter {
  font-family: var(--serif);
  font-weight: 700; float: left;
  font-size: 3.4rem; line-height: 0.8;
  padding: 6px 12px 0 0; color: var(--uv);
}

/* ------- Pull callout ------- */
.callout {
  border-left: 3px solid var(--ink);
  padding: 4px 0 4px 24px; margin: 36px 0;
  font-family: var(--serif);
  font-size: clamp(20px, 2.6vw, 28px); line-height: 1.3;
  font-weight: 700; letter-spacing: -0.01em; color: var(--ink);
  max-width: 60ch;
}

/* ------- Map and diagram frame ------- */
.mapwrap {
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--surface-soft); padding: 10px;
}
svg.map { display: block; width: 100%; height: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; }
.legend span { display: flex; align-items: center; gap: 7px; }
.legend i { width: 18px; height: 0; border-top-width: 3px; border-top-style: solid; display: inline-block; }

/* A flow diagram (svg.flow) gets a wider frame, and below ~720px its
   labels would scale down past legibility, so the frame scrolls instead
   of shrinking. */
.mapwrap:has(> svg.flow) { padding: 14px; }
svg.flow { display: block; width: 100%; height: auto; }
@media (max-width: 720px) {
  .mapwrap:has(> svg.flow) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  svg.flow { min-width: 860px; }
}

/* ------- Bar tables: costs (.costs) and deadlines (.clocks) ------- */
.costs { margin: 30px 0 6px; border-top: 1px solid var(--rule-strong); }
.cost-row {
  display: grid; grid-template-columns: 190px 1fr 118px; gap: 16px;
  align-items: center; padding: 13px 8px;
  border-bottom: 1px solid var(--hairline);
}
.cost-row .cost-label {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.03em; color: var(--ink); line-height: 1.35;
}
.cost-row .cost-bar { height: 12px; background: var(--surface-soft); border-radius: var(--radius-sm); }
.cost-row .cost-bar span {
  display: block; height: 100%; min-width: 3px;
  background: var(--ink); border-radius: var(--radius-sm);
}
.cost-row .cost-val {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  color: var(--ink-muted); text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cost-row.total { border-bottom: 0; padding-top: 18px; }
.cost-row.total .cost-bar { background: transparent; }
.cost-row.total .cost-label,
.cost-row.total .cost-val { color: var(--ink); font-size: 13px; }
.cost-foot {
  font-family: var(--sans); font-size: 11px; line-height: 1.55;
  color: var(--ink-soft); margin: 12px 0 0; max-width: 70ch;
}

.clocks { margin: 30px 0 6px; border-top: 1px solid var(--rule-strong); }
.clock-row {
  display: grid; grid-template-columns: 196px 1fr 124px; gap: 16px;
  align-items: center; padding: 13px 8px;
  border-bottom: 1px solid var(--hairline);
}
.clock-row .clock-label {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.03em; color: var(--ink); line-height: 1.35;
}
.clock-row .clock-label small {
  display: block; font-weight: 400; letter-spacing: 0;
  color: var(--ink-soft); font-size: 11px; margin-top: 3px;
}
.clock-row .clock-bar { height: 12px; background: var(--surface-soft); border-radius: var(--radius-sm); }
.clock-row .clock-bar span {
  display: block; height: 100%; min-width: 3px;
  background: var(--ink); border-radius: var(--radius-sm);
}
.clock-row .clock-bar span.miss { background: var(--flame-rule); }
.clock-row .clock-val {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  color: var(--ink-muted); text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.clock-foot {
  font-family: var(--sans); font-size: 11px; line-height: 1.55;
  color: var(--ink-soft); margin: 12px 0 0; max-width: 70ch;
}

/* ------- Won / Unresolved ledger ------- */
.ledger {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--rule-strong);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  overflow: hidden; margin: 36px 0;
}
.ledger > div { padding: 24px; }
.ledger .won  { background: var(--mint-wash); }
.ledger .open { background: var(--flame-wash); }
.ledger h3 {
  font-family: var(--sans);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px;
}
.ledger .won h3  { color: var(--ink); }
.ledger .open h3 { color: var(--flame-rule); }
.ledger ul { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.5; }
.ledger li {
  padding: 9px 0; border-top: 1px solid var(--hairline);
  display: flex; gap: 10px; color: var(--ink);
}
.ledger li:first-child { border-top: 0; }
.ledger li::before { content: "\203A"; font-family: var(--sans); color: inherit; opacity: 0.5; flex: none; }

/* ------- Timeline ------- */
.timeline { margin: 30px 0 6px; border-top: 1px solid var(--rule-strong); }
.tl {
  display: grid; grid-template-columns: 120px 1fr; gap: 20px;
  padding: 18px 8px; border-bottom: 1px solid var(--hairline); align-items: start;
}
.tl .when {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--uv); padding-top: 3px;
}
.tl .what { font-size: 16px; line-height: 1.5; color: var(--ink-muted); }
.tl .what b { font-weight: 700; color: var(--ink); }
.tl.now { background: var(--mint-wash); }
.tl.now .when { color: var(--ink); }
.tl.future .when { color: var(--ink-soft); }
.tl.deadline .when { color: var(--flame-rule); }

/* ------- Sources ------- */
.note { font-size: 15px; color: var(--ink-muted); font-style: italic; margin: 0 0 8px; max-width: 64ch; }
.sources ol { margin: 18px 0 0; padding-left: 0; list-style: none; counter-reset: s; }
.sources li {
  counter-increment: s; font-size: 15px; line-height: 1.5;
  padding: 12px 0 12px 30px; border-top: 1px solid var(--hairline);
  color: var(--ink-muted); position: relative;
}
.sources li:first-child { border-top: 0; }
.sources li::before {
  content: counter(s); position: absolute; left: 0; top: 13px;
  font-family: var(--sans);
  font-size: 11px; color: var(--uv); font-weight: 700;
}
.sources b { color: var(--ink); font-weight: 700; }
.sources a { color: var(--uv); text-decoration: underline; text-underline-offset: 2px; }
.sources a:hover { color: var(--link-hover); }

/* ------- Data table: the explainers' rate and figure tables. The same
   look as the neighborhood guides' .data-table (styles/neighborhood.css),
   with an ink header rule; under 640px each row becomes a card labelled
   from data-label. ------- */
.table-scroll { overflow-x: auto; margin: 30px 0 6px; }
.data-table { width: 100%; border-collapse: collapse; font: 400 14px/1.45 var(--sans); }
.data-table th {
  text-align: left;
  font: 700 10px var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 16px 10px 0; border-bottom: 1px solid var(--ink);
}
.data-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; color: var(--ink-muted); }
.data-table td:first-child { font: 700 15px/1.4 var(--serif); color: var(--ink); }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table td:last-child, .data-table th:last-child { padding-right: 0; }
.data-table td.num strong { font: 700 15px/1.4 var(--serif); color: var(--ink); }
.data-table .sub { display: block; font: 400 12px/1.4 var(--sans); color: var(--ink-soft); margin-top: 2px; white-space: normal; }
.body-block p.table-foot, .table-foot { font: 400 13px/1.55 var(--sans); color: var(--ink-soft); margin: 10px 0 0; max-width: 64ch; }
.table-foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.table-foot a:hover { color: var(--link-hover); }

/* ------- Bill: a bill or estimate set out line by line, label left and
   amount right, a total under an ink rule. ------- */
.bill {
  margin: 30px 0 6px; padding: 8px 24px 14px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--surface-soft);
  font-family: var(--sans);
}
.bill-head {
  padding: 12px 0 10px; border-bottom: 1px solid var(--ink);
  font: 700 10px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
}
.bill-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--hairline);
  font-size: 14px; color: var(--ink-muted);
}
.bill-row[hidden] { display: none; }
.bill-row small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-soft); margin-top: 2px; }
.bill-row b { font: 700 17px/1.2 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bill-row.total { border-top: 1px solid var(--ink); border-bottom: 0; margin-top: -1px; padding-top: 14px; color: var(--ink); font-weight: 700; }
.bill-row.total b { font-size: 26px; }
.bill-row.after { border-bottom: 0; padding-top: 0; }
.bill-row.after b { font-size: 15px; }

/* ------- Estimator form: the inputs above a .bill. Hidden in the markup
   and shown by the page's script, so without it the reader gets the
   worked example the form starts from. ------- */
.calc { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; margin: 30px 0 -14px; }
.calc[hidden] { display: none; }
.calc label { display: block; font: 700 10px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.calc input, .calc select {
  display: block; width: 100%; margin-top: 6px;
  background: var(--canvas); border: 1px solid var(--rule-strong); border-radius: var(--radius-inputs);
  padding: 11px 14px; font: 400 15px var(--sans); color: var(--ink);
  text-transform: none; letter-spacing: 0;
}
.calc input:focus-visible, .calc select:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }

@media (max-width: 640px) {
  .table-scroll { overflow: visible; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; }
  .data-table thead { display: none; }
  .data-table tr { padding: 16px 0 18px; border-bottom: 1px solid var(--hairline); }
  .data-table tr:last-child { border-bottom: 0; }
  .data-table td { padding: 0; border: 0; }
  .data-table td:first-child { font-size: 17px; margin-bottom: 8px; }
  .data-table td.num { text-align: left; }
  .data-table td[data-label] { margin-top: 8px; font-size: 14px; }
  .data-table td[data-label]::before {
    content: attr(data-label);
    display: block; margin-bottom: 2px;
    font: 700 10px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  /* A table of short figures keeps them side by side under the row's name:
     .cols-4 four to a line, .cols-2 two. */
  .data-table.cols-4 tr, .data-table.cols-2 tr { display: grid; column-gap: 16px; }
  .data-table.cols-4 tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .data-table.cols-2 tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .data-table.cols-4 td:first-child, .data-table.cols-2 td:first-child { grid-column: 1 / -1; margin-bottom: 0; }
  .bill { padding: 4px 16px 10px; }
  .calc { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .statstrip { grid-template-columns: repeat(2, 1fr); }
  .ledger { grid-template-columns: 1fr; }
  .tl { grid-template-columns: 1fr; gap: 4px; }
  .cost-row { grid-template-columns: 1fr 96px; gap: 6px 12px; }
  .cost-row .cost-bar { grid-column: 1 / -1; }
  .clock-row { grid-template-columns: 1fr 104px; gap: 6px 12px; }
  .clock-row .clock-bar { grid-column: 1 / -1; }
}

/* ------- Inline sponsor band: Newsprint Cream promotional band (the
   page's one promo surface), rule-divided columns, black pill CTAs.
   Clearly labeled sponsored, flat like every other band in the
   identity. ------- */
.sponsor-section {
  background: var(--newsprint-cream);
  padding: 40px 24px 44px;
  border-top: 1px solid rgba(0,0,0,.2);
  border-bottom: 1px solid rgba(0,0,0,.2);
}
.sponsor-kicker {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-charcoal);
  margin-bottom: 18px;
}
.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  border-top: 1px solid rgba(0,0,0,.2);
}
.sponsor-card {
  padding: 22px 24px 4px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.sponsor-card + .sponsor-card {
  border-left: 1px solid rgba(0,0,0,.2);
  padding-left: 24px;
}
.sponsor-card:last-child { padding-right: 0; }
/* Card 1: sponsor identity */
.sponsor-card.info .sponsor-logo {
  display: block;
  width: auto;
  height: 48px;
  max-width: 170px;
  object-fit: contain;
  object-position: left center;
}
.sponsor-card.info h3 {
  font-family: var(--serif);
  font-size: 23px; font-weight: 700; color: var(--ink);
  line-height: 1.2; letter-spacing: -0.01em;
  margin-top: 16px; text-wrap: pretty;
}
.sponsor-card.info p {
  margin-top: 10px; font-size: 13.5px; line-height: 1.55;
  color: var(--ink-muted);
}
.sponsor-card.info .sponsor-credit {
  margin-top: auto; padding-top: 14px; margin-bottom: 18px;
  border-top: 1px solid rgba(0,0,0,.2);
  font-family: var(--sans);
  font-size: 10px; color: var(--ink-charcoal); line-height: 1.55; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  align-self: stretch;
}
.sponsor-card.info .sponsor-credit strong { color: var(--ink); font-weight: 700; }
/* Cards 2 to 4: actions */
.sponsor-card.action .action-idx {
  font-family: var(--sans);
  font-size: 10.5px; color: var(--ink-charcoal); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.sponsor-card.action h4 {
  font-family: var(--serif);
  font-size: 21px; font-weight: 700; color: var(--ink);
  line-height: 1.2;
  margin-top: 10px;
}
.sponsor-card.action p {
  margin-top: 8px; font-size: 13.5px; line-height: 1.55;
  color: var(--ink-muted);
  margin-bottom: 20px;
}
.sponsor-card.action .sponsor-btn {
  margin-top: auto; margin-bottom: 18px;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--canvas);
  border: 0; border-radius: var(--r-pill);
  padding: 12px 18px;
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--ink);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.sponsor-card.action .sponsor-btn:hover { background: var(--canvas); color: var(--ink); transform: translateY(-2px); }
.sponsor-card.action .sponsor-btn:active { transform: none; }
.sponsor-card.action .sponsor-btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.sponsor-card.action > :first-child { margin-top: 0; }
@media (max-width: 1100px) {
  .sponsor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sponsor-card.info { grid-column: 1 / -1; padding-right: 0; }
  .sponsor-card.action:nth-child(even) { border-left: 0; padding-left: 0; }
  .sponsor-card.action { border-top: 1px solid rgba(0,0,0,.2); }
}
@media (max-width: 640px) {
  .sponsor-section { padding: 30px 20px 34px; }
  .sponsor-grid { grid-template-columns: 1fr; }
  .sponsor-card + .sponsor-card { border-left: 0; padding-left: 0; }
  .sponsor-card { padding-right: 0; }
  .sponsor-card.action .sponsor-btn { align-self: stretch; justify-content: center; }
}

/* ===========================================================
   Reader poll: markup from src/components/article/Poll.astro,
   behavior in the shared /scripts/poll.js.
   =========================================================== */
.poll-section { padding: 56px 24px; background: var(--canvas); border-bottom: 1px solid var(--rule-strong); }
.poll {
  max-width: 560px; margin: 0 auto; background: var(--canvas);
  border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 32px;
}
.poll-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.poll-q-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.poll-q {
  font-family: var(--serif);
  font-size: 22px; line-height: 1.2; margin: 0; color: var(--ink);
  letter-spacing: -0.01em; flex: 1 1 auto;
}
.poll-tally {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-muted); white-space: nowrap;
}
.poll-tally .num { font-weight: 700; color: var(--ink); }
.poll-tally-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--alert-red); animation: pollPulse 2.4s ease-in-out infinite;
}
@keyframes pollPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(206,77,74,.6); }
  50%      { box-shadow: 0 0 0 7px rgba(206,77,74,0); }
}
.poll-total-num { display: inline-block; transition: color 200ms ease, transform 200ms ease; }
.poll-total-num.poll-tick { animation: pollTick 700ms ease-out; }
@keyframes pollTick {
  0%   { color: var(--alert-red); transform: scale(1.22); }
  100% { color: var(--ink);       transform: scale(1); }
}
.poll-eyebrow {
  display: inline-block; align-self: flex-start;
  font-family: var(--sans);
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: var(--ink); color: var(--canvas);
}
.poll-vote { display: flex; flex-direction: column; gap: 12px; }
.poll-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 0; background: transparent; border: 0; cursor: pointer;
  font-family: var(--sans); color: var(--ink);
  -webkit-tap-highlight-color: transparent; transition: transform 200ms ease;
}
.poll-btn:disabled { cursor: default; }
.poll-btn-icon {
  flex: 0 0 auto; width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: var(--radius);
  background: var(--ink); color: var(--canvas);
  transition: box-shadow 200ms ease, transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.poll-btn-icon svg { width: 18px; height: 18px; display: block; }
.poll-btn { opacity: 0; transform: translateY(8px); }
.poll.in-view .poll-btn { animation: pollBtnEnter 520ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.poll.in-view .poll-btn:nth-child(1) { animation-delay:  60ms; }
.poll.in-view .poll-btn:nth-child(2) { animation-delay: 180ms; }
.poll.in-view .poll-btn:nth-child(3) { animation-delay: 300ms; }
@keyframes pollBtnEnter { to { opacity: 1; transform: translateY(0); } }
.poll-btn-track {
  position: relative; flex: 1 1 auto; height: 44px;
  border: 1px solid var(--rule-strong); border-radius: var(--r-pill);
  background: var(--surface-tint); overflow: hidden;
  transition: background 120ms ease, transform 120ms ease;
}
.poll-btn-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0%; transition: width 800ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.poll-btn-fill[data-choice="up"]   { background: var(--ink); }
.poll-btn-fill[data-choice="down"] { background: var(--ink-soft); }
.poll-btn-fill[data-choice="idk"]  { background: var(--hairline); }
.poll-btn-content {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; z-index: 1; pointer-events: none;
  font-size: 14px; font-weight: 700; color: var(--ink);
}
.poll-btn-pct { font-variant-numeric: tabular-nums; font-weight: 700; margin-left: auto; }
.poll-btn[data-choice="up"].voted .poll-btn-pct  { color: var(--canvas); }
.poll-btn[data-choice="idk"].voted .poll-btn-pct { color: var(--ink); }
.poll-btn:hover:not(:disabled) { transform: translateY(-1px); }
.poll-btn:hover:not(:disabled) .poll-btn-icon { transform: rotate(-8deg); }
.poll-btn[data-choice="up"]:hover:not(:disabled)   .poll-btn-track { background: var(--hairline); }
.poll-btn[data-choice="down"]:hover:not(:disabled) .poll-btn-track { background: var(--hairline); }
.poll-btn[data-choice="idk"]:hover:not(:disabled)  .poll-btn-track { background: var(--hairline); }
.poll-btn[data-choice="down"]:hover:not(:disabled) .poll-btn-content { color: var(--ink); }
.poll-btn:active:not(:disabled) .poll-btn-track { transform: scale(0.99); }
.poll-btn:focus-visible { outline: none; }
.poll-btn:focus-visible .poll-btn-icon,
.poll-btn:focus-visible .poll-btn-track { outline: 2px solid var(--uv); outline-offset: 2px; }
.poll-btn.is-yours .poll-btn-icon { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .poll-btn { opacity: 1; transform: none; animation: none; }
  .poll.in-view .poll-btn { animation: none; }
  .poll-tally-dot { animation: none; }
  .poll-total-num.poll-tick { animation: none; }
}
.poll-thanks {
  display: block; font-family: var(--sans);
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--uv); font-weight: 700; margin-top: 16px; text-align: center;
}
.poll-thanks[hidden] { display: none; }
@media (max-width: 480px) {
  .poll-section { padding: 40px 16px; }
  .poll { padding: 24px 20px; }
  .poll-head { margin-bottom: 24px; gap: 12px; }
  .poll-q { font-size: 19px; }
  .poll-vote { gap: 10px; }
  .poll-btn { gap: 10px; }
  .poll-btn-icon { width: 40px; height: 40px; font-size: 18px; }
  .poll-btn-track { height: 40px; }
  .poll-btn-content { padding: 0 14px; font-size: 13px; }
}

/* ------- Subscribe band: Ink Charcoal panel, yellow subscribe pill ------- */
.cta-band .pitch {
  background: var(--ink-charcoal);
  border-radius: var(--radius);
  padding: 48px;
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  gap: 24px; align-items: center;
}
.cta-band .pitch h2 {
  max-width: 24ch;
  font: 700 clamp(26px, 3.6vw, 36px)/1.125 var(--serif);
  letter-spacing: -0.01em;
  color: var(--editorial-white);
  margin-top: 12px;
}
.cta-band .pitch .kicker { color: var(--text-inverse-faint); }
.cta-band .pitch p {
  color: var(--text-inverse-soft);
  font: 400 16px/1.5 var(--serif);
  margin-top: 12px; max-width: 56ch;
}
.cta-band .btn {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 13px var(--sans);
  background: var(--signal-yellow); color: var(--press-black);
  padding: 14px 24px;
  border-radius: var(--r-pill);
  text-decoration: none; white-space: nowrap;
  transition: background var(--t-default), color var(--t-default), transform var(--t-default);
}
.cta-band .btn:hover { background: var(--editorial-white); color: var(--press-black); transform: translateY(-2px); }
.cta-band .btn:active { transform: none; }
.cta-band .btn svg { width: 14px; height: 14px; }
@media (max-width: 760px) {
  .cta-band .pitch { grid-template-columns: 1fr; padding: 32px 24px; }
}

/* ------- "On this page" (NAVIGATION-AUDIT.md 3.6) -------
   The numbered sections as a row of links under the hero, drawn by
   ArticlePage from the body's own headings. The row pins to the top as the
   reader scrolls (under the pinned bar when that is shown: --pin-top is set
   by scripts/site.js), scrolls sideways on a phone with a fade while more
   links are off to the right, and /scripts/article-jumps.js marks the
   section in view in Signal Yellow, the one "you are here" fill. */
.article-jumps {
  position: sticky;
  top: var(--pin-top, 0px);
  z-index: 20;
  background: var(--canvas);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-top: 40px;
  padding: 0;
}
.article-jumps-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.article-jumps-inner::-webkit-scrollbar { display: none; }
.article-jumps-inner.is-scrollable {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
.article-jumps-label {
  flex: none;
  font: 700 11px var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-right: 10px;
}
.article-jumps a {
  flex: 0 0 auto;
  font: 700 11px var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  transition: color var(--t-default), background var(--t-default);
}
.article-jumps a:hover { color: var(--blue-slate); }
.article-jumps a.is-active { color: var(--ink); background: var(--signal-yellow); }
.article-jumps a:focus-visible { outline: 2px solid var(--blue-slate); outline-offset: 2px; }
/* A jump lands clear of the pinned row and the pinned bar. */
main > section[id] { scroll-margin-top: calc(56px + var(--pin-top, 0px)); }
@media (max-width: 640px) {
  .article-jumps { margin-top: 28px; }
}