/* Editorial story pages. Phone-first. Content does not depend on this file's animations. */
:root {
  --paper: #f3efe6;
  --card: #fffdf8;
  --ink: #142033;
  --body: #243044;
  --muted: #5e564c;
  --line: #e4d8c6;
  --navy: #0e1c33;
  --gold: #8a5a12;
  --gold-2: #f3e2b8;
  --dem: #1d4ed8;
  --rep: #b42318;
  --pick: #6d28d9;
  --pick-2: #efe8fb;
  --amber: #9a3412;
  --amber-bg: #fff4e8;
  --shadow: 0 1px 0 rgba(20, 32, 51, .04);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font: 17px/1.55 Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  padding-bottom: 96px;
}
img, svg { max-width: 100%; }
a { color: #1e3a8a; }
a:hover { color: #1d4ed8; }
:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 3px; }
.skip {
  position: fixed; left: 12px; top: -80px; background: #fff; color: var(--ink);
  padding: 8px 12px; z-index: 2500; border-radius: 8px;
  box-shadow: 0 2px 10px rgba(20, 32, 51, .18);
}
/* 54px clears the Worker home bar (47px, z-index 2400). The bar's own rule
   targets .skip-link:focus and sets the same top. */
.skip:focus, .skip:focus-visible { top: 54px; }
.wrap { width: min(1080px, calc(100% - 28px)); margin: 0 auto; }
.mast {
  background: var(--navy); color: #f8fafc;
  border-bottom: 4px solid #e7c56a;
}
.mast-row { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; min-height: 52px; padding: 8px 0; }
.brand { color: #fff; text-decoration: none; font: 700 .92rem/1.2 ui-sans-serif, system-ui, sans-serif; letter-spacing: .04em; }
.brand span { color: #e7c56a; }
.mast nav { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; }
.mast nav a { color: #d6deea; text-decoration: none; font: 600 .82rem/1 ui-sans-serif, system-ui, sans-serif; white-space: nowrap; padding: 8px 0; }
.mast nav a:hover { color: #fff; }
.banner {
  background: var(--amber-bg); color: var(--amber);
  border-bottom: 1px solid #fdba74;
}
.banner .wrap { padding: 14px 0 16px; }
.banner strong { display: block; font: 700 1.15rem/1.25 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.01em; color: #7c2d12; }
.banner p { margin: 6px 0 0; font: 16px/1.45 ui-sans-serif, system-ui, sans-serif; }
.hero { padding: 22px 0 8px; }
.kicker {
  margin: 0 0 8px; font: 700 .78rem/1.3 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
}
h1 {
  margin: 0 0 8px; color: var(--ink);
  font: 700 clamp(2rem, 7vw, 3.35rem)/1.05 Georgia, Palatino, serif;
  letter-spacing: -.02em; text-wrap: balance;
}
.deck {
  margin: 0 0 12px; color: var(--ink);
  font: italic 1.25rem/1.35 Georgia, Palatino, serif;
}
.subhead {
  margin: 0 0 8px; color: #7c2d12;
  font: 700 1.2rem/1.3 ui-sans-serif, system-ui, sans-serif;
}
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.tags li {
  font: 700 .72rem/1.3 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--navy); color: #fff; border-radius: 999px; padding: 4px 9px;
}
.tags li.soft { background: #efe6d6; color: var(--ink); }
.lede { font-size: 1.12rem; color: var(--ink); max-width: 42rem; }
.lede p { margin: 0 0 12px; }
.note, .fine { color: var(--muted); font: 15px/1.45 ui-sans-serif, system-ui, sans-serif; }
.section { padding: 28px 0; border-top: 1px solid var(--line); }
h2 {
  margin: 0 0 8px; color: var(--ink);
  font: 700 clamp(1.45rem, 4vw, 2rem)/1.15 Georgia, Palatino, serif;
}
h3 { margin: 18px 0 6px; color: var(--ink); font: 700 1.2rem/1.25 Georgia, Palatino, serif; }
.layout { display: grid; gap: 16px; }
.map-card, .card, .score, .runner, .gap {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow);
}
.map-card { padding: 10px; }
.ed-map { display: block; width: 100%; height: auto; background: #f7f1e6; border-radius: 12px; }
.ed-map .map-bg { fill: #f7f1e6; }
.ed-map path.nbr { fill: #e7dcc8; stroke: #fffdf8; stroke-width: 1.4; }
.ed-map path.pick { fill: #6d28d9; stroke: #2e1065; stroke-width: 2; }
.ed-map a:hover path.nbr, .ed-map a:focus path.nbr, .ed-map a.on path.nbr { fill: #d8c7a4; stroke: #142033; stroke-width: 2.2; }
.ed-map a:hover path.pick, .ed-map a:focus path.pick, .ed-map a.on path.pick { fill: #5b21b6; }
.ed-map .lab { font: 700 13px ui-sans-serif, system-ui, sans-serif; fill: #3f3a34; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.ed-map .pick-lab { fill: #fff; font-size: 15px; }
.ed-map .scale line { stroke: #142033; stroke-width: 1.5; }
.ed-map .scale text, .ed-map .north text { font: 700 12px ui-sans-serif, system-ui, sans-serif; fill: #142033; text-anchor: middle; }
.ed-map .north polygon { fill: #142033; }
.ed-map .locator rect { fill: #fffdf8; stroke: #e4d8c6; }
.ed-map .loc-h, .ed-map .loc-s { font: 700 9px ui-sans-serif, system-ui, sans-serif; fill: #5e564c; }
.ed-map .loc-main { fill: #d8c7a4; stroke: #fff; stroke-width: .4; }
.ed-map .loc-pick { fill: #6d28d9; stroke: none; }
.ed-map .loc-other { fill: #b9ad9a; stroke: #fff; stroke-width: .4; }
.map-caption { margin: 8px 6px 4px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; }
table { width: 100%; border-collapse: collapse; background: var(--card); font: 15px/1.35 ui-sans-serif, system-ui, sans-serif; }
caption { text-align: left; font: 700 1rem/1.3 Georgia, Palatino, serif; color: var(--ink); padding: 12px 12px 4px; }
th, td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; font-variant-numeric: tabular-nums; }
th:first-child, td:first-child, td.left, th.left { text-align: left; }
th { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
tr:target, tr.on { background: var(--pick-2); }
.pickrow { box-shadow: inset 3px 0 0 var(--pick); }
.scores { display: grid; gap: 12px; }
.score { padding: 14px 14px 12px; }
.score .race { margin: 0; font: 700 .75rem/1.2 ui-sans-serif, system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.score .who { margin: 4px 0 8px; color: var(--ink); font: 700 clamp(1.35rem, 4vw, 1.8rem)/1.15 Georgia, Palatino, serif; }
.score .who b { font-variant-numeric: tabular-nums; }
.bar { display: flex; height: 22px; border-radius: 7px; overflow: hidden; background: #efe8dc; }
.bar span { display: block; height: 100%; }
.bar .dem { background: var(--dem); }
.bar .rep { background: var(--rep); }
.ends { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0 0; font: 600 .85rem/1.3 ui-sans-serif, system-ui, sans-serif; }
.ends .dem { color: var(--dem); }
.ends .rep { color: var(--rep); }
.lines { margin: 8px 0 0; padding: 0; list-style: none; color: var(--muted); font: 14px/1.4 ui-sans-serif, system-ui, sans-serif; }
.lines li { margin: 2px 0; }
.gap { padding: 16px; background: var(--navy); color: #f8fafc; border: 0; }
.gap h2, .gap p { color: #f8fafc; }
.gap .big { margin: 0; font: 700 clamp(2.4rem, 8vw, 4rem)/1 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.03em; color: #e7c56a; }
.gap .sub { color: #d6deea; }
.ones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.one { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
.one .n { margin: 0; font: 700 clamp(2.6rem, 10vw, 4.2rem)/.9 ui-sans-serif, system-ui, sans-serif; letter-spacing: -.04em; color: var(--ink); }
.one .n span { font-size: .42em; letter-spacing: 0; color: var(--muted); }
.one p { margin: 6px 0 0; }
.one.dem .n { color: var(--dem); }
.one.rep .n { color: var(--rep); }
.runners { display: grid; gap: 12px; }
.runner { padding: 14px; }
.runner h3 { margin-top: 0; }
.cannot { border-left: 4px solid var(--gold); padding: 4px 0 4px 14px; }
.cannot li { margin: 6px 0; }
.sources li { margin: 8px 0; overflow-wrap: anywhere; }
.footer { padding: 8px 0 48px; color: var(--muted); font: 14px/1.45 ui-sans-serif, system-ui, sans-serif; }
.links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.links a { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; text-decoration: none; font: 700 .9rem/1.2 ui-sans-serif, system-ui, sans-serif; }
@media (min-width: 800px) {
  .layout { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); align-items: start; }
  .scores.two { grid-template-columns: 1fr 1fr; }
  .ones { grid-template-columns: repeat(4, 1fr); }
  .runners { grid-template-columns: 1fr 1fr; }
  .span2 { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
  .map-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .map-card .ed-map { width: 680px; max-width: none; }
  table.cards caption { display: block; width: auto; max-width: none; }
  table.cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; width: 100%; }
  table.cards tr { border-bottom: 8px solid var(--paper); padding: 8px 0; }
  table.cards td { display: flex; justify-content: space-between; gap: 12px; text-align: right; border-bottom: 1px solid #f0e6d6; }
  table.cards td::before { content: attr(data-label); font-weight: 700; color: var(--muted); text-align: left; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }