@import url("theme.css");

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.08rem/1.6 var(--serif); overflow-x: hidden; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }
.wrap { width: min(1120px, 92vw); margin: 0 auto; }
img { max-width: 100%; display: block; }

/* red marker highlight inside headings */
mark { background: none; color: inherit; position: relative; white-space: nowrap; }
mark::after { content: ""; position: absolute; left: -.08em; right: -.08em; bottom: .06em; height: .32em; background: var(--red); opacity: .55; z-index: -1; transform: skew(-8deg) rotate(-1deg); border-radius: 2px; }
.ink mark::after { opacity: .85; }

/* film grain overlay, used on photo sections */
.grain::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ---- Draft mode */
.draft-banner { display: none; }
body.draft .draft-banner { display: block; background: #FFF3B0; color: #6B5300; border-bottom: 1px solid #B59A2E; font: 500 .85rem/1.4 var(--sans); text-align: center; padding: .5rem 1rem; }
.verify { display: none; }
body.draft .verify { display: inline-block; margin-left: .4rem; vertical-align: middle; }

/* ---- Header + progress */
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(20,33,61,.92); backdrop-filter: blur(10px); color: var(--paper); border-bottom: 1px solid var(--line-on-ink); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; }
.brand { font: 700 1.05rem/1 var(--serif); color: var(--paper); text-decoration: none; }
.brand small { display: block; font: 500 .6rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-top: .3rem; }
.nav { display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
.nav a { color: var(--paper); font: 500 .76rem/1 var(--sans); text-decoration: none; opacity: .8; padding: .4rem 0; border-bottom: 2px solid transparent; }
.nav a:hover { opacity: 1; border-bottom-color: var(--gold); }
.nav .cta { background: var(--gold); color: var(--ink); padding: .55rem .85rem; border-radius: var(--radius); opacity: 1; font-weight: 700; border: 0; }
#progress { position: absolute; left: 0; bottom: -2px; height: 3px; width: 0; background: var(--red); transition: width .1s linear; }

/* ---- HERO: full-bleed portrait, duotone, grain */
.hero { position: relative; isolation: isolate; background: #0B1428; color: var(--paper); min-height: min(92vh, 900px); display: flex; align-items: flex-end; overflow: hidden; }
.hero-art { position: absolute; inset: 0; z-index: -2; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 92% 10%; filter: grayscale(1) contrast(1.25) brightness(.78); }
.hero-art::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(11,20,40,.98) 0%, rgba(11,20,40,.9) 32%, rgba(11,20,40,.45) 62%, rgba(11,20,40,.15) 100%),
    linear-gradient(180deg, rgba(11,20,40,.2) 0%, rgba(11,20,40,0) 40%, rgba(11,20,40,.95) 100%),
    radial-gradient(60% 70% at 80% 30%, rgba(200,16,46,.35), transparent 70%); }
.hero .wrap { position: relative; padding: clamp(6rem, 14vw, 10rem) 0 clamp(3rem, 6vw, 5rem); }
.hero .label { color: var(--gold); margin-bottom: 1rem; }
.hero h1.label { font-size: .72rem; font-weight: 600; margin-bottom: 2.2rem; opacity: .9; }
.hero blockquote { margin: 0 0 1rem; font: 400 clamp(2.4rem, 5.8vw, 5rem)/1.02 var(--serif); letter-spacing: -.02em; max-width: 16ch; text-shadow: 0 2px 30px rgba(0,0,0,.5); }
.hero .attrib { color: var(--paper); opacity: .75; margin-bottom: 2.4rem; }
.hero .answer { font: 700 clamp(1.8rem, 4vw, 3rem)/1.1 var(--serif); margin: 0 0 1.2rem; }
.hero .answer span { color: var(--gold); }
.hero .lede { max-width: 36rem; font-size: 1.15rem; opacity: .9; }
.hero .cities { font: 500 .78rem/1.6 var(--sans); letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-top: 1.6rem; }
.hero .credit { position: absolute; right: 1rem; bottom: .8rem; font: 400 .62rem/1.4 var(--sans); opacity: .5; max-width: 22rem; text-align: right; }

/* ---- Counters */
.counters { background: var(--ink-2); color: var(--paper); border-top: 1px solid var(--line-on-ink); }
.counters .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.counter { padding: 1.6rem 1.2rem 1.5rem; border-right: 1px solid var(--line-on-ink); }
.counter:last-child { border-right: 0; }
.counter .num { font: 700 3rem/1 var(--serif); letter-spacing: -.02em; color: var(--paper); }
.counter .num.red { color: #FF5A6E; }
.counter .what { font: 500 .8rem/1.45 var(--sans); color: rgba(246,241,231,.7); margin-top: .5rem; }
.counter .what b { color: var(--paper); }

/* ---- Sections + reveal */
section { position: relative; padding: clamp(4rem, 8vw, 7rem) 0; border-bottom: 1px solid var(--line); }
section .kicker { color: var(--red); margin-bottom: 1rem; }
section .intro { max-width: 46rem; font-size: 1.2rem; margin: 1.2rem 0 2.6rem; color: #2a3651; }
.ink { background: var(--ink); color: var(--paper); }
.ink h2, .ink .quote, .ink a { color: var(--paper); }
.ink .attrib, .ink .source { color: rgba(246,241,231,.65); }
.ink .intro { color: rgba(246,241,231,.85); }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* photo-backed dark section */
.photo-bg { isolation: isolate; overflow: hidden; }
.photo-bg .bg { position: absolute; inset: 0; z-index: -2; }
.photo-bg .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: grayscale(1) contrast(1.2) brightness(.55); transform: scale(1.04); }
.photo-bg .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,33,61,.92) 0%, rgba(20,33,61,.78) 40%, rgba(20,33,61,.96) 100%), radial-gradient(50% 60% at 70% 20%, rgba(200,16,46,.3), transparent 70%); }
.photo-bg .credit { font: 400 .62rem/1.4 var(--sans); opacity: .5; margin-top: 2rem; }

/* ---- Evidence exhibits (screenshots of government records) */
.evidence { position: relative; margin: 2.2rem 0; background: #fff; padding: .6rem; border: 1px solid var(--line); box-shadow: 0 30px 60px -20px rgba(20,33,61,.45), 0 2px 6px rgba(20,33,61,.1); transform: rotate(-.6deg); transition: transform .4s ease; }
.evidence:nth-of-type(even), .evidence.alt { transform: rotate(.5deg); }
.evidence:hover { transform: rotate(0) scale(1.01); }
.evidence img { width: 100%; border: 1px solid var(--line); }
.evidence .tab { position: absolute; top: -14px; left: 18px; background: var(--red); color: #fff; font: 800 .66rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: .45em .7em; box-shadow: 0 3px 8px rgba(0,0,0,.25); }
.evidence figcaption { font: 400 .72rem/1.5 var(--mono); color: var(--slate); padding: .6rem .3rem .2rem; }
.evidence figcaption b { color: var(--red); font-weight: 700; }
.ink .evidence { background: var(--paper); }
.two-up { display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; align-items: start; }
.two-up > * { min-width: 0; }

/* Said vs Did timeline */
.timeline { list-style: none; margin: 0; padding: 0; border-left: 3px solid var(--line); }
.timeline li { position: relative; padding: 0 0 2.4rem 2.2rem; }
.timeline li::before { content: ""; position: absolute; left: -9px; top: .4rem; width: 15px; height: 15px; border-radius: 50%; background: var(--slate); border: 3px solid var(--paper); }
.timeline li.did::before { background: var(--red); box-shadow: 0 0 0 6px rgba(200,16,46,.15); }
.timeline .when { font: 600 .72rem/1 var(--mono); color: var(--slate); letter-spacing: .06em; margin-bottom: .5rem; }
.timeline .quote { font-size: 1.5rem; }
.timeline .stamp { margin: .5rem 0; font-size: 1.1rem; }
.timeline .result { font-size: 1.1rem; margin-top: .4rem; }
.timeline .result b { color: var(--red); }
.timeline .evidence { margin: 1.2rem 0 .4rem; max-width: 640px; }

/* Cards */
.grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .8rem; }
.card .quote { font-size: 1.35rem; }
.card .quote::before { content: "\201C"; color: var(--red); font-size: 2.8rem; line-height: 0; vertical-align: -.9rem; margin-right: .1rem; }
.card .source { margin-top: auto; padding-top: .8rem; border-top: 1px dotted var(--line); }
.ink .card, .photo-bg .card { background: rgba(31,47,82,.75); border-color: var(--line-on-ink); backdrop-filter: blur(6px); }
.ink .card .source, .photo-bg .card .source { border-top-color: var(--line-on-ink); }
.card--pair .said, .card--pair .did { padding: 1rem; border-radius: 4px; }
.card--pair .said { background: var(--paper); }
.card--pair .did { background: #FBEFF1; border: 1px solid rgba(200,16,46,.25); }
.card--pair .quote { font-size: 1.2rem; margin: .4rem 0 .3rem; }
.card--pair .quote::before { content: none; }
.card--pair .facts { font-size: 1rem; }

/* face stamp: official portrait as a red-duotone medallion */
.face-stamp { display: flex; gap: 1.4rem; align-items: center; margin: 0 0 2rem; }
.face-stamp img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.3); box-shadow: 0 0 0 4px var(--paper), 0 0 0 7px var(--red); background: var(--red); mix-blend-mode: multiply; }
.face-stamp .who { font: 600 .78rem/1.5 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.face-stamp .who b { display: block; font: 700 1.2rem/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }

/* Claim vs Fact table */
.cvf { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.cvf th { text-align: left; font: 600 .7rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--slate); padding: .9rem 1rem; border-bottom: 2px solid var(--ink); }
.cvf td { padding: 1.1rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 1rem; }
.cvf td.claim { font-family: var(--serif); font-style: italic; width: 36%; font-size: 1.08rem; }
.cvf td.verdict { width: 1%; white-space: nowrap; }
.cvf td .source { display: block; margin-top: .5rem; }
.cvf .tag { font-size: .72rem; padding: .35em .7em; }

/* Receipts */
.receipt { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem; box-shadow: var(--shadow); font-family: var(--mono); font-size: .86rem; }
.receipt h3 { font-family: var(--sans); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); margin-bottom: 1rem; }
.receipt .row { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px dotted var(--line); }
.receipt .row.total { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: .5rem; padding-top: .7rem; font-weight: 700; font-size: 1.05rem; }
.receipt .row.total .amt { color: var(--red); }
.receipt .foot { margin-top: 1rem; }

.facts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.facts-list li { padding-left: 1.3rem; position: relative; }
.facts-list li::before { content: "—"; position: absolute; left: 0; color: var(--red); }
.facts-list .source { display: block; margin-top: .25rem; }

.contrast { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.contrast .col { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow); }
.contrast .col h3 { margin-bottom: .9rem; font-size: 1.5rem; }
.contrast .col.them { border-top: 5px solid var(--red); }
.contrast .col.them h3 { color: var(--red); }
.contrast .col:not(.them) { border-top: 5px solid var(--gold); }

/* CTA with portrait, very dark */
.cta-block { text-align: center; padding: clamp(5rem, 12vw, 9rem) 0; isolation: isolate; overflow: hidden; }
.cta-block .bg { position: absolute; inset: 0; z-index: -2; }
.cta-block .bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; filter: grayscale(1) contrast(1.3) brightness(.35); }
.cta-block .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,33,61,.85), rgba(20,33,61,.75) 50%, rgba(20,33,61,.98)); }
.cta-block h2 { font-size: clamp(2.4rem, 6vw, 4.4rem); margin-bottom: 1rem; text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.cta-block .dates { font: 600 .9rem/1.6 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.8rem; }
.btn { display: inline-block; background: var(--gold); color: var(--ink); text-decoration: none; font: 700 .95rem/1 var(--sans); padding: 1rem 1.5rem; border-radius: var(--radius); margin: .3rem; }
.btn--ghost { background: transparent; color: var(--paper); border: 1px solid rgba(246,241,231,.4); }

footer { background: var(--paper-2); padding: 2.5rem 0; font: 400 .8rem/1.6 var(--sans); color: var(--slate); }
footer .disclaimer { display: inline-block; border: 1px solid var(--ink); padding: .6rem .9rem; color: var(--ink); font-weight: 600; margin-bottom: 1rem; }
footer p { margin-bottom: .6rem; }

@media (max-width: 760px) {
  .site-header .wrap { flex-direction: column; align-items: flex-start; }
  .counter { border-right: 0; border-bottom: 1px solid var(--line-on-ink); }
  .cvf td.claim { width: auto; }
  .two-up { grid-template-columns: 1fr; }
  .hero-art img { object-position: 70% 0; }
  .hero .credit { position: static; text-align: left; margin-top: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ================= Fact-check tiles ================= */
.claim-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.claim-tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.4rem 1.2rem; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: .7rem; transition: transform .2s ease, box-shadow .2s ease; }
.claim-tile:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(20,33,61,.08), 0 18px 40px rgba(20,33,61,.14); }
.claim-tile .tile-top { display: flex; gap: .4rem; align-items: center; }
.claim-tile blockquote { margin: 0; font: 400 1.15rem/1.4 var(--serif); }
.claim-tile .where { font: 500 .74rem/1.4 var(--sans); color: var(--slate); }
.why { margin-top: auto; align-self: flex-start; display: inline-flex; gap: .4rem; align-items: center; background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; padding: .6rem 1rem; font: 700 .8rem/1 var(--sans); letter-spacing: .02em; cursor: pointer; transition: background .2s; }
.why:hover, .why:focus-visible { background: var(--red); outline: none; }
.why span { transition: transform .2s; } .why:hover span { transform: translateX(3px); }
.ink .why, .photo-bg .why { background: var(--gold); color: var(--ink); }
.ink .why:hover, .photo-bg .why:hover { background: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: .4rem 0; }
.card .why { margin-top: .3rem; }
.tag-btn { border: 0; cursor: pointer; font-family: var(--sans); }
.tag-btn:hover { filter: brightness(1.1); text-decoration: underline; }

/* ================= Dialog ================= */
#claim-dialog { width: min(720px, 94vw); max-height: 90vh; border: 0; border-radius: 12px; padding: 2rem 2rem 1.6rem; background: var(--paper); color: var(--ink); box-shadow: 0 40px 100px rgba(0,0,0,.5); overflow: auto; }
#claim-dialog::backdrop { background: rgba(11,20,40,.78); backdrop-filter: blur(4px); }
#claim-dialog[open] { animation: pop .25s ease; }
@keyframes pop { from { transform: translateY(14px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.cd-close-form { position: sticky; top: 0; float: right; margin: -1rem -1rem 0 0; }
.cd-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink); }
.cd-close:hover { background: var(--ink); color: #fff; }
.cd-verdict { display: flex; gap: .8rem; align-items: center; margin-bottom: 1rem; }
.cd-verdict .stamp { font-size: 1.3rem; }
.stamp--gold { border-color: #B07C10; color: #B07C10; }
.stamp--slate { border-color: var(--slate); color: var(--slate); }
#cd-title { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 1.2rem; }
.cd-said { background: #fff; border-left: 4px solid var(--slate); padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.cd-said blockquote { margin: .4rem 0; font: 400 1.2rem/1.4 var(--serif); }
.cd-where { font: 500 .78rem/1.4 var(--sans); color: var(--slate); }
.cd-record { border-left: 4px solid var(--red); padding: .2rem 1.2rem; margin-bottom: 1.2rem; }
.cd-record p { margin: .6rem 0; font-size: 1.05rem; }
.cd-sources ol { margin: .5rem 0 0; padding-left: 1.2rem; font: 400 .85rem/1.5 var(--sans); }
.cd-sources a { color: var(--ink); word-break: break-word; }
.cd-share { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.btn--line { background: transparent; color: var(--ink); border: 1px solid var(--ink); cursor: pointer; }

/* ================= Double standard ================= */
.ds-table { border: 1px solid var(--line-on-ink); border-radius: var(--radius); overflow: hidden; }
.ds-row { display: grid; grid-template-columns: 1fr 1.6fr 1fr; }
.ds-row > div { padding: 1.1rem 1.2rem; border-top: 1px solid var(--line-on-ink); font-size: 1rem; line-height: 1.5; }
.ds-row > div + div { border-left: 1px solid var(--line-on-ink); }
.ds-row > div .source { display: block; margin-top: .4rem; }
.ds-head > div { border-top: 0; font: 700 .7rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); background: rgba(255,255,255,.04); }
.ds-row > div:nth-child(2) { background: rgba(217,164,65,.07); }
.ds-row > div:nth-child(3) { color: #FF8A98; }
.ask-title { font-size: 1.6rem; margin: 3rem 0 1.2rem; color: var(--paper); }
.ask-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ask { margin: 0; background: var(--ink-2); border: 1px solid var(--line-on-ink); border-top: 4px solid var(--red); border-radius: var(--radius); padding: 1.4rem; display: flex; flex-direction: column; gap: .8rem; }
.ask p { margin: 0; font: 700 1.3rem/1.25 var(--serif); color: var(--paper); }
.ask figcaption { font: 400 .92rem/1.45 var(--serif); color: var(--gold); }
.ask-dl { margin-top: auto; font: 600 .75rem/1 var(--sans); color: rgba(246,241,231,.7) !important; }
.draft-only { display: none; }
body.draft .draft-only { display: block; margin-top: 2rem; background: #FFF3B0; color: #6B5300; border: 2px dashed #B59A2E; border-radius: var(--radius); padding: 1rem 1.2rem; font: 400 .9rem/1.5 var(--sans); }

/* ================= Timeline ================= */
.tl-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin: -1rem 0 1.6rem; font: 600 .72rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.tl-legend .k::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .4rem; vertical-align: -1px; }
.k-origin::before { background: var(--slate); } .k-court::before { background: #2E7D5B; } .k-spark::before { background: var(--gold); } .k-self::before { background: var(--red); }
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 130px; top: .4rem; bottom: .4rem; width: 3px; background: linear-gradient(var(--slate), var(--gold) 45%, var(--red)); border-radius: 3px; }
.tl li { display: grid; grid-template-columns: 110px 1fr; gap: 44px; padding: 0 0 1.6rem; position: relative; }
.tl li::before { content: ""; position: absolute; left: 124px; top: .35rem; width: 15px; height: 15px; border-radius: 50%; border: 3px solid var(--paper); background: var(--slate); }
.tl .tl-court::before { background: #2E7D5B; } .tl .tl-spark::before { background: var(--gold); } .tl .tl-self::before { background: var(--red); box-shadow: 0 0 0 5px rgba(200,16,46,.15); }
.tl-date { font: 700 .78rem/1.6 var(--mono); color: var(--slate); text-align: right; }
.tl-body { font-size: 1.02rem; }
.tl-body .source { display: block; margin-top: .25rem; }
.tl-self .tl-body b { color: var(--red); }
.tl-court .tl-body b { color: #2E7D5B; }
.why-now { margin-top: 2rem; background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--gold); border-radius: var(--radius); padding: 1.5rem 1.6rem; box-shadow: var(--shadow); }
.why-now .label { color: #9A6A0C; margin-bottom: .8rem; }
.why-now .facts-list { margin: .8rem 0 1rem; }

/* ================= Self vs Hunt ================= */
.vs { border: 1px solid var(--line-on-ink); border-radius: var(--radius); overflow: hidden; }
.vs-head, .vs-row { display: grid; grid-template-columns: 180px 1fr 1fr; }
.vs-head > div { padding: 1rem 1.2rem; font: 700 1.4rem/1.1 var(--serif); }
.vs-head .vs-self { color: #FF8A98; border-bottom: 4px solid var(--red); }
.vs-head .vs-hunt { color: var(--gold); border-bottom: 4px solid var(--gold); }
.vs-row > div { padding: 1.1rem 1.2rem; border-top: 1px solid var(--line-on-ink); font-size: 1rem; line-height: 1.5; }
.vs-row .vs-topic { font: 700 .72rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(246,241,231,.6); }
.vs-row .vs-self { background: rgba(200,16,46,.07); }
.vs-row .vs-hunt { background: rgba(217,164,65,.08); }
.vs-row q { font-family: var(--serif); font-style: italic; }
.vs-row .source { display: block; margin-top: .35rem; }

@media (max-width: 860px) {
  .ds-row { grid-template-columns: 1fr; } .ds-row > div + div { border-left: 0; } .ds-head { display: none; }
  .vs-head { display: none; } .vs-row { grid-template-columns: 1fr; }
  .vs-row .vs-self::before { content: "Keith Self"; display: block; font: 700 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #FF8A98; margin-bottom: .4rem; }
  .vs-row .vs-hunt::before { content: "Evan Hunt"; display: block; font: 700 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: .4rem; }
  .tl::before { left: 6px; } .tl li { grid-template-columns: 1fr; gap: .2rem; padding-left: 30px; } .tl li::before { left: 0; } .tl-date { text-align: left; }
}
[hidden] { display: none !important; }
.cd-verdict { padding-right: 52px; flex-wrap: wrap; }

/* ================= Hero independence line ================= */
.hero-made { margin-top: 1.2rem; font: 500 .85rem/1.4 var(--sans); color: rgba(246,241,231,.75); }
.hero-made a { color: var(--gold); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fine { font: 400 .78rem/1.5 var(--sans); color: var(--slate); margin-top: 1rem; }
.ink .fine { color: rgba(246,241,231,.6); }
.ink .fine a { color: var(--gold); }

/* ================= Mosque: the law ================= */
.law-block { margin-top: 3.5rem; }
.law-title { font-size: clamp(1.5rem, 3vw, 2.2rem); margin-bottom: 1.6rem; }
.law-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.law-card { background: #fff; border: 1px solid var(--line); border-top: 4px solid #2E7D5B; border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow); }
.law-card .label { color: #2E7D5B; margin-bottom: .6rem; }
.law-card p { font-size: 1rem; }
.law-quote { font: italic 400 1.15rem/1.4 var(--serif); border-left: 3px solid var(--line); padding-left: .9rem; }
.after { margin-top: 1.6rem; background: #FBEFF1; border: 1px solid rgba(200,16,46,.25); border-radius: var(--radius); padding: 1.4rem 1.6rem; }
.after .label { margin-bottom: .6rem; }
.after-close { font: 700 1.2rem/1.4 var(--serif); margin: .8rem 0 0; }

/* ================= Senate ================= */
.senate-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 2rem; }
.senate-grid .quote { font-size: 1.35rem; }
.senate-sum { margin-top: 2rem; max-width: 52rem; font-size: 1.15rem; }
.senate-sum .opinion { border-left: 4px solid var(--gold); padding-left: 1rem; }
.senate-sum .opinion .label { display: block; color: var(--gold); margin-bottom: .3rem; }

/* ================= District checker ================= */
.district-form { display: flex; gap: .6rem; max-width: 760px; }
.district-form input { flex: 1; min-width: 0; font: 400 1.05rem/1.2 var(--sans); padding: .9rem 1rem; border: 2px solid var(--ink); border-radius: var(--radius); background: #fff; color: var(--ink); }
.district-form input:focus { outline: 3px solid var(--gold); outline-offset: 1px; }
.district-form .btn { margin: 0; border: 0; cursor: pointer; }
.district-result { margin-top: 1.4rem; max-width: 760px; display: grid; grid-template-columns: 1fr 220px; gap: 1.2rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.4rem; box-shadow: var(--shadow); }
.district-result.yes { border-left: 6px solid var(--red); }
.district-result.no { border-left: 6px solid var(--slate); }
.district-result.err { border-left: 6px solid var(--gold); grid-template-columns: 1fr; }
.district-result h3 { font-size: 1.5rem; margin-bottom: .4rem; }
.district-result p { margin: .3rem 0; font-size: 1rem; }
.district-result svg { width: 100%; height: auto; }
.district-result .btn { margin: .6rem .4rem 0 0; }

/* ================= Voting guide ================= */
.vg-dates { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); background: var(--line-on-ink); border: 1px solid var(--line-on-ink); border-radius: var(--radius); overflow: hidden; margin: 2rem 0; }
.vg-date { background: var(--ink-2); padding: 1.1rem 1.2rem; }
.vg-date b { display: block; font: 700 1.5rem/1.1 var(--serif); color: var(--paper); margin-bottom: .3rem; }
.vg-date span { font: 500 .82rem/1.4 var(--sans); color: rgba(246,241,231,.7); }
.vg-date.hot { background: var(--red); } .vg-date.hot span { color: #fff; }
.vg-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.vg-card, .vg-id, .vg-counties { background: var(--paper); color: var(--ink); border-radius: var(--radius); padding: 1.5rem; }
.vg-card h3, .vg-id h3, .vg-counties h3 { font-size: 1.3rem; margin-bottom: .8rem; }
.vg-card p { font-size: 1rem; }
.vg-card .fine, .vg-id .fine, .vg-counties .fine { color: var(--slate); }
.vg-card .fine a, .vg-counties .fine a { color: var(--ink); }
.vg-card .btn--ghost, .vg-id .btn--ghost { color: var(--ink); border-color: var(--ink); }
.vg-hours { width: 100%; border-collapse: collapse; font: 500 .9rem/1.4 var(--sans); margin: .4rem 0 1rem; }
.vg-hours td { padding: .45rem 0; border-bottom: 1px dotted var(--line); }
.vg-hours td:last-child { text-align: right; font-weight: 700; }
.vg-id, .vg-counties { margin-top: 1.2rem; }
.id-grid { display: grid; gap: 1.6rem; grid-template-columns: 1fr 1.4fr; }
.id-list { margin: 0; padding-left: 1.2rem; font-size: 1rem; line-height: 1.8; }
.county-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); font: 400 .88rem/1.5 var(--sans); }
.county-grid b { display: block; font: 700 1.1rem/1.3 var(--serif); margin-bottom: .2rem; }
.county-grid a { color: var(--ink); font-weight: 700; }

/* ================= Share ================= */
.share-steps { max-width: 46rem; padding-left: 1.4rem; font-size: 1.1rem; display: grid; gap: .8rem; margin-bottom: 1.8rem; }
.share-buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.share-buttons .btn { margin: 0; cursor: pointer; }

/* ================= Feedback ================= */
.fb-form { max-width: 760px; display: grid; gap: 1.1rem; }
.fb-form fieldset { border: 1px solid var(--line-on-ink); border-radius: var(--radius); padding: .9rem 1.1rem 1rem; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.fb-form legend { font: 700 .95rem/1 var(--sans); padding: 0 .4rem; color: var(--gold); }
.fb-form fieldset label { font: 400 1rem/1.4 var(--serif); display: inline-flex; gap: .4rem; align-items: center; cursor: pointer; }
.fb-check { font: 400 1rem/1.45 var(--serif); display: flex; gap: .6rem; align-items: flex-start; cursor: pointer; }
.fb-check input { margin-top: .35rem; }
.fb-text { display: grid; gap: .4rem; font: 600 .85rem/1.3 var(--sans); }
.fb-text textarea, .fb-text input { font: 400 1rem/1.4 var(--serif); padding: .8rem; border-radius: var(--radius); border: 1px solid var(--line-on-ink); background: rgba(255,255,255,.06); color: var(--paper); }
.fb-form .btn { justify-self: start; border: 0; cursor: pointer; }
input[type=radio], input[type=checkbox] { accent-color: var(--gold); width: 1.05rem; height: 1.05rem; }

/* ================= About ================= */
.about-wrap { max-width: 760px; }
.about-letter { margin-top: 1.6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem 2.2rem; box-shadow: var(--shadow); font-size: 1.15rem; line-height: 1.7; }
.about-letter p { margin-bottom: 1.1rem; }
.about-letter .sig { font-style: italic; margin: 1.4rem 0 0; }

/* ================= Hunt CTA ================= */
.hunt-cta { margin-top: 2rem; padding: 1.4rem 1.6rem; border: 1px solid rgba(217,164,65,.5); border-radius: var(--radius); background: rgba(217,164,65,.08); }
.hunt-cta-text { font-size: 1.15rem; margin-bottom: .8rem; }
.hunt-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.hunt-links .btn { margin: 0; }

@media (max-width: 760px) {
  .district-form { flex-direction: column; }
  .district-result { grid-template-columns: 1fr; }
  .id-grid { grid-template-columns: 1fr; }
  .about-letter { padding: 1.4rem; }
}
@media (max-width: 760px) {
  .site-header .wrap { flex-direction: row; align-items: center; gap: .6rem; }
  .brand small { display: none; }
  .nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; gap: .9rem; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
}
.card .quote.no-mark::before { content: none; }

/* ================= Verdict counter ================= */
.verdict-counter { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 0 0 1.8rem; }
.verdict-counter > div { background: #fff; padding: 1rem 1.1rem; }
.verdict-counter b { display: block; font: 700 2.2rem/1 var(--serif); }
.verdict-counter span { font: 600 .72rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.vc-total { background: var(--ink) !important; } .vc-total b, .vc-total span { color: var(--paper); }
.vc-false b { color: var(--red); } .vc-mis b { color: #B07C10; } .vc-uns b { color: var(--slate); } .vc-ooc b { color: #B07C10; }
.other-claims-title { font-size: 1.5rem; margin: 2.6rem 0 1.2rem; }
@media (max-width: 760px) { .verdict-counter { grid-template-columns: repeat(2, 1fr); } .vc-total { grid-column: 1 / -1; } }

/* ================= Worth it ================= */
.worth-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.worth-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow); }
.worth-card .label { margin-bottom: .7rem; }
.worth-card p { font-size: 1rem; }
.worth-table { width: 100%; border-collapse: collapse; font: 500 .88rem/1.35 var(--sans); }
.worth-table td { padding: .45rem 0; border-bottom: 1px dotted var(--line); vertical-align: top; }
.worth-table td:last-child { text-align: right; font-weight: 700; padding-left: .8rem; }
.worth-table tr.zero td:last-child { color: var(--red); font-size: 1.05rem; }
.worth-site { margin: 1.6rem 0; padding: 1.2rem 1.4rem; border-left: 5px solid var(--red); background: #FBEFF1; border-radius: 0 var(--radius) var(--radius) 0; font-size: 1.1rem; }
.worth-site p { margin: 0; }
.worth-questions { counter-reset: q; list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: .9rem; max-width: 52rem; }
.worth-questions li { counter-increment: q; position: relative; padding-left: 3rem; font: 700 1.3rem/1.35 var(--serif); }
.worth-questions li::before { content: counter(q); position: absolute; left: 0; top: .05rem; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--red); color: #fff; font: 800 1rem/2.1rem var(--sans); text-align: center; }
.fairness { background: #EEF6F1; border: 1px solid rgba(46,125,91,.35); border-radius: var(--radius); padding: 1.1rem 1.3rem; max-width: 52rem; }
.fairness .label { color: #2E7D5B; margin-bottom: .4rem; }
.fairness p { margin: 0; font-size: 1rem; }

/* ================= Iran war ================= */
.iran-grid { display: grid; gap: 1.2rem; grid-template-columns: 1.3fr 1fr 1fr; margin-top: 2rem; }
.iran-grid .worth-card { color: var(--ink); }
.iran-votes td:nth-child(2) { text-align: right; font-weight: 500; padding-left: .6rem; }
.iran-votes td.nay, .iran-votes td.yea { width: 3.2rem; text-align: center !important; font: 800 .75rem/1 var(--sans); letter-spacing: .08em; border-radius: 4px; }
.iran-votes td.nay { color: var(--red); }
.iran-votes td.yea { color: #B07C10; }
.iran-votes tr.hot td { background: #FBEFF1; }
.iran-note { margin: .9rem 0 .4rem; font-size: 1rem; }
#iran .worth-questions li { color: var(--paper); }
#iran .fairness { margin-top: 1rem; color: var(--ink); }
@media (max-width: 960px) { .iran-grid { grid-template-columns: 1fr; } }
.ink .worth-card .source, .ink .fairness .source { color: var(--slate); }
.iran-votes td:nth-child(2) { white-space: nowrap; }

/* ================= Notice bar ================= */
.notice { background: #FFFFFF; border-bottom: 1px solid var(--line); }
.notice .wrap { padding: .8rem 0; font: 400 .95rem/1.5 var(--serif); color: var(--ink); }
.notice .source { margin-left: .3rem; }

/* ================= Who funds him ================= */
.money-tiles { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 0 0 2rem; }
.money-tiles .mt { background: #fff; padding: 1rem 1.1rem; }
.money-tiles .mt b { display: block; font: 700 1.7rem/1.05 var(--serif); color: var(--ink); }
.money-tiles .mt span { font: 500 .78rem/1.35 var(--sans); color: var(--slate); }
.money-tiles .mt-total { background: var(--ink); } .money-tiles .mt-total b, .money-tiles .mt-total span { color: var(--paper); }
.money-trend h3, .money-orgs h3 { font-size: 1.35rem; margin: 0 0 .8rem; }
table.trend { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); font: 500 .92rem/1.35 var(--sans); font-variant-numeric: tabular-nums; }
table.trend th, table.trend td { padding: .6rem .8rem; border-bottom: 1px solid var(--line); text-align: right; }
table.trend th[scope=row], table.trend thead th:first-child { text-align: left; font-weight: 600; color: var(--ink); }
table.trend thead th { font: 700 .72rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--slate); border-bottom: 2px solid var(--ink); }
table.trend thead th small { display: block; font-weight: 500; letter-spacing: 0; text-transform: none; }
table.trend tr.sub th { padding-left: 1.6rem; font-weight: 500; color: var(--slate); }
table.trend tr.hot td:last-child { color: var(--red); font-weight: 800; }
table.trend.compact { border: 0; } table.trend.compact td, table.trend.compact th { padding: .4rem .3rem; font-size: .85rem; }
.chart { position: relative; margin: 2.4rem 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.2rem .6rem; }
.chart-title { font: 700 1.05rem/1.3 var(--serif); margin-bottom: .6rem; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .g { stroke: var(--line); stroke-width: 1; }
.chart .ax { font: 500 11px var(--sans); fill: var(--slate); }
.chart .ann { font: 700 11px var(--sans); fill: var(--ink); }
.chart .bar .m { fill: #C8102E; }
.chart .bar .hit { fill: transparent; }
.chart .bar:hover .m, .chart .bar:focus .m { fill: #8f0b21; }
.chart .bar:focus { outline: none; }
.chart-tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--paper); font: 500 .8rem/1.35 var(--sans); padding: .45rem .6rem; border-radius: 4px; max-width: 280px; box-shadow: var(--shadow); z-index: 5; }
.table-view summary { cursor: pointer; font: 600 .82rem/1 var(--sans); color: var(--ink); padding: .4rem 0; }
.table-view table { margin-top: .6rem; }
.org-cols { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1rem; }
.org-col { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.org-col h4 { font: 700 .75rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--slate); margin: 0 0 .7rem; }
.org-col ol { margin: 0; padding-left: 1.1rem; font: 500 .85rem/1.35 var(--sans); }
.org-col li { padding: .25rem 0; border-bottom: 1px dotted var(--line); }
.org-col li span { display: inline-block; max-width: 72%; }
.org-col li b { float: right; font-variant-numeric: tabular-nums; }
.money-bundle { margin-top: 2rem; }
.money-public { margin: 1.4rem 0; font-size: 1rem; }
#money .why-now { margin-top: 1.6rem; }
@media (max-width: 860px) { .money-tiles { grid-template-columns: 1fr 1fr; } .money-tiles .mt-total { grid-column: 1 / -1; } .org-cols { grid-template-columns: 1fr; } }

.org-col ol { list-style: none; padding: 0; counter-reset: org; }
.org-col li { counter-increment: org; display: grid; grid-template-columns: 1.6rem 1fr auto; gap: .4rem; align-items: baseline; }
.org-col li::before { content: counter(org) "."; color: var(--slate); }
.org-col li span { max-width: none; }
.org-col li b { float: none; }

/* ================= Costs ================= */
.cost-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); margin-bottom: 1.2rem; }
.cost-grid .worth-card .label { margin-bottom: .8rem; }
.cost-tiles { grid-template-columns: 1.4fr repeat(4, 1fr); margin: .8rem 0; }
.cost-tiles .mt b { font-size: 1.6rem; } .cost-tiles .mt b.red { color: var(--red); }
.press-list { margin: .6rem 0; padding-left: 1.2rem; font: 500 .85rem/1.45 var(--sans); }
.press-list span { color: var(--slate); font-variant-numeric: tabular-nums; }
#costs code { font-family: var(--mono); font-size: .85em; }
@media (max-width: 860px) { .cost-tiles { grid-template-columns: 1fr 1fr; } .cost-tiles .mt-total { grid-column: 1 / -1; } }

/* ================= Highlight that wraps on any screen (replaces the single-line marker) ================= */
mark { white-space: normal; background: linear-gradient(transparent 60%, rgba(200,16,46,.42) 60%, rgba(200,16,46,.42) 88%, transparent 88%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .06em; }
mark::after { content: none; }
.ink mark { background: linear-gradient(transparent 60%, rgba(200,16,46,.8) 60%, rgba(200,16,46,.8) 88%, transparent 88%); }

/* ================= Hero story launcher ================= */
.hero-story { display: inline-flex; align-items: center; gap: .9rem; margin: .2rem 0 1.4rem; padding: .8rem 1.2rem .8rem .8rem; border: 0; border-radius: 999px; background: var(--gold); color: var(--ink); cursor: pointer; text-align: left; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.hero-story .play { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--gold); display: grid; place-items: center; font-size: 1rem; flex: none; }
.hero-story b { display: block; font: 800 1rem/1.2 var(--sans); }
.hero-story small { display: block; font: 500 .8rem/1.3 var(--sans); opacity: .85; }
.hero-story:hover { filter: brightness(1.05); }
.textsize { background: transparent; color: var(--paper); border: 1px solid var(--line-on-ink); border-radius: 6px; font: 700 .8rem/1 var(--sans); padding: .45rem .6rem; cursor: pointer; }
html.text-lg { font-size: 112.5%; } html.text-xl { font-size: 125%; }

/* ================= Story mode ================= */
.story { position: fixed; inset: 0; z-index: 100; background: rgba(8,12,24,.94); display: flex; align-items: center; justify-content: center; }
.story[hidden] { display: none; }
.story-frame { position: relative; width: min(440px, 100vw); height: min(860px, 100dvh); background: var(--ink); color: var(--paper); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
@media (min-width: 600px) { .story-frame { border-radius: 18px; } }
.story-progress { display: flex; gap: 4px; padding: max(10px, env(safe-area-inset-top)) 12px 0; z-index: 3; }
.story-progress i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.28); overflow: hidden; }
.story-progress i.done, .story-progress i.on { background: var(--gold); }
.story-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px 4px; z-index: 3; }
.story-brand { font: 700 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.story-close { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.story-slides { position: relative; flex: 1; overflow: hidden; }
.slide { position: absolute; inset: 0; padding: 18px 26px 22px; display: flex; flex-direction: column; justify-content: center; gap: 14px; opacity: 0; transform: translateX(24px); transition: opacity .28s ease, transform .28s ease; pointer-events: none; overflow-y: auto; }
.slide.on { opacity: 1; transform: none; pointer-events: auto; }
.slide.prev { transform: translateX(-24px); }
.slide[data-bg="paper"] { background: var(--paper); color: var(--ink); }
.slide[data-bg="ink"] { background: radial-gradient(120% 80% at 80% 0%, rgba(200,16,46,.28), transparent 60%), var(--ink); }
.slide[data-bg="portrait"] { background: linear-gradient(180deg, rgba(11,20,40,.55) 0%, rgba(11,20,40,.88) 55%, rgba(11,20,40,.98) 100%), url("img/portrait-bw.jpg") 70% 12% / cover no-repeat; }
.s-kicker { font: 700 .78rem/1.35 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.slide[data-bg="paper"] .s-kicker { color: var(--red); }
.s-big { font: 700 2.6rem/1.05 var(--serif); margin: 0; }
.s-big-2 { font: 700 2rem/1.15 var(--serif); margin: 0; }
.s-quote { font: 400 2.4rem/1.1 var(--serif); margin: 0; }
.s-number { font: 700 2.7rem/1.05 var(--serif); letter-spacing: -.01em; }
.s-number.red { color: var(--red); }
.s-text { font: 400 1.15rem/1.45 var(--serif); margin: 0; }
.s-answer { font: 700 1.5rem/1.2 var(--serif); color: var(--gold); margin: 0; }
.s-said { font: 400 1.4rem/1.3 var(--serif); margin: 0; }
.s-stamp { align-self: flex-start; border: 4px solid var(--red); color: var(--red); font: 800 1.15rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: .45em .7em; border-radius: 4px; transform: rotate(-3deg); }
.slide[data-bg="ink"] .s-stamp, .slide[data-bg="portrait"] .s-stamp { border-color: #FF5A6E; color: #FF5A6E; }
.s-pair { display: flex; align-items: center; gap: 14px; }
.s-pair span { display: flex; flex-direction: column; } .s-pair small { font: 500 .75rem/1.3 var(--sans); opacity: .75; }
.s-pair b { font: 700 2.2rem/1 var(--serif); } .s-pair.big b { font-size: 3rem; } .s-pair .arrow { font-size: 1.8rem; opacity: .6; }
.gold { color: var(--gold); } .red { color: var(--red); } .green { color: #2E7D5B; }
.s-fair { font: 400 .95rem/1.4 var(--sans); background: #EEF6F1; color: var(--ink); padding: .7rem .8rem; border-radius: 8px; margin: 0; }
.s-src { font: 500 .8rem/1.35 var(--mono); opacity: .7; }
.s-src::before { content: "Source: "; font-weight: 700; }
.s-proof { align-self: flex-start; margin-top: 4px; min-height: 48px; padding: .75rem 1.2rem; border-radius: 999px; border: 0; background: var(--gold); color: var(--ink); font: 800 1rem/1 var(--sans); cursor: pointer; }
.s-proof::after { content: " →"; }
.slide[data-bg="paper"] .s-proof { background: var(--ink); color: var(--paper); }
.s-hint { font: 500 .95rem/1.4 var(--sans); opacity: .8; margin: 0; }
.s-bars { display: grid; gap: 8px; }
.s-bars .b { display: grid; grid-template-columns: 7.5rem 1fr 2.2rem; align-items: center; gap: 8px; font: 700 .9rem/1 var(--sans); }
.s-bars .b i { height: 18px; border-radius: 0 4px 4px 0; display: block; }
.s-bars .b em { font-style: normal; text-align: right; }
.s-actions { display: grid; gap: 10px; }
.s-btn { min-height: 52px; border-radius: 12px; border: 0; background: var(--gold); color: var(--ink); font: 800 1.05rem/1 var(--sans); cursor: pointer; }
.s-btn.ghost { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.story-nav { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px max(12px, env(safe-area-inset-bottom)); background: rgba(0,0,0,.35); z-index: 3; }
.story-nav button { min-width: 104px; min-height: 48px; border-radius: 999px; border: 0; font: 800 1rem/1 var(--sans); cursor: pointer; }
.story-prev { background: rgba(255,255,255,.12); color: #fff; } .story-next { background: var(--gold); color: var(--ink); }
.story-prev:disabled { opacity: .35; }
.story-count { font: 600 .85rem/1 var(--sans); opacity: .8; }
.story-fab { display: none; }
.flash { animation: flash 1.6s ease; } @keyframes flash { 0%, 40% { box-shadow: 0 0 0 4px var(--gold); } 100% { box-shadow: 0 0 0 0 transparent; } }
body.story-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .slide { transition: none; transform: none; } }

/* ================= Phone fixes from the audit ================= */
@media (max-width: 760px) {
  body { font-size: 1.06rem; }
  .wrap { width: calc(100vw - 32px); }
  section { padding: 2.6rem 0; }
  h2 { font-size: clamp(1.7rem, 7.4vw, 2.2rem); }
  section .intro { font-size: 1.05rem; margin: .8rem 0 1.6rem; }
  .hero { min-height: auto; }
  .hero .wrap { padding: 4.2rem 0 2.6rem; }
  .hero blockquote { font-size: 2.5rem; }
  .hero .answer { font-size: 1.7rem; }
  .hero-story { width: 100%; border-radius: 16px; }
  .hero .credit { font-size: .7rem; }
  .story-fab { display: block; position: fixed; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 30; min-height: 48px; padding: .8rem 1.1rem; border-radius: 999px; border: 0; background: var(--gold); color: var(--ink); font: 800 .95rem/1 var(--sans); box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .25s, opacity .25s; }
  .story-fab.hide { transform: translateY(120%); opacity: 0; }
  .stamp { white-space: normal; text-align: center; line-height: 1.25; }
  .source, .attrib { font-size: .8rem; }
  .fine { font-size: .85rem; }
  .label { font-size: .74rem; }
  .why { min-height: 44px; padding: .75rem 1rem; font-size: .88rem; }
  .tag-btn { min-height: 40px; padding: .5rem .9rem; font-size: .78rem; }
  details > summary { min-height: 44px; display: flex; align-items: center; }
  .county-grid a, .vg-card a, #check .fine a, .faq a, .facts-list a { display: inline-block; padding: .55rem 0; }
  .fb-form fieldset label, .fb-check { min-height: 44px; padding: .35rem 0; }
  input[type=radio], input[type=checkbox] { width: 1.35rem; height: 1.35rem; }
  .ask-dl { display: inline-block; padding: .6rem 0; font-size: .85rem; }
  /* Claim vs Fact: table → stacked cards */
  table.cvf, table.cvf thead, table.cvf tbody, table.cvf tr, table.cvf td { display: block; width: 100% !important; }
  table.cvf thead { display: none; }
  table.cvf tr { border-bottom: 2px solid var(--line); padding: .9rem .2rem; }
  table.cvf td { border: 0; padding: .3rem .8rem; }
  /* Wide data tables scroll inside their card instead of the page */
  .money-trend, .cost-grid .worth-card, .chart .table-view, .worth-card { overflow-x: auto; }
  table.trend { font-size: .8rem; } table.trend th, table.trend td { padding: .5rem .45rem; }
  .timeline .quote { font-size: 1.15rem; }
  .evidence { transform: none !important; }
  .vs-row > div, .ds-row > div { padding: .9rem; }
}
.claim-grid .more-tiles { grid-column: 1 / -1; justify-self: center; min-height: 48px; padding: .8rem 1.4rem; border-radius: 999px; border: 2px solid var(--ink); background: #fff; font: 800 .95rem/1 var(--sans); cursor: pointer; }
.claim-tile.collapsed { display: none; }
@media (max-width: 760px) {
  .btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
  .county-grid a, .vg-card a, #check .fine a, .faq a, .facts-list a, .vg-counties .fine a, .hero-made a { padding: .7rem 0; }
  .source { font-size: .82rem; }
  .site-header .wrap { padding: .5rem 0; }
}

section, .evidence { scroll-margin-top: 76px; }

img[width][height] { height: auto; }
.hero-art img { height: 100%; }

/* Phones: every tap target at least 44px tall (forms, download links, inline links in the vote guide). */
@media (max-width: 760px) {
  .ask-dl { display: inline-flex; align-items: center; min-height: 44px; }
  .fb-form fieldset label, .fb-check { min-height: 44px; align-items: center; }
  .fb-check input { margin-top: 0; }
  .fb-form input[type="radio"], .fb-form input[type="checkbox"] { width: 22px; height: 22px; flex: none; }
}

/* Feedback form: type picker, status box */
.fb-kind label { font-weight: 600; }
.fb-group { display: grid; gap: 1.1rem; }
.fb-group[hidden], .fb-msg-label[hidden] { display: none; }
.fb-status { border-radius: var(--radius); padding: .9rem 1.1rem; font: 400 1rem/1.5 var(--serif); }
.fb-status.ok { background: #E3F4E8; color: #14532D; border: 2px solid #2F855A; }
.fb-status.err { background: #FDE8E8; color: #7F1D1D; border: 2px solid #C8102E; }
.fb-status.warn { background: #FFF3B0; color: #6B5300; border: 2px solid #B59A2E; }
.fb-form button[disabled] { opacity: .7; cursor: progress; }
.cd-report { margin: 1.2rem 0 0; text-align: center; }
.linklike { background: none; border: 0; padding: .6rem .4rem; min-height: 44px; font: 600 .9rem/1.3 var(--sans); color: var(--slate, #475569); text-decoration: underline; cursor: pointer; }

/* Portrait framing: always centre on his face (face sits ~52% across, ~37% down the official portrait). */
.hero-art img, .cta-block .bg img, .photo-bg .bg img { object-position: 52% 34%; }
.slide[data-bg="portrait"] { background-position: 0 0, 52% 30%; }
@media (min-width: 761px) {
  /* Desktop: the portrait takes the right side, beside the quote, so the whole face is in view. */
  .hero-art { left: 38%; }
  .hero-art img { object-position: 52% 32%; }
  .hero-art::after { background:
    linear-gradient(90deg, #0B1428 0%, rgba(11,20,40,.55) 22%, rgba(11,20,40,.12) 55%, rgba(11,20,40,.1) 100%),
    linear-gradient(180deg, rgba(11,20,40,.1) 0%, rgba(11,20,40,0) 45%, rgba(11,20,40,.9) 100%),
    radial-gradient(60% 70% at 70% 30%, rgba(200,16,46,.3), transparent 70%); }
}
@media (max-width: 760px) {
  .hero-art img { object-position: 52% 22%; }
}
/* Background photos must fill their box (the generic img[width][height] { height:auto } rule would undo the crop). */
.cta-block .bg img[width][height], .photo-bg .bg img[width][height], .hero-art img[width][height] { height: 100%; }

/* How to help */
.anchor { position: relative; top: -76px; display: block; height: 0; }
.help-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.8rem 0; }
.help-stats > div { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: var(--radius); padding: 1.1rem 1.2rem; display: grid; gap: .35rem; }
.help-stats b { font: 800 2rem/1 var(--serif); color: var(--ink); }
.help-stats span { font: 400 1rem/1.45 var(--serif); }
.help-stats small { font: 500 .75rem/1.3 var(--sans); color: var(--slate); }
.help-calc { background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin-bottom: 2rem; }
.help-calc label { font: 600 1.05rem/2.2 var(--sans); }
.help-calc input { width: 5.5rem; min-height: 44px; font: 700 1.1rem/1 var(--sans); text-align: center; border-radius: 8px; border: 2px solid var(--gold); background: #fff; color: var(--ink); margin: 0 .3rem; }
.help-calc p { margin: .6rem 0 0; font: 400 1.05rem/1.5 var(--serif); } .help-calc p b { color: var(--gold); }
.help-h { font: 700 1.4rem/1.2 var(--serif); margin: 2.2rem 0 1rem; }
.help-ways { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem 1.4rem; padding-left: 1.3rem; margin: 0 0 1.6rem; }
.help-ways li { font: 400 1rem/1.5 var(--serif); }
.rules-box { margin-top: 2.4rem; background: #FFF8DB; border: 2px solid #B59A2E; border-radius: var(--radius); padding: 1.3rem 1.5rem; }
.rules-box h3 { margin: 0 0 .8rem; font: 700 1.25rem/1.2 var(--serif); }
.rules-box ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .55rem; font: 400 1rem/1.5 var(--serif); }
.lib-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 260px)); gap: 1.4rem; }
.lib-item { margin: 0; } .lib-item img { width: 100%; height: auto; border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--shadow); background: #fff; }
.lib-item figcaption { font: 500 .85rem/1.5 var(--sans); margin-top: .5rem; }
.lib-q { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; max-width: 760px; }
.lib-q img { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); }
.community p { font: 400 1.05rem/1.55 var(--serif); }
.community .btn { margin: 0 .6rem .6rem 0; }
@media (max-width: 760px) {
  .help-stats, .help-ways { grid-template-columns: 1fr; }
  .lib-grid { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .lib-q { grid-template-columns: 1fr 1fr; }
  .help-calc label { line-height: 2.6; }
}

/* His own money */
.hm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.6rem; }
.hm-card, .hm-ban { background: rgba(255,255,255,.05); border: 1px solid var(--line-on-ink); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.hm-card h3, .hm-ban h3 { font: 700 1.15rem/1.25 var(--serif); margin: 0 0 .7rem; color: var(--gold); }
.hm-card h3 + * { margin-top: 0; } .hm-card ul + h3 { margin-top: 1.2rem; }
.hm-table { width: 100%; border-collapse: collapse; font: 500 .95rem/1.4 var(--sans); }
.hm-table th, .hm-table td { padding: .5rem .4rem; border-bottom: 1px solid var(--line-on-ink); text-align: right; }
.hm-table th[scope=row], .hm-table thead th:first-child { text-align: left; }
.hm-table small { display: block; opacity: .7; font-weight: 400; font-size: .78rem; }
.hm-table tr.hot td { color: var(--gold); font-weight: 800; }
.hm-note { font: 400 .92rem/1.5 var(--serif); opacity: .9; margin: .8rem 0 0; }
.hm-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .5rem; font: 400 1rem/1.5 var(--serif); }
.hm-ban { margin-top: 1.2rem; }
.our-view { margin: 1rem 0 .6rem; font: 400 1.05rem/1.5 var(--serif); border-left: 4px solid var(--gold); padding-left: .9rem; }
@media (max-width: 760px) { .hm-grid { grid-template-columns: 1fr; } }

/* How this site is made */
.method { max-width: 760px; margin-top: 2.4rem; background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--ink); border-radius: var(--radius); padding: 1.3rem 1.5rem; }
.method h3 { font: 700 1.25rem/1.2 var(--serif); margin: 0 0 .7rem; } .method h3 + p { margin-top: 0; }
.method ul { padding-left: 1.2rem; display: grid; gap: .45rem; } .method p, .method li { font: 400 1rem/1.55 var(--serif); }
.method #corrections { margin-top: 1.4rem; scroll-margin-top: 90px; }
@media (max-width: 760px) {
  .help-ways a, .lib-item figcaption a, .rules-box a, .method a { display: inline-block; padding: .65rem 0; }
}

/* Story-first: the way to the full website is always visible */
.story-site { min-height: 44px; padding: .55rem 1rem; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.55); background: rgba(255,255,255,.1); color: #fff; font: 700 .9rem/1 var(--sans); cursor: pointer; white-space: nowrap; }
.story-site:hover, .story-site:focus-visible { background: #fff; color: var(--ink); }
.s-hint { margin-top: 1rem; font: 500 .85rem/1.4 var(--sans); opacity: .75; }

/* Press center */
.press-hero { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem); }
.press-hero h1 { font: 700 clamp(2.2rem, 5vw, 3.6rem)/1.05 var(--serif); margin: .4rem 0 1rem; max-width: 20ch; }
.press-quick { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.press-two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: start; }
.press-two p { font: 400 1.05rem/1.6 var(--serif); }
.press-card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.press-card h3 { font: 700 1.1rem/1.2 var(--serif); margin: 0 0 .5rem; } .press-card h3:not(:first-child) { margin-top: 1.2rem; }
.press-card p { font-size: .98rem; } .cite { font-family: var(--mono, monospace) !important; font-size: .9rem !important; background: var(--paper); padding: .6rem .8rem; border-radius: 6px; }
.paper-alt { background: #EFE8DA; }
.press-facts { display: grid; gap: .9rem; padding-left: 1.4rem; max-width: 900px; }
.press-facts li { font: 400 1.05rem/1.55 var(--serif); }
.press-facts .source { display: block; margin-top: .2rem; }
.press-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.press-dl { display: grid; gap: .5rem; text-decoration: none; color: var(--ink); }
.press-dl img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; border: 1px solid var(--line); border-radius: 6px; background: #fff; box-shadow: var(--shadow); }
.press-dl span { font: 500 .88rem/1.4 var(--sans); } .press-dl:hover img { outline: 3px solid var(--gold); }
.press-data, .press-updates { display: grid; gap: .6rem; padding-left: 1.2rem; font: 400 1.02rem/1.55 var(--serif); max-width: 900px; }
.press-data a { font: 700 .95rem/1.4 var(--mono, monospace); }
.press-updates { list-style: none; padding: 0; } .press-updates b { display: inline-block; min-width: 7.5rem; font: 700 .9rem/1.5 var(--sans); color: var(--red); }
.press-form { max-width: 640px; }
.press-nav a.btn--sm { padding: .5rem .9rem; }
@media (max-width: 760px) {
  .press-two { grid-template-columns: 1fr; }
  .press-grid { grid-template-columns: 1fr 1fr; }
  .press-nav { display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
  .press-data a, .press-dl { padding: .3rem 0; }
}
/* Self vs. Hunt: rows where they agree */
.vs-row.vs-both > div { background: rgba(47,107,63,.14); }
.vs-row .vs-topic small { display: block; text-transform: none; letter-spacing: 0; font-weight: 600; color: #8FD3A4; margin-top: .2rem; }

/* For conservatives */
.cons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.6rem; }
.cons-card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--ink); border-radius: var(--radius); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.cons-card h3 { margin: 0; font: 800 .8rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.cons-his { margin: 0; font: 400 1rem/1.5 var(--serif); }
.cons-did { margin: 0; font: 400 1rem/1.5 var(--serif); padding-left: .7rem; border-left: 3px solid var(--red); }
.cons-card .source { margin-top: auto; }
.cons-close { margin-top: 1.6rem; max-width: 820px; } .cons-close p { font: 400 1.08rem/1.55 var(--serif); }
/* New and returning voters */
.newvoter { background: rgba(255,255,255,.06); border: 1px solid var(--line-on-ink); border-left: 5px solid var(--gold); border-radius: var(--radius); padding: 1.2rem 1.4rem; margin: 1.4rem 0 2rem; }
.newvoter h3 { margin: 0 0 .5rem; font: 700 1.3rem/1.2 var(--serif); color: var(--gold); }
.newvoter ol { margin: .6rem 0 0; padding-left: 1.3rem; display: grid; gap: .45rem; font: 400 1rem/1.5 var(--serif); }
.newvoter a { color: var(--gold); }
@media (max-width: 960px) { .cons-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .cons-grid { grid-template-columns: 1fr; } .newvoter a { display: inline-block; padding: .5rem 0; } }
@media (max-height: 700px) {
  .s-end .s-actions { gap: .45rem; } .s-end .s-btn { min-height: 44px; padding: .55rem .9rem; font-size: .9rem; }
  .s-end .s-big { font-size: 2rem; } .s-end .s-hint { margin-top: .5rem; }
}
@media (max-height: 700px) { .s-end .s-hint { display: none; } }
@media (max-width: 760px) { .cons-close a { display: inline-block; padding: .65rem 0; } }

/* Press center: QR codes */
.qr-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.qr-grid figure { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem; text-align: center; }
.qr-grid img { width: 100%; height: auto; display: block; }
.qr-grid figcaption { font: 500 .85rem/1.6 var(--sans); margin-top: .4rem; } .qr-grid figcaption b { display: block; }
.social-links { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .6rem; font: 600 .9rem/1.6 var(--sans); }
@media (max-width: 760px) { .qr-grid { grid-template-columns: 1fr 1fr; } .qr-grid a, .social-links a { display: inline-block; padding: .5rem 0; } }
.press-older-h { font: 700 1rem/1.2 var(--sans); margin: 1.4rem 0 .4rem; } .press-older { padding-left: 1.1rem; display: grid; gap: .3rem; font: 400 .95rem/1.5 var(--serif); }
.hero-updated { margin-top: 1rem; font: 600 .78rem/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: rgba(246,241,231,.7); }
@media (max-width: 760px) { .library .fine a { display: inline-block; padding: .55rem 0; } }

/* Share gallery */
.gallery-hero { padding: clamp(3rem, 7vw, 5rem) 0 clamp(2rem, 4vw, 3rem); }
.gallery-hero h1 { font: 700 clamp(2rem, 5vw, 3.4rem)/1.05 var(--serif); margin: .4rem 0 1rem; max-width: 20ch; }
.g-filters, .g-size { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.g-chip { min-height: 44px; padding: .5rem 1rem; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font: 700 .9rem/1 var(--sans); cursor: pointer; }
.g-chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1.4rem; }
.g-item { display: flex; flex-direction: column; gap: .35rem; text-align: left; padding: 0 0 .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; overflow: hidden; color: var(--ink); }
.g-item:hover, .g-item:focus-visible { outline: 3px solid var(--gold); }
.g-item img { width: 100%; height: auto; display: block; aspect-ratio: 1; }
.g-kind { padding: 0 .8rem; font: 700 .7rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.g-t { padding: 0 .8rem; font: 400 .95rem/1.35 var(--serif); }
#g-view { width: min(560px, 94vw); max-height: 94vh; border: 0; border-radius: 14px; padding: 1.2rem; }
#g-view::backdrop { background: rgba(11,20,40,.75); }
#g-img { display: block; width: 100%; height: auto; border-radius: 8px; margin: 0 auto; background: #eee; }
#g-img.g-tall { width: auto; max-width: 100%; max-height: 62vh; }
#g-title { font: 700 1.15rem/1.3 var(--serif); margin: .8rem 0; }
.g-actions { display: flex; flex-wrap: wrap; gap: .4rem; } .g-actions .btn { margin: 0; border: 0; cursor: pointer; }
.g-actions .btn--line { border: 1.5px solid var(--ink); background: transparent; color: var(--ink); }
.g-social { margin-top: .8rem; font: 500 .9rem/2 var(--sans); } .g-social a { display: inline-block; padding: .3rem 0; }
.g-cap pre { white-space: pre-wrap; font: 400 .85rem/1.45 var(--mono, monospace); background: var(--paper); padding: .8rem; border-radius: 6px; }
@media (max-width: 760px) { .g-grid { grid-template-columns: 1fr 1fr; gap: .6rem; } .g-t { font-size: .85rem; } }
.s-share { display: inline-flex; align-items: center; min-height: 44px; margin-left: .6rem; padding: .55rem .9rem; border-radius: 999px; font: 700 .9rem/1 var(--sans); text-decoration: none; color: inherit; border: 1.5px solid currentColor; opacity: .9; }
.slide[data-bg="paper"] .s-share { color: var(--ink); }
.slide:not([data-bg="paper"]) .s-share { color: #fff; }
.s-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.s-row .s-share { margin-left: 0; }
@media (max-height: 700px) { .s-row .s-proof, .s-row .s-share { padding: .5rem .85rem; font-size: .88rem; } }

/* Story: share button and share panel */
.story-top-actions { display: flex; gap: .4rem; align-items: center; }
.story-sharebtn { min-height: 44px; padding: .55rem .9rem; border-radius: 999px; border: 0; background: var(--gold); color: var(--ink); font: 800 .9rem/1 var(--sans); cursor: pointer; white-space: nowrap; }
@media (max-width: 400px) { .story-brand { display: none; } .story-top { justify-content: flex-end; } }
.story-sheet { position: absolute; inset: 64px 0 0 0; z-index: 6; background: var(--paper); color: var(--ink); overflow-y: auto; padding: 1rem 1rem 1.4rem; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.35); }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; margin-bottom: .8rem; }
.sheet-head b { display: block; font: 700 1.25rem/1.2 var(--serif); } .sheet-head span { display: block; font: 500 .85rem/1.4 var(--sans); color: var(--slate); margin-top: .2rem; }
.sheet-close { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 0; background: var(--ink); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.sheet-filters { margin-bottom: .8rem; } .sheet-filters .g-chip { min-height: 40px; padding: .4rem .8rem; font-size: .82rem; }
.sheet-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
.sheet-grid .g-t { font-size: .82rem; } .g-item.g-current { outline: 3px solid var(--gold); }
.sheet-foot { text-align: center; } .sheet-foot a { display: inline-block; padding: .6rem 0; }
.story.sheet-open .story-nav { visibility: hidden; }
.about-letter .label { margin-bottom: .8rem; color: var(--red); }
.about-letter q { font-style: italic; }
.story-src { font-size: .78rem !important; line-height: 1.6 !important; margin-top: 1rem; }
.s-big.s-mid { font-size: clamp(1.7rem, 7vw, 2.3rem); }