/* Layout concept: a midnight double-feature program. Marquee hero, a reel of episodes,
   a drawer of case files, a Halloween one-sheet, and the ballot that ends every show.
   Tokens mirror "The Hobbs Nightmare" design system (Film theme). Single dark theme by choice. */
:root {
  color-scheme: dark;
  --ground: #1b1b1b; --surface-raised: #262524; --surface-sunk: #131313; --plate: #0a0a0a; --plate-ink: #efeae0;
  --line: #3a3836; --line-strong: #726d66;
  --ink: #efeae0; --ink-muted: #b3ada3; --ink-faint: #9a958d;
  --red: #c8102e; --red-hover: #a30d26; --on-red: #ffffff; --red-brush: #c22c29; --red-text: #ff6b6b; --red-soft: #3a1015;
  --ballot: #efe6cf; --on-ballot: #141210; --focus: #efeae0;
  --font-drama: Bangers, Impact, "Arial Narrow Bold", sans-serif;
  --font-marker: "Permanent Marker", "Comic Sans MS", cursive;
  --font-super: Oswald, "Franklin Gothic Medium", "Arial Narrow", sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --radius-1: 2px; --radius-2: 4px;
  --shadow-drama: 4px 4px 0 #000000; --shadow-ballot: 6px 8px 0 #0a0a0a; --shadow-card: 0 12px 32px rgba(0,0,0,.55);
  --grain: .16; --vignette: .6;
  --content-max: 1200px; --nav-height: 64px;
  --gutter: clamp(16px, 4vw, 32px);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-height) + 24px); }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-serif); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wrap { width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--ink); color: var(--ground); padding: 8px 12px; font-family: var(--font-super); text-transform: uppercase; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Film finishing pass: grain over the whole page ---------- */
body::after { content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain .6s steps(4) infinite; }
@keyframes grain { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-2%,1%); } 50% { transform: translate(1%,-2%); } 75% { transform: translate(-1%,-1%); } }

/* ---------- Type roles ---------- */
.drama { font-family: var(--font-drama); font-weight: 400; color: var(--red-brush); text-shadow: var(--shadow-drama); letter-spacing: .01em; line-height: .92; margin: 0; text-wrap: balance; }
.kicker { font-family: var(--font-marker); font-size: 22px; line-height: 1.15; letter-spacing: .02em; text-transform: uppercase; color: var(--ink); margin: 0; }
.super { font-family: var(--font-super); font-weight: 600; text-transform: uppercase; line-height: 1.08; margin: 0; text-wrap: balance; }
.label { font-family: var(--font-mono); font-size: 11px; line-height: 1.3; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 0; }
.cite { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin: 0; }
.cite::before { content: "Source ▸ "; }
.cite a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cite a:hover { color: var(--ink); }
.dek { font-size: 20px; line-height: 1.55; color: var(--ink-muted); margin: 0; max-width: 58ch; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-super); font-weight: 600; font-size: 16px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; padding: var(--space-3) var(--space-5); border: 2px solid transparent; border-radius: 0; cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s, transform .1s; background: none; color: var(--ink); }
.btn:active { transform: translate(1px,1px); }
.btn--primary { background: var(--red); border-color: var(--red); color: var(--on-red); }
.btn--primary:hover { background: var(--red-hover); border-color: var(--red-hover); }
.btn--secondary { border-color: var(--ink); color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--ground); }
.btn--ghost { padding-inline: 0; border-width: 0 0 2px; border-color: var(--red); white-space: normal; text-align: left; }
.btn--ghost:hover { color: var(--red-text); }
.btn--lg { font-size: 20px; padding: var(--space-4) var(--space-6); }
.btn--sm { font-size: 14px; padding: var(--space-2) var(--space-4); }
.btn--ghost.btn--sm { padding-inline: 0; }
.btn .arrow { font-family: var(--font-mono); font-weight: 500; }
.btn--primary.pulse { animation: pulse 2.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200,16,46,.55); } 50% { box-shadow: 0 0 0 10px rgba(200,16,46,0); } }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; line-height: 1; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 5px 8px; border: 1px solid currentColor; border-radius: var(--radius-1); color: var(--ink-muted); white-space: nowrap; }
.badge--live { background: var(--red); border-color: var(--red); color: var(--on-red); }
.badge--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--on-red); animation: blink 1.2s steps(2, start) infinite; }
.badge--new { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.badge--soon { color: var(--ink-muted); border-color: var(--line-strong); }
@keyframes blink { to { visibility: hidden; } }

/* ---------- Deadline strip ---------- */
.strip { background: var(--red); color: var(--on-red); font-family: var(--font-super); font-weight: 500; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-4); padding-block: 10px; text-align: center; }
.strip a { color: var(--on-red); font-weight: 600; text-underline-offset: 3px; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; background: var(--plate); border-bottom: 1px solid var(--line); }
.nav .wrap { height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.nav__mark { font-family: var(--font-drama); font-size: 28px; line-height: 1; color: var(--red-brush); text-shadow: 2px 2px 0 #000; text-decoration: none; letter-spacing: .02em; white-space: nowrap; }
.nav__links { display: flex; align-items: center; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.nav__link { font-family: var(--font-super); font-weight: 500; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); text-decoration: none; padding: var(--space-2) 0; border-bottom: 2px solid transparent; }
.nav__link:hover, .nav__link.is-active { color: var(--ink); border-bottom-color: var(--red); }
.reel { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); }
@media (max-width: 760px) { .nav__links li:not(:last-child) { display: none; } .nav__mark { font-size: 22px; } .nav__cta-long { display: none; } }
.nav__cta-short { display: none; }
/* Phones: the section links the top bar can't fit move to a slim row under it. The row hangs off the sticky bar
   (out of the page flow, so tucking it never shifts the page); it slides up behind the bar while scrolling down
   and comes back on any scroll up (site.js toggles .nav--tucked). main gets matching top room. */
.subnav { display: none; }
@media (max-width: 760px) {
  .nav .wrap { position: relative; z-index: 2; background: var(--plate); }
  .subnav { display: flex; justify-content: center; gap: var(--space-6); position: absolute; z-index: 1; left: 0; right: 0; top: 100%; height: 40px; background: var(--plate); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: transform .22s ease, opacity .18s ease; }
  .subnav__link { font-family: var(--font-super); font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); text-decoration: none; padding: 11px 2px 8px; border-bottom: 2px solid transparent; white-space: nowrap; }
  .subnav__link:hover, .subnav__link.is-active { color: var(--ink); border-bottom-color: var(--red); }
  .nav--tucked .subnav { transform: translateY(-100%); opacity: 0; pointer-events: none; }
  .nav + main { padding-top: 40px; }
  html { scroll-padding-top: calc(var(--nav-height) + 40px + 16px); }
}
@media (max-width: 760px) { .nav__cta-short { display: inline; } }
@media (max-width: 520px) { .hero__actions .btn, .ballot__actions .btn, .share__row .btn { white-space: normal; text-align: center; } .btn--lg { font-size: 17px; padding: var(--space-4) var(--space-5); } .hero__actions .btn { flex: 1 1 100%; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: calc(var(--space-9) + 8px) var(--space-9); isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(ellipse 60% 70% at 72% 40%, rgba(239,234,224,.07), transparent 70%); animation: projector 4.5s steps(1) infinite; }
@keyframes projector { 0%, 100% { opacity: 1; } 12% { opacity: .82; } 13% { opacity: 1; } 47% { opacity: .9; } 48% { opacity: 1; } 71% { opacity: .78; } 72% { opacity: 1; } }
.drips { position: absolute; top: 0; left: 0; right: 0; height: 120px; z-index: 1; pointer-events: none; display: flex; justify-content: space-around; }
.drip { position: relative; width: var(--w, 10px); height: var(--h, 40px); background: var(--red-brush); border-radius: 0 0 999px 999px; transform-origin: top; animation: ooze var(--d, 7s) ease-in-out infinite alternate; }
.drip::after { content: ""; position: absolute; left: 50%; top: 100%; width: calc(var(--w, 10px) * .8); height: calc(var(--w, 10px) * 1.1); background: var(--red-brush); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; transform: translate(-50%, -40%); animation: drop var(--d, 7s) ease-in infinite; animation-delay: var(--dl, 0s); }
@keyframes ooze { from { transform: scaleY(.75); } to { transform: scaleY(1.15); } }
@keyframes drop { 0%, 70% { transform: translate(-50%, -40%); opacity: 1; } 95% { transform: translate(-50%, 240px); opacity: .9; } 100% { transform: translate(-50%, 260px); opacity: 0; } }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; position: relative; z-index: 2; }
.hero__copy { display: grid; gap: var(--space-5); min-width: 0; }
.hero__title { margin: 0; line-height: 0; }
/* The title is the series logo (transparent PNG art). Same projector jitter + flicker as the tag lockup. */
.hero__logo { display: block; width: 100%; max-width: 620px; height: auto; margin-left: -2%; animation: weave-b 3.3s steps(1) infinite, logoflick 7.4s steps(1) infinite; transition: filter .08s; }
/* Its own jitter and flicker, out of step with the tag lockup's weave/tagflick. */
@keyframes weave-b { 0%,100% { transform: translate(0,0); } 15% { transform: translate(-1px,1px); } 35% { transform: translate(1px,-1px); } 50% { transform: translate(0,0); } 65% { transform: translate(2px,0); } 85% { transform: translate(-1px,-1px); } }
@keyframes logoflick { 0%, 100% { opacity: 1; } 41% { opacity: .74; } 42% { opacity: 1; } 77% { opacity: .62; } 77.6% { opacity: .92; } 78.2% { opacity: 1; } }
.hero.is-strike .hero__logo { filter: brightness(1.45) drop-shadow(0 0 18px rgba(255,255,255,.35)); }

/* Storm: sporadic lightning behind the hero content (site.js fires it at random intervals). */
.storm { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.storm__sky { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 70% 60% at var(--sx, 50%) 0%, rgba(235,240,255,.55), rgba(200,210,235,.16) 45%, transparent 75%); mix-blend-mode: screen; }
.storm__bolt { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; overflow: visible; filter: drop-shadow(0 0 6px rgba(225,232,255,.95)) drop-shadow(0 0 22px rgba(200,16,46,.45)); }
.storm__bolt path { fill: none; stroke: #f4f6ff; stroke-linecap: round; stroke-linejoin: round; }
@keyframes weave { 0%,100% { transform: translate(0,0); } 20% { transform: translate(1px,0); } 40% { transform: translate(0,1px); } 60% { transform: translate(-1px,0); } 80% { transform: translate(0,-1px); } }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.fog { position: absolute; left: -20%; right: -20%; bottom: -10%; height: 46%; z-index: 1; pointer-events: none; opacity: .5;
  background: radial-gradient(closest-side, rgba(239,234,224,.10), transparent) 0 60% / 40% 70% repeat-x, radial-gradient(closest-side, rgba(239,234,224,.08), transparent) 20% 100% / 30% 60% repeat-x;
  animation: fog 38s linear infinite; }
.fog--b { animation-duration: 60s; animation-direction: reverse; opacity: .35; bottom: -18%; }
@keyframes fog { from { transform: translateX(0); } to { transform: translateX(20%); } }

/* Featured "tonight" frame */
.tonight { position: relative; display: grid; gap: var(--space-3); min-width: 0; }
.screen { position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 100%; overflow: hidden; background: var(--surface-sunk); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.6); isolation: isolate; cursor: pointer; }
.screen img { width: 100%; height: 100%; object-fit: cover; animation: dolly 14s ease-in-out infinite alternate, flick 5s steps(1) infinite; }
@keyframes dolly { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes flick { 0%,100% { filter: brightness(1) contrast(1.06); } 31% { filter: brightness(.86) contrast(1.06); } 32% { filter: brightness(1) contrast(1.06); } 63% { filter: brightness(.92) contrast(1.1); } 64% { filter: brightness(1) contrast(1.06); } }
.screen::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,var(--vignette)) 100%); }
.screen::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #ffffff; opacity: 0; animation: lightning 9s linear infinite; }
@keyframes lightning { 0%, 88% { opacity: 0; } 89% { opacity: .55; } 90% { opacity: 0; } 91.5% { opacity: .35; } 93% { opacity: 0; } }
.screen__meta { position: absolute; z-index: 4; left: var(--space-4); right: var(--space-4); top: var(--space-4); display: flex; justify-content: space-between; gap: var(--space-2); }
.play { position: absolute; z-index: 4; left: var(--space-4); bottom: var(--space-4); width: 64px; height: 64px; display: grid; place-items: center; background: var(--red); color: var(--on-red); border: 0; cursor: pointer; transition: transform .15s; }
.play::before { content: ""; border-left: 18px solid currentColor; border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }
.screen:hover .play { transform: scale(1.06); }
.tonight__cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.tonight__title { font-family: var(--font-drama); font-size: 40px; line-height: 1; letter-spacing: .015em; margin: 0; }
.tonight__line { color: var(--ink-muted); font-size: 17px; margin: 0; }

/* Countdown */
.count { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: var(--space-4); justify-self: start; }
.count__num { font-family: var(--font-drama); font-size: 88px; line-height: .9; color: var(--on-red); background: var(--red); padding: var(--space-2) var(--space-4) 0; text-shadow: var(--shadow-drama); min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; animation: flip .8s cubic-bezier(.2,1.6,.4,1) 1 both; }
@keyframes flip { from { transform: perspective(400px) rotateX(-90deg); } to { transform: none; } }
.count__words { display: grid; gap: var(--space-1); }
.count__top { font-family: var(--font-marker); font-size: 20px; line-height: 1.1; text-transform: uppercase; }
.count__bottom { font-family: var(--font-super); font-weight: 600; font-size: 26px; line-height: 1; text-transform: uppercase; }

@media (max-width: 900px) { .hero__grid { grid-template-columns: minmax(0,1fr); gap: var(--space-7); } .hero { padding-block: var(--space-9) var(--space-8); } }

/* ---------- Film strip ---------- */
.filmstrip { position: relative; height: 28px; background: var(--plate); overflow: hidden; }
.filmstrip::before, .filmstrip::after { content: ""; position: absolute; left: -48px; right: -48px; height: 6px; background: repeating-linear-gradient(90deg, var(--line-strong) 0 12px, transparent 12px 24px); animation: sprocket 1.2s linear infinite; }
.filmstrip::before { top: 4px; } .filmstrip::after { bottom: 4px; }
@keyframes sprocket { from { transform: translateX(0); } to { transform: translateX(24px); } }

/* ---------- Sections ---------- */
.section { padding-block: var(--space-9); position: relative; }
@media (max-width: 760px) { .section { padding-block: var(--space-8); } }
.section-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-7); position: relative; }
.section-head__title { font-size: clamp(52px, 7vw, 84px); }
.section-head .dek { margin-top: var(--space-2); }
.section-head--split { grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: var(--space-5); }
@media (max-width: 760px) { .section-head--split { grid-template-columns: minmax(0,1fr); } }

/* Eyes in the dark */
.eyes { display: flex; gap: 20px; padding: 22px 30px; align-items: center; justify-self: end; }
/* The almond stays dim; the glowing iris rolls inside it (--px/--py) while the whole eye leans toward the pointer (--ex/--ey). */
.eye { width: 40px; height: 22px; border-radius: 50%; background:
    radial-gradient(circle at calc(50% + var(--px,0px)) calc(50% + var(--py,0px)), #ffe3e3 0 2px, #ffd1d1 3px 4px, var(--red-text) 5px 7px, var(--red) 8px 10px, transparent 11px),
    radial-gradient(ellipse at 50% 50%, rgba(200,16,46,.55) 0 45%, rgba(58,16,21,.95) 46% 70%, transparent 71%);
  box-shadow: 0 0 18px rgba(255,107,107,.45); transform: translate(var(--ex,0px), var(--ey,0px)); animation: lids 6s infinite; }
.eye:nth-child(2) { animation-delay: .06s; }
@keyframes lids { 0%, 44%, 50%, 92%, 100% { transform: translate(var(--ex,0px), var(--ey,0px)) scaleY(1); } 46%, 48%, 95% { transform: translate(var(--ex,0px), var(--ey,0px)) scaleY(.08); } }

/* Filter chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.chip { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); background: transparent; border: 1px solid var(--line-strong); padding: 9px 12px; cursor: pointer; }
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }

/* ---------- Episode cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--space-6); }
.ep { position: relative; display: flex; flex-direction: column; background: var(--surface-raised); border: 1px solid var(--line); min-width: 0; transition: box-shadow .2s, transform .2s; }
.ep:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }
.ep__still { position: relative; aspect-ratio: 16/9; overflow: hidden; background: repeating-linear-gradient(135deg, var(--surface-sunk) 0 14px, var(--ground) 14px 28px); isolation: isolate; }
.ep__still img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1), filter .3s; }
.ep:hover .ep__still img { transform: scale(1.08); }
.ep__still::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.55) 100%); }
.ep__still::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); }
.ep:hover .ep__still::after { opacity: 1; animation: scan .18s steps(2) infinite; }
@keyframes scan { 50% { opacity: .6; } }
.ep__badges { position: absolute; z-index: 3; top: var(--space-3); left: var(--space-3); display: flex; gap: var(--space-2); }
.ep__play { position: absolute; z-index: 3; left: var(--space-4); bottom: var(--space-4); width: 48px; height: 48px; display: grid; place-items: center; background: var(--red); color: var(--on-red); border: 0; cursor: pointer; }
.ep__play::before { content: ""; border-left: 14px solid currentColor; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.ep:hover .ep__play { animation: pulse 1.6s ease-in-out infinite; }
.ep__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); flex: 1; }
.ep__code { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.ep__title { font-family: var(--font-drama); font-size: 36px; line-height: 1; letter-spacing: .015em; color: var(--ink); margin: 0; text-wrap: balance; }
.ep__fact { font-size: 15px; line-height: 1.55; color: var(--ink-muted); margin: 0; }
.ep__cold { font-family: var(--font-marker); font-size: 16px; color: var(--ink-muted); margin: 0; }
.ep__foot { margin-top: auto; padding-top: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.ep--locked .ep__still img { filter: grayscale(1) brightness(.3) blur(2px); transform: scale(1.04); }
.ep--locked .ep__title { color: var(--ink-muted); }
.ep__opens { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; }
.ep__opens span { font-family: var(--font-super); font-weight: 600; font-size: 20px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--plate); padding: var(--space-2) var(--space-4); border: 1px solid var(--line-strong); animation: dying 7s steps(1) infinite; animation-delay: var(--dly, 0s); }
@keyframes dying { 0%, 100% { opacity: 1; } 8% { opacity: .35; } 9% { opacity: 1; } 10% { opacity: .5; } 11% { opacity: 1; } 61% { opacity: .4; } 62% { opacity: 1; } }
.strand { margin-top: var(--space-8); display: grid; gap: var(--space-2); }
.strand .super { font-size: 28px; }
.ep.is-hidden { display: none; }
.empty { color: var(--ink-muted); }

.section--tight { padding-block: var(--space-8); }
.nextup { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-5) var(--space-7); }
.nextup__copy { display: grid; gap: var(--space-2); min-width: 0; flex: 1 1 420px; }
.nextup__title { font-size: clamp(48px, 6vw, 72px); }
#episodes > .wrap > .section-head { margin-top: 0; }

.ep--tease { border-style: dashed; border-color: var(--line-strong); }
.ep--tease .ep__still { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 60%, rgba(200,16,46,.28), transparent 65%), repeating-linear-gradient(135deg, var(--surface-sunk) 0 14px, var(--ground) 14px 28px); }
.tease__q { font-family: var(--font-drama); font-size: 120px; line-height: 1; color: var(--red-brush); text-shadow: var(--shadow-drama); animation: dying 5s steps(1) infinite, weave 2.4s steps(1) infinite; }
.ep--tease .ep__title { color: var(--ink-muted); }
@media (max-width: 640px) { .ep--tease { flex-direction: row; } .ep--tease .ep__still { flex: 0 0 38%; aspect-ratio: auto; min-height: 112px; } .tease__q { font-size: 72px; } .ep--tease .ep__title { font-size: 24px; } .ep--tease .ep__body { padding: var(--space-3) var(--space-4); gap: 4px; } }

/* ---------- Tag band (the locked tag) ---------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tagband { background: var(--plate); padding-block: var(--space-8); text-align: center; position: relative; overflow: hidden; }
.tagband__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: center; }
.tagband__right { display: grid; justify-items: center; gap: var(--space-6); min-width: 0; }
.tagband__lockup { width: 100%; max-width: 760px; justify-self: center; animation: weave 2.6s steps(1) infinite, tagflick 6s steps(1) infinite; }
.poster--tag { margin: 64px 0 0; max-width: 460px; justify-self: center; width: 100%; transform: rotate(-2deg); }
@media (max-width: 900px) { .tagband__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } .poster--tag { width: 78%; } }
@keyframes tagflick { 0%, 100% { opacity: 1; } 22% { opacity: .7; } 23% { opacity: 1; } 24% { opacity: .85; } 25% { opacity: 1; } }
.tagband .kicker { margin-top: var(--space-5); font-size: 26px; }

/* ---------- The record ---------- */
.neon { display: inline-grid; justify-self: start; place-items: center; padding: 10px 22px; border: 2px solid var(--line-strong); background: var(--plate); font-family: var(--font-super); font-weight: 600; font-size: 34px; letter-spacing: .22em; line-height: 1; }
.neon span { grid-area: 1 / 1; }
.neon__a { color: #f3efe6; text-shadow: 0 0 6px rgba(243,239,230,.8), 0 0 18px rgba(243,239,230,.4); animation: vacancy 8s steps(1) infinite; }
.neon__b { color: #ff4d5e; text-shadow: 0 0 6px rgba(255,77,94,.9), 0 0 22px rgba(200,16,46,.8); animation: veto 8s steps(1) infinite; }
@keyframes vacancy { 0%, 40% { opacity: 1; } 41% { opacity: .2; } 42% { opacity: 1; } 43% { opacity: .1; } 44%, 100% { opacity: 0; } }
@keyframes veto { 0%, 46% { opacity: 0; } 47% { opacity: .5; } 48% { opacity: 0; } 49%, 97% { opacity: 1; } 98%, 100% { opacity: 0; } }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-6); margin-bottom: var(--space-8); }
.stat { display: grid; gap: var(--space-2); align-content: start; }
.stat__num { font-family: var(--font-drama); font-size: clamp(72px, 9vw, 120px); line-height: .85; color: var(--red-brush); text-shadow: var(--shadow-drama); margin: 0; font-variant-numeric: tabular-nums; }
.stat__label { font-family: var(--font-super); font-weight: 600; font-size: 20px; line-height: 1.15; text-transform: uppercase; margin: 0; }
.drawer { display: grid; gap: var(--space-7); }
.drawer__tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); border-bottom: 2px solid var(--line-strong); padding-left: var(--space-2); }
.drawer__tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-super); font-weight: 600; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-sunk); border: 1px solid var(--line); border-bottom: 0; padding: var(--space-3) var(--space-4); margin-bottom: -2px; cursor: pointer; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 100%, 0 100%); transition: color .15s, background-color .15s, transform .15s; }
.drawer__tab:hover { color: var(--ink); transform: translateY(-2px); }
.drawer__tab[aria-selected="true"] { color: var(--ink); background: var(--surface-raised); border-color: var(--line-strong); border-bottom: 2px solid var(--surface-raised); transform: translateY(-4px); padding-bottom: calc(var(--space-3) + 4px); }
.drawer__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 3px; background: var(--red); }
.drawer__count { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--ink-faint); border: 1px solid var(--line-strong); padding: 2px 6px; }
.drawer__tab[aria-selected="true"] .drawer__count { color: var(--on-red); background: var(--red); border-color: var(--red); }
.drawer__panel { animation: drawer .35s ease-out; }
@keyframes drawer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .drawer__tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0; scrollbar-width: none; } .drawer__tabs::-webkit-scrollbar { display: none; } .drawer__tab { flex: 0 0 auto; font-size: 14px; padding-inline: var(--space-3); } }
.cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: var(--space-8) var(--space-6); padding-top: var(--space-4); }
.case { position: relative; display: grid; gap: var(--space-3); align-content: start; background: var(--surface-raised); border: 1px solid var(--line); padding: calc(var(--space-6) + 44px) var(--space-6) var(--space-6); min-width: 0; }
.cases--solo { grid-template-columns: minmax(0, 1fr); }
.cases--solo .case__claim { max-width: 32ch; }
.case__tab { position: absolute; top: -1px; left: var(--space-5); transform: translateY(-50%); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; background: var(--plate); color: var(--plate-ink); border: 1px solid var(--line-strong); padding: 6px 10px; }
.case__claim { font-family: var(--font-super); font-weight: 600; font-size: 26px; line-height: 1.1; text-transform: uppercase; margin: 0; max-width: 26ch; text-wrap: balance; }
.case__detail { color: var(--ink-muted); margin: 0; }
.case__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--line); }
.stamp { position: absolute; top: var(--space-4); right: var(--space-5); font-family: var(--font-drama); font-size: 24px; line-height: 1; letter-spacing: .06em; color: var(--red-text); border: 3px solid currentColor; padding: 4px 10px 2px; transform: rotate(-7deg); opacity: .92; max-width: 45%; text-align: center; }
.case.is-in .stamp { animation: slam .42s cubic-bezier(.2,1.4,.4,1) both; }
.case.is-in { animation: jolt .32s .22s ease-out both; }
@keyframes slam { 0% { transform: rotate(-16deg) scale(2.6); opacity: 0; } 60% { transform: rotate(-6deg) scale(.92); opacity: 1; } 100% { transform: rotate(-7deg) scale(1); opacity: .92; } }
@keyframes jolt { 0%, 100% { transform: none; } 25% { transform: translate(2px, 1px); } 50% { transform: translate(-2px, -1px); } 75% { transform: translate(1px, -1px); } }

/* ---------- Halloween one-sheet + vote plan ---------- */
.halloween { background: var(--plate); }
.onesheet { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: start; }
@media (max-width: 900px) { .onesheet { grid-template-columns: minmax(0,1fr); gap: var(--space-7); } }
.poster { position: relative; max-width: 560px; margin: 72px 0 0; transform: rotate(-1.5deg); isolation: isolate; }
.poster__stage { position: relative; }
.poster__frame { position: relative; aspect-ratio: 1 / 1; border: 8px solid var(--red); box-shadow: inset 0 0 0 3px var(--plate), var(--shadow-ballot); background: radial-gradient(ellipse 70% 62% at 50% 48%, rgba(200,16,46,.42), rgba(200,16,46,0) 72%), #000; overflow: hidden; }
.poster__frame::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 62% at 50% 48%, rgba(200,16,46,.25), transparent 72%); animation: throb 3.4s ease-in-out infinite; }
@keyframes throb { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.poster__cut { position: absolute; z-index: 2; left: 4%; width: 92%; bottom: 8px; height: auto; max-width: none; filter: contrast(1.08) drop-shadow(0 -6px 22px rgba(0,0,0,.85)); transform-origin: 50% 100%; animation: breathe 6s ease-in-out infinite alternate; }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.03); } }
/* Backlight: a red flash goes off behind her as the poster comes into view (two flickers), then keeps pulsing.
   It sits inside the frame, under the cutout, so her silhouette stays in front of the light. */
.poster__flash { position: absolute; inset: 8px; z-index: 1; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(ellipse 58% 54% at 50% 44%, rgba(255,92,108,.95) 0, rgba(226,24,52,.75) 30%, rgba(200,16,46,.28) 58%, transparent 76%); }
.poster.is-in .poster__flash { animation: backflash 1.5s ease-out both, backpulse 2.6s ease-in-out 1.5s infinite; }
.poster.is-in .poster__cut { animation: breathe 6s ease-in-out infinite alternate, backlit 1.5s ease-out both, rimpulse 2.6s ease-in-out 1.5s infinite; }
@keyframes backflash { 0% { opacity: 0; } 6% { opacity: 1; } 14% { opacity: .25; } 22% { opacity: .95; } 100% { opacity: .2; } }
@keyframes backpulse { 0%, 100% { opacity: .2; transform: scale(.94); } 50% { opacity: .95; transform: scale(1.04); } }
@keyframes rimpulse { 0%, 100% { filter: contrast(1.08) drop-shadow(0 -6px 22px rgba(0,0,0,.85)); } 50% { filter: contrast(1.08) drop-shadow(0 0 20px rgba(255,64,84,.7)); } }
@keyframes backlit { 0%, 100% { filter: contrast(1.08) drop-shadow(0 -6px 22px rgba(0,0,0,.85)); } 6%, 22% { filter: contrast(1.08) drop-shadow(0 0 26px rgba(255,64,84,.95)); } 14% { filter: contrast(1.08) drop-shadow(0 0 10px rgba(255,64,84,.4)); } }
.poster__cap { position: relative; z-index: 3; padding: var(--space-4) 0 0; }
.poster__cap .drama { font-size: clamp(36px, 4.6vw, 54px); line-height: .95; }
.poster__cap .label { color: var(--ink-muted); margin-top: var(--space-2); }
@media (max-width: 900px) { .poster { margin-inline: auto; width: 88%; } }
.plan { display: grid; gap: var(--space-5); min-width: 0; }
.plan__lead { display: grid; gap: var(--space-3); }
.plan__lead .drama { font-size: clamp(48px, 6.5vw, 80px); }
.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 2px solid var(--line-strong); }
.tab { font-family: var(--font-super); font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; padding: var(--space-3) var(--space-4); cursor: pointer; }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--red); }
.tab:hover { color: var(--ink); }
.panel { display: grid; gap: var(--space-5); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-left: 2px solid var(--line-strong); }
.step { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0 var(--space-3) var(--space-5); }
.step::before { content: ""; position: absolute; left: -7px; top: 19px; width: 12px; height: 12px; background: var(--ground); border: 2px solid var(--ink-faint); }
.step__date { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); padding-top: 3px; }
.step__what { margin: 0; color: var(--ink-muted); }
.step__what strong { color: var(--ink); font-weight: 600; }
.step.is-past { opacity: .5; }
.step.is-past .step__what { text-decoration: line-through; text-decoration-color: var(--red-text); }
.step.is-next::before { background: var(--red); border-color: var(--red); animation: pulse 2s infinite; }
.step.is-next .step__date { color: var(--red-text); }
@media (max-width: 520px) { .step { grid-template-columns: minmax(0,1fr); gap: var(--space-1); } }
.tool { background: var(--surface-raised); border: 1px solid var(--line); padding: var(--space-5); display: grid; gap: var(--space-4); }
.tool__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); align-items: baseline; }
.tool__head .super { font-size: 22px; }
.tool__embed { min-height: 64px; display: grid; gap: var(--space-3); }
.tool__fallback { font-size: 15px; color: var(--ink-muted); margin: 0; }
.tool__links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.note { font-size: 14px; color: var(--ink-faint); margin: 0; }

/* ---------- Ballot (end card) + join ---------- */
.endslam { padding-block: var(--space-9) var(--space-9); }
.endslam .wrap { display: grid; justify-items: center; }
.ballot { width: min(640px, 100%); }
.join { background: var(--surface-sunk); border-top: 1px solid var(--line); }
.join__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "intro form" "more form"; grid-template-rows: auto 1fr; column-gap: var(--space-8); row-gap: var(--space-6); align-items: start; }
.join__intro { grid-area: intro; } .signup { grid-area: form; } .join__more { grid-area: more; display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
@media (max-width: 900px) { .join__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "more"; grid-template-rows: auto; row-gap: var(--space-7); } }
.form-status:empty { display: none; }
.join__intro { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.join__title { font-size: clamp(52px, 6.5vw, 84px); }
.join__share { display: grid; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.join__donate { justify-self: start; }
.ballot { position: relative; background: var(--ballot); color: var(--on-ballot); border: 6px solid var(--red); box-shadow: inset 0 0 0 3px var(--ballot), inset 0 0 0 5px var(--red), var(--shadow-ballot); border-radius: var(--radius-1); padding: var(--space-6); transform: rotate(-1.2deg); max-width: 100%; }
.ballot.is-in { animation: ballotslam .55s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes ballotslam { 0% { transform: translateY(-90px) rotate(-9deg) scale(1.12); opacity: 0; } 70% { transform: translateY(4px) rotate(-.6deg) scale(.99); opacity: 1; } 100% { transform: rotate(-1.2deg); } }
.shake { animation: shake .4s .4s ease-out both; }
@keyframes shake { 0%,100% { transform: none; } 20% { transform: translate(-4px,2px); } 40% { transform: translate(4px,-2px); } 60% { transform: translate(-3px,-1px); } 80% { transform: translate(2px,1px); } }
.ballot__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); border-bottom: 2px solid var(--on-ballot); padding-bottom: var(--space-2); margin-bottom: var(--space-5); }
.ballot__word { font-family: var(--font-super); font-weight: 700; font-size: 32px; letter-spacing: .32em; color: var(--red); line-height: 1; }
.ballot__date { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.ballot__choice { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: var(--space-4); align-items: center; margin-bottom: var(--space-5); }
.ballot__box { position: relative; width: 44px; height: 44px; border: 3px solid var(--on-ballot); }
.ballot__box::before, .ballot__box::after { content: ""; position: absolute; left: 50%; top: 50%; width: 52px; height: 5px; background: var(--red); border-radius: 2px; transform-origin: center; }
.ballot__box::before { transform: translate(-50%,-50%) rotate(42deg); }
.ballot__box::after { transform: translate(-50%,-50%) rotate(-38deg); }
.ballot.is-in .ballot__box::before { animation: mark1 .25s .55s ease-out both; }
.ballot.is-in .ballot__box::after { animation: mark2 .25s .75s ease-out both; }
@keyframes mark1 { from { width: 0; } to { width: 52px; } }
@keyframes mark2 { from { width: 0; } to { width: 52px; } }
.ballot__text { font-family: var(--font-super); font-weight: 700; font-size: clamp(26px, 3.5vw, 34px); line-height: 1; text-transform: uppercase; margin: 0; }
.ballot__fine { font-size: 16px; margin: 0 0 var(--space-5); }
.ballot__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ballot .btn--secondary { color: var(--on-ballot); border-color: var(--on-ballot); }
.ballot .btn--secondary:hover { background: var(--on-ballot); color: var(--ballot); }
.ballot .btn:focus-visible { outline-color: var(--on-ballot); }
.share__row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.copied { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); min-height: 1.4em; margin: 0; }
.signup { display: grid; gap: var(--space-5); background: var(--surface-raised); border: 1px solid var(--line); padding: var(--space-6); min-width: 0; }
.signup__submit { justify-self: start; }
@media (max-width: 520px) { .signup { padding: var(--space-5); } .signup__submit { justify-self: stretch; } }
.fields { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: var(--space-4); }
@media (max-width: 560px) { .fields { grid-template-columns: minmax(0,1fr); } }
.field { display: grid; gap: var(--space-2); min-width: 0; }
.field--wide { grid-column: 1 / -1; }
.field__label { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.field__label em { font-style: normal; color: var(--ink-faint); letter-spacing: .08em; }
.field__input { width: 100%; font-family: var(--font-serif); font-size: 17px; line-height: 1.4; color: var(--ink); background: var(--surface-sunk); border: 2px solid var(--line-strong); border-radius: 0; padding: 12px 14px; }
.field__input::placeholder { color: var(--ink-faint); }
.field__input:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--ink); }
.field__help { font-size: 13px; line-height: 1.45; color: var(--ink-faint); }
.field--error .field__input { border-color: var(--red-text); }
.field--error .field__help { color: var(--red-text); }
.optin { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: var(--space-3); align-items: start; padding: var(--space-4); border: 1px solid var(--line-strong); background: var(--surface-sunk); }
.optin input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--red); cursor: pointer; }
.optin label { font-size: 14px; line-height: 1.55; color: var(--ink-muted); cursor: pointer; }
.optin label strong { color: var(--ink); font-weight: 600; }
.optin a { color: var(--ink); text-underline-offset: 3px; }
.optin.is-disabled input { opacity: .45; cursor: not-allowed; }
.form-status { font-size: 15px; margin: 0; min-height: 1.5em; color: var(--ink-muted); }
.form-status.is-error { color: var(--red-text); }

/* ---------- Footer ---------- */
.footer { background: var(--plate); border-top: 1px solid var(--line); padding-block: var(--space-8) var(--space-6); }
.footer .wrap { display: grid; gap: var(--space-6); }
.footer__end { display: grid; justify-items: center; text-align: center; gap: var(--space-3); padding-bottom: var(--space-4); }
.wake { font-family: var(--font-drama); font-size: clamp(56px, 9vw, 112px); color: var(--ink); text-shadow: var(--shadow-drama); margin: 0; line-height: .9; letter-spacing: .01em; display: inline-block; }
.wake.is-in { animation: alarm .9s ease-in-out both; }
@keyframes alarm { 0%,100% { transform: rotate(0); } 10% { transform: rotate(-4deg); } 20% { transform: rotate(4deg); } 30% { transform: rotate(-3deg); } 40% { transform: rotate(3deg); } 50% { transform: rotate(-2deg); } 60% { transform: rotate(1deg); } }
.footer__cta { font-family: var(--font-super); font-weight: 600; font-size: clamp(18px, 2.4vw, 24px); letter-spacing: .14em; text-transform: uppercase; color: var(--red-text); margin: 0; }
.footer__cta span { color: var(--ink-faint); padding-inline: .4em; }
.disclaimer { background: #000000; color: #ffffff; border: 1px solid var(--line-strong); font-family: var(--font-mono); font-size: 13px; line-height: 1.7; font-weight: 500; letter-spacing: .02em; padding: var(--space-4) var(--space-5); text-align: center; margin: 0; text-wrap: balance; }
.footer__fine { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-6); font-size: 13px; color: var(--ink-faint); }
.footer__fine p { margin: 0; max-width: 70ch; }
.footer__fine nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer__fine a { color: var(--ink-muted); text-underline-offset: 3px; }

/* ---------- Player dialog ---------- */
dialog.player { width: min(960px, calc(100vw - 32px)); max-width: 100%; padding: 0; border: 1px solid var(--line-strong); background: var(--plate); color: var(--ink); }
dialog.player::backdrop { background: rgba(0,0,0,.86); }
.player__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.player__bar .label { color: var(--ink-muted); }
.player__close { background: none; border: 1px solid var(--line-strong); color: var(--ink); font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; cursor: pointer; }
.player__frame { position: relative; aspect-ratio: 16/9; background: #000; }
.player__frame video { width: 100%; height: 100%; display: block; background: #000; }
.player__msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--space-6); background: rgba(10,10,10,.82); color: var(--ink); font-size: 16px; }
.player__msg[hidden] { display: none; }
.player__info { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5) var(--space-5); }
.player__title { font-family: var(--font-drama); font-size: 36px; line-height: 1; margin: 0; }
.player__share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); margin-top: var(--space-2); }
.player__share .label { margin-right: var(--space-2); color: var(--ink-muted); }
.player__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .neon__a { opacity: 0; } .neon__b { opacity: 1; }
}

/* =====================================================================
   Responsive pass — mobile first priorities
   ===================================================================== */
/* Tablet: keep two-up layouts where they fit */
@media (max-width: 900px) and (min-width: 641px) {
  .tagband__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); }
  .poster--tag { width: 100%; }
}
@media (max-width: 900px) {
  .poster:not(.poster--tag) { width: min(440px, 86%); margin-inline: auto; }
  .eyes { display: none; }
}
/* Phones */
@media (max-width: 640px) {
  :root { --nav-height: 56px; }
  .section { padding-block: var(--space-8); }
  .section-head { margin-bottom: var(--space-6); }
  .strip { font-size: 13px; }
  .strip .wrap { padding-block: 8px; gap: 2px var(--space-3); }

  /* Hero: title, then the latest episode, then the actions */
  .hero { padding-block: calc(var(--space-8) + 24px) var(--space-7); }
  .hero__grid { gap: var(--space-5); }
  .hero__copy { display: contents; }
  .hero__title { order: 1; }
  .hero__logo { max-width: 440px; margin-inline: auto; }
  .tonight { order: 2; }
  .hero__actions { order: 3; }
  .count { order: 4; justify-self: stretch; }
  .count__num { font-size: 64px; }
  .count__bottom { font-size: 20px; }
  .tonight__title { font-size: 32px; }
  .play { width: 56px; height: 56px; }
  .drips { height: 72px; }
  .drip { height: calc(var(--h, 40px) * .6); }

  /* Title-card band */
  .tagband { padding-block: var(--space-7); }
  .poster--tag { width: 82%; margin-top: 48px; }
  .tagband__right { gap: var(--space-5); }
  .tagband__right .btn { width: 100%; }

  /* Stats: number beside its label */
  .stats { gap: var(--space-5); margin-bottom: var(--space-7); }
  .stat { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); align-items: center; }
  .stat__num { font-size: 64px; grid-row: span 2; }
  .stat__label { font-size: 17px; }
  .stat .cite { grid-column: 2; }

  /* Case files */
  .case { padding: calc(var(--space-5) + 40px) var(--space-5) var(--space-5); }
  .case__claim { font-size: 22px; }
  .stamp { font-size: 20px; top: var(--space-3); right: var(--space-4); }
  .case__detail { font-size: 16px; }

  /* Vote plan tabs scroll instead of wrapping */
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; font-size: 14px; padding-inline: var(--space-3); }
  .tool { padding: var(--space-4); }
  .tool__head { flex-direction: column; align-items: stretch; }
  .tool__links .btn--primary { width: 100%; }

  /* Halloween poster */
  .poster__cap .drama { font-size: 34px; }
  .plan__lead .drama { font-size: clamp(40px, 12vw, 56px); }

  /* Join */
  .join__title { font-size: clamp(48px, 14vw, 64px); }
  .share__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .share__row .btn { width: 100%; }
  .optin label { font-size: 13px; }

  /* Footer */
  .footer { padding-block: var(--space-7) var(--space-5); }
  .disclaimer { font-size: 12px; padding: var(--space-3) var(--space-4); }

  /* Episodes page: upcoming episodes become compact rows */
  .grid { gap: var(--space-4); }
  .ep--locked { flex-direction: row; align-items: stretch; }
  .ep--locked .ep__still { flex: 0 0 38%; aspect-ratio: auto; min-height: 112px; }
  .ep--locked .ep__opens span { font-size: 13px; padding: 4px 8px; letter-spacing: .04em; }
  .ep--locked .ep__body { padding: var(--space-3) var(--space-4); gap: 4px; min-width: 0; }
  .ep--locked .ep__title { font-size: 24px; }
  .ep--locked .ep__cold { font-size: 14px; }
  .ep--locked .ep__foot { padding-top: 4px; }
  .ep__title { font-size: 32px; }
}
/* Large tablet / small laptop */
@media (min-width: 901px) and (max-width: 1100px) {
  .hero__grid { gap: var(--space-6); }
  .onesheet, .join__grid { gap: var(--space-6); }
}
/* Touch targets */
@media (pointer: coarse) {
  .btn--sm { min-height: 44px; }
  .chip, .tab, .drawer__tab { min-height: 44px; }
}

/* ======================================================================
   Voter tools: the home panel's three cards and the /check, /register, /reminders pages.
   The @Vote form is a light page in an iframe; it sits on a ballot-paper card under a red label bar.
   ====================================================================== */
.toolnav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.toolcard { position: relative; display: grid; gap: var(--space-1); align-content: start; min-height: 96px; padding: var(--space-4) var(--space-6) var(--space-4) var(--space-4); background: var(--surface-sunk); border: 1px solid var(--line-strong); color: var(--ink); text-decoration: none; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.toolcard:hover { border-color: var(--red); background: var(--red-soft); transform: translateY(-2px); }
.toolcard:active { transform: translateY(1px); }
.toolcard__t { font-family: var(--font-super); font-weight: 600; font-size: 18px; line-height: 1.15; text-transform: uppercase; letter-spacing: .01em; }
.toolcard .arrow { position: absolute; right: var(--space-4); top: var(--space-4); font-family: var(--font-mono); color: var(--red-text); }
.toolcard[aria-current="page"] { border-color: var(--red); background: var(--red); color: var(--on-red); }
.toolcard[aria-current="page"] .label, .toolcard[aria-current="page"] .arrow { color: var(--on-red); }
.tool__more { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

.votepage { background: var(--plate); padding-block: var(--space-8) var(--space-9); position: relative; overflow: hidden; }
.votepage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 60% at 80% 10%, rgba(200,16,46,.16), transparent 70%); pointer-events: none; }
.votepage .wrap { position: relative; display: grid; gap: var(--space-7); }
.votepage .toolnav { max-width: 760px; }
.votepage .toolcard { min-height: 0; }
.votepage__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "copy form" "dates form"; grid-template-rows: auto 1fr; column-gap: var(--space-8); row-gap: var(--space-6); align-items: start; }
.votepage__copy { grid-area: copy; display: grid; gap: var(--space-5); min-width: 0; }
.votepage__form { grid-area: form; min-width: 0; }
.votepage__title { font-size: clamp(56px, 8vw, 104px); }
.votepage__dates { grid-area: dates; display: grid; gap: var(--space-3); min-width: 0; }
.voform { position: relative; min-width: 0; background: var(--ballot); color: var(--on-ballot); box-shadow: var(--shadow-ballot); border-radius: var(--radius-1); overflow: hidden; }
.voform__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); align-items: baseline; padding: var(--space-3) var(--space-4); background: var(--red); color: var(--on-red); }
.voform__bar .super { font-size: 20px; }
.voform__bar .label { color: var(--on-red); opacity: .85; }
.voform__body { padding: var(--space-2); min-height: 480px; }
.voform__body:has(iframe) { min-height: 0; }
.voform__body iframe { display: block; background: #fff; }
.voform__fail { display: none; padding: var(--space-6) var(--space-5); gap: var(--space-4); }
.voform__fail p { margin: 0; font-size: 17px; }
.voform__fail .btn { white-space: normal; text-align: center; }
.voform.is-failed .voform__body { display: none; }
.voform.is-failed .voform__fail { display: grid; }
.voform__alt { margin: var(--space-4) 0 0; font-size: 14px; color: var(--ink-faint); }
.voform__alt a { color: var(--ink-muted); }
@media (max-width: 900px) {
  .votepage__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "form" "dates"; grid-template-rows: none; row-gap: var(--space-6); }
}
@media (max-width: 640px) {
  .toolnav { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .toolcard { min-height: 0; padding: var(--space-3) var(--space-6) var(--space-3) var(--space-4); }
  .votepage { padding-block: var(--space-6) var(--space-8); }
  .votepage .toolnav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .votepage .toolcard { padding: var(--space-3) var(--space-2); text-align: center; }
  .votepage .toolcard .label, .votepage .toolcard .arrow { display: none; }
  .votepage .toolcard__t { font-size: 14px; }
  .voform__body { padding: 0; }
}

/* After a dated card drops out (e.g. Register after Oct 5), the remaining cards share the row. */
.toolnav:has(> .toolcard[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .toolnav:has(> .toolcard[hidden]) { grid-template-columns: minmax(0, 1fr); }
  .votepage .toolnav:has(> .toolcard[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Signup parked (index.html #join has data-signup="off"): hide the form and its intro lines; title + share + donate remain. */
[data-signup="off"] .signup, [data-signup="off"] .join__intro .kicker, [data-signup="off"] .join__intro .dek, [data-signup="off"] .join__or { display: none; }
[data-signup="off"] .join__share { border-top: 0; padding-top: 0; }
[data-signup="off"] .join__grid { grid-template-areas: "intro more"; grid-template-rows: auto; align-items: start; }
@media (max-width: 900px) { [data-signup="off"] .join__grid { grid-template-areas: "intro" "more"; } }