/* TPK Live, the public site: Newsdesk's look for people who never sign in. Square corners, the logo's red and blue,
   cards that glow blue, Archivo for headlines, Public Sans to read and IBM Plex Mono for the small print. Colors are
   light-dark pairs like the app's (styles.css): the theme follows the system unless the switch in the bar picks one,
   and a browser too old for light-dark() gets the light ones. The coverage chart is the app's own, with its styles
   (charts.css); this file only sets the colors it reads and keeps it to the spectrum.

   Fonts and pictures are named @m/name and get their fingerprinted address when the site is published
   (src/site/assets.ts). Nothing here loads from anyone else. */

@font-face { font-family: "Archivo"; src: url("../../m/archivo.e3a28ead.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../../m/public-sans.5ed4d31c.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../../m/public-sans-italic.16dc9325.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../../m/ibm-plex-mono-500.01d28544.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../../m/ibm-plex-mono-600.0d1f0b8d.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../../m/ibm-plex-mono-700.4f84d86c.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }

/* ---- Colors: the app's, as light-dark(light, dark) ---- */
:root {
  color-scheme: light dark;
  --bg: light-dark(#eef1f6, #0a0f1b);
  --panel: light-dark(#ffffff, #111a2b);
  --panel-2: light-dark(#f3f5f9, #172238);
  --ink: light-dark(#111827, #e8edf6);
  --muted: light-dark(#586274, #95a2b9);
  --line: light-dark(#d7dde8, #24314a);
  --red: #ed1c24;
  --red-ink: light-dark(#c9181f, #f14e54);
  --red-soft: light-dark(#fde8e9, #3f1219);
  --on-red: #ffffff;
  --blue: #3871c1;
  --blue-ink: light-dark(#3871c1, #6a94d0);
  --blue-soft: light-dark(#e8eff8, #1a2d4c);
  --good: light-dark(#127a55, #41d197);
  --good-soft: light-dark(#def3ea, #0f3326);
  --warn: light-dark(#9a620a, #f2b552);
  --warn-soft: light-dark(#fcefd6, #3a2a10);
  --glass: light-dark(rgba(255, 255, 255, 0.72), rgba(15, 22, 38, 0.7));
  --glass-line: light-dark(rgba(17, 24, 39, 0.08), rgba(255, 255, 255, 0.08));
  --glow-1: light-dark(rgba(237, 28, 36, 0.13), rgba(237, 28, 36, 0.22));
  --glow-2: light-dark(rgba(56, 113, 193, 0.15), rgba(56, 113, 193, 0.32));
  /* The sky's three washes (see "The sky"): the top of a page, a cobalt one, and a midnight one near the end. */
  --sky-1: light-dark(#f3f6fb, #0b1120);
  --sky-2: light-dark(#ebf0f9, #0a1430);
  --sky-2a: light-dark(rgba(56, 113, 193, 0.15), rgba(52, 104, 210, 0.3));
  --sky-2b: light-dark(rgba(108, 128, 222, 0.13), rgba(58, 64, 178, 0.32));
  --sky-3: light-dark(#e9f0f9, #071127);
  --sky-3a: light-dark(rgba(16, 146, 196, 0.11), rgba(14, 116, 172, 0.26));
  --sky-3b: light-dark(rgba(98, 84, 222, 0.11), rgba(84, 58, 196, 0.26));
  --sky-light: light-dark(rgba(56, 113, 193, 0.08), rgba(110, 160, 240, 0.09));
  --sh-1: light-dark(rgba(17, 24, 39, 0.05), rgba(0, 0, 0, 0.3));
  --sh-2: light-dark(rgba(17, 24, 39, 0.22), rgba(0, 0, 0, 0.75));
  --sh-3: light-dark(rgba(17, 24, 39, 0.34), rgba(0, 0, 0, 0.9));
  --viz-grid: light-dark(#e6eaf1, #1f2a40);
  --lean-left: var(--blue);
  --lean-lean-left: light-dark(#92b1dd, #88aada);
  --lean-center: #9ca3af;
  --lean-lean-right: light-dark(#f4777c, #f36b71);
  --lean-right: var(--red);
  --lean-official: light-dark(#ca8a04, #facc15);
  --lean-international: light-dark(#0d9488, #2dd4bf);
  --lean-local: light-dark(#7c3aed, #a78bfa);
  --src-truth: light-dark(#6d4aff, #a78bfa);
  --src-x: light-dark(#0284c7, #38bdf8);
  --src-youtube: var(--red);
  --src-news: light-dark(#b7791f, #facc15);
  --src-event: light-dark(#0f766e, #2dd4bf);
  --src-statement: light-dark(#c026d3, #e879f9);
  --kind-promise: light-dark(#7c3aed, #a78bfa);
  --kind-attack: light-dark(#ea580c, #fb923c);

  --shadow: 0 1px 2px var(--sh-1), 0 10px 28px -16px var(--sh-2);
  --shadow-up: 0 2px 6px var(--sh-1), 0 22px 44px -20px var(--sh-3);
  /* The square look's two glows: all round a card, and down to the right of a tab or a small box. */
  --glow: 0 0 9px -2px var(--blue);
  --glow-tab: 2px 2px 6px -1px rgba(56, 113, 193, 0.65);

  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.3, 1.3, .5, 1);
  --gap: 18px;
  --radius: 0px;
  --bar-h: 64px;
  --width: 1180px;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* A browser without light-dark() reads the light colors (and the theme switch does nothing there). */
@supports not (color: light-dark(#000, #fff)) {
  :root {
    --bg: #eef1f6; --panel: #ffffff; --panel-2: #f3f5f9; --ink: #111827; --muted: #586274; --line: #d7dde8;
    --red-ink: #c9181f; --red-soft: #fde8e9; --blue-ink: #3871c1; --blue-soft: #e8eff8;
    --good: #127a55; --good-soft: #def3ea; --warn: #9a620a; --warn-soft: #fcefd6;
    --glass: rgba(255, 255, 255, 0.72); --glass-line: rgba(17, 24, 39, 0.08);
    --glow-1: rgba(237, 28, 36, 0.13); --glow-2: rgba(56, 113, 193, 0.15);
    --sky-1: #f3f6fb; --sky-2: #ebf0f9; --sky-2a: rgba(56, 113, 193, 0.15); --sky-2b: rgba(108, 128, 222, 0.13);
    --sky-3: #e9f0f9; --sky-3a: rgba(16, 146, 196, 0.11); --sky-3b: rgba(98, 84, 222, 0.11); --sky-light: rgba(56, 113, 193, 0.08);
    --sh-1: rgba(17, 24, 39, 0.05); --sh-2: rgba(17, 24, 39, 0.22); --sh-3: rgba(17, 24, 39, 0.34);
    --viz-grid: #e6eaf1; --lean-lean-left: #92b1dd; --lean-lean-right: #f4777c; --lean-official: #ca8a04;
    --lean-international: #0d9488; --lean-local: #7c3aed; --src-truth: #6d4aff; --kind-promise: #7c3aed; --kind-attack: #ea580c;
    --src-x: #0284c7; --src-news: #b7791f; --src-event: #0f766e; --src-statement: #c026d3;
  }
  #theme { display: none; }
}

/* ---- Base ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--bar-h) + 16px); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; position: relative; overflow-x: clip;
  background: var(--bg); color: var(--ink);
  font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* ---- The sky: the page's background, in motion ----
   Every page sits on three washes of blue (html.ts writes them, look.js says how far down you are). At the top the
   logo's red and blue glow over the page's blue, as in the app; a screen and a half down a cobalt wash has taken over;
   over the rest of the page a midnight one comes in, so the shade shifts as you scroll. On a computer the washes drift,
   very slowly, and a soft light follows your pointer. A fine grain keeps the gradients from banding. Without
   JavaScript the top wash stays, which is how the page always looked. */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg); contain: strict; }
.sky > i { position: absolute; inset: -12%; display: block; }
.sky .s1 {
  background:
    radial-gradient(44% 40% at 14% 11%, var(--glow-1), transparent 72%),
    radial-gradient(50% 46% at 86% 8%, var(--glow-2), transparent 72%),
    linear-gradient(var(--sky-1), var(--bg) 64%);
  translate: 0 calc(var(--p2, 0) * -5%);
}
.sky .s2 {
  opacity: var(--p2, 0);
  background:
    radial-gradient(52% 44% at 84% 24%, var(--sky-2a), transparent 72%),
    radial-gradient(48% 48% at 14% 70%, var(--sky-2b), transparent 72%),
    var(--sky-2);
}
.sky .s3 {
  opacity: var(--p3, 0);
  background:
    radial-gradient(48% 44% at 18% 26%, var(--sky-3a), transparent 72%),
    radial-gradient(54% 50% at 84% 80%, var(--sky-3b), transparent 72%),
    var(--sky-3);
}
.sky .glow {
  inset: auto; left: 0; top: 0; width: 1000px; height: 1000px; margin: -500px 0 0 -500px; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, var(--sky-light), transparent); translate: var(--gx, 50vw) var(--gy, 40vh);
  transition: opacity .8s, translate 1s cubic-bezier(.2, .8, .2, 1);
}
.sky.lit .glow { opacity: 1; }
.sky::after {
  content: ""; position: absolute; inset: 0; opacity: .045; background-size: 220px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .sky::after { opacity: .07; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sky::after { opacity: .07; } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .sky .s1 { animation: sky-a 48s ease-in-out infinite alternate; }
  .sky .s2 { animation: sky-b 60s ease-in-out infinite alternate; }
  .sky .s3 { animation: sky-c 54s ease-in-out infinite alternate; }
}
@keyframes sky-a { to { transform: translate3d(3%, 2.5%, 0) scale(1.07); } }
@keyframes sky-b { to { transform: translate3d(-4%, 3%, 0) scale(1.09) rotate(2.5deg); } }
@keyframes sky-c { to { transform: translate3d(3.5%, -3%, 0) scale(1.06) rotate(-2deg); } }
a { color: inherit; }
h1, h2, h3 { line-height: 1.15; margin: 0; }
p { margin: 0.4em 0; }
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--blue) 30%, transparent); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ic { display: block; flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic .fill { fill: currentColor; fill-rule: evenodd; stroke: none; }

.skip {
  position: fixed; left: 12px; top: 10px; z-index: 50; padding: 10px 14px; background: var(--panel); border: 1px solid var(--blue);
  font-weight: 600; text-decoration: none; transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip:focus { transform: none; }

.wrap { position: relative; z-index: 1; width: 100%; max-width: var(--width); margin-inline: auto; padding-inline: clamp(16px, 3vw, 32px); }
main.wrap { flex: 1 0 auto; padding-bottom: 64px; }

/* ---- Buttons ---- */
.btn {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font: 600 14px/1.1 var(--body); padding: 10px 17px; min-height: 40px; white-space: nowrap; text-decoration: none;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); box-shadow: var(--glow-tab);
  transition: transform .15s var(--ease), border-color .2s, background .2s, box-shadow .2s, filter .2s;
}
.btn:hover { border-color: color-mix(in srgb, var(--ink) 30%, var(--line)); }
.btn:active { transform: scale(.96); }
.btn.primary, .btn.yt { background: var(--red); border-color: var(--red); color: var(--on-red); box-shadow: 0 10px 22px -12px var(--red); }
.btn.primary:hover, .btn.yt:hover { filter: brightness(1.07); }
.icon-btn {
  appearance: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--muted);
  transition: background .2s, color .2s, transform .15s var(--ease);
}
.icon-btn:hover { background: var(--panel-2); color: var(--ink); }
.icon-btn:active { transform: scale(.9); }

/* ---- Top bar: frosted glass, with the logo's red-to-blue line under it ----
   As you scroll the glass thickens and casts a shadow (look.js sets --s, 0 at the top to 1 a little way down), and the
   line lights up as far as you've read, a spark at its tip (--read). */
.bar {
  position: sticky; top: 0; z-index: 20; --s: 0; background: var(--glass); view-transition-name: bar;
  -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--glass-line);
}
.bar::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: var(--s); pointer-events: none; background: var(--glass); box-shadow: 0 16px 36px -28px var(--sh-3); }
.bar-line { position: absolute; inset: auto 0 -1px; height: 2px; pointer-events: none; background: linear-gradient(90deg, var(--red), var(--blue)); opacity: .9; transform-origin: 0 50%; }
.bar-line i { position: absolute; inset: -1px 0; background: linear-gradient(90deg, #ff4f57, #6ea6ff); box-shadow: 0 0 10px color-mix(in srgb, var(--blue) 65%, transparent); clip-path: inset(0 calc(100% - var(--read, 0) * 100%) 0 0); }
.bar-line b {
  position: absolute; top: 50%; left: 0; width: 84px; height: 12px; margin: -6px 0 0 -70px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), transparent); opacity: min(1, calc(var(--read, 0) * 30));
  translate: calc(var(--read, 0) * var(--bw, 100vw)) 0;
}
.bar-in { max-width: calc(var(--width) + 120px); margin-inline: auto; padding: 0 clamp(16px, 3vw, 32px); min-height: var(--bar-h); display: flex; align-items: center; gap: 10px 22px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: none; }
/* The logo sits on a white tile, as in the app's bar: its black stroke needs the white on a dark page. Pointing at the
   name tips the tile and runs a sheen across it, as the app's logo does when it turns. */
.mark {
  position: relative; overflow: hidden; display: grid; place-items: center; width: 46px; height: 40px; padding: 3px 4px; flex: none;
  border-radius: 10px; background: #fff; box-shadow: var(--shadow); transition: transform .5s var(--spring);
}
.mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mark::after {
  content: ""; position: absolute; top: -30%; bottom: -30%; left: 0; width: 45%; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .95), transparent); transform: skewX(-18deg); translate: -140% 0;
}
.brand:hover .mark { transform: rotate(-5deg) scale(1.07); }
/* The whole name: the channel's wordmark (Tangential PoliTiKing, a picture per word, so a phone can stack them),
   then Live on a red tag, with a ring going out from it like an on-air light. */
.brand-name { --wh: 19px; display: inline-flex; align-items: center; white-space: nowrap; }
.brand-name img { display: block; height: var(--wh); width: auto; filter: drop-shadow(0 1px 0 light-dark(rgba(255, 255, 255, .6), rgba(0, 0, 0, .6))); }
.brand-name .w2 { margin-left: calc(var(--wh) * .144); }
.brand-name b { position: relative; margin-left: 9px; font: 850 14px/1 var(--display); font-stretch: 76%; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--red); padding: 4px 6px 3px; border-radius: 5px; }
.brand-name b::after { content: ""; position: absolute; inset: -2px; border: 2px solid var(--red); border-radius: 7px; opacity: 0; pointer-events: none; }

/* The sections sit in a glass capsule, as in the app. The lit section's card and red line are elements of their own
   (html.ts), so a page change can slide them over to the next section (see "Moving between pages"). */
.nav { position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; padding: 4px; background: color-mix(in srgb, var(--panel) 50%, transparent); border: 1px solid var(--glass-line); }
.nav a {
  position: relative; z-index: 1; isolation: isolate; display: inline-flex; align-items: center; font: 600 14.5px/1 var(--body); padding: 10px 14px;
  text-decoration: none; color: var(--muted); white-space: nowrap; transition: color .25s;
}
.nav a:hover, .nav a.on { color: var(--ink); }
.nav-hl { position: absolute; inset: 0; z-index: -1; background: var(--panel); box-shadow: var(--glow-tab); view-transition-name: nav-hl; }
.nav-ul { position: absolute; inset: auto 10px 5px; height: 2px; background: var(--red); box-shadow: 0 1px 8px color-mix(in srgb, var(--red) 45%, transparent); view-transition-name: nav-ul; }
.nav-sep { flex: none; width: 1px; height: 18px; margin: 0 6px; background: var(--line); }
/* The lit link sits under the others and each word has a name of its own, so on a page change the card sliding over
   to the next section passes under the words rather than over them. */
.bar .nav > a.on { z-index: 0; }
.bar .nav > a:nth-of-type(1) > .nav-t { view-transition-name: nav-t1; }
.bar .nav > a:nth-of-type(2) > .nav-t { view-transition-name: nav-t2; }
.bar .nav > a:nth-of-type(3) > .nav-t { view-transition-name: nav-t3; }
.bar .nav > a:nth-of-type(4) > .nav-t { view-transition-name: nav-t4; }
.bar .nav > a:nth-of-type(5) > .nav-t { view-transition-name: nav-t5; }
.bar .nav > a:nth-of-type(6) > .nav-t { view-transition-name: nav-t6; }
.bar .nav > a:nth-of-type(7) > .nav-t { view-transition-name: nav-t7; }
.bar .nav > a:nth-of-type(8) > .nav-t { view-transition-name: nav-t8; }
/* The menu's motion, Newsdesk's (look.js, with a mouse): a glass lens glides after your pointer from section to
   section, the words roll up letter by letter, and a red light runs along the rim nearest your pointer. */
.nav-lens {
  position: absolute; top: 4px; bottom: 4px; left: 0; z-index: 0; width: var(--w, 0); translate: var(--x, 0) 0; scale: .82; opacity: 0; pointer-events: none;
  background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 9%, transparent);
  transition: translate .5s var(--spring), width .5s var(--spring), scale .45s var(--spring), opacity .3s;
}
.nav-lens.shown { opacity: 1; scale: 1; }
.nav.pressing .nav-lens { scale: .92; }
.roll { display: inline-flex; overflow: hidden; line-height: 1.3; margin-block: -.15em; }
.roll i { position: relative; font-style: normal; white-space: pre; transition: transform .5s var(--ease) calc(var(--i) * 18ms); }
.roll i::after { content: attr(data-c); position: absolute; left: 0; top: 100%; }
.nav a:hover .roll i { transform: translateY(-100%); }
.nav::before {
  content: ""; position: absolute; inset: -1px; z-index: 2; padding: 1px; pointer-events: none; opacity: 0;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), var(--red), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  transition: opacity .5s;
}
.nav.lit::before { opacity: 1; }
.bar-end { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
/* The show's button: a sheen runs across it when you point at it. */
.btn.yt { position: relative; overflow: hidden; }
.btn.yt::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); translate: -140% 0;
}
/* The theme switch shows where it would take you: the moon in light, the sun in dark. */
#theme .ic:first-child { display: none; }
:root[data-theme="dark"] #theme .ic:first-child { display: block; }
:root[data-theme="dark"] #theme .ic:last-child { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #theme .ic:first-child { display: block; }
  :root:not([data-theme="light"]) #theme .ic:last-child { display: none; }
}

/* The bar's moments, only where the system allows motion: the sheen on the logo and the show's button, the on-air ring,
   the icon spinning in when you switch light and dark, and once a visit (html.seen marks the pages after the first)
   the bar putting itself together: the line drawing across, the logo popping in, the name wiping on, the sections
   dropping in and the red line growing out from under the lit one. */
@media (prefers-reduced-motion: no-preference) {
  .brand:hover .mark::after { animation: sheen .85s ease-out; }
  .btn.yt:hover::after { animation: sheen .8s ease-out; }
  .brand-name b::after { animation: on-air 3.2s ease-out 1.4s infinite; }
  #theme.spun .ic { animation: theme-in .6s var(--spring); }
  html:not(.seen) .bar-line { animation: line-draw 1.1s cubic-bezier(.65, 0, .35, 1) .05s both; }
  html:not(.seen) .bar .mark { animation: mark-in .8s var(--spring) both; }
  html:not(.seen) .bar .mark::after { animation: sheen .9s ease-out .7s; }
  html:not(.seen) .brand-name img { animation: word-in .7s cubic-bezier(.2, .8, .2, 1) .12s both; }
  html:not(.seen) .brand-name .w2 { animation-delay: .24s; }
  html:not(.seen) .brand-name b { animation: tag-in .6s var(--spring) .44s both; }
  html:not(.seen) .nav > a { animation: nav-in .55s cubic-bezier(.2, .8, .2, 1) .3s both; }
  html:not(.seen) .nav > a:nth-of-type(2) { animation-delay: .35s; }
  html:not(.seen) .nav > a:nth-of-type(3) { animation-delay: .4s; }
  html:not(.seen) .nav > a:nth-of-type(4) { animation-delay: .45s; }
  html:not(.seen) .nav > a:nth-of-type(5) { animation-delay: .5s; }
  html:not(.seen) .nav > a:nth-of-type(n + 6) { animation-delay: .55s; }
  html:not(.seen) .nav-ul { animation: ul-grow .75s cubic-bezier(.3, 1.6, .5, 1) .8s both; }
  html:not(.seen) .bar-end { animation: nav-in .55s cubic-bezier(.2, .8, .2, 1) .5s both; }
}
@keyframes sheen { 0% { translate: -140% 0; opacity: 0; } 25% { opacity: 1; } 100% { translate: 330% 0; opacity: 0; } }
@keyframes on-air { 0% { opacity: .7; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.3, 1.7); } }
@keyframes theme-in { from { opacity: 0; rotate: -100deg; scale: .4; } }
@keyframes line-draw { from { scale: 0 1; } }
@keyframes mark-in { from { opacity: 0; scale: .5; rotate: -14deg; } }
@keyframes word-in { from { opacity: 0; translate: -10px 0; clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tag-in { from { opacity: 0; scale: .3; } }
@keyframes nav-in { from { opacity: 0; translate: 0 -8px; } }
@keyframes ul-grow { from { scale: 0 1; } }

/* ---- A day's head ---- */
.day-head { position: relative; padding: clamp(30px, 5.5vw, 64px) 0 26px; max-width: 900px; }
.eyebrow {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0;
  font: 600 12px/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--red-ink);
}
.eyebrow time { color: var(--muted); }
.live-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.is-today .live-dot { background: var(--red); }
.is-today .live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--red); animation: live 2.6s ease-out infinite; }
@keyframes live { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.8); opacity: 0; } }
.day-head h1 {
  font: 850 clamp(42px, 6.6vw, 80px)/0.94 var(--display); font-stretch: 72%; letter-spacing: -0.012em;
  margin: 12px 0 0; text-wrap: balance;
}
.lede { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; color: var(--muted); max-width: 60ch; margin: 14px 0 0; text-wrap: pretty; }
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 20px 0 0; }
.facts li {
  display: inline-flex; align-items: baseline; gap: 7px; padding: 9px 13px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: var(--glow-tab); font: 500 12.5px/1 var(--mono); color: var(--muted);
}
.facts b { font: 800 19px/1 var(--display); font-stretch: 80%; color: var(--ink); font-variant-numeric: tabular-nums; }
.updated { margin: 14px 0 0; font: 500 12px/1.3 var(--mono); color: var(--muted); }

/* ---- The coverage chart: Newsdesk's own card, the spectrum only ---- */
/* Its Open lanes side reads the competitor check, which never leaves Newsdesk; so the switch and that side stay out. */
.cov-card #cov-view, .cov-card [data-for="lanes"] { display: none !important; }
.cov-slot { margin: 6px 0 30px; }
/* Room kept for the chart while site.js draws it, so the stories below don't jump. */
.js .cov-slot.is-waiting { min-height: calc(250px + var(--rows, 5) * 82px); }
.wall-card { position: relative; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--glow); padding: 18px 20px; }
.w-title {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 10px;
  font: 600 11.5px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.cov-slot > noscript p { padding: 18px 20px; border: 1px dashed var(--line); margin: 0; }
.cov-failed { padding: 18px 20px; border: 1px dashed var(--line); color: var(--muted); }

/* ---- Story cards ---- */
.stories { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); }
.story-card {
  display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 4px 20px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--glow); padding: 24px 26px;
  scroll-margin-top: calc(var(--bar-h) + 16px);
}
.rank {
  font: 900 66px/0.8 var(--display); font-stretch: 62%; color: transparent; -webkit-text-stroke: 1.6px var(--red);
  padding-top: 6px; text-align: center; user-select: none; -webkit-user-select: none;
}
.story-card.hero .rank { color: var(--red); -webkit-text-stroke: 0; font-size: clamp(84px, 7vw, 108px); }
.story-body { min-width: 0; }
.hook { font: 800 27px/1.06 var(--display); font-stretch: 80%; letter-spacing: -0.005em; margin: 6px 0 12px; text-wrap: balance; }
.story-card.hero .hook { font-size: clamp(31px, 3vw, 44px); }
.summary { font-size: 17px; line-height: 1.6; max-width: 68ch; margin: 0 0 10px; text-wrap: pretty; }
.kv { max-width: 68ch; margin: 0 0 12px; text-wrap: pretty; }
.kv strong { font-weight: 700; }
.ai-tag {
  display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 0; padding: 5px 9px 5px 7px; cursor: help;
  font: 600 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-ink); background: var(--blue-soft);
}
.ai-tag .ic { width: 14px; height: 14px; }
.ai-tag.inline { padding: 2px 6px 2px 5px; vertical-align: 1px; cursor: default; }
.ai-tag.inline .ic { width: 12px; height: 12px; }
.meta-row {
  display: flex; gap: 10px 22px; align-items: center; flex-wrap: wrap; margin: 16px 0 4px; padding-top: 14px; border-top: 1px dashed var(--line);
  font: 500 12px/1.2 var(--mono); color: var(--muted);
}
.meta-row > span { display: inline-flex; align-items: center; gap: 8px; }
.heat { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.heat i { width: 4px; background: var(--line); display: inline-block; height: 5px; }
.heat i:nth-child(2) { height: 6px; } .heat i:nth-child(3) { height: 7px; } .heat i:nth-child(4) { height: 8px; } .heat i:nth-child(5) { height: 9px; }
.heat i:nth-child(6) { height: 10px; } .heat i:nth-child(7) { height: 11px; } .heat i:nth-child(8) { height: 12px; } .heat i:nth-child(9) { height: 13px; } .heat i:nth-child(10) { height: 14px; }
.heat i.on { background: var(--red); }
.leanbar { display: inline-flex; height: 8px; width: 110px; overflow: hidden; background: var(--line); }
.leanbar span { display: block; height: 100%; }
.lean-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.lean-left { background: var(--lean-left); }
.lean-lean-left { background: var(--lean-lean-left); }
.lean-center { background: var(--lean-center); }
.lean-lean-right { background: var(--lean-lean-right); }
.lean-right { background: var(--lean-right); }
.lean-official { background: var(--lean-official); }
.lean-international { background: var(--lean-international); }
.lean-local { background: var(--lean-local); }

/* The coverage and the posts open under the story. */
.story-more { margin-top: 12px; border-top: 1px solid var(--line); }
.story-more > summary {
  display: flex; align-items: center; gap: 9px; padding: 12px 0 2px; cursor: pointer; list-style: none;
  font: 600 14.5px/1.3 var(--body); color: var(--muted); transition: color .2s;
}
.story-more > summary::-webkit-details-marker { display: none; }
.story-more > summary::before {
  content: ""; width: 7px; height: 7px; flex: none; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: transform .25s var(--ease); margin: 0 3px 0 1px;
}
.story-more[open] > summary::before { transform: rotate(45deg); }
.story-more > summary:hover { color: var(--ink); }
.cov-group { margin-top: 14px; }
.cov-lean {
  display: flex; align-items: center; gap: 8px; margin: 0; padding-bottom: 6px; border-bottom: 2px solid var(--line);
  font: 600 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.cov-lean small { font: inherit; color: var(--muted); letter-spacing: .04em; text-transform: none; }
.coverage { list-style: none; padding: 0; margin: 0; font-size: 14.5px; }
.coverage li { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr); gap: 2px 16px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); }
.coverage li:last-child { border-bottom: 0; }
.outlet { font-weight: 700; min-width: 0; }
.heds { display: grid; gap: 5px; min-width: 0; }
.hed a { text-decoration: none; text-wrap: pretty; }
.hed a:hover { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; }
.hed time { margin-left: 4px; font: 500 11.5px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.post { margin: 12px 0 0; padding: 14px 16px 12px; background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--src-truth); }
.post-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.55; }
.post-text a { color: var(--blue-ink); }
.post-media-note { margin: 8px 0 0; font: 500 12px/1.3 var(--mono); color: var(--muted); }
.post-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font: 500 12px/1.3 var(--mono); color: var(--muted); }
.post-meta a { color: var(--blue-ink); text-decoration: none; }
.post-meta a:hover { text-decoration: underline; }
.post-meta a::after { content: " ↗"; }

/* ---- Older and newer, the days strip, how it's made ---- */
.steps { display: flex; justify-content: space-between; gap: 12px; margin: 30px 0 0; }
.steps a {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; min-height: 46px; text-decoration: none; font-weight: 600;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--glow-tab); transition: transform .2s var(--ease), border-color .2s;
}
.steps a:hover { border-color: var(--blue); }
.steps a[rel="prev"]:hover { transform: translateX(-3px); }
.steps a[rel="next"]:hover { transform: translateX(3px); }
.section-title { font: 600 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.days { margin-top: 48px; }
.day-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(196px, 232px); gap: 12px; overflow-x: auto;
  padding: 4px 4px 16px; margin-inline: -4px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.day {
  display: grid; gap: 6px; align-content: start; padding: 14px 16px 15px; scroll-snap-align: start; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--glow-tab); transition: transform .2s var(--ease), border-color .2s;
}
.day:hover { transform: translateY(-2px); border-color: var(--blue); }
.day b { font: 800 17px/1.1 var(--display); font-stretch: 84%; }
.day small { color: var(--muted); font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.day.on { border-color: var(--red); box-shadow: inset 0 3px 0 var(--red), var(--glow-tab); }
.how { margin-top: 44px; padding: 22px 24px; border: 1px dashed var(--line); }
.how-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 4px 32px; color: var(--muted); font-size: 15px; }
.how-cols b { color: var(--ink); }

/* ---- Text pages: privacy, not found, the wait for the first brief ---- */
.text-page { max-width: 780px; padding: clamp(30px, 5.5vw, 64px) 0 0; }
.text-page h1 { font: 850 clamp(38px, 5.4vw, 60px)/0.98 var(--display); font-stretch: 74%; letter-spacing: -0.01em; margin: 12px 0 0; text-wrap: balance; }
.text-card { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--glow); padding: 20px 24px; margin-top: 18px; }
.text-card h2 { font: 800 22px/1.15 var(--display); font-stretch: 84%; margin: 0 0 8px; }
.text-card p, .text-card li { max-width: 68ch; }
.text-card ul { margin: 0; padding-left: 20px; }
.text-card li { margin: 6px 0; }
.text-card li::marker { color: var(--red); }
.text-card a, .lede a { color: var(--blue-ink); }
.contact { margin: 22px 0 0; }
.lost .btn { margin-top: 16px; }

/* ---- The Midterms page ----
   Its record, map, legend and result rows are the app's (midterms.css, loaded before this file), so only the page
   around them is here. Panels are :where()d so midterms.css's own boxes (the election-night one) keep their look. */
:where(.panel) { background: var(--panel); border: 1px solid var(--line); box-shadow: var(--glow); padding: 20px 22px; margin: 0 0 var(--gap); }
:where(.panel) h2 { font: 800 21px/1.12 var(--display); font-stretch: 84%; margin: 0 0 6px; }
.mt-pagehead { padding-bottom: 22px; }
.mt-pagehead .ai-tag { margin-top: 14px; }
.mt-watch { box-shadow: var(--glow); }
.mt-watch a { color: var(--blue-ink); font-weight: 600; }
.mt-watch h2 { text-wrap: balance; }
.mt-top .panel { box-shadow: var(--glow); }
/* Room kept for the app's charts while site.js draws them, so the page doesn't jump. */
.js .mt-record-chart.is-waiting { min-height: 150px; }
.js .mt-map-slot.is-waiting { aspect-ratio: 12 / 8.2; }
.mt-record-chart { display: flex; flex-direction: column; gap: 14px; }
.mt-statelist { margin-top: 14px; }
.mt-statelist ul { list-style: none; margin: 10px 0 0; padding: 0; columns: 2 230px; column-gap: 24px; font-size: 14px; }
.mt-statelist li { break-inside: avoid; padding: 4px 0; border-bottom: 1px solid var(--line); }
.mt-statelist li span { color: var(--muted); }

/* Who holds Washington: one tile per seat of power, in its party's color. */
.mt-power { margin-top: var(--gap); }
.mt-seats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; margin: 10px 0 12px; }
.mt-seat { display: grid; gap: 3px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--line); border-top: 4px solid var(--muted); }
.mt-seat.p-R { border-top-color: var(--red); }
.mt-seat.p-D { border-top-color: var(--blue); }
.mt-seat small { font: 600 10.5px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.mt-seat b { font: 800 21px/1.1 var(--display); font-stretch: 84%; }
.mt-seat.p-R b { color: var(--red-ink); }
.mt-seat.p-D b { color: var(--blue-ink); }
.mt-seat span { font-size: 13px; color: var(--muted); }
.mt-power .muted a { color: var(--blue-ink); }
.mt-result { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.mt-result-text { font-size: 17px; line-height: 1.55; max-width: 68ch; margin: 6px 0; text-wrap: pretty; }
.mt-result a { color: var(--blue-ink); }
.mt-result-wait { margin: 10px 0 0; color: var(--muted); max-width: 68ch; }

/* Every race: the balance of power, the map of the states and every race, in the parties' colors. Without JavaScript
   the Senate, Governors and House show one under the other, each under its own heading. */
.races { --s-R: var(--red); --s-D: var(--blue); --s-O: light-dark(#7c3aed, #a78bfa); margin-top: var(--gap); }
.races-top { display: grid; gap: 6px; margin-bottom: 12px; }
.races-top h2 { display: flex; align-items: center; gap: 10px; margin: 0; }
.races-top p { margin: 0; max-width: 78ch; }
.races-top time { white-space: nowrap; }
.race-tabs { display: none; margin: 2px 0 14px; }
.js .race-tabs { display: inline-flex; }
.race-tabs .n { margin-left: 6px; font: 600 11px/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.race-h { font: 800 18px/1.2 var(--display); font-stretch: 84%; margin: 0 0 8px; }
.race-pane + .race-pane { margin-top: 28px; padding-top: 18px; border-top: 1px dashed var(--line); }
.js .race-pane + .race-pane { margin-top: 0; padding-top: 0; border-top: 0; }
.js .race-pane[hidden] { display: none; }
.js .race-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.bal { margin: 2px 0 8px; }
.bal-nums { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 12px; font-size: 13.5px; line-height: 1.15; color: var(--muted); }
.bal-nums .s-R, .bal-nums .s-D, .bal-nums .s-O, .bal-wait { display: flex; flex-direction: column; gap: 3px; }
.bal-nums b { font: 800 30px/1 var(--display); font-stretch: 84%; font-variant-numeric: tabular-nums; }
.bal-nums .s-R b { color: var(--red-ink); }
.bal-nums .s-D b { color: var(--blue-ink); }
.bal-nums .s-O b { color: var(--s-O); }
.bal-wait { align-items: center; }
.bal-wait b { font-size: 22px; color: var(--ink); }
.bal-right { display: flex; justify-content: flex-end; gap: 16px; }
.bal-right > span { align-items: flex-end; }
.bal-bar { position: relative; display: flex; height: 20px; margin: 8px 0 7px; background: var(--panel-2); border: 1px solid var(--line); }
.bal-bar i { display: block; height: 100%; transition: width .7s var(--ease); }
.bal-bar .s-R, .race-fill .s-R { background: var(--s-R); }
.bal-bar .s-D, .race-fill .s-D { background: var(--s-D); }
.bal-bar .s-O, .race-fill .s-O { background: var(--s-O); }
.bal-gap { background: repeating-linear-gradient(135deg, transparent 0 5px, color-mix(in srgb, var(--muted) 24%, transparent) 5px 7px); }
.bal-line { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--ink); }
.bal-note { margin: 0; font: 500 12.5px/1.5 var(--mono); color: var(--muted); }
.race-going { margin: 2px 0 12px; }

.race-body { display: grid; gap: 8px 28px; align-items: start; }
.race-body.has-latest { grid-template-columns: minmax(0, 720px) minmax(220px, 1fr); }
.race-map { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; max-width: 720px; margin: 10px 0; }
.race-latest { margin-top: 10px; }
.race-latest ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.race-latest a { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 8px; padding: 7px 10px 7px 12px; border: 1px solid var(--line); border-left: 4px solid var(--muted); background: var(--panel-2); color: var(--ink); text-decoration: none; }
.race-latest a:hover { border-color: var(--blue-ink); }
.race-latest .s-R a { border-left-color: var(--s-R); }
.race-latest .s-D a { border-left-color: var(--s-D); }
.race-latest .s-O a { border-left-color: var(--s-O); }
.race-latest b { font: 800 15px/1.2 var(--display); font-stretch: 84%; }
.race-latest span { font-size: 14px; }
.race-latest small { grid-column: 1 / -1; font: 500 11.5px/1.3 var(--mono); color: var(--muted); }
.race-st {
  position: relative; aspect-ratio: 1; min-width: 0; display: grid; align-content: center; justify-items: center; gap: 2px;
  padding: 3px 2px 6px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink); text-decoration: none;
  transition: transform .25s var(--spring), box-shadow .25s;
}
.race-st b { font: 700 clamp(9px, 1vw, 12px)/1 var(--mono); letter-spacing: .02em; }
.race-st small { font: 700 clamp(7px, .75vw, 9.5px)/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.race-st.none { opacity: .35; border-style: dashed; background: transparent; }
.race-st.wait.h-R { background: color-mix(in srgb, var(--s-R) 11%, var(--panel-2)); border-color: color-mix(in srgb, var(--s-R) 42%, var(--line)); }
.race-st.wait.h-D { background: color-mix(in srgb, var(--s-D) 11%, var(--panel-2)); border-color: color-mix(in srgb, var(--s-D) 42%, var(--line)); }
.race-st.wait.h-O { background: color-mix(in srgb, var(--s-O) 11%, var(--panel-2)); border-color: color-mix(in srgb, var(--s-O) 42%, var(--line)); }
.race-st.won { color: #fff; border-color: transparent; }
.race-st.won small { color: rgba(255, 255, 255, .88); }
.race-st.won.s-R { background: var(--s-R); }
.race-st.won.s-D { background: var(--s-D); }
.race-st.won.s-O { background: var(--s-O); }
/* A seat that changed party gets stripes over its new color. */
.race-st.flip::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, .3) 6px 9px); pointer-events: none; }
.race-st.picked::before { content: "★"; position: absolute; top: 2px; right: 3px; font-size: clamp(7px, .8vw, 10px); line-height: 1; color: var(--warn); }
.race-st.won.picked::before { color: #fff; }
a.race-st:hover { transform: translateY(-2px) scale(1.08); z-index: 2; box-shadow: var(--shadow-up); }
.race-fill { position: absolute; left: 3px; right: 3px; bottom: 3px; height: 3px; display: flex; gap: 1px; }
.race-fill i { display: block; min-width: 1px; }

.race-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 10px; padding: 0; font: 600 11.5px/1.2 var(--mono); color: var(--muted); }
.race-legend li { display: inline-flex; align-items: center; gap: 6px; }
.race-legend i { width: 12px; height: 12px; display: inline-grid; place-items: center; border: 1px solid transparent; font: 700 11px/1 var(--mono); font-style: normal; }
.race-legend i.s-R { background: var(--s-R); }
.race-legend i.s-D { background: var(--s-D); }
.race-legend i.s-O { background: var(--s-O); }
.race-legend i.wait { background: linear-gradient(135deg, color-mix(in srgb, var(--s-R) 26%, var(--panel-2)) 50%, color-mix(in srgb, var(--s-D) 26%, var(--panel-2)) 50%); border-color: color-mix(in srgb, var(--muted) 45%, transparent); }
.race-legend i.none { border: 1px dashed var(--muted); opacity: .6; }
.race-legend i.flip { background: repeating-linear-gradient(135deg, var(--muted) 0 3px, transparent 3px 5px); border-color: var(--muted); }
.race-legend i.pick { color: var(--warn); }

.race-all { margin-top: 6px; }
.race-all > summary { cursor: pointer; padding: 8px 0; font: 600 14.5px/1.3 var(--body); color: var(--blue-ink); }
.race-list { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; }
.race { display: grid; align-content: start; gap: 7px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--line); scroll-margin-top: calc(var(--bar-h) + 16px); }
.race.won.s-R { border-left-color: var(--s-R); }
.race.won.s-D { border-left-color: var(--s-D); }
.race.won.s-O { border-left-color: var(--s-O); }
.race.wait.h-R { border-left-color: color-mix(in srgb, var(--s-R) 40%, var(--line)); }
.race.wait.h-D { border-left-color: color-mix(in srgb, var(--s-D) 40%, var(--line)); }
.race:target, .race.is-linked { outline: 2px solid var(--blue); outline-offset: 2px; }
.race-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.race-state { font: 800 17px/1.15 var(--display); font-stretch: 84%; }
.race-tag { padding: 2px 6px; font: 600 10px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); }
.race-call { margin-left: auto; font: 700 10.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.race.won .race-call { color: var(--ink); }
.race.flip .race-call { color: var(--warn); }
.race-cands { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.race-cands li { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 8px; align-items: baseline; font-size: 14.5px; line-height: 1.3; }
.race-cands small { grid-column: 2; font-size: 12.5px; color: var(--muted); }
.race-dot { width: 8px; height: 8px; background: var(--muted); }
.race-cands .s-R .race-dot { background: var(--s-R); }
.race-cands .s-D .race-dot { background: var(--s-D); }
.race-cands .s-O .race-dot { background: var(--s-O); }
.race-cands li.won .race-who { font-weight: 700; }
.race-check, .race-pick { display: inline-block; padding: 2px 5px; font: 700 10px/1.1 var(--mono); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; vertical-align: 1px; }
.race-check { color: var(--good); background: var(--good-soft); }
.race-pick { color: var(--warn); background: var(--warn-soft); text-decoration: none; }
.race-pick:hover { text-decoration: underline; }
.race-rest > summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.race-rest .race-cands { margin-top: 5px; }
.race-now { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.race-now a, .race-src a { color: var(--blue-ink); }
.race-src { margin: 10px 0 0; }
.race-gains { list-style: none; margin: 6px 0 0; padding: 0; columns: 2 240px; column-gap: 24px; font-size: 14px; }
.race-gains li { break-inside: avoid; padding: 5px 0 5px 10px; border-left: 3px solid var(--line); margin-bottom: 4px; }
.race-gains li.s-R { border-left-color: var(--s-R); }
.race-gains li.s-D { border-left-color: var(--s-D); }
.race-gains li.s-O { border-left-color: var(--s-O); }
.race-gains small { color: var(--muted); }

/* The switches over the picks: square, like the rest of the site. Without JavaScript every pick shows and they stay hidden. */
.seg { position: relative; display: inline-flex; gap: 2px; padding: 4px; max-width: 100%; overflow-x: auto; scrollbar-width: none; background: var(--panel-2); border: 1px solid var(--line); }
.seg::-webkit-scrollbar { display: none; }
.seg > button {
  appearance: none; padding: 8px 13px; border: 0; background: none; cursor: pointer; white-space: nowrap;
  font: 600 13.5px/1.1 var(--body); color: var(--muted); transition: color .2s, background .2s, box-shadow .2s;
}
.seg > button:hover { color: var(--ink); }
.seg > button.on { color: var(--ink); background: var(--panel); box-shadow: var(--glow-tab); }
.mt-tools { display: none; }
.js .mt-tools { display: flex; }
.mt-tools { scroll-margin-top: calc(var(--bar-h) + 12px); }
input[type="search"], select {
  font: inherit; font-size: 15px; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 0;
  padding: 9px 12px; min-height: 40px; transition: border-color .2s, box-shadow .2s;
}
input[type="search"]:focus, select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent); }
select {
  appearance: none; -webkit-appearance: none; padding-right: 32px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
.mt-search { flex: 1 1 220px; max-width: 340px; }
.mt-search input { width: 100%; }
.mt-statechip { min-height: 32px; }

/* Each pick: what race, how it went, where the result came from, and his own words at the foot. */
.mt-picks { margin-top: 36px; }
.mt-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: var(--gap); align-items: stretch; }
.mt-pick[hidden] { display: none; }
.mt-pick { --st: var(--s-waiting); scroll-margin-top: calc(var(--bar-h) + 20px); }
.mt-pick.st-won { --st: var(--s-won); }
.mt-pick.st-lost { --st: var(--s-lost); }
.mt-pick.st-ahead { --st: var(--s-ahead); }
.mt-pick.st-out { --st: var(--s-out); }
.mt-pick-card {
  height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 14px;
  background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--st); box-shadow: var(--glow);
}
.mt-pick.is-linked .mt-pick-card { outline: 2px solid var(--blue); outline-offset: 3px; }
.mt-chip {
  padding: 4px 8px 4px 7px; border-left: 3px solid var(--st); background: color-mix(in srgb, var(--st) 16%, transparent);
  font: 700 10.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink); cursor: help;
}
.mt-pick-card .mt-name { font-size: 22px; }
.mt-pick-card .mt-stages { margin-top: 2px; }
.mt-pick-card .mt-src a { color: var(--blue-ink); }
.mt-said { margin: auto 0 0; padding: 10px 0 0 12px; border-left: 3px solid var(--src-truth); }
.mt-said p { margin: 0; font: italic 500 15px/1.5 var(--body); overflow-wrap: anywhere; text-wrap: pretty; }
.mt-said p.muted { font-style: normal; font-size: 13.5px; }
.mt-said footer { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font: 500 12px/1.45 var(--mono); color: var(--muted); }
.mt-said a { color: var(--blue-ink); text-decoration: none; }
.mt-said a:hover { text-decoration: underline; }
.mt-said footer > a::after { content: " ↗"; }
.mt-again { flex-basis: 100%; }
.mt-none { margin: 0; padding: 18px; border: 1px dashed var(--line); text-align: center; }
.mt-none .btn { margin-left: 8px; }
.mt-more-row { margin: 22px 0 0; text-align: center; }
.mt-more-row:has(#mt-more[hidden]) { display: none; }

/* His posts about the vote on election week. */
.mt-week { margin-top: 36px; }
.mt-week > .muted { margin: 0 0 6px; max-width: 70ch; }
.mt-feed { display: grid; max-width: 780px; }
.mt-rigged { margin: 0 0 8px; font: 700 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--red-ink); }
.mt-rigged b { padding: 1px 4px; background: var(--red-soft); }

/* Every year with picks. */
.mt-years-list { margin-top: 40px; }
.mt-table-wrap { overflow-x: auto; }
.mt-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--glow-tab); font-variant-numeric: tabular-nums; }
.mt-table th, .mt-table td { padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.mt-table th:first-child { text-align: left; }
.mt-table thead th { font: 600 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mt-table tbody th { font-weight: 700; }
.mt-table tbody tr:last-child > * { border-bottom: 0; }
.mt-table a { color: var(--blue-ink); }
.mt-table tr.on { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--red); }
.mt-table .g { color: var(--good); }
.mt-table .r { color: var(--red-ink); }
.mt-table small { font-size: 11px; color: var(--muted); }

/* ---- Behind the video: a video's page, and the Videos page ---- */
.vid-head { position: relative; padding: clamp(30px, 5.5vw, 60px) 0 20px; max-width: 920px; }
.vid-head .eyebrow a { color: inherit; text-decoration: none; }
.vid-head .eyebrow a:hover { text-decoration: underline; text-underline-offset: 3px; }
.vid-head h1 { font: 850 clamp(34px, 5.2vw, 64px)/0.98 var(--display); font-stretch: 74%; letter-spacing: -0.01em; margin: 12px 0 0; text-wrap: balance; }
.vid-head .ai-tag { margin-top: 14px; }
.vid-part { margin-top: 36px; }
.vid-part > .muted { margin: -6px 0 0; }
.vid-watch { margin: 4px 0 0; }

/* The player: the show's own poster until you press play, so nothing comes from YouTube before. */
.player { max-width: 960px; margin-top: 6px; }
.player-screen { position: relative; aspect-ratio: 16 / 9; background: #0a0f1b; border: 1px solid var(--line); box-shadow: var(--glow); overflow: hidden; }
.player-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-poster {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 14px;
  padding: clamp(16px, 4vw, 40px); color: #fff; text-decoration: none;
  background:
    radial-gradient(60% 85% at 0% 0%, rgba(237, 28, 36, .5), transparent 70%),
    radial-gradient(70% 95% at 100% 100%, rgba(56, 113, 193, .62), transparent 70%),
    linear-gradient(135deg, #111a2b, #0a0f1b);
}
/* A TV's lines over it. */
.player-poster::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 4px); }
.player-brand { margin-bottom: auto; font: 600 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.player-title { font: 850 clamp(20px, 3.6vw, 44px)/1.02 var(--display); font-stretch: 76%; max-width: 24ch; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.player-btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px 14px 18px; background: var(--red); color: #fff;
  font: 700 17px/1 var(--body); box-shadow: 0 14px 34px -12px rgba(237, 28, 36, .9); transition: transform .2s var(--spring), filter .2s;
}
.player-btn .ic { width: 24px; height: 24px; }
.player-poster:hover .player-btn { transform: scale(1.05); filter: brightness(1.08); }
.player-poster:active .player-btn { transform: scale(.97); }
.player-note { margin: 10px 0 0; font: 500 12px/1.5 var(--mono); color: var(--muted); }
.player-note a { color: var(--blue-ink); }

.chapters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 8px; }
.chapters a, .chapters .ch-row {
  display: flex; align-items: baseline; gap: 12px; height: 100%; padding: 10px 14px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--glow-tab); transition: border-color .2s, transform .2s var(--ease);
}
.chapters a:hover { border-color: var(--blue); transform: translateY(-1px); }
.ch-time { min-width: 3.6em; font: 600 13px/1.3 var(--mono); color: var(--red-ink); font-variant-numeric: tabular-nums; }

/* The receipts: one card for each the video shows, its kind in the color along the top. */
.receipts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: var(--gap); }
.rc { --k: var(--blue); display: flex; flex-direction: column; gap: 9px; padding: 16px 18px 14px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--k); box-shadow: var(--glow); }
.rc.k-post { --k: var(--src-truth); }
.rc.k-tweet { --k: var(--lean-lean-left); }
.rc.k-x { --k: var(--muted); }
.rc.k-number { --k: var(--red); }
.rc.k-quote { --k: var(--lean-official); }
.rc.k-title { --k: var(--ink); }
.rc-top { display: flex; flex-wrap: wrap; gap: 3px 10px; margin: 0; font: 600 11px/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rc-kind { color: var(--k); }
.rc.k-title .rc-kind, .rc.k-x .rc-kind { color: var(--muted); }
.rc-from { color: var(--ink); }
.rc-hed { font: 800 22px/1.14 var(--display); font-stretch: 84%; text-wrap: pretty; }
.rc-head { font: 800 18px/1.2 var(--display); font-stretch: 84%; }
.rc-name { font: 850 30px/1 var(--display); font-stretch: 74%; text-wrap: balance; }
.rc-said, .rc-q { margin: 0; }
.rc-said p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.55; }
.rc-q p { margin: 0; font: italic 500 17px/1.5 var(--body); overflow-wrap: anywhere; text-wrap: pretty; }
.rc-who { margin: 0; font-weight: 600; font-size: 14px; }
.rc-nums { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rc-nums li { font: 800 24px/1.12 var(--display); font-stretch: 80%; font-variant-numeric: tabular-nums; }
.rc-detail { margin: 0; color: var(--muted); font-size: 14px; }
.rc-note { margin: 0; font: 500 11.5px/1.45 var(--mono); color: var(--muted); }
.rc-x { margin: 0; color: var(--muted); font-size: 14.5px; }
.rc mark { background: color-mix(in srgb, #facc15 52%, transparent); color: inherit; padding: 0 .1em; }
.rc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); }
.rc-link { font: 500 12px/1.3 var(--mono); color: var(--blue-ink); text-decoration: none; overflow-wrap: anywhere; }
.rc-link:hover { text-decoration: underline; }
.rc-link::after { content: " ↗"; }
/* The stamp that lands at the end of the card in the video. */
.rc-stamp { margin-left: auto; padding: 3px 7px; border: 2px solid var(--red-ink); color: var(--red-ink); font: 850 13px/1 var(--display); font-stretch: 80%; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-6deg); white-space: nowrap; }

.vid-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 0 36px; }
.vid-sources, .vid-clips { list-style: none; margin: 0; padding: 0; }
.vid-sources li, .vid-clips li { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.vid-sources li:last-child, .vid-clips li:last-child { border-bottom: 0; }
.vid-sources a, .vid-clips a { text-decoration: none; text-wrap: pretty; overflow-wrap: anywhere; }
.vid-clips a { display: grid; gap: 1px; }
.vid-clips a span { color: var(--muted); font-size: 14.5px; }
.vid-sources a:hover, .vid-clips a:hover b { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; }
.vid-sources small, .vid-clips small { font: 500 11.5px/1.3 var(--mono); color: var(--muted); }

.vid-day {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 14px; max-width: 660px; margin-top: 36px;
  padding: 16px 20px; text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--red);
  box-shadow: var(--glow-tab); transition: border-color .2s, transform .2s var(--ease);
}
.vid-day > :not(.ic) { grid-column: 1; }
.vid-day > .ic { grid-column: 2; grid-row: 1 / span 3; color: var(--muted); transition: transform .2s var(--ease); }
.vid-day b { font: 800 21px/1.15 var(--display); font-stretch: 84%; }
.vid-day > span:last-of-type { color: var(--muted); font-size: 14.5px; }
.vid-day:hover { border-color: var(--blue); }
.vid-day:hover > .ic { transform: translateX(3px); }

.vid-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--gap); }
.vid-card {
  height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 16px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--red); box-shadow: var(--glow);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.vid-card:hover { transform: translateY(-3px); box-shadow: var(--glow), var(--shadow-up); }
.vid-when { font: 600 11.5px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--red-ink); }
.vid-title { font: 800 25px/1.08 var(--display); font-stretch: 80%; text-wrap: balance; }
.vid-hook { color: var(--muted); font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vid-counts { font: 500 12px/1.3 var(--mono); color: var(--muted); }
.vid-card .ai-tag { align-self: flex-start; }
.vid-go { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 14px; color: var(--blue-ink); }
.vid-go .ic { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.vid-card:hover .vid-go .ic { transform: translateX(3px); }
.vid-none { max-width: 660px; margin: 0; padding: 22px; border: 1px dashed var(--line); color: var(--muted); }
.vid-none a { color: var(--blue-ink); }

/* ---- The Receipts page ----
   Its charts are the app's (charts.css, loaded before this file): the rage meter from Today's brief (rage.css, and the
   card's turn in credits.css), the Topic river and the Posting clock from Truth Social › Patterns, and the "rigged"
   tracker from History › Elections. Each card shows its numbers in words until site.js draws its chart there, and goes
   back to them if it can't. The few app styles the charts lean on (the spinner, a card wall, a note at the foot of the
   screen) are below, in the site's square look. */
/* The rage meter stands beside the page's title, and under it on narrower screens. */
.rp-head.has-rage {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 460px); gap: 28px clamp(28px, 4.5vw, 64px);
  align-items: center; padding: clamp(30px, 5.5vw, 64px) 0 34px;
}
.rp-head.has-rage > .day-head { padding: 0; }
.rp-rage { position: relative; min-width: 0; }
.js .rp-rage .rp-wait { min-height: 600px; }
.rp-rage .rp-static p { font-size: 15px; }
.rp-rage .rp-static b { font: 800 20px/1 var(--display); font-stretch: 85%; color: var(--ink); font-variant-numeric: tabular-nums; }
/* The card is never wider than a phone here, so its back keeps to his two hottest posts as the app's does on a phone,
   and stays about as tall as the front. With no Video button, the time it was checked sits on its own at the right. */
.rp-rage .rg-posts > li:nth-child(n + 3) { display: none; }
.rp-rage .rg-actions { justify-content: flex-end; min-height: 0; }
.rp-page { display: grid; gap: var(--gap); }
.rp-page > .panel { margin: 0; min-width: 0; }
.rp-wait { display: none; }
.js .rp-wait { display: grid; min-height: 360px; }
.js .rp-static, .js .rp-failed .rp-wait { display: none; }
.js .rp-failed .rp-static { display: block; }
.rp-topics { list-style: none; margin: 14px 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 0 24px; }
.rp-topics li { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.rp-topics i { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--c); }
.rp-topics span { flex: 1; min-width: 0; }
.rp-topics b { font: 500 12px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.rp-ai { justify-self: start; margin: calc(var(--gap) / -2) 0 0; }
.rp-caveat { margin: 12px 0 0; }
.rp-tap { display: none; }
.js .rp-tap { display: inline; }
.rp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.rp-rigged .el-h { font-size: clamp(24px, 2.6vw, 30px); text-wrap: balance; }
.rp-rigged .eyebrow { margin-bottom: 8px; }

/* Said it before: History's timeline (the app's own, styled as in its styles.css), then the chains in words. */
.rp-said .el-h { font-size: clamp(24px, 2.6vw, 30px); text-wrap: balance; }
.rp-said .eyebrow { margin-bottom: 8px; }
.sb-chart { min-width: 0; container-type: inline-size; }
/* On a narrow chart the app's timeline leaves 78px for its lane names: a size smaller, so "Truth Social" fits. */
@container (max-width: 639px) { .sb-chart .tl-lane-label { font-size: 10px; } }
.js .sb-chart .rp-wait { min-height: 300px; }
.tl-wrap { position: relative; overflow-x: auto; margin-top: 10px; }
.tl-svg { display: block; font-family: var(--body); }
.tl-lane { fill: var(--panel-2); }
.tl-lane-label { fill: var(--muted); font-size: 12px; font-weight: 700; }
.tl-grid { stroke: var(--viz-grid); stroke-width: 1; }
.tl-tick { fill: var(--muted); font-size: 11px; font-family: var(--mono); }
.tl-dot { stroke: var(--panel); stroke-width: 1.5; cursor: pointer; transition: r .2s var(--spring), opacity .3s; }
.tl-dot:hover { stroke: var(--ink); stroke-width: 2; r: 8.5; }
.tl-arc { fill: none; stroke-width: 2; opacity: .85; transition: opacity .3s; }
.legend { display: flex; gap: 8px 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin: 10px 0 4px; }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
.legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.legend b { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
/* The dots are in their source's color here, not Claude's labels: the key's "Not labeled yet" has nothing to say. */
.sb-chart .legend span:has(> .kind-fill-none) { display: none; }
.src-badge, .link-badge {
  font: 700 10.5px/1.5 var(--mono); padding: 1px 8px; border-radius: 6px; white-space: nowrap; display: inline-block; letter-spacing: .02em;
}
.src-badge { color: var(--c, var(--muted)); background: color-mix(in srgb, var(--c, var(--muted)) 14%, transparent); }
.src-badge.src-truth { --c: var(--src-truth); }
.src-badge.src-x, .src-badge.src-x-found { --c: var(--src-x); }
.src-badge.src-youtube { --c: var(--src-youtube); }
.src-badge.src-news { --c: var(--src-news); }
.src-badge.src-event { --c: var(--src-event); }
.src-badge.src-statement { --c: var(--src-statement); }
.link-badge { color: #fff; background: light-dark(var(--lc, #8b8f98), color-mix(in srgb, var(--lc, #8b8f98) 70%, white)); }
.sb-list-head { margin: 26px 0 12px; font: 600 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sb-chains { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.js .sb-chains:not(.sb-all) > .sb-chain:nth-child(n + 6) { display: none; }
.sb-chain { border: 1px solid var(--line); background: var(--panel); padding: 14px 18px 16px; scroll-margin-top: calc(var(--bar-h) + 20px); }
.sb-chain-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.sb-types { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-span { margin: 0; flex: 1 1 auto; font: 500 12.5px/1.3 var(--mono); color: var(--muted); }
.sb-zoom {
  font: 600 12.5px/1 var(--body); color: var(--blue-ink); background: var(--blue-soft); border: 1px solid transparent;
  padding: 7px 11px; cursor: pointer; transition: border-color .2s, transform .15s var(--ease);
}
.sb-zoom:hover { border-color: var(--blue); }
.sb-zoom:active { transform: translateY(1px); }
.sb-steps { list-style: none; margin: 0; padding: 0; }
/* A rail down the left joins a chain's receipts, oldest first; each link sits on it, above the receipt it reaches back from. */
.sb-step { position: relative; padding: 12px 0 4px 24px; scroll-margin-top: calc(var(--bar-h) + 40px); }
.sb-step::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.sb-step:first-child::before { top: 20px; }
.sb-step:last-child::before { bottom: auto; height: 20px; }
.sb-step::after { content: ""; position: absolute; left: 0; top: 15px; width: 12px; height: 12px; border-radius: 50%; background: var(--panel); border: 3px solid var(--blue); }
.sb-step.sb-hit { animation: sb-hit 1.6s var(--ease); }
@keyframes sb-hit { 0%, 30% { background: color-mix(in srgb, var(--blue) 12%, transparent); } }
.sb-link { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: -2px 0 8px; }
.sb-to { font: 500 12px/1.3 var(--mono); color: var(--muted); }
.sb-to::before { content: "← "; }
.sb-note { margin: -2px 0 10px; font-size: 14px; color: var(--muted); max-width: 80ch; }
.sb-when { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: 500 12.5px/1.3 var(--mono); color: var(--muted); }
.sb-said { margin: 8px 0 6px; padding: 10px 14px; background: var(--panel-2); border-left: 3px solid var(--src-truth); }
.sb-step:has(.src-x) .sb-said { border-left-color: var(--src-x); }
.sb-step:has(.src-statement) .sb-said { border-left-color: var(--src-statement); }
.sb-step:has(.src-event) .sb-said { border-left-color: var(--src-event); }
.sb-said p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.55; }
.sb-headline { margin: 8px 0 6px; font: 700 17px/1.3 var(--body); text-wrap: pretty; }
.sb-away { margin: 8px 0 6px; color: var(--muted); font-style: italic; }
.sb-open { font: 600 13px/1.3 var(--body); color: var(--blue-ink); text-decoration: none; }
.sb-open:hover { text-decoration: underline; }
.sb-more { margin-top: 14px; }
.sb-more[hidden] { display: none; }
/* His posts only, and no server to ask: the river's Whose posts switch and the clock's Check now stay out. */
.river-who, .clock-check { display: none !important; }
/* The posts' own links carry their arrow ("On Truth Social ↗"). */
.river-posts .post-meta a::after { content: none; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.panel-head h2 { margin-bottom: 0; }
.clock-card .eyebrow { display: block; color: var(--muted); }
.mono { font-family: var(--mono); }
.btn.small { padding: 7px 12px; min-height: 32px; font-size: 13px; }
.rp-page mark { background: color-mix(in srgb, var(--red) 24%, transparent); color: inherit; padding: 0 2px; }
.spinner {
  width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  display: inline-block; animation: spin .8s linear infinite; vertical-align: -1px; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; translate: 0 14px; scale: .985; } }
.error-box { background: var(--red-soft); border: 1px solid color-mix(in srgb, var(--red) 55%, transparent); padding: 12px 16px; margin: 14px 0; }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); align-items: start; margin-inline: calc(var(--gap) / -2); }
.wall > .wall-sizer { display: none; }
.wall > .tile { padding: calc(var(--gap) / 2); }
.wall > .tile > * { margin: 0 !important; }
.toast {
  position: fixed; left: 50%; translate: -50% 0; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 80; max-width: calc(100% - 32px);
  background: var(--ink); color: var(--bg); padding: 10px 18px; font-weight: 600; font-size: 14px; text-align: center; box-shadow: var(--shadow-up);
}
.toast[hidden] { display: none; }

/* ---- The Déjà vu page ----
   Its charts are the app's Signals view (dejavu-signals.css, loaded before this file), drawn by site.js from the files
   beside the page. The page's own head says what the charts are and when they were counted, so the view's intro keeps
   only its episode key and its last line stays out. The few app styles it leans on (the chips, the search box, a round
   button) and the episode's sheet (Déjà vu's event file, from dejavu.css) are below, in the site's look. */
:root { --dv-glow: var(--glow); --tabbar-h: 0px; }
/* A chart's color, a little lighter on the dark theme so it reads on the dark cards. */
[style*="--c"] { --c-ink: light-dark(var(--c), color-mix(in oklab, var(--c) 62%, white)); }
@supports not (color: light-dark(#000, #fff)) { [style*="--c"] { --c-ink: var(--c); } }
.dv-page { min-width: 0; }
/* Under 1240px the top bar has the sections' row under the logo (56px and 38px, and its line), so the charts' toolbar
   sticks under both. */
@media (max-width: 1239px) {
  .dv-page { --bar-h: calc(95px + env(safe-area-inset-top, 0px)); }
}
.dv-page .sv-hero-text, .dv-page .sv-status { display: none; }
.dv-page .sv-hero { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
.dv-page .sv-legend { justify-content: flex-start; align-items: center; }
.dv-page .sv-legend::before { content: "Episodes"; content: "Episodes" / ""; margin-right: 6px; font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.js .dv-page .rp-wait { min-height: 420px; place-items: center; }
.dv-static h3 { margin: 20px 0 4px; font: 800 17px/1.2 var(--display); font-stretch: 88%; }
.dv-static p { max-width: 92ch; font-size: 14.5px; }
.dv-list { margin: 0 0 22px; padding-left: 20px; display: grid; gap: 6px; max-width: 92ch; }
.rchips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.rchip {
  appearance: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; min-height: 32px; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: 600 12.5px/1.2 var(--body);
  transition: border-color .2s, background .2s, opacity .2s, transform .15s var(--ease);
}
.rchip:hover:not(:disabled) { border-color: var(--c, var(--ink)); }
.rchip:active:not(:disabled) { transform: scale(.95); }
.rchip > i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.rchip .n { font: 600 11px/1 var(--mono); color: var(--muted); }
.rchip[aria-pressed="true"] { background: color-mix(in srgb, var(--c, var(--ink)) 14%, var(--panel)); border-color: var(--c, var(--ink)); }
.iconbtn {
  appearance: none; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--muted); transition: background .2s, color .2s, transform .15s var(--ease);
}
.iconbtn:hover { background: var(--panel-2); color: var(--ink); }
.iconbtn:active { transform: scale(.9); }
.dj-search {
  flex: 1 1 300px; display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 14px; margin: 0; cursor: text; color: var(--muted);
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--glow); transition: border-color .2s, box-shadow .2s;
}
.dj-search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent); }
.dj-search-ic { display: grid; place-items: center; transition: transform .45s var(--spring), color .2s; }
.dj-search:focus-within .dj-search-ic { color: var(--blue); transform: rotate(-12deg) scale(1.12); }
.dj-search input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 15px/1.2 var(--body); }

/* An episode's file: a sheet that slides in from the side. */
.dj-scrim { position: fixed; inset: 0; z-index: 59; background: rgba(4, 8, 16, .32); opacity: 0; pointer-events: none; transition: opacity .35s; }
.dj-scrim.open { opacity: 1; pointer-events: auto; }
.dj-sheet {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(520px, 100%); overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 22px calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--panel); border-left: 1px solid var(--line);
  box-shadow: -30px 0 60px -30px var(--sh-3), var(--glow); transform: translateX(105%); transition: transform .5s var(--spring);
}
.dj-sheet.open { transform: none; }
.dj-sheet-close { position: sticky; top: 0; float: right; margin: -6px -6px 0 0; z-index: 2; background: var(--panel); }
.dj-sheet h2 { margin: 8px 0 4px; font: 850 30px/1.02 var(--display); font-stretch: 78%; text-wrap: balance; }
.dj-sheet h3 { margin: 22px 0 8px; font: 800 15px/1.2 var(--display); font-stretch: 88%; }
.dj-sheet p { font-size: 15px; }
.dj-sheet-sub { margin: 0 0 10px; font-size: 13.5px !important; }
.dj-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-height: 26px; margin-top: 10px; }
.dj-fam {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; white-space: nowrap; font: 700 10.5px/1 var(--mono); letter-spacing: .07em;
  text-transform: uppercase; color: var(--c-ink); background: color-mix(in srgb, var(--c) 13%, transparent);
}
.dj-fam::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.dj-who { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; white-space: nowrap; font: 700 11.5px/1 var(--mono); color: #fff; background: var(--p, var(--muted)); }
.dj-who.D { --p: var(--blue); }
.dj-who.R { --p: var(--red); }
.dj-who.me::after { content: "him"; padding: 2px 4px; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; background: rgba(255, 255, 255, .22); }
.dj-in { display: grid; gap: 12px; }
.dj-quote { display: block; margin: 0; padding-left: 12px; border-left: 3px solid color-mix(in srgb, var(--c) 55%, var(--line)); font-weight: 600; line-height: 1.45; quotes: "“" "”"; overflow-wrap: anywhere; }
.dj-quote a { color: inherit; text-decoration: none; }
.dj-quote a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--c) 60%, transparent); }
.dj-where { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 4px; font: 500 11px/1.4 var(--mono); color: var(--muted); }
.dj-in .dj-where { padding-left: 15px; }
.dj-where a { color: var(--blue-ink); }
.dj-ok { color: var(--good); white-space: nowrap; }
.dj-ok::before { content: "✓ "; font-weight: 700; }
.dj-after { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14.5px; }
.dj-after .dj-day { font: 600 11px/1 var(--mono); color: var(--muted); margin-right: 4px; }
.dj-after a { color: var(--blue-ink); }
.dj-credit { margin: 10px 0 0; font: 500 11px/1.4 var(--mono) !important; color: var(--muted); }
.dj-credit a { color: inherit; }
@media (prefers-reduced-motion: reduce) { .dj-sheet, .dj-scrim, .rchip, .iconbtn, .dj-search-ic { transition: none; } }

/* ---- The Déjà vu pages: his numbers, the Forecast board and Called it ----
   The three share a row of their own over the page's head: the name seen twice, in the logo's red and blue, sliding
   back into one (déjà vu), and a tab for each page, the lit tab's card sliding over to the next one as the page
   changes. The Forecast board's cards, strip and Congress panel are the app's (forecast.css), and Called it's cards,
   stamps and record are too (dejavu.css), both loaded before this file; what's here is the site's own: the countdown
   to the next big date, under a radar sweep in its family's color, the flip-board clocks, the stamps coming down as
   they scroll into view, the tips, and the sheets' starting places for a page with no JavaScript or on paper. */
.dv-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 28px; margin-top: clamp(22px, 4vw, 44px); }
.dv-word { margin: 0; font: 900 clamp(24px, 2.6vw, 31px)/1 var(--display); font-stretch: 66%; letter-spacing: .02em; text-transform: uppercase; }
.dv-word span { position: relative; display: inline-block; isolation: isolate; }
.dv-word span::before, .dv-word span::after {
  content: attr(data-text); position: absolute; inset: 0; z-index: -1; pointer-events: none; white-space: nowrap; opacity: .6;
  transition: translate .6s var(--spring), opacity .4s;
}
.dv-word span::before { color: var(--red); translate: -.06em .035em; }
.dv-word span::after { color: var(--blue); translate: .06em -.035em; }
.dv-top:hover .dv-word span::before { translate: -.13em .06em; opacity: .75; }
.dv-top:hover .dv-word span::after { translate: .13em -.06em; opacity: .75; }
.dv-tabs {
  position: relative; display: inline-flex; gap: 2px; max-width: 100%; padding: 4px; overflow-x: auto; scrollbar-width: none;
  background: color-mix(in srgb, var(--panel) 55%, transparent); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(10px) saturate(1.4); backdrop-filter: blur(10px) saturate(1.4);
}
.dv-tabs::-webkit-scrollbar { display: none; }
.dv-tabs a {
  position: relative; z-index: 1; isolation: isolate; display: inline-flex; align-items: center; padding: 10px 16px; white-space: nowrap;
  font: 650 14.5px/1 var(--body); color: var(--muted); text-decoration: none; transition: color .25s;
}
.dv-tabs a:hover, .dv-tabs a.on { color: var(--ink); }
.dv-tabs a.on { z-index: 0; }
.dv-tab-hl { position: absolute; inset: 0; z-index: -1; background: var(--panel); box-shadow: var(--glow-tab), inset 0 -2px 0 var(--red); view-transition-name: dv-tab; }
.dv-tabs a:nth-child(1) .dv-tab-t { view-transition-name: dv-t1; }
.dv-tabs a:nth-child(2) .dv-tab-t { view-transition-name: dv-t2; }
.dv-tabs a:nth-child(3) .dv-tab-t { view-transition-name: dv-t3; }
.dv-tabs .n { display: inline-block; margin-left: 8px; padding: 3px 6px; min-width: 20px; text-align: center; font: 650 10.5px/1 var(--mono); color: #fff; background: var(--red); font-variant-numeric: tabular-nums; }
.dv-head { padding-top: clamp(12px, 2.2vw, 26px); }
/* Section heads on these pages carry the logo's red-to-blue line. */
body:is([data-page="forecast"], [data-page="calledit"]) .dj-section { display: flex; align-items: center; gap: 12px; margin: 40px 0 14px; font-size: clamp(21px, 2vw, 25px); }
body:is([data-page="forecast"], [data-page="calledit"]) .dj-section::before { content: ""; flex: none; width: 22px; height: 4px; background: linear-gradient(90deg, var(--red), var(--blue)); }
.ci-n { padding: 3px 7px; font: 650 12px/1 var(--mono); color: var(--muted); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }

/* The flip board: each digit a split flap that falls to the next (site.js builds it from data-clock; without
   JavaScript the day stays in words). The tiles are dark in both looks, like a departure board's. */
.clk { --tw: 26px; --th: 36px; --tf: 25px; --tg: 3px; display: flex; align-items: flex-start; gap: calc(var(--tw) * .28); flex-wrap: wrap; }
.clk.big { --tw: clamp(31px, 4.6vw, 60px); --th: clamp(44px, 6.5vw, 84px); --tf: clamp(31px, 4.7vw, 62px); --tg: 4px; }
.clk.mid { --tw: clamp(28px, 3.2vw, 40px); --th: clamp(40px, 4.5vw, 56px); --tf: clamp(28px, 3.3vw, 41px); }
.clk.small { --tw: 21px; --th: 29px; --tf: 19px; --tg: 2px; }
/* The big and middle boards fit their box: eight tiles, three colons and the gaps between come to about 10.1 tiles. */
@supports (width: 1cqi) {
  .clk.big { --tw: clamp(22px, calc((100cqi - 24px) / 10.4), 60px); --th: calc(var(--tw) * 1.4); --tf: calc(var(--tw) * 1.03); }
  .clk.mid { --tw: clamp(20px, calc((100cqi - 24px) / 10.4), 40px); --th: calc(var(--tw) * 1.4); --tf: calc(var(--tw) * 1.03); }
}
.clk-words { font: 750 clamp(17px, 2vw, 22px)/1.25 var(--display); font-stretch: 86%; color: var(--ink); }
.clk-unit { display: grid; justify-items: center; gap: 7px; }
.clk-unit[hidden], .clk-unit[hidden] + .clk-sep { display: none; }
.clk-unit small { font: 650 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.clk.big .clk-unit small { font-size: 10.5px; }
.clk-tiles { display: flex; gap: var(--tg); }
.clk-tile {
  position: relative; width: var(--tw); height: var(--th); perspective: calc(var(--th) * 4.5); color: #f3f6fc;
  font: 800 var(--tf)/1 var(--display); font-stretch: 78%; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 12px 22px -14px var(--sh-3);
}
.clk-tile > span { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; backface-visibility: hidden; }
.clk-top, .clk-ft { top: 0; background: linear-gradient(#26324d, #1c2640); }
.clk-bot, .clk-fb { bottom: 0; background: linear-gradient(#18213a, #131b2f); }
.clk-tile b { position: absolute; left: 0; right: 0; height: 200%; display: grid; place-items: center; font: inherit; padding-top: .04em; }
.clk-top b, .clk-ft b { top: 0; }
.clk-bot b, .clk-fb b { bottom: 0; }
/* The hinge, and a sheen on the upper flap. */
.clk-tile::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); z-index: 3; height: 2px; background: rgba(4, 8, 16, .55); }
.clk-tile::before { content: ""; position: absolute; inset: 0 0 50%; z-index: 3; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, .07), transparent); }
.clk-ft { z-index: 2; transform-origin: 50% 100%; animation: clk-fall .28s cubic-bezier(.55, 0, .9, .45) forwards; }
.clk-fb { z-index: 2; transform-origin: 50% 0; transform: rotateX(90deg); animation: clk-land .34s cubic-bezier(.2, .7, .35, 1.3) .28s forwards; }
.clk-ft::after, .clk-fb::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.clk-ft::after { opacity: 0; animation: clk-dim .28s ease-in forwards; }
.clk-fb::after { animation: clk-lift .34s ease-out .28s forwards; }
@keyframes clk-fall { to { transform: rotateX(-90deg); } }
@keyframes clk-land { to { transform: rotateX(0deg); } }
@keyframes clk-dim { to { opacity: 1; } }
@keyframes clk-lift { to { opacity: 0; } }
.clk-sep { display: grid; align-content: center; gap: calc(var(--th) * .2); height: var(--th); }
.clk-sep::before, .clk-sep::after { content: ""; width: calc(var(--tw) * .14); height: calc(var(--tw) * .14); min-width: 3px; min-height: 3px; background: var(--muted); opacity: .75; }
/* The last day: the board glows red; and when the moment comes, it holds at zero. */
.clk.soon .clk-tile { box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 70%, transparent), 0 10px 26px -12px var(--red); }
.clk.done .clk-tile { opacity: .55; }

/* Next up: the next big date, its countdown under a radar sweep in its family's color, and what his record says. */
.nx {
  --c: var(--blue); position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center; gap: 22px clamp(24px, 4vw, 60px); margin: 10px 0 var(--gap); padding: clamp(24px, 3.6vw, 44px);
  background: radial-gradient(90% 130% at 0% 50%, color-mix(in srgb, var(--c) 15%, transparent), transparent 62%), var(--panel);
  border: 1px solid var(--line); box-shadow: var(--glow);
}
.nx::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 4px; background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 30%, var(--blue))); }
.nx-radar {
  position: absolute; z-index: -1; left: clamp(-190px, -9vw, -70px); top: 50%; width: min(600px, 92vw); aspect-ratio: 1; translate: 0 -50%;
  border-radius: 50%; pointer-events: none; opacity: .9;
  background:
    repeating-radial-gradient(circle, transparent 0 calc(12.5% - 1px), color-mix(in srgb, var(--c) 22%, transparent) calc(12.5% - 1px) 12.5%),
    linear-gradient(transparent calc(50% - .5px), color-mix(in srgb, var(--c) 18%, transparent) 0 calc(50% + .5px), transparent 0),
    linear-gradient(90deg, transparent calc(50% - .5px), color-mix(in srgb, var(--c) 18%, transparent) 0 calc(50% + .5px), transparent 0);
  -webkit-mask: radial-gradient(circle, #000 52%, transparent 71%); mask: radial-gradient(circle, #000 52%, transparent 71%);
}
.nx-radar b {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 250deg, color-mix(in srgb, var(--c) 9%, transparent) 290deg, color-mix(in srgb, var(--c) 46%, transparent) 359.4deg, transparent 360deg);
}
.nx-radar i { position: absolute; inset: 38%; border-radius: 50%; border: 1.5px solid var(--c); opacity: 0; }
/* Two blips the sweep lights as it passes. */
.nx-radar::before, .nx-radar::after { content: ""; position: absolute; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--c); box-shadow: 0 0 14px 2px var(--c); opacity: .2; }
.nx-radar::before { left: 68%; top: 26%; }
.nx-radar::after { left: 33%; top: 71%; width: 7px; height: 7px; margin: -3.5px; }
.nx-clock { position: relative; display: grid; gap: 14px; justify-items: start; container-type: inline-size; }
.nx-clock .eyebrow { color: var(--c-ink); }
.nx-when { margin: 0; font: 600 12.5px/1.4 var(--mono); color: var(--muted); }
.nx-what { position: relative; min-width: 0; }
.nx-what h2 { font: 850 clamp(26px, 2.9vw, 38px)/1.02 var(--display); font-stretch: 76%; text-wrap: balance; }
.nx-what .fb-sub { margin-top: 8px; font-size: 14px; }
.nx-what .fb-hangs { margin-top: 14px; }
.nx-line { margin: 16px 0 0; font: 700 clamp(17px, 1.6vw, 20px)/1.3 var(--display); font-stretch: 90%; text-wrap: pretty; }
.nx-line b { color: var(--c-ink); font-weight: 850; }
.nx-line .fb-if { margin: 0 4px 4px 0; vertical-align: 2px; }
.nx-odds .fb-bar { width: 96px; height: 7px; }
.nx-go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 10px 15px 10px 16px; text-decoration: none;
  font: 650 14px/1 var(--body); color: var(--ink); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--glow-tab);
  transition: border-color .2s, transform .2s var(--ease);
}
.nx-go .ic { width: 16px; height: 16px; transition: transform .25s var(--spring); }
.nx-go:hover { border-color: var(--c); }
.nx-go:hover .ic { transform: translateY(3px); }
@media (prefers-reduced-motion: no-preference) {
  .dv-word span::before { animation: dv-echo-red 1.6s cubic-bezier(.2, .7, .2, 1) .1s backwards; }
  .dv-word span::after { animation: dv-echo-blue 1.6s cubic-bezier(.2, .7, .2, 1) .1s backwards; }
  .dv-tabs { animation: nav-in .6s cubic-bezier(.2, .8, .2, 1) .15s both; }
  .nx-radar b { animation: nx-sweep 5.2s linear infinite; }
  .nx-radar i { animation: nx-ping 5.2s cubic-bezier(.2, .6, .3, 1) infinite; }
  .nx-radar i + i { animation-delay: 2.6s; }
  .nx-radar::before { animation: nx-blip-a 5.2s linear infinite; }
  .nx-radar::after { animation: nx-blip-b 5.2s linear infinite; }
  .nx { animation: nx-in .9s cubic-bezier(.2, .8, .2, 1) .2s both; }
  .nx-radar { animation: nx-radar-in 1.4s cubic-bezier(.2, .8, .2, 1) .25s both; }
}
@keyframes dv-echo-red { from { opacity: .95; translate: -.7em .14em; } }
@keyframes dv-echo-blue { from { opacity: .95; translate: .7em -.14em; } }
@keyframes nx-sweep { to { rotate: 1turn; } }
@keyframes nx-ping { 0% { scale: .25; opacity: .85; } 100% { scale: 2.3; opacity: 0; } }
/* Each blip lights as the sweep's edge reaches its angle: the first 37 degrees round from the top, the second 219. */
@keyframes nx-blip-a { 0%, 9.2% { opacity: .18; scale: .7; } 10.3% { opacity: 1; scale: 1.35; } 42%, 100% { opacity: .18; scale: .8; } }
@keyframes nx-blip-b { 0%, 59.7% { opacity: .18; scale: .7; } 60.8% { opacity: 1; scale: 1.35; } 92%, 100% { opacity: .18; scale: .8; } }
@keyframes nx-in { from { opacity: 0; translate: 0 18px; } }
@keyframes nx-radar-in { from { opacity: 0; scale: .6; } }

/* The strip: Today pulses where it meets the line, a light runs along the days as it comes in, and the dots grow. */
.fb-today::after {
  content: ""; position: absolute; left: -3px; top: -14px; width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 55%, transparent);
}
.fb-axis::after {
  content: ""; position: absolute; left: 0; top: calc(var(--line-y) - 7px); width: 120px; height: 14px; margin-left: -60px; opacity: 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 75%, #fff), transparent);
}
.fb-dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.fb-dot.on { transform: scale(1.35); z-index: 2; }
.fb-section .wall { container: wall / inline-size; }
.fb-section .wall > .tile.w2 { grid-column: 1 / -1; }
.fb-ai { margin: 10px 0 0; }
.fb-card .fb-call { transition: color .2s; }
.fb-card .fb-call:hover { color: var(--blue-ink); }
.fb-quiet-list li { scroll-margin-top: calc(var(--bar-h) + 70px); }
.fb-quiet-list li.lit { animation: fb-li-lit 1.6s var(--ease); }
@keyframes fb-li-lit { 0%, 35% { background: color-mix(in srgb, var(--c) 18%, var(--panel)); } }
.fb-card { scroll-margin-top: calc(var(--bar-h) + 70px); }
/* The glow when a dot or Next up takes you to a card wins over the card's rising in. */
.fb-section .fb-card.lit, .fb-section.in .fb-card.lit { animation: fb-lit 1.6s var(--ease); }
.fb-money { container-type: inline-size; }
.fb-money .clk { margin: 12px 0 10px; }
.fb-money .eyebrow { color: var(--red-ink); }
@media (prefers-reduced-motion: no-preference) {
  .fb-today::after { animation: fb-now 2.4s ease-out 1s infinite; }
  .fb-strip.in .fb-axis::after { animation: fb-scan 1.5s cubic-bezier(.6, 0, .3, 1) .15s; }
}
@keyframes fb-now { to { box-shadow: 0 0 0 11px transparent; } }
@keyframes fb-scan { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* Called it: the score ring, bigger, the stamps coming down as their cards scroll into view (each once on a device),
   and an open call's countdown. */
.ci-board { position: relative; overflow: hidden; isolation: isolate; grid-template-columns: auto minmax(0, 1fr); padding: clamp(22px, 3vw, 34px); box-shadow: var(--glow); }
.ci-board::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 130% at 0% 50%, color-mix(in srgb, var(--good) 13%, transparent), transparent 70%); }
.ci-board .dj-ring.big { width: clamp(118px, 13vw, 156px); height: clamp(118px, 13vw, 156px); }
.ci-board .dj-ring.big b { font-size: clamp(42px, 4.6vw, 56px); }
.ci-board h2 { font-size: clamp(26px, 2.8vw, 34px); text-wrap: balance; }
.ci-board.in .dj-ring-fill, .ci-board.in .dj-ring-part { stroke-dashoffset: var(--off); }
.ci-board .dj-ring-fill { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--good) 55%, transparent)); }
.ci-next { display: grid; gap: 8px; padding: 12px 14px; background: var(--panel-2); border-left: 3px solid var(--c); }
.ci-next .eyebrow { color: var(--muted); }
.ci-next .eyebrow span { color: var(--ink); }
.ci-link { margin: 0; font: 600 13px/1.4 var(--mono); }
.ci-link a { color: var(--blue-ink); text-decoration: none; }
.ci-link a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dj-pred { scroll-margin-top: calc(var(--bar-h) + 70px); }
/* Called it borrows only dejavu.css, so the Forecast board's glow is copied here for a call linked from there. */
html:not(.js) .dj-pred:target, .dj-pred.lit { animation: ci-lit 1.6s var(--ease); }
@keyframes ci-lit { 0%, 30% { box-shadow: 0 0 0 3px var(--c), var(--shadow-up); transform: translateY(-4px); } }
#ci-checked .dj-pred { content-visibility: auto; contain-intrinsic-size: auto 280px; }
.dj-stamp.pre { opacity: 0; }
#ci-checked-box.again .dj-pred { animation: dj-call-in .5s var(--spring) both; animation-delay: calc(var(--i, 0) * 45ms); }
.ci-more { display: flex; margin: 22px auto 0; }
.ci-none { margin: 0; padding: 18px; border: 1px dashed var(--line); text-align: center; }
:is(.dj-pred, .ci-more, .ci-none)[hidden] { display: none; }
.ci-from { display: inline-flex; align-items: center; gap: 3px; font: 600 12px/1.4 var(--mono); color: var(--blue-ink); text-decoration: none; }
.ci-from .ic { width: 13px; height: 13px; transition: transform .2s var(--spring); }
.ci-from:hover { text-decoration: underline; text-underline-offset: 3px; }
.ci-from:hover .ic { transform: translateX(3px); }
/* The record's columns stay bars while there are only a few months, and a family's count wraps rather than run out. */
#ci-record .dj-mo-col { align-items: center; }
#ci-record .dj-mo-bar { width: min(100%, 76px); }
#ci-record .dj-famrow-n { white-space: normal; line-height: 1.35; }
.dj-calls-on .dj-unpick { box-shadow: var(--glow-tab); border-color: var(--line); }
.dj-cal .diag { transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1) .2s; }
.dj-record:not(.in) .dj-cal .diag { clip-path: inset(0 100% 0 0); }
/* Only once site.js runs: the switches over the Checked list. */
html:not(.js) #ci-who, html:not(.js) .dj-mo, html:not(.js) .dj-famrow { pointer-events: none; }
html:not(.js) #ci-who { display: none; }

/* A tip for the strip's dots, the record's months and the odds' dots. */
.tip {
  position: fixed; left: 0; top: 0; z-index: 70; max-width: min(300px, calc(100vw - 24px)); padding: 9px 12px 10px; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--c, var(--blue)); box-shadow: var(--shadow-up), var(--glow);
  font: 600 13.5px/1.35 var(--body); color: var(--ink); opacity: 0; translate: 0 6px; transition: opacity .15s, translate .25s var(--ease);
}
.tip.on { opacity: 1; translate: 0 0; }
.tip small { display: block; margin-bottom: 3px; font: 650 10.5px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--c-ink, var(--muted)); }

/* With no JavaScript, and on paper, everything stands where it ends up: the app's sheets wait for .in (site.js). */
html:not(.js) :is(.fb-strip .fb-dot, .fb-section .fb-card, .fb-congress .fb-congress-body, .fb-section .fb-quiet-list) { opacity: 1; transform: none; animation: none; }
html:not(.js) .fb-strip .fb-axis::before, html:not(.js) :is(.dj-mo-bar, .dj-famrow-bar, .dj-mo-col b, .dj-cal-dot circle) { transform: none; }
html:not(.js) .fb-section .fb-bar i { transform: scaleX(var(--p)); }
html:not(.js) :is(.dj-mo-col b, .dj-cal-dot line, .dj-cal-dot text) { opacity: 1; }
html:not(.js) :is(.dj-ring-fill, .dj-ring-part) { stroke-dashoffset: var(--off); }
html:not(.js) .dj-cal .diag { clip-path: none; }
@media (prefers-reduced-motion: reduce) {
  .clk-ft, .clk-fb { display: none; }
  .ci-board .dj-ring-fill, .ci-board .dj-ring-part { transition: none; }
}
@media (max-width: 760px) {
  .dv-top { gap: 10px; }
  .dv-tabs { width: 100%; }
  .dv-tabs a { flex: 1 0 auto; justify-content: center; padding: 10px 10px; font-size: 13.5px; }
  .dv-tabs .n { margin-left: 6px; }
  .nx { grid-template-columns: minmax(0, 1fr); }
  .nx-radar { left: 50%; top: 92px; width: 135vw; translate: -50% -50%; }
  .ci-board { grid-template-columns: minmax(0, 1fr); justify-items: start; }
}
@media print {
  .nx-radar, .tip, .clk-ft, .clk-fb { display: none !important; }
  :is(.fb-strip .fb-dot, .fb-section .fb-card, .fb-congress .fb-congress-body, .fb-section .fb-quiet-list, .dj-stamp.pre) { opacity: 1 !important; transform: none !important; animation: none !important; }
  .fb-strip .fb-axis::before, :is(.dj-mo-bar, .dj-famrow-bar, .dj-cal-dot circle) { transform: none !important; }
  .fb-section .fb-bar i { transform: scaleX(var(--p)) !important; }
  :is(.dj-mo-col b, .dj-cal-dot line, .dj-cal-dot text) { opacity: 1 !important; transform: none !important; }
  :is(.dj-ring-fill, .dj-ring-part) { stroke-dashoffset: var(--off) !important; }
  .dj-cal .diag { clip-path: none !important; }
  .nx, .fb-card, .dj-pred, .dj-board, .fb-strip, .fb-money, .fb-house { box-shadow: none; break-inside: avoid; }
}

/* On a day's story: the show's video about it. */
.behind {
  display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 2px; padding: 9px 12px 9px 10px; text-decoration: none;
  background: var(--red-soft); color: var(--red-ink); border-left: 3px solid var(--red); font: 700 14px/1.25 var(--body);
}
.behind .ic { width: 18px; height: 18px; }
.behind .ic:last-child { width: 15px; height: 15px; transition: transform .2s var(--ease); }
.behind:hover .ic:last-child { transform: translateX(3px); }

/* ---- Footer ---- */
.foot { position: relative; z-index: 1; background: var(--panel); border-top: 1px solid var(--line); }
.foot::before { content: ""; position: absolute; inset: -1px 0 auto; height: 2px; background: linear-gradient(90deg, var(--red), var(--blue)); opacity: .9; }
.foot-in {
  max-width: var(--width); margin-inline: auto; padding: 30px clamp(16px, 3vw, 32px) calc(28px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px 48px;
}
.foot-id { display: flex; gap: 14px; align-items: flex-start; }
.foot-id .mark { margin-top: 3px; }
.foot-id p { margin: 0; max-width: 56ch; color: var(--muted); font-size: 15px; }
.foot-id b { color: var(--ink); }
.foot-id a { color: var(--ink); }
.foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 10px 28px; align-content: start; }
.foot-links a { font-weight: 600; font-size: 14.5px; text-decoration: none; }
.foot-links a:hover { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-small { grid-column: 1 / -1; margin: 4px 0 0; padding-top: 14px; border-top: 1px dashed var(--line); font: 500 12px/1.5 var(--mono); color: var(--muted); }

/* ---- Pages building in ----
   A page's head rises in line by line, its headline coming into focus and its numbers popping up (look.js counts them
   up). Further down, cards wait below the screen and rise in as they come into view, a few at a time (look.js marks
   them .fx, then .fx-in as they arrive); a story's rank pops, flashing red, and its heat and coverage bars fill in. Only
   where the system allows motion, and the waiting only once look.js runs, so a page is never left blank. */
@media (prefers-reduced-motion: no-preference) {
  :is(.day-head, .vid-head) > * { animation: head-rise .75s cubic-bezier(.2, .8, .2, 1) both; }
  :is(.day-head, .vid-head) > :nth-child(2) { animation-delay: .06s; }
  :is(.day-head, .vid-head) > :nth-child(3) { animation-delay: .14s; }
  :is(.day-head, .vid-head) > :nth-child(4) { animation-delay: .22s; }
  :is(.day-head, .vid-head) > :nth-child(5) { animation-delay: .3s; }
  :is(.day-head, .vid-head) > :nth-child(n + 6) { animation-delay: .36s; }
  :is(.day-head, .vid-head) > h1 { animation-name: head-focus; animation-duration: .95s; }
  .facts li { animation: fact-pop .6s var(--spring) .3s both; }
  .facts li:nth-child(2) { animation-delay: .37s; }
  .facts li:nth-child(3) { animation-delay: .44s; }
  .facts li:nth-child(4) { animation-delay: .51s; }
  .facts li:nth-child(n + 5) { animation-delay: .58s; }
  .js .fx { opacity: 0; translate: 0 30px; }
  .js .fx-go { transition: opacity .7s cubic-bezier(.2, .8, .2, 1), translate .95s cubic-bezier(.2, 1.15, .3, 1); }
  .fx-in .rank { animation: rank-pop .9s var(--spring) .12s both; }
  .fx-in .heat i { transform-origin: 50% 100%; animation: heat-in .45s var(--spring) .25s both; }
  .fx-in .heat i:nth-child(2) { animation-delay: .29s; }
  .fx-in .heat i:nth-child(3) { animation-delay: .33s; }
  .fx-in .heat i:nth-child(4) { animation-delay: .37s; }
  .fx-in .heat i:nth-child(5) { animation-delay: .41s; }
  .fx-in .heat i:nth-child(6) { animation-delay: .45s; }
  .fx-in .heat i:nth-child(7) { animation-delay: .49s; }
  .fx-in .heat i:nth-child(8) { animation-delay: .53s; }
  .fx-in .heat i:nth-child(9) { animation-delay: .57s; }
  .fx-in .heat i:nth-child(10) { animation-delay: .61s; }
  .fx-in .leanbar { animation: wipe-in 1s cubic-bezier(.65, 0, .35, 1) .3s both; }
}
@keyframes head-rise { from { opacity: 0; translate: 0 14px; } }
@keyframes head-focus { from { opacity: 0; translate: 0 22px; filter: blur(12px); } }
@keyframes fact-pop { from { opacity: 0; scale: .85; translate: 0 8px; } }
@keyframes rank-pop { from { opacity: 0; scale: .55; translate: 0 12px; } 55% { color: var(--red); } }
@keyframes heat-in { from { scale: 1 0; } }
@keyframes wipe-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* A soft light follows your pointer across a card, brightest along its edge, and small cards lean toward it (look.js
   adds the light to the card under a mouse). */
.fx-card { position: relative; }
.fx-shine {
  position: absolute; inset: -1px; z-index: 2; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--blue) 11%, transparent), transparent 70%);
}
.fx-shine::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--blue) 80%, #fff), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.fx-lit > .fx-shine { opacity: 1; }
.fx-tilt { transition: transform .7s var(--spring), border-color .2s, box-shadow .2s; }
.fx-tilt.fx-lit { transform: perspective(900px) translateY(-3px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .18s ease-out, border-color .2s, box-shadow .2s; }

/* ---- Moving between pages ----
   Going from page to page in a browser that can (Chrome, Edge, Safari 18 and later), the new page fades in over the
   old one while the bar holds still and the lit section's card and red line slide across to the new section, the line
   springing a little further, like Newsdesk's (and between the Déjà vu pages, the lit tab's card slides too). Switching light and dark wipes the new look in from the switch, in a
   circle (look.js): for that the bar and the lit section give up their names, so the whole page wipes as one. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: none; }
  ::view-transition-new(root) { animation: vt-in .32s cubic-bezier(.2, .8, .2, 1) both; mix-blend-mode: normal; }
  ::view-transition-group(bar) { animation-duration: .32s; }
  ::view-transition-group(nav-hl) { animation-duration: .5s; animation-timing-function: cubic-bezier(.3, 1.15, .45, 1); }
  ::view-transition-group(nav-ul) { animation-duration: .66s; animation-timing-function: cubic-bezier(.3, 1.55, .45, 1); }
  ::view-transition-group(dv-tab) { animation-duration: .5s; animation-timing-function: cubic-bezier(.3, 1.15, .45, 1); }
  html.vt-wipe .bar, html.vt-wipe .nav-hl, html.vt-wipe .nav-ul, html.vt-wipe .bar .nav > a > .nav-t, html.vt-wipe .dv-tab-hl, html.vt-wipe .dv-tab-t { view-transition-name: none; }
  html.vt-wipe::view-transition-old(root), html.vt-wipe::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
}
@keyframes vt-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; }
  .is-today .live-dot::after { animation: none; }
}

/* ---- Tablets and phones ---- */
@media (max-width: 900px) {
  .rp-head.has-rage { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .rp-rage { width: 100%; max-width: 460px; }
}
/* Under 1240px the whole name, the sections and the links after them don't fit on one line: the sections get a row of
   their own under the logo, scrolling sideways once there are many. */
@media (max-width: 1239px) {
  :root { --bar-h: 56px; }
  .bar-in { flex-wrap: wrap; gap: 0 12px; padding-top: env(safe-area-inset-top, 0px); }
  .brand { min-height: 56px; }
  .nav { order: 3; flex: 1 0 100%; margin: 0 -8px; padding: 0 8px 6px; overflow-x: auto; scrollbar-width: none; background: none; border: 0; }
  .nav::-webkit-scrollbar { display: none; }
  .nav::before { display: none; }
  .nav a { padding: 9px 12px; font-size: 14px; }
  html { scroll-padding-top: calc(var(--bar-h) + 60px); }
  .story-card { scroll-margin-top: calc(var(--bar-h) + 60px); }
  /* Scrolling down, the name row slides up out of the way and the sections ride at the top; scrolling up brings it
     back (look.js adds .tuck). The Déjà vu page's toolbar follows it up. */
  .bar { transition: translate .5s var(--spring); }
  .bar .brand, .bar .bar-end { transition: opacity .3s; }
  .bar.tuck { translate: 0 -56px; }
  .bar.tuck .brand, .bar.tuck .bar-end { opacity: 0; pointer-events: none; }
  html.bar-tucked .dv-page { --bar-h: calc(39px + env(safe-area-inset-top, 0px)); }
  .dv-page .sv-bar { transition: background .3s, border-color .3s, box-shadow .3s, transform .45s var(--spring), top .5s var(--spring); }
}
@media (max-width: 760px) {
  .brand { gap: 9px; }
  .brand .mark { width: 40px; height: 35px; border-radius: 9px; }
  /* The name in two lines beside the logo: Tangential over PoliTiKing and the tag. */
  .brand-name { --wh: 15px; display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 3px 6px; }
  .brand-name .w1 { grid-column: 1 / -1; }
  .brand-name .w2 { margin-left: 0; }
  .brand-name b { margin-left: 0; font-size: 12px; padding: 3px 5px 2px; border-radius: 4px; }
  .bar-end { gap: 4px; }
  .btn.yt { padding: 0; width: 40px; min-height: 40px; }
  .btn.yt span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .race-body.has-latest { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .day-head h1 { font-size: clamp(38px, 11vw, 52px); }
  .facts li { padding: 8px 11px; }
  .js .cov-slot.is-waiting { min-height: calc(280px + var(--rows, 5) * 128px); }
  .wall-card { padding: 16px 14px; }
  .story-card { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; gap: 0; }
  .rank { text-align: left; font-size: 52px; padding-top: 0; }
  .story-card.hero .rank { font-size: 74px; }
  .hook { font-size: 23px; margin-top: 8px; }
  .story-card.hero .hook { font-size: 28px; }
  .summary { font-size: 16px; }
  .coverage li { grid-template-columns: minmax(0, 1fr); }
  .post { padding: 12px 13px 11px; }
  .steps a { padding: 10px 12px; font-size: 14px; }
  .how { padding: 18px 16px; }
  .text-card { padding: 18px 16px; }
  .foot-in { grid-template-columns: minmax(0, 1fr); }
  :where(.panel) { padding: 16px 14px; }
  .mt-watch { padding: 14px 16px; }
  .mt-search { flex-basis: 100%; max-width: none; }
  .mt-level { flex: 1 1 auto; }
  .mt-level select { width: 100%; }
  .seg > button { padding: 8px 10px; }
  /* Six switches don't fit across a phone: two rows of three, so none hides off the edge. */
  .mt-show { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .mt-show > button { padding: 9px 4px; text-align: center; }
  .mt-pick-card { padding: 14px 14px 12px; }
  .vid-head h1 { font-size: clamp(30px, 9vw, 44px); }
  .rc { padding: 14px 14px 12px; }
  .rc-name { font-size: 26px; }
  .player-btn { padding: 11px 18px 11px 14px; font-size: 15px; }
  .player-btn .ic { width: 20px; height: 20px; }
  .vid-card { padding: 16px 14px 14px; }
  .vid-day { padding: 14px 16px; }
  .mt-table th, .mt-table td { padding: 9px 10px; }
  .bal-nums { gap: 8px; font-size: 12.5px; }
  .bal-nums b { font-size: 25px; }
  .bal-wait b { font-size: 19px; }
  .bal-right { gap: 10px; }
  /* Squares this small: his pick is a corner, not a star over the state's letters. */
  .race-st.picked::before { content: ""; top: 0; right: 0; border-top: 8px solid var(--warn); border-left: 8px solid transparent; }
  .race-st.won.picked::before { border-top-color: #fff; }
  .race-legend i.pick { font-size: 0; background: linear-gradient(225deg, var(--warn) 50%, transparent 50%); border-color: var(--line); }
  .race-st.runoff small { font-size: 6px; letter-spacing: 0; }
  /* The House's squares keep the seat count; the bar under it shows how many are called. */
  .race-done { display: none; }
  .race-fill { left: 2px; right: 2px; bottom: 2px; height: 2px; }
  .race-map { gap: 3px; }
  .race { padding: 11px 12px; }
  .js .rp-wait { min-height: 300px; }
  .sb-chain { padding: 12px 13px 14px; }
  .sb-step { padding-left: 20px; }
  .sb-said { padding: 9px 11px; }
}

@media print {
  .bar, .cov-slot, .days, .steps, .skip, .mt-tools, .mt-more-row, .mt-count, .race-tabs, .player, .toast { display: none !important; }
  .mt-pick[hidden], .race-pane[hidden] { display: block !important; }
  .sb-chains > .sb-chain { display: block !important; }
  .sb-zoom, .sb-more { display: none !important; }
  .sky, .fx-shine { display: none; }
  .js .fx { opacity: 1 !important; translate: none !important; }
  .story-card, .text-card, .mt-pick-card, .panel, .rc, .vid-card { box-shadow: none; break-inside: avoid; }
}