/* ============================================================
   The Popular Vote — BROADCAST SYSTEM
   The look of an election-night decision desk: chyron slabs,
   ultra-condensed caps, a star-field studio backdrop, and
   results that read like they're being called live on air.
   Palette is the logo's own: navy #001B49, red #D30311.
   ============================================================ */

:root {
  /* Brand */
  --navy: #001B49;
  --navy-deep: #000d24;
  --navy-mid: #0a2a5e;
  --navy-line: #1d3c72;
  --navy-panel: #071f47;
  --red: #D30311;
  --red-hot: #f0141f;
  --red-deep: #8c020c;

  /* Studio lighting — blue is the light source, red is the accent. */
  --blue-glow: #1f57ad;
  --blue-bright: #4f8ef7;
  --arc-bright: #2f5896;
  --arc-dim: #1b3a6d;
  --steel: #8ba4cb;

  /* Gold: the vote poster's frame, seals and called numbers. */
  --gold: #f7c53f;
  --gold-deep: #c2891a;
  --gold-line: rgba(247, 197, 63, .38);

  /* Neutrals — cool side only, to sit with the navy */
  --paper: #eef2f8;
  --paper-deep: #dbe3ef;
  --silver: #cdd8e9;
  --card: #ffffff;
  --ink: #0b1729;
  --muted: #5d6f8c;
  --hair: #c6d2e4;

  /* Type */
  --display: "Anton", "Archivo", "Arial Narrow", sans-serif;
  --ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --editorial: "Newsreader", Georgia, serif;

  /* Broadcast graphics are cut, not rounded. */
  --radius: 2px;
  --radius-lg: 3px;
  --cut: 13px;

  --lift: 0 24px 54px -22px rgba(0, 19, 52, .4), 0 3px 0 rgba(0, 27, 73, .1);
  --lift-navy: 0 34px 70px -28px rgba(0, 6, 20, .85);
  --shell: clamp(18px, 5.4vw, 80px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button, input { font: inherit; color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1em; height: 1em; flex: none; }

.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
}

.skip-link {
  position: fixed; top: 10px; left: 50%; translate: -50% -220%; z-index: 100;
  background: var(--red); color: #fff; padding: 12px 22px;
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  transition: translate .22s ease;
}
.skip-link:focus-visible { translate: -50% 0; }

:where(a, button, input):focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
}
.hero :where(a, button, input):focus-visible,
.join :where(a, button, input):focus-visible,
.steps :where(a, button):focus-visible { outline-color: #fff; }

/* ============================================================
   BROADCAST PRIMITIVES
   ============================================================ */

/* Every on-air slab shares one lean, so the whole page feels cut
   by the same graphics package: see --cut on the chyrons and tags. */

/* Condensed caps: the voice of a lower third. */
.chy-live, .chy-desk, .chy-poll, .subline, .creed, .eyebrow,
.ballot-eyebrow, .ballot-cat, .choose-label, .option-name, .flag,
.wire-k, .wire-tag, .masthead-nav a, .foot-nav a, .creds li,
.step-num, .ticker, .btn, .tally-total, .hero-stats dt {
  font-family: var(--ui);
  font-stretch: 68%;
  text-transform: uppercase;
}

h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .002em;
}
h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; }

/* Silvered chyron text, the way network plates are rendered. */
.chy-desk span {
  background: linear-gradient(180deg, #ffffff 8%, #cbd8ec 50%, #7d93b8 98%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Never let the plate lose its text if clipping isn't available. */
@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .chy-desk span { background: none; -webkit-text-fill-color: #fff; color: #fff; }
}

.pulse { position: relative; width: 9px; height: 9px; flex: none; border-radius: 50%; background: #fff; }
.pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .6);
  animation: pulse 2.1s ease-out infinite;
}
@keyframes pulse {
  0%   { opacity: .9; scale: 1; }
  70%, 100% { opacity: 0; scale: 2.6; }
}

/* ---------- Buttons: angled red action slabs ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  border: 0; cursor: pointer;
  padding: 14px 26px;
  font-size: 14px; font-weight: 800; letter-spacing: .1em;
  clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
  transition: background-color .18s ease, translate .18s ease;
}
.btn .ico { width: .8em; height: .8em; transition: translate .22s cubic-bezier(.2, .8, .3, 1); }
.btn:hover .ico { translate: 3px 0; }

.btn-red {
  background: linear-gradient(180deg, var(--red-hot) 0%, var(--red) 55%, var(--red-deep) 100%);
  color: #fff;
}
.btn-red:hover { background: linear-gradient(180deg, #ff2733 0%, var(--red-hot) 60%, var(--red) 100%); }
.btn-red:active { translate: 0 1px; }

/* ============================================================
   MASTHEAD — the studio bar
   ============================================================ */
.masthead {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: clamp(14px, 2.6vw, 36px);
  padding: 10px var(--shell);
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fc 100%);
  border-bottom: 1px solid var(--silver);
}
.brand { margin-right: auto; }
.brand img { width: clamp(206px, 22vw, 286px); }

/* The tagline, promoted to a credentials rail with divider rules. */
.creds {
  display: flex; align-items: stretch; gap: 0; flex: none;
  margin: 0; padding: 0; list-style: none;
  border-left: 1px solid var(--silver);
}
.creds li {
  display: flex; align-items: center; gap: 9px;
  padding: 4px clamp(12px, 1.6vw, 24px);
  border-right: 1px solid var(--silver);
  font-size: 12px; font-weight: 800; letter-spacing: .07em;
  color: var(--navy);
  white-space: nowrap;
}
.creds .ico { width: 21px; height: 21px; color: var(--navy); }

.masthead-nav { display: flex; gap: clamp(14px, 2vw, 30px); }
.masthead-nav a {
  position: relative;
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--navy);
  padding: 6px 0;
}
.masthead-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--red);
  scale: 0 1; transform-origin: left;
  transition: scale .26s cubic-bezier(.2, .8, .3, 1);
}
.masthead-nav a:hover::after { scale: 1 1; }

/* On-air rail: the lit seam between studio bar and field. */
.onair {
  position: relative; z-index: 40;
  height: 4px;
  background: linear-gradient(90deg,
    var(--red) 0%, var(--red-deep) 9%, var(--navy) 24%,
    var(--blue-bright) 50%, var(--navy) 76%, var(--red-deep) 91%, var(--red) 100%);
}
.onair::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px;
  background: linear-gradient(180deg, rgba(79, 142, 247, .38), transparent 78%);
  pointer-events: none;
}

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  position: relative; z-index: 30;
  display: flex; align-items: stretch;
  background: var(--navy-deep);
  border-bottom: 1px solid var(--navy-line);
  color: rgba(255, 255, 255, .84);
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em;
  overflow: hidden;
}
.ticker-tag {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  margin: 0; padding: 9px calc(var(--shell) * .5 + 16px) 9px var(--shell);
  background: linear-gradient(180deg, var(--red-hot), var(--red-deep));
  color: #fff; font-weight: 800;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.ticker-window { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; }
.ticker-run { display: flex; width: max-content; animation: roll 44s linear infinite; }
.ticker:hover .ticker-run { animation-play-state: paused; }
.ticker-set { display: flex; align-items: center; white-space: nowrap; padding-left: 26px; }
.ticker-set b { color: #fff; font-weight: 800; }
.ticker-set i {
  display: inline-block; width: 5px; height: 5px; margin: 0 22px;
  background: var(--red); rotate: 45deg;
}
@keyframes roll { to { translate: -50% 0; } }

/* ============================================================
   HERO — the decision desk
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(80% 60% at 76% 4%, rgba(79, 142, 247, .3) 0%, transparent 62%),
    radial-gradient(70% 55% at 6% 88%, rgba(211, 3, 17, .22) 0%, transparent 64%),
    linear-gradient(176deg, #012057 0%, var(--navy) 42%, var(--navy-deep) 100%);
  color: #fff;
  padding: clamp(30px, 4vw, 58px) var(--shell) clamp(150px, 17vw, 220px);
  overflow: hidden;
}

/* Studio backdrop: star field, ballot hairlines, light streaks. */
.hero-field { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-field::before {
  content: ""; position: absolute; inset: 0;
  background:
    url("/assets/starfield.svg") 0 0 / 200px 200px repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 78px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .026) 0 1px, transparent 1px 78px);
  mask-image: radial-gradient(96% 88% at 50% 34%, #000 26%, transparent 84%);
}
.hero-field::after {
  content: ""; position: absolute; inset: -12% -22%;
  background:
    linear-gradient(102deg, transparent 39%, rgba(79, 142, 247, .2) 46%, transparent 51%),
    linear-gradient(102deg, transparent 57%, rgba(79, 142, 247, .12) 62%, transparent 66%),
    linear-gradient(78deg, transparent 16%, rgba(211, 3, 17, .16) 23%, transparent 29%);
  filter: blur(7px);
}
.hero-swoosh {
  position: absolute; left: 0; bottom: -4%;
  width: 100%; height: 78%;
  opacity: .68;
}
.swoosh-line {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 1.5s cubic-bezier(.3, .7, .2, 1) .25s forwards;
}
.swoosh-line--ghost { animation-delay: .42s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Scanlines sit above the backdrop, below the type. */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 5, 18, .3) 0 1px, transparent 1px 3px);
  opacity: .55;
}

.hero-grid {
  position: relative; z-index: 2;
  max-width: 1340px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 500px);
  gap: clamp(38px, 5.4vw, 84px);
  /* Both columns break from the same line, so the chyron stack reads level
     with the ballot's top edge instead of floating down the field. */
  align-items: start;
}
/* The ballot drops 22px to clear its LIVE POLL tag — the copy matches it. */
.hero-copy { padding-top: 22px; }

/* ---------- The chyron stack ---------- */
.chy-live {
  display: inline-flex; align-items: center; gap: 11px;
  margin: 0 0 8px; padding: 8px 24px 8px 20px;
  background: linear-gradient(180deg, var(--red-hot), var(--red) 60%, var(--red-deep));
  color: #fff;
  font-size: clamp(11px, 1.05vw, 13px); font-weight: 800; letter-spacing: .16em;
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
}

.chy-desk {
  display: inline-flex; align-items: center; gap: 14px;
  margin: 0 0 26px; padding: 9px 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, transparent 46%),
    linear-gradient(180deg, var(--navy-mid) 0%, var(--navy-deep) 100%);
  border: 1px solid rgba(255, 255, 255, .3);
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  font-size: clamp(15px, 1.8vw, 23px); font-weight: 900; letter-spacing: .1em;
}
.chy-desk .ico { width: 14px; height: 14px; color: rgba(255, 255, 255, .82); }

.hero h1 {
  margin: 0 0 20px;
  font-size: clamp(58px, 9.6vw, 138px);
  line-height: .84;
  letter-spacing: -.006em;
  text-shadow: 0 12px 34px rgba(0, 6, 20, .55);
}
.hero h1 em {
  font-style: normal;
  color: var(--red-hot);
  text-shadow: 0 12px 30px rgba(140, 2, 12, .6);
}

.subline {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 22px;
  font-size: clamp(13px, 1.32vw, 17px); font-weight: 800; letter-spacing: .1em;
  color: #fff;
}
.subline::before {
  content: ""; flex: none; width: clamp(22px, 4vw, 46px); height: 4px;
  background: var(--red);
}

.lede {
  max-width: 36ch;
  margin: 0 0 26px;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.56;
  color: rgba(219, 231, 250, .76);
}

/* The tagline as an on-air plate, stars and all. */
.creed {
  display: inline-flex; align-items: center; gap: clamp(12px, 2vw, 22px);
  margin: 0 0 34px; padding: 13px clamp(16px, 2vw, 26px);
  background: linear-gradient(180deg, rgba(11, 42, 92, .92), rgba(0, 13, 36, .92));
  border: 1px solid rgba(139, 164, 203, .42);
  font-size: clamp(11.5px, 1.15vw, 14px); font-weight: 800; letter-spacing: .15em;
  color: #fff;
}
.creed b { color: var(--red-hot); font-weight: 800; }
.creed .ico { width: 13px; height: 13px; color: var(--red); }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: clamp(22px, 4vw, 54px);
  margin: 0; padding-top: 24px;
  border-top: 1px solid rgba(139, 164, 203, .28);
}
.hero-stats dt {
  font-size: 11px; font-weight: 800; letter-spacing: .16em;
  color: rgba(190, 209, 238, .62);
}
.hero-stats dd {
  margin: 4px 0 0;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 3vw, 44px); line-height: 1;
  letter-spacing: .01em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* The navy field ends on the logo's own arc. */
.hero-hem {
  position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; height: clamp(54px, 7.4vw, 110px);
  z-index: 1;
}

/* ============================================================
   BALLOT — the decision-desk vote card
   The vote poster's furniture on the site's own white card:
   star-flanked rules, a matchup plate, the two answers shown
   face to face across the VS disc, and a red action rail.
   ============================================================ */
.ballot {
  position: relative; z-index: 3;
  margin-top: 22px;
  padding: clamp(26px, 2.6vw, 34px) clamp(17px, 1.9vw, 30px) clamp(20px, 2.2vw, 28px);
  background: linear-gradient(180deg, #ffffff 0%, #f2f5fa 62%, #e4eaf4 100%);
  color: var(--ink);
  text-align: center;
  border: 1px solid #fff;
  box-shadow: var(--lift-navy);
}
/* Lit seam across the top edge — red at the ends, studio blue at centre. */
.ballot::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg,
    var(--red-deep) 0%, var(--red-hot) 24%, var(--blue-bright) 50%, var(--red-hot) 76%, var(--red-deep) 100%);
}

/* The angled LIVE POLL tag, breaking the card's top edge. */
.chy-poll {
  position: absolute; top: -19px; left: clamp(16px, 2vw, 26px);
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0; padding: 7px 20px;
  background: linear-gradient(180deg, var(--red-hot), var(--red-deep));
  color: #fff;
  font-size: 11.5px; font-weight: 800; letter-spacing: .18em;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
  box-shadow: 0 8px 18px -10px rgba(0, 6, 20, .9);
}
.chy-poll .ico { width: 12px; height: 12px; }
.chy-poll .ico:last-child { scale: -1 1; }

.ballot-head {
  display: grid; justify-items: center; gap: 13px;
  margin-top: 12px;
}
.ballot-cat {
  padding: 7px 21px;
  background: linear-gradient(180deg, var(--red-hot), var(--red) 58%, var(--red-deep));
  color: #fff;
  font-size: clamp(11px, 1.05vw, 13px); font-weight: 800; letter-spacing: .16em;
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  box-shadow: 0 12px 24px -16px rgba(0, 6, 20, .95);
}
/* The vote's own line, set between hairlines and flanked by stars. */
.ballot-eyebrow {
  display: flex; align-items: center; gap: 11px;
  width: 100%; margin: 0;
  font-size: 11px; font-weight: 800; letter-spacing: .2em;
  color: var(--navy);
}
.ballot-eyebrow::before, .ballot-eyebrow::after {
  content: ""; flex: 1; min-width: 10px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--hair));
}
.ballot-eyebrow::after { background: linear-gradient(90deg, var(--hair), transparent); }
.ballot-eyebrow .ico { width: 10px; height: 10px; color: var(--red); }

/* ---------- The matchup plate: the two answers, called big ---------- */
.ballot-matchup {
  margin: 15px 0 0;
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(37px, 4.4vw, 60px);
  line-height: .86; letter-spacing: .004em;
  color: var(--navy);
}
.ballot-matchup:empty { display: none; }
.ballot-matchup b {
  display: block; font-weight: 400;
  overflow-wrap: break-word;
}
/* Inked like a printed plate — solid navy stands in where text clipping
   isn't available, so this needs no fallback of its own. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .ballot-matchup b {
    background: linear-gradient(180deg, var(--navy-mid) 4%, var(--navy) 52%, #000b22 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
/* The join between them: red streak, star pair, blue streak. */
.mu-or {
  display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.2vw, 13px);
  margin: 4px 0;
  font-size: .44em; letter-spacing: .07em;
  color: var(--navy);
}
.mu-or i { font-style: normal; }
.mu-or::before, .mu-or::after {
  content: ""; flex: none; width: clamp(20px, 4vw, 52px); height: 2px;
}
.mu-or::before { background: linear-gradient(90deg, transparent, var(--red-hot)); }
.mu-or::after { background: linear-gradient(90deg, var(--blue-bright), transparent); }
.mu-star { width: .82em; height: .82em; }
.mu-star--red { color: var(--red-hot); }
.mu-star--blue { color: var(--blue-bright); }

/* ---------- Polls open / closed: the dark slab ---------- */
.ballot-state {
  display: inline-flex; align-items: center; gap: 13px;
  margin: 17px 0 0; padding: 9px 23px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .15) 0%, transparent 48%),
    linear-gradient(180deg, var(--navy-mid) 0%, var(--navy-deep) 100%);
  border: 1px solid var(--navy-line);
  clip-path: polygon(var(--cut) 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
  font-family: var(--ui); font-stretch: 68%; text-transform: uppercase;
  font-size: clamp(12px, 1.2vw, 15px); font-weight: 900; letter-spacing: .12em;
  color: #fff;
}
.ballot-state .ico { width: 11px; height: 11px; color: rgba(255, 255, 255, .82); }
.ballot-state.is-closed .ico { color: var(--gold); }

/* The question itself sits under the slab, in the reading voice. */
.ballot-q {
  margin: 14px auto 0; max-width: 36ch;
  font-family: var(--ui); font-weight: 700; text-transform: none;
  font-size: clamp(15px, 1.45vw, 18px); line-height: 1.42; letter-spacing: 0;
  color: var(--muted);
  text-wrap: balance;
}
/* With more than two answers there is no matchup plate, so the
   question takes the big display line instead. */
.ballot:not(:has(.ballot-matchup b)) .ballot-q {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  max-width: 24ch;
  font-size: clamp(26px, 2.5vw, 35px); line-height: 1.02;
  color: var(--navy);
}

.choose-label {
  margin: 21px 0 12px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .2em;
  color: var(--navy);
}
.choose-label span { color: var(--muted); font-weight: 700; letter-spacing: .12em; }

.options { display: grid; gap: 10px; }

/* Two answers face off, with the VS disc straddling the gap. */
.options--duel {
  grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr);
  gap: 0 clamp(15px, 2.2vw, 24px);
  align-items: stretch;
}
.vs {
  justify-self: center; align-self: center;
  position: relative; z-index: 2;
  width: clamp(48px, 4.8vw, 62px); aspect-ratio: 1;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #133468 0%, #010e28 76%);
  border: 1px solid rgba(160, 184, 222, .5);
  font-family: var(--display); font-weight: 400;
  font-size: clamp(15px, 1.5vw, 20px); line-height: 1; letter-spacing: .03em;
  padding-top: .1em;
  color: #fff;
  /* The white ring punches the disc out of the two tiles it straddles. */
  box-shadow:
    0 0 0 5px var(--card),
    -13px 0 26px -8px rgba(211, 3, 17, .7),
    13px 0 26px -8px rgba(79, 142, 247, .75),
    inset 0 1px 0 rgba(255, 255, 255, .22);
}

.option {
  --edge: var(--steel);
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--card);
  border: 1.5px solid var(--hair);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.option--red { --edge: var(--red); }
.option--blue { --edge: var(--blue-glow); }

/* Each answer carries its own side colour, the way the disc splits them. */
.option::before {
  content: ""; position: absolute; left: -1.5px; top: 0; bottom: 0;
  width: 5px; background: var(--edge);
  scale: 1 0; transform-origin: center;
  transition: scale .22s cubic-bezier(.2, .8, .3, 1);
}
.option:hover { border-color: var(--navy-line); }
.option:hover::before { scale: 1 1; }
.option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* The whole tile carries the focus ring, so the hidden radio doesn't. */
.option input:focus-visible { outline: none; }

/* The answer's photo, cropped square from the vote's poster art. */
.option-photo {
  flex: none;
  width: 52px; height: 52px;
  object-fit: cover;
  background: var(--navy-deep);
  border: 1px solid var(--navy-line);
}

/* Stacked in the duel layout: photo, answer, box — and the accent
   moves to the foot of the tile. */
.options--duel .option {
  flex-direction: column; justify-content: center; gap: 11px;
  min-height: clamp(140px, 15vw, 168px);
  padding: 18px 14px 16px;
}
.options--duel .option::before {
  left: 0; right: 0; top: auto; bottom: -1.5px;
  width: auto; height: 5px;
  scale: 0 1;
}
/* Face to face, the photo leads the tile and the key letter steps aside. */
.options--duel .option-photo {
  width: min(100%, 156px); height: auto; aspect-ratio: 1;
}
.options--duel .option:has(.option-photo) .option-key { display: none; }
.options--duel .option-name { padding: 0 8px; }

.option-key {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
  background: var(--paper-deep);
  border: 1px solid var(--navy-line);
  color: var(--muted);
  font-family: var(--display); font-size: 15px; line-height: 1;
  padding-top: 2px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.option-name {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(20px, 2.1vw, 28px); line-height: 1;
  letter-spacing: .02em; color: var(--navy);
  overflow-wrap: break-word; min-width: 0;
}

/* The logo's checkbox, as the selection control. */
.option-box {
  margin-left: auto; flex: none;
  width: 27px; height: 27px;
  display: grid; place-items: center;
  border: 2px solid var(--navy-line);
  background: var(--card);
  color: #fff;
  transition: background-color .2s ease, border-color .2s ease;
}
.options--duel .option-box { margin-left: 0; }
.option-box .ico { width: 17px; height: 17px; }
.option-box .ico path {
  stroke-dasharray: 30; stroke-dashoffset: 30;
  transition: stroke-dashoffset .3s cubic-bezier(.2, .8, .3, 1);
}

.option:has(input:checked) {
  border-color: var(--edge);
  background: var(--card);
  box-shadow: 0 0 0 1px var(--edge), 0 14px 30px -22px rgba(0, 27, 73, .55);
}
.option:has(input:checked)::before { scale: 1 1; }
.option:has(input:checked) .option-key {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
.option:has(input:checked) .option-box { background: var(--edge); border-color: var(--edge); }
.option:has(input:checked) .option-photo { border-color: var(--edge); }
.option:has(input:checked) .option-box .ico path { stroke-dashoffset: 0; }
.option:has(input:focus-visible) { outline: 3px solid var(--red); outline-offset: 3px; }

/* Ballot locked — already voted, or the round has closed.
   The voter's own choice stays at full strength; the rest recede. */
.option:has(input:disabled) { cursor: default; }
.option:has(input:disabled):not(:has(input:checked)) { opacity: .5; }
.option:has(input:disabled):not(:has(input:checked)):hover {
  border-color: var(--hair);
}
.option:has(input:disabled):not(:has(input:checked)):hover::before { scale: 1 0; }

/* Loading skeletons stand in part for part — photo, answer, box — so the
   tile keeps its exact height when the real ballot arrives. */
.option--skeleton { cursor: default; border-style: dashed; pointer-events: none; }
.option--skeleton span {
  display: block;
  background: linear-gradient(90deg,
    var(--paper-deep) 0%, #f4f7fb 50%, var(--paper-deep) 100%);
  background-size: 220% 100%;
  animation: shimmer 1.5s linear infinite;
}
.option--skeleton .sk-line { width: 46%; height: clamp(20px, 2.1vw, 28px); }
.option--skeleton:nth-child(3) .sk-line { width: 34%; animation-delay: .22s; }
.option--skeleton .sk-photo { flex: none; width: 52px; height: 52px; }
.option--skeleton .sk-box { flex: none; width: 27px; height: 27px; margin-left: auto; }
.options--duel .option--skeleton .sk-photo {
  width: min(100%, 156px); height: auto; aspect-ratio: 1;
}
.options--duel .option--skeleton .sk-box { margin-left: 0; }
@keyframes shimmer { to { background-position: -220% 0; } }

/* ---------- The action rail: vote, then the clock ---------- */
.cast {
  width: 100%; justify-content: center; gap: 15px;
  margin-top: 17px; padding: 16px 26px;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(21px, 2.1vw, 29px); line-height: 1; letter-spacing: .05em;
  clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
  box-shadow: 0 18px 36px -20px rgba(211, 3, 17, .85);
}
.cast .cast-mark { width: 1em; height: 1em; }
.cast:hover .cast-mark { translate: 0 0; }
.cast:disabled {
  background: var(--paper-deep);
  color: var(--muted);
  cursor: not-allowed; box-shadow: none;
}
.cast:disabled .cast-mark { opacity: .38; }

/* Voting closes — the red clock bar, with the time called in gold. */
.ballot-close {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  margin: 10px 0 0; padding: 10px 18px;
  /* Deeper than the vote button so the gold time holds its contrast. */
  background: linear-gradient(180deg, #a80210 0%, var(--red-deep) 100%);
  color: #fff;
  font-family: var(--ui); font-stretch: 68%; text-transform: uppercase;
  font-size: clamp(11px, 1.1vw, 13px); font-weight: 800; letter-spacing: .14em;
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
.ballot-close .ico { width: 15px; height: 15px; flex: none; }
.ballot-close b { color: var(--gold); font-weight: 800; }

.status { min-height: 22px; margin: 13px 0 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.status:empty { min-height: 0; }
.status.is-error { color: #a8101a; }
.status.is-success { color: #0b6236; }

.ballot-foot {
  display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin: 15px 0 0; padding-top: 13px;
  border-top: 1px solid var(--hair);
  font-family: var(--ui); font-stretch: 68%; text-transform: uppercase;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--muted);
}
.ballot-seal { display: inline-flex; align-items: center; gap: 7px; }
.ballot-seal .ico { color: var(--red); width: 13px; height: 13px; }

/* ---------- Live tally: the results board ---------- */
.tally { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair); text-align: left; }
.tally-total {
  margin: 16px 0 0; text-align: center;
  font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--muted);
}

.tally-row + .tally-row { margin-top: 15px; }
.tally-row small {
  display: block; margin-top: 6px;
  font-size: 12px; font-weight: 700; color: var(--muted);
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
}
.tally-label {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: 0 0 7px;
}
.tally-label > span {
  font-size: 14px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; font-stretch: 68%;
  color: var(--navy);
}
.tally-label strong {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(26px, 2.6vw, 36px); line-height: 1;
  letter-spacing: .01em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.tally-row.is-winner .tally-label strong { color: var(--red); }

.tally-track {
  position: relative;
  height: 16px;
  background: var(--paper-deep);
  box-shadow: inset 0 0 0 1px rgba(0, 27, 73, .12);
  overflow: hidden;
}
/* The 50% mark — where a two-way race is decided. */
.tally-track::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: rgba(255, 255, 255, .8);
}
.tally-track .fill {
  display: block; height: 100%; width: var(--w, 0%);
  animation: grow 1s cubic-bezier(.2, .8, .3, 1) both;
}
.fill--navy { background: linear-gradient(180deg, var(--navy-mid), var(--navy) 60%, #001132); }
.fill--red { background: linear-gradient(180deg, var(--red-hot), var(--red) 60%, var(--red-deep)); }
.fill--blue { background: linear-gradient(180deg, #7fb0fb, var(--blue-bright) 55%, var(--blue-glow)); }
.fill--gold { background: linear-gradient(180deg, #ffdc80, var(--gold) 58%, var(--gold-deep)); }
.fill--steel { background: linear-gradient(180deg, #c2d2ea, var(--steel) 60%, #5f779f); }
@keyframes grow { from { width: 0; } to { width: var(--w, 0%); } }

.flag {
  display: inline-block; margin-left: 8px; padding: 4px 9px 3px;
  background: var(--red); color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: .16em;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  vertical-align: 2px;
}

/* ============================================================
   WIRE STRIP — the lower band of the broadcast frame
   ============================================================ */
.wire {
  position: relative; z-index: 2;
  max-width: 1340px;
  margin: clamp(44px, 5.4vw, 76px) auto 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: linear-gradient(180deg, rgba(7, 31, 71, .92), rgba(0, 10, 30, .92));
  border: 1px solid rgba(139, 164, 203, .3);
}
.wire-cell {
  display: flex; align-items: center; gap: 16px;
  padding: 20px clamp(16px, 1.8vw, 28px);
  border-left: 1px solid rgba(139, 164, 203, .22);
}
.wire-cell:first-child { border-left: 0; }
.wire-ico { width: 34px; height: 34px; flex: none; color: var(--steel); }
.wire-k {
  margin: 0;
  font-size: 13px; font-weight: 900; letter-spacing: .13em; color: #fff;
}
.wire-tag {
  display: inline-block; margin: 5px 0 0; padding: 3px 10px 2px;
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .16em;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
}
.wire-v {
  margin: 5px 0 0;
  font-size: 13.5px; line-height: 1.42; color: rgba(205, 220, 243, .7);
}
.wire-v b { color: var(--red-hot); font-weight: 700; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section {
  max-width: 1340px; margin: 0 auto;
  padding: clamp(58px, 8vw, 118px) var(--shell);
}
.sec-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  align-items: end; gap: 28px;
  margin-bottom: clamp(34px, 4.4vw, 58px);
}
/* Section kickers are red chyron tags on the light field. */
.eyebrow {
  display: inline-block;
  margin: 0 0 16px; padding: 7px 18px;
  background: linear-gradient(180deg, var(--red-hot), var(--red-deep));
  color: #fff;
  font-size: clamp(10.5px, .95vw, 12px); font-weight: 800; letter-spacing: .18em;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.sec-head h2 {
  margin: 0;
  font-size: clamp(42px, 6.4vw, 90px);
  line-height: .86;
  color: var(--navy);
}
.sec-note {
  margin: 0 0 6px;
  font-family: var(--editorial); font-style: italic;
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.45;
  color: var(--muted);
}

/* ---------- Verdict (last result) ---------- */
.verdict {
  position: relative;
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4.4vw, 68px);
  padding: clamp(26px, 3.2vw, 46px);
  background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
  border: 1px solid var(--silver);
  border-top: 5px solid var(--navy);
  box-shadow: var(--lift);
}
.verdict-ask { position: relative; }
.verdict-num {
  display: block; margin-bottom: 8px;
  font-family: var(--display);
  font-size: clamp(56px, 6.4vw, 88px);
  line-height: .78; letter-spacing: .01em;
  color: transparent;
  -webkit-text-stroke: 2px var(--silver);
}
.verdict-ask h3 {
  margin: 0 0 14px;
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: 1.04;
  color: var(--navy);
}
.verdict-ask p {
  margin: 0;
  font-family: var(--editorial); font-style: italic;
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--muted);
}
.verdict-bars { align-self: center; }
.verdict-bars .tally-track { height: 20px; }

/* ---------- Rundown: stair-stepped studio panels ---------- */
.how { border-top: 1px solid var(--silver); }
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  align-items: start;
  counter-reset: seg;
}
.steps li {
  position: relative; overflow: hidden;
  padding: clamp(24px, 2.4vw, 34px);
  background:
    radial-gradient(90% 70% at 84% 0%, rgba(79, 142, 247, .22) 0%, transparent 62%),
    linear-gradient(172deg, var(--navy-mid) 0%, var(--navy-deep) 100%);
  color: rgba(210, 224, 245, .78);
  border: 1px solid rgba(139, 164, 203, .26);
  transition: translate .28s cubic-bezier(.2, .8, .3, 1), box-shadow .28s ease, border-color .28s ease;
}
.steps li::before {
  content: ""; position: absolute; inset: 0;
  background: url("/assets/starfield.svg") 0 0 / 200px 200px repeat;
  opacity: .9; pointer-events: none;
}
.steps li:nth-child(2) { margin-top: clamp(18px, 3.2vw, 44px); }
.steps li:nth-child(3) { margin-top: clamp(36px, 6.4vw, 88px); }
.steps li:hover {
  translate: 0 -6px;
  border-color: rgba(139, 164, 203, .55);
  box-shadow: var(--lift-navy);
}
.step-num {
  position: relative;
  display: inline-block; padding: 5px 13px 4px;
  background: linear-gradient(180deg, var(--red-hot), var(--red-deep));
  color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .18em;
  clip-path: polygon(7px 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
}
.step-mark {
  position: relative;
  display: block; width: 42px; height: 42px;
  margin: 24px 0 20px;
  color: #fff;
}
.steps h3 {
  position: relative;
  margin: 0 0 10px;
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.04;
  color: #fff;
}
.steps p { position: relative; margin: 0; font-size: 15px; line-height: 1.58; }

/* ============================================================
   NEWSLETTER
   ============================================================ */
.join { padding: 0 var(--shell) clamp(58px, 8vw, 110px); }
.join-panel {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 1340px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  align-items: center; gap: clamp(30px, 4.6vw, 68px);
  padding: clamp(34px, 5vw, 74px);
  background:
    radial-gradient(96% 110% at 88% 0%, rgba(79, 142, 247, .28) 0%, transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  border: 1px solid rgba(139, 164, 203, .3);
  color: #fff;
  box-shadow: var(--lift-navy);
}
.join-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: url("/assets/starfield.svg") 0 0 / 200px 200px repeat;
}
.join-panel::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, var(--red), var(--blue-bright) 50%, var(--red));
}
.join-field { position: absolute; inset: 0; z-index: -1; opacity: .6; pointer-events: none; }
.join-field svg { width: 100%; height: 100%; }
.join-copy h2 {
  margin: 0 0 16px;
  font-size: clamp(34px, 4.4vw, 62px);
  line-height: .9;
}
.join-copy p:not(.eyebrow) {
  margin: 0; max-width: 34ch;
  color: rgba(205, 220, 243, .74); font-size: 16px;
}

.join-row { display: flex; gap: 10px; }
.join-form input {
  flex: 1; min-width: 0;
  padding: 16px 18px;
  border: 1.5px solid rgba(139, 164, 203, .45);
  background: rgba(255, 255, 255, .07);
  color: #fff;
  transition: border-color .2s ease, background-color .2s ease;
}
.join-form input::placeholder { color: rgba(205, 220, 243, .45); }
.join-form input:hover { border-color: rgba(205, 220, 243, .7); }
.join-form input:focus { background: rgba(255, 255, 255, .13); border-color: #fff; outline: none; }
.join-form small {
  display: block; margin-top: 13px;
  font-size: 12.5px; color: rgba(205, 220, 243, .55);
}

/* ============================================================
   FOOTER — sign-off
   ============================================================ */
.site-foot { background: var(--navy-deep); color: rgba(205, 220, 243, .6); font-size: 13px; }
/* Colour bars, brand-tinted: the end-of-broadcast test pattern. */
.colorbars {
  height: 7px;
  background: linear-gradient(90deg,
    var(--navy-mid) 0 14.28%, var(--silver) 14.28% 28.56%,
    var(--red) 28.56% 42.84%, #ffffff 42.84% 57.12%,
    var(--blue-bright) 57.12% 71.4%, var(--red-deep) 71.4% 85.68%,
    var(--steel) 85.68% 100%);
}
.foot-inner {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto;
  gap: clamp(26px, 3.6vw, 56px);
  padding: clamp(40px, 4.6vw, 64px) var(--shell);
}
.foot-brand img { width: clamp(224px, 25vw, 292px); }
.foot-disclaimer { margin: 20px 0 0; max-width: 52ch; line-height: 1.6; }
.foot-nav { display: grid; gap: 10px; align-content: start; }
.foot-nav a {
  width: fit-content;
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  color: rgba(219, 231, 250, .8);
  transition: color .18s ease;
}
.foot-nav a:hover { color: var(--red-hot); }
.foot-legal { margin: 0; align-self: end; white-space: nowrap; }

/* ============================================================
   ENTRANCE
   ============================================================ */
.reveal {
  opacity: 0;
  translate: 0 18px;
  animation: rise .8s cubic-bezier(.2, .8, .3, 1) var(--d, 0ms) forwards;
}
@keyframes rise { to { opacity: 1; translate: 0 0; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1520px) {
  .creds li:nth-child(3) { display: none; }
}
@media (max-width: 1320px) {
  .creds { display: none; }
}
@media (max-width: 1080px) {
  .masthead-nav { display: none; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, there is no card to line up with. */
  .hero-copy { padding-top: 0; }
  .hero h1 { font-size: clamp(58px, 12.4vw, 116px); }
  .lede, .join-copy p:not(.eyebrow) { max-width: 46ch; }
  .verdict, .join-panel { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps li:nth-child(2), .steps li:nth-child(3) { margin-top: 0; }
  .sec-head { grid-template-columns: minmax(0, 1fr); }
  .wire { grid-template-columns: minmax(0, 1fr); }
  .wire-cell { border-left: 0; border-top: 1px solid rgba(139, 164, 203, .22); }
  .wire-cell:first-child { border-top: 0; }
  .foot-inner { grid-template-columns: minmax(0, 1fr); }
  .foot-legal { align-self: start; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .masthead { padding: 9px var(--shell); }
  .masthead-cta { padding: 12px 18px; font-size: 12.5px; }
  .hero h1 { font-size: clamp(46px, 14vw, 70px); }
  .chy-desk { margin-bottom: 20px; }
  .creed { flex-wrap: nowrap; gap: 12px; padding: 11px 14px; }
  .hero-stats { gap: 20px; }
  .join-row { flex-direction: column; }
  .join-row .btn { justify-content: center; }
  .verdict { padding: 22px 18px; }
  .ticker-tag { padding-right: 26px; }
  .tally-label { flex-wrap: wrap; gap: 4px 12px; }
}

@media (max-width: 400px) {
  .brand img { width: 184px; }
  .flag { margin-left: 6px; }
  /* Too narrow to face off side by side: stack, disc between. */
  .options--duel { grid-template-columns: minmax(0, 1fr); gap: 12px 0; }
  .options--duel .option {
    flex-direction: row; justify-content: flex-start;
    min-height: 0; padding: 14px 15px; gap: 13px;
  }
  /* Too narrow to face off, so the tiles become rows again and the photo
     goes back to a thumbnail beside the answer. */
  .options--duel .option-photo,
  .options--duel .option--skeleton .sk-photo { width: 52px; height: 52px; }
  .options--duel .option--skeleton .sk-box { margin-left: auto; }
  .options--duel .option-name { padding: 0; }
  .options--duel .option-box { margin-left: auto; }
  .options--duel .vs { margin: -12px auto; }
  .options--duel .option::before {
    left: -1.5px; right: auto; top: 0; bottom: 0;
    width: 5px; height: auto; scale: 1 0;
  }
  .options--duel .option:hover::before,
  .options--duel .option:has(input:checked)::before { scale: 1 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; translate: none; }
  .swoosh-line { stroke-dashoffset: 0; }
  .ticker-run { animation: none; }
}