/* Self-hosted Latin cuts (SIL Open Font License). The loaded faces are unchanged.
   Fallback families carry size-adjust / ascent-override / descent-override so a
   swap onto Times or Arial keeps the same line breaks and line boxes. */
/* Masthead and headlines are in this file and preloaded. Body and interface
   faces are in font-rest.css so they are not on the first-paint path. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/playfair-display-latin.5d91eb5d52.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/fonts/playfair-display-latin.5d91eb5d52.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Texturina';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/texturina-latin.210245748b.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playfair Display Fallback";
  font-style: normal;
  font-weight: 700;
  src: local("Times New Roman Bold"), local("Liberation Serif Bold"), local("Tinos Bold");
  size-adjust: 100.84%;
  ascent-override: 107.3%;
  descent-override: 24.89%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Playfair Display Fallback";
  font-style: normal;
  font-weight: 900;
  src: local("Times New Roman Bold"), local("Liberation Serif Bold"), local("Tinos Bold");
  size-adjust: 103.98%;
  ascent-override: 104.06%;
  descent-override: 24.14%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Texturina Fallback";
  font-style: normal;
  font-weight: 800;
  src: local("Times New Roman Bold"), local("Liberation Serif Bold"), local("Tinos Bold");
  size-adjust: 99.65%;
  ascent-override: 126.44%;
  descent-override: 30.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Source Serif 4 Fallback";
  font-style: normal;
  font-weight: 400;
  src: local("Times New Roman"), local("Liberation Serif"), local("Tinos");
  size-adjust: 108.52%;
  ascent-override: 95.47%;
  descent-override: 30.87%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Source Serif 4 Fallback";
  font-style: normal;
  font-weight: 600;
  src: local("Times New Roman Bold"), local("Liberation Serif Bold"), local("Tinos Bold");
  size-adjust: 103.63%;
  ascent-override: 99.98%;
  descent-override: 32.33%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Source Serif 4 Fallback";
  font-style: italic;
  font-weight: 400;
  src: local("Times New Roman Italic"), local("Liberation Serif Italic"), local("Tinos Italic");
  size-adjust: 105.34%;
  ascent-override: 98.35%;
  descent-override: 31.8%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  font-style: normal;
  font-weight: 500;
  src: local("Arial"), local("Liberation Sans"), local("Arimo");
  size-adjust: 105.58%;
  ascent-override: 91.76%;
  descent-override: 22.85%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  font-style: normal;
  font-weight: 600;
  src: local("Arial Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
  size-adjust: 101.7%;
  ascent-override: 95.25%;
  descent-override: 23.72%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  font-style: normal;
  font-weight: 700;
  src: local("Arial Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
  size-adjust: 102.98%;
  ascent-override: 94.07%;
  descent-override: 23.42%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  font-style: normal;
  font-weight: 800;
  src: local("Arial Bold"), local("Liberation Sans Bold"), local("Arimo Bold");
  size-adjust: 104.53%;
  ascent-override: 92.68%;
  descent-override: 23.08%;
  line-gap-override: 0%;
}
/* WhatsNewPaper — a modern newspaper. Newsprint and black ink, with one red
   second ink kept for what is live and fresh. Serif headlines, sans labels. */

:root {
  --paper: #f3efe6;
  --paper-2: #e9e4d8;
  --ink: #111110;
  --ink-soft: #3d3b37;
  --rule: #111110;
  --hairline: rgba(17, 17, 16, 0.18);
  --muted: #66625c;
  --hatch: rgba(0, 0, 0, 0.07);
  --accent: #c8102e;
  --accent-ink: #ffffff;
  --sans: "Inter", "Inter Fallback", "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
body.night {
  --paper: #0e0e0d;
  --paper-2: #1b1b19;
  --ink: #eeeae0;
  --ink-soft: #bdb8ac;
  --rule: #eeeae0;
  --hairline: rgba(238, 234, 224, 0.18);
  --muted: #8d897f;
  --hatch: rgba(255, 255, 255, 0.06);
  --accent: #ff5c6c;
  --accent-ink: #120708;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
  line-height: 1.5;
  transition: background-color .3s, color .3s;
}
a { color: inherit; text-decoration: none; }
a:hover h2, a:hover h3, a:hover h4 { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
time, .story-time, .source-time { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
kbd { font: 600 11px var(--sans); border: 1px solid var(--muted); padding: 0 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* Full-bleed: the paper spans the whole window, with gutters that grow on big screens. */
.wrap { width: 100%; padding: 0 clamp(16px, 3vw, 64px); }

/* ── Utility bar ─────────────────────────────────────────── */
.utility {
  display: flex; align-items: center; padding: 10px 0;
  font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.controls { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.btn {
  font: inherit; background: transparent; color: var(--ink); cursor: pointer;
  border: 1px solid var(--ink); padding: 8px 12px; letter-spacing: .08em; text-transform: uppercase;
  min-height: 36px;
}
.btn[aria-pressed="true"], .btn:hover { background: var(--ink); color: var(--paper); }
.btn:disabled { opacity: .5; cursor: progress; }
/* Night: set like a newspaper index line, not app buttons. A ballot box shows the state. */
.toggle {
  font: inherit; background: transparent; color: var(--muted); cursor: pointer;
  border: 0; padding: 0 0 0 14px; min-height: 36px;
  display: inline-flex; align-items: center; gap: 7px;
  letter-spacing: .08em; text-transform: uppercase;
  border-left: 1px solid var(--hairline);
}
.toggle::before {
  content: ""; width: 8px; height: 8px; border: 1px solid currentColor; flex: none;
}
.toggle:hover, .toggle[aria-pressed="true"] { color: var(--ink); }
.toggle[aria-pressed="true"]::before { background: currentColor; }
/* Night: a moon by day, a sun at night. Just the icon, with a full-size tap target. */
.theme-toggle {
  flex: none; width: 40px; height: 40px; padding: 0; cursor: pointer;
  display: inline-grid; place-items: center;
  background: transparent; color: var(--ink-soft); border: 0;
  transition: color .2s;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover, .theme-toggle:active { color: var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.theme-toggle svg { display: block; transition: transform .35s ease; }
.theme-toggle[aria-pressed="true"] svg { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle svg { transition: none; }
}
.search { margin-right: 6px; }
.search input {
  font: 12px var(--sans); color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--hairline); padding: 4px 2px; width: 180px;
}
.search input::placeholder { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.search input:focus { outline: none; border-bottom-color: var(--ink); }
.search input:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ── Masthead ────────────────────────────────────────────── */
.masthead { text-align: center; padding: 6px 0 0; }
.title {
  font-family: "Texturina", "Texturina Fallback", "Old English Text MT", serif; font-weight: 800; font-optical-sizing: auto;
  font-size: clamp(48px, 6.5vw, 108px); line-height: 1; letter-spacing: -.01em; padding-bottom: 10px;
}
/* One strip under the nameplate: volume · motto · date, between a thin rule and a double rule. */
.dateline {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 16px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 8px 2px 7px;
  font: 700 12px var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--ink-soft);
}
.dateline > :first-child { text-align: left; }
.dateline > :last-child { text-align: right; }
.dateline .motto {
  font: italic 400 16px "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; text-transform: none; letter-spacing: 0; color: var(--ink);
}

/* ── Sections ────────────────────────────────────────────── */
nav.sections {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: nowrap; justify-content: safe center; align-items: flex-end; gap: 4px 18px;
  padding: 0; background: var(--paper); border-bottom: 3px double var(--rule);
  overflow-x: auto; scrollbar-width: none;
}
nav.sections::-webkit-scrollbar { display: none; }
nav.sections button, nav.sections a {
  flex: 0 0 auto;
  background: none; border: 0; border-bottom: 3px solid transparent; color: var(--ink-soft); cursor: pointer;
  font: 700 12px/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase;
  padding: 14px 2px 11px; white-space: nowrap; text-decoration: none;
}
nav.sections button:hover, nav.sections a:hover { color: var(--ink); border-bottom-color: var(--hairline); }
nav.sections button[aria-current="true"], nav.sections a[aria-current="true"] { border-bottom-color: var(--accent); color: var(--ink); }

/* ── Shared story bits ───────────────────────────────────── */
main { padding: 22px 0 56px; min-height: 50vh; }
.kicker { font: 800 12px var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
.unverified { position: relative; display: inline-block; max-width: 100%; margin: 8px 0 2px; }
.unverified summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  font: 600 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px dotted var(--muted); padding: 2px 0;
}
.unverified summary::-webkit-details-marker { display: none; }
.unverified summary::marker { content: ""; }
.unverified-note {
  display: none; position: absolute; z-index: 4; left: 0; top: calc(100% + 6px);
  width: min(280px, 72vw); padding: 8px 10px; background: var(--paper); color: var(--ink-soft);
  border: 1px solid var(--hairline);
  font: 400 14px/1.45 "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; letter-spacing: 0; text-transform: none;
}
.unverified:hover .unverified-note,
.unverified[open] .unverified-note,
.unverified:focus-within .unverified-note { display: block; }
.verified-mark {
  margin: 8px 0 2px;
  font: 600 11.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
/* "Verified by the newsroom" opens a small card listing the AI newsroom. */
.verified { position: relative; display: inline-block; max-width: 100%; margin: 8px 0 2px; }
.verified summary.verified-mark {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; margin: 0; padding: 2px 0;
  border-bottom: 1px dotted var(--muted);
}
.verified summary::-webkit-details-marker { display: none; }
.verified summary::marker { content: ""; }
.verified summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.verified-note {
  position: absolute; z-index: 5; left: 0; top: calc(100% + 6px);
  width: min(300px, calc(100vw - 32px)); padding: 10px 12px; background: var(--paper); color: var(--ink-soft);
  border: 1px solid var(--hairline); box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
  font: 400 14px/1.45 "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; letter-spacing: 0; text-transform: none;
}
.verified-note p { margin: 0 0 8px; }
.newsroom { list-style: none; margin: 0; padding: 0; }
.newsroom li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--hairline); }
.newsroom .bot-name { font: 700 12.5px var(--sans); color: var(--ink); }
.bot-role { font: 500 11.5px var(--sans); color: var(--muted); text-align: right; }
/* Each bot's own face beside its byline: about 20px inline, 30px in the newsroom card. */
.bot-name { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; vertical-align: middle; }
.bot-icon { flex: none; width: 26px; height: 26px; margin: -6px 0; overflow: visible; color: var(--ink); }
.newsroom .bot-icon { width: 40px; height: 40px; margin: 0; }
.newsroom .bot-name { gap: 8px; }
.newsroom li { align-items: center; }
/* The faces are bloub blobs (public/vendor/bloub-face.js): eyes in the paper colour read as holes. */
body.night .bot-av .av-body { fill: var(--av-n); }
.bot-av .av-eyes { fill: var(--paper); }
/* Three layers that never fight: the face breathes (the <svg>), the gaze moves
   (.av-look, turning about the body's centre), each lid blinks on its own
   centre (.av-lid). Lengths are face units: the face is 208 across, so 14
   units is about 1.4px on a 20px byline and 2px in the 30px newsroom card. */
.bot-av { transform-origin: 50% 90%; animation: av-breath 4.8s ease-in-out infinite; }
.bot-av .av-look { transform-box: view-box; transform-origin: 0 0; animation: av-glance 10s ease-in-out infinite; }
.bot-av .av-lid { transform-box: fill-box; transform-origin: 50% 50%; animation: av-blink 5.6s ease-in-out infinite; }
/* Props, hidden at rest. */
.bot-av .av-pen, .bot-av .av-ok { opacity: 0; transform-box: fill-box; }
.bot-av .av-pen { fill: var(--ink); transform-origin: 15% 85%; }
.bot-av .av-ok { transform-origin: 50% 50%; }
.bot-av .av-ok circle { fill: var(--ink); }
.bot-av .av-ok path { fill: none; stroke: var(--paper); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }

/* At rest every bot lives the same way; colour tells them apart. The offsets
   only keep a row of faces from blinking in unison. Elena rests looking off to
   the right, near the rim, so her glances are mirrored back in. */
.av-dex { animation-delay: -1.2s; } .av-dex .av-look { animation-delay: -2.5s; } .av-dex .av-lid { animation-delay: -1.3s; }
.av-benny { animation-delay: -3.1s; } .av-benny .av-look { animation-delay: -5s; } .av-benny .av-lid { animation-delay: -2.1s; }
.av-elena { --gx: -1; animation-delay: -1.9s; } .av-elena .av-look { animation-delay: -7.5s; } .av-elena .av-lid { animation-delay: -3.4s; }
.av-theo { animation-delay: -4s; } .av-theo .av-look { animation-delay: -1s; } .av-theo .av-lid { animation-delay: -.6s; }
.av-ruth { animation-delay: -2.6s; } .av-ruth .av-look { animation-delay: -6.2s; } .av-ruth .av-lid { animation-delay: -4.4s; }

/* Point at (or tap) a byline and its bot gives a little hop. */
.bot-name:hover .bot-av, a:hover .bot-av, .bot-name:active .bot-av, .newsroom li:hover .bot-av {
  animation: av-hop .55s cubic-bezier(.3, 1.6, .5, 1) 1;
}

/* At work. Writing: eyes down on the page, reading along two lines and back,
   a typing bob, and a pencil scribbling at the corner. */
.is-writing .bot-av { animation: av-type 1.1s ease-in-out infinite; }
.is-writing .bot-av .av-look { animation: av-write 3.2s ease-in-out infinite; }
.is-writing .bot-av .av-lid { animation: av-blink 6.4s ease-in-out infinite; }
.is-writing .bot-av .av-pen { opacity: 1; animation: av-scribble .45s ease-in-out infinite alternate; }
/* Checking: a careful squinting scan left and right, then a nod and a check. */
.is-checking .bot-av { animation: av-nod 4.4s ease-in-out infinite; }
.is-checking .bot-av .av-look { animation: av-scan 4.4s ease-in-out infinite; }
.is-checking .bot-av .av-lid { animation: av-squint 4.4s ease-in-out infinite; }
.is-checking .bot-av .av-ok { animation: av-ok 4.4s ease-out infinite; }
/* Done (the desk filed within the hour): two hops and a check, then back to rest. */
.is-done .bot-av { animation: av-hop .6s cubic-bezier(.3, 1.6, .5, 1) 2, av-breath 4.8s ease-in-out 1.2s infinite; }
.is-done .bot-av .av-ok { animation: av-ok-once 3.4s ease-out 1 both; }

@keyframes av-breath {
  0%, 100% { transform: none; }
  45% { transform: translateY(-3%) scale(.985, 1.025); }
  70% { transform: translateY(0) scale(1.02, .98); }
}
@keyframes av-hop {
  0% { transform: none; }
  25% { transform: translateY(0) scale(1.12, .86); }
  55% { transform: translateY(-22%) scale(.92, 1.1); }
  80% { transform: translateY(0) scale(1.06, .94); }
  100% { transform: none; }
}
/* A quick move, a hold, a quick move back; scaleX narrows the eyes as they
   turn, as eyes painted on a ball would. */
@keyframes av-glance {
  0%, 14% { transform: none; }
  18%, 36% { transform: translate(calc(14px * var(--gx, 1)), -5px) scaleX(.93); }
  40%, 54% { transform: none; }
  58%, 72% { transform: translate(calc(-12px * var(--gx, 1)), 7px) scaleX(.94); }
  76%, 100% { transform: none; }
}
@keyframes av-blink { 0%, 90%, 100% { transform: none; } 92.5% { transform: scaleY(.08); } 95% { transform: none; } }

@keyframes av-type {
  0%, 100% { transform: none; }
  20% { transform: translateY(2%) scale(1.01, .985); }
  40% { transform: none; }
  60% { transform: translateY(2.5%) scale(1.015, .98); }
  80% { transform: none; }
}
@keyframes av-write {
  0% { transform: translate(-16px, 16px) scaleX(.96); }
  40% { transform: translate(16px, 16px) scaleX(.96); }
  48% { transform: translate(-16px, 24px) scaleX(.96); }
  88% { transform: translate(16px, 24px) scaleX(.96); }
  100% { transform: translate(-16px, 16px) scaleX(.96); }
}
@keyframes av-scribble {
  from { transform: rotate(-9deg) translate(-3px, 2px); }
  to { transform: rotate(7deg) translate(4px, -2px); }
}
@keyframes av-scan {
  0%, 6% { transform: none; }
  18%, 26% { transform: translate(calc(-18px * var(--gx, 1)), 4px) scaleX(.9); }
  40%, 48% { transform: translate(calc(18px * var(--gx, 1)), 4px) scaleX(.9); }
  60%, 66% { transform: translate(0, 2px); }
  74%, 80% { transform: translate(0, 12px); }
  88%, 100% { transform: none; }
}
@keyframes av-squint {
  0%, 4% { transform: none; }
  10%, 58% { transform: scaleY(.62); }
  64%, 90% { transform: none; }
  92% { transform: scaleY(.08); }
  95%, 100% { transform: none; }
}
@keyframes av-nod {
  0%, 68% { transform: none; }
  74% { transform: translateY(5%) scale(1.03, .96); }
  80% { transform: translateY(-2%); }
  86% { transform: translateY(3%) scale(1.02, .97); }
  92%, 100% { transform: none; }
}
@keyframes av-ok {
  0%, 72% { opacity: 0; transform: scale(.2); }
  78% { opacity: 1; transform: scale(1.18); }
  82%, 94% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes av-ok-once {
  0% { opacity: 0; transform: scale(.2); }
  12% { opacity: 1; transform: scale(1.18); }
  18%, 82% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .bot-av, .bot-av .av-look, .bot-av .av-lid, .bot-av .av-pen, .bot-av .av-ok, .bot-name:hover .bot-av, a:hover .bot-av, .bot-name:active .bot-av, .newsroom li:hover .bot-av { animation: none; }
  /* Still say what they're doing, without the motion. */
  .is-writing .bot-av .av-pen, .is-checking .bot-av .av-ok { opacity: 1; transform: none; }
}

/* "Being verified": the reporter writing and the editor checking, at a glance. */
.in-review summary { flex-wrap: wrap; gap: 2px 5px; color: var(--ink-soft); }
.in-review summary .bot-face { display: inline-flex; }
.in-review summary .bot-icon { width: 23px; height: 23px; margin: -4px 0; }
.in-review summary .bot-face + .bot-face { margin-left: -9px; }
/* Who has it, by name, in the tag: not shouted in capitals like the stage. */
.in-review summary .status-who { font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: .01em; white-space: nowrap; }
.in-review summary .status-sep { color: var(--muted); }
.in-review .unverified-note .bot-name { font-weight: 700; }
/* Story page: the same two at work, big enough to watch. */
.review-line {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 14px 0 4px; padding: 10px 14px;
  background: var(--paper-2); border-left: 3px solid var(--ink-soft);
  font: 500 13px var(--sans); color: var(--ink-soft);
}
.review-line .bot-name { font-weight: 700; color: var(--ink); gap: 7px; }
.review-line .bot-icon { width: 26px; height: 26px; margin: -3px 0; }
.review-sep { color: var(--muted); }

.photo-credit .illustrative { display: inline-block; margin-right: 6px; padding: 0 4px; border: 1px solid currentColor; }
.meta {
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 10px;
  font: 11.5px var(--sans); color: var(--muted);
}
a.src { border-bottom: 1px dotted currentColor; white-space: nowrap; }
a.src:hover { border-bottom-style: solid; color: var(--ink); }

/* Photos run in full color by day. Every slot is a fixed-ratio box the photo
   fills by cropping (never stretching), biased toward the top where faces sit. */
.figure { position: relative; overflow: hidden; background: var(--paper-2); aspect-ratio: 16 / 9; }
.figure img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  filter: saturate(.94) contrast(1.02);
  transition: filter .5s ease;
}
/* Night ("bed") mode: back to dimmed black-and-white newsprint. */
body.night .figure img { filter: grayscale(1) contrast(1.05) brightness(.78); }
/* app.js marks photos the outlet only sent small; they get a smaller slot, not a blow-up. */
.figure.lowres { max-width: var(--natural-w, 100%); }
/* Halftone screen on the big pictures (the lead and the story hero), night only. */
.lead > a > .figure::after, .reader > .figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background-image: radial-gradient(var(--hatch) 0.9px, transparent 1.1px); background-size: 4px 4px;
}
body.night .lead > a > .figure::after, body.night .reader > .figure::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .figure img, .lead > a > .figure::after, .reader > .figure::after { transition: none; }
}

/* ── Front page ──────────────────────────────────────────── */
.front { display: block; min-width: 0; }
.lead { border-right: 0; padding-right: 0; }
.lead h2 { font: 900 clamp(36px, 4.2vw, 68px)/1.04 "Playfair Display", "Playfair Display Fallback", serif; margin: 10px 0 14px; letter-spacing: -.015em; max-width: 16em; }
.deck { font-size: 20px; line-height: 1.45; color: var(--ink-soft); margin-bottom: 18px; max-width: 62ch; }
.lead > a > .figure { width: 100%; aspect-ratio: 16 / 9; max-height: 460px; }
.caption { font-size: 12px; color: var(--muted); font-style: italic; margin-bottom: 18px; }
.body-cols { columns: 2; column-gap: 36px; text-align: justify; hyphens: auto; font-size: 16.5px; line-height: 1.6; }
.body-cols.single { columns: 1; max-width: 70ch; }
.body-cols p + p { margin-top: 10px; }
.body-cols p:first-child::first-letter { float: left; font: 900 60px/.85 "Playfair Display", "Playfair Display Fallback", serif; padding: 6px 8px 0 0; }
.lead-actions { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; margin-top: 16px; }
.readmore {
  font: 800 12px var(--sans); text-transform: uppercase; letter-spacing: .1em;
  background: var(--ink); color: var(--paper); padding: 0 18px;
}
.readmore:hover { background: var(--accent); color: var(--accent-ink); }
.lead-actions .sources { font: 12px var(--sans); color: var(--muted); }

.tldr { border-left: 3px solid var(--ink); padding: 2px 0 2px 16px; margin: 0 0 18px; }
.tldr ul { list-style: none; }
.tldr li { padding-left: 18px; position: relative; font-size: 15px; margin: 3px 0; }
.tldr li::before { content: "→"; position: absolute; left: 0; }

/* Second-tier stories under the lead. */
.seconds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--rule); }
.second + .second { border-left: 1px solid var(--hairline); padding-left: 32px; }
.second h3 { font: 700 20px/1.2 "Playfair Display", "Playfair Display Fallback", serif; margin: 6px 0 6px; }
.second p { font-size: 14.5px; color: var(--ink-soft); }

/* ── Sidebar ─────────────────────────────────────────────── */
.side-head, .section-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font: 800 13px var(--sans); text-transform: uppercase; letter-spacing: .12em;
  border-top: 3px solid var(--rule); padding: 10px 0 8px; margin-bottom: 6px;
}
.section-head::before {
  content: ""; align-self: center; flex: none; width: 9px; height: 9px; margin-right: -2px; background: var(--accent);
}
.section-head { justify-content: flex-start; }
.section-head .more-link, .section-head small { margin-left: auto; }
.side-head small, .section-head small { font: 600 11.5px var(--sans); letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
aside > section + section, .side-stick > section + section { margin-top: 28px; }
/* The sidebar list stays in view while the lead column scrolls past. */
.front > aside { position: sticky; top: 20px; align-self: start; }
.trend { display: grid; grid-template-columns: 24px 1fr; gap: 6px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.trend .n { font: 900 16px/1.3 "Playfair Display", "Playfair Display Fallback", serif; color: var(--muted); }
.trend h4 { font: 700 15.5px/1.3 "Playfair Display", "Playfair Display Fallback", serif; }
.trend.tight { display: block; }
.trend .kicker { margin-top: 3px; }



.desk-notes { margin: 0 0 22px; }
.desk-note { padding: 8px 0 12px; border-bottom: 1px solid var(--hairline); }
.desk-note h3 { font: 700 22px/1.25 "Playfair Display", "Playfair Display Fallback", serif; margin: 4px 0 6px; }
.desk-note p { font-size: 17px; }

/* ── Story grid: flows down newspaper columns, no boxes ──── */
.grid-head { margin-top: 44px; }
.stories { columns: 4 260px; column-gap: 40px; column-rule: 1px solid var(--hairline); margin-top: 8px; }
.story { break-inside: avoid; padding: 14px 0 18px; border-bottom: 1px solid var(--hairline); }
.story h3, .story h2 { font: 700 20px/1.22 "Playfair Display", "Playfair Display Fallback", serif; margin: 6px 0 8px; }
.story .figure { margin: 4px 0 0; }
.story p { font-size: 14.5px; color: var(--ink-soft); }
.empty { padding: 40px 0; text-align: center; font-style: italic; color: var(--muted); }

/* ── Reader (story page) ─────────────────────────────────── */
.back { display: inline-block; font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 24px; border-bottom: 1px solid var(--ink); }
.reader-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 64px; align-items: start; }
/* Columns never grow to fit what's inside them: the phone swipe of outlet cards
   would otherwise stretch the story wider than the screen until it's hidden. */
.reader-grid > * { min-width: 0; }
/* The side by side sits right under the story; on a wide screen it spans both
   columns under the article and the side column. On a phone (one column) the
   order is the page order: story, side by side, then sources and "More in". */
@media (min-width: 961px) {
  .reader-grid > .reader { grid-column: 1; grid-row: 1; }
  .reader-grid > aside { grid-column: 2; grid-row: 1; }
  .reader-grid > #versions { grid-column: 1 / -1; grid-row: 2; }
}
#versions:empty { display: none; }
/* On a phone, a story with no side by side would otherwise leave the compare
   block's bottom margin plus a full row gap of blank paper above Sources. */
@media (max-width: 960px) {
  .reader-grid:has(> #versions:empty) { row-gap: 24px; }
}
/* A long list of outlets folds to one row of logos and "+N more" (layout.js foldSources).
   Each logo links to that outlet's article, so the logos sit beside the toggle, not in it. */
.source-fold-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--hairline);
  font: 600 11.5px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.source-fold-row > .source-fold[open] { flex-basis: 100%; }
.source-fold > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; }
.source-fold > summary::-webkit-details-marker { display: none; }
.source-fold > summary::marker { content: ""; }
.source-fold > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.source-fold-row .fold-logos { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.source-fold-row .fold-logos .logo-link { display: inline-flex; align-items: center; min-height: 22px; }
.source-fold-row .fold-logos .source-mark { width: 22px; height: 22px; }
.source-fold-row .logo-name { font: 600 11.5px var(--sans); color: var(--ink); border-bottom: 1px dotted var(--muted); }
.source-fold-row .group-name { align-self: center; border-bottom: 0; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-size: 10.5px; }
.source-fold .fold-more { white-space: nowrap; border-bottom: 1px dotted var(--muted); }
.source-fold > summary:hover .fold-more { color: var(--ink); }
.source-fold[open] > summary .fold-more::after { content: " · Hide"; }
.compare .source-fold-row { margin-bottom: 12px; }
.lead-compare > .source-fold-row { margin: 12px 0 0; }
.lead-compare > .source-fold-row:has(> .source-fold[open]) { margin-bottom: 12px; }
/* A network's affiliates or one owner's stations, gathered (public/networks.js): a text label, then each station inside. */
.network-group > details > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 10px 0;
  font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: .06em;
}
.network-group > details > summary::-webkit-details-marker { display: none; }
.network-group > details > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.network-group > details > summary::after { content: "+"; margin-left: auto; color: var(--muted); }
.network-group > details[open] > summary::after { content: "−"; }
.network-group .source-list { padding-left: 14px; border-top: 1px solid var(--hairline); }
.network-group .source-list li:last-child { border-bottom: 0; }
.network-group .source-list a { flex-wrap: wrap; }
.station-title { flex-basis: 100%; font: 400 14px/1.35 "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.also-on { margin-top: 8px; font: 600 11px/1.5 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.also-on a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.sbs-col .also-on { margin-top: 12px; }
/* Front page: the network chip opens in place to each station's link. */
details.network-chip { display: inline-block; }
details.network-chip > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
details.network-chip > summary::-webkit-details-marker { display: none; }
details.network-chip > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
details.network-chip > summary::after { content: "▾"; color: var(--muted); font-size: 10px; }
details.network-chip[open] > summary::after { content: "▴"; }
details.network-chip .network-list { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font: 600 12px/1.4 var(--sans); }
details.network-chip .network-list a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
details.network-chip .network-list a { display: inline-flex; align-items: center; gap: 4px; }
a.source-more { min-height: 0; border-bottom: 1px dotted var(--muted); }
a.source-more:hover { color: var(--ink); }
.reader { max-width: 760px; width: 100%; margin: 0 auto; }
.reader h1 { font: 900 clamp(34px, 4vw, 60px)/1.06 "Playfair Display", "Playfair Display Fallback", serif; margin: 10px 0 14px; letter-spacing: -.01em; }
.reader .deck { font-size: 21px; }
.byline { font: 12px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 10px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); margin-bottom: 24px; }
/* The story photo: a 3:2 frame capped well short of a screenful, credit right under it. */
.reader > .figure { width: 100%; aspect-ratio: 3 / 2; max-height: min(460px, 62vh); }
.reader-body { font-size: 19px; line-height: 1.7; }
.reader-body > * + * { margin-top: 1em; }
.reader-body > p.lede::first-letter { float: left; font: 900 76px/.82 "Playfair Display", "Playfair Display Fallback", serif; padding: 8px 10px 0 0; }
.reader-body h2 { font: 900 28px/1.2 "Playfair Display", "Playfair Display Fallback", serif; margin-top: 1.4em; }
.reader-body h3 { font: 700 22px/1.25 "Playfair Display", "Playfair Display Fallback", serif; margin-top: 1.2em; }
.reader-body blockquote { border-left: 3px solid var(--ink); padding: 2px 0 2px 18px; font-style: italic; font-size: 21px; color: var(--ink-soft); }
.reader-body ul { padding-left: 1.3em; }
.reader-body li + li { margin-top: .35em; }
.reader-body pre { font: 14px/1.5 var(--sans); background: var(--paper-2); padding: 14px; overflow-x: auto; }
.inline-figure figcaption { font-size: 13px; font-style: italic; color: var(--muted); margin-top: 6px; }
.inline-figure .figure { aspect-ratio: auto; background: none; }
.inline-figure .figure img { height: auto; max-height: 560px; object-fit: contain; }
.notice { border-left: 3px solid var(--ink); padding: 4px 0 4px 16px; font-size: 16px; }
.notice b { display: block; font-family: "Playfair Display", "Playfair Display Fallback", serif; font-size: 18px; }
.original { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--rule); }
.original .btn { display: inline-block; font: 600 12px var(--sans); padding: 9px 14px; }
.source-list { list-style: none; }
.source-list li { border-bottom: 1px solid var(--hairline); }
.source-list a { display: flex; align-items: center; gap: 8px; padding: 10px 0; font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: .06em; }
.source-list a:hover { text-decoration: underline; }
/* "How it's being reported": ruled outlet cards, then agree / differ. */
.compare { margin: 6px 0 30px; border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule); padding-bottom: 18px; }
.compare-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 0 12px; }
.compare-head h2 { font: 900 22px/1.1 "Playfair Display", "Playfair Display Fallback", serif; }
.compare-head span { font: 600 11.5px var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.outlets {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  border-top: 1px solid var(--rule); border-left: 1px solid var(--rule);
}
.outlet { min-width: 0; padding: 12px 14px 16px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
/* Even rows: 2 or 4 outlets sit two across, 3, 5 or 6 sit three across.
   Wider screens only: on phones the cards are a sideways swipe instead, and
   these selectors are specific enough to squeeze that swipe into two columns. */
@media (min-width: 769px) {
  .outlets:has(> .outlet:nth-child(2):last-child),
  .outlets:has(> .outlet:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outlets:has(> .outlet:nth-child(3):last-child),
  .outlets:has(> .outlet:nth-child(5):last-child),
  .outlets:has(> .outlet:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 769px) and (max-width: 1023px) {
  .outlets:has(> .outlet:nth-child(3):last-child),
  .outlets:has(> .outlet:nth-child(5):last-child),
  .outlets:has(> .outlet:nth-child(6):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Once the full Side by side has loaded below, the cards here would repeat it:
   keep the first-reported line and the analysis, drop the duplicate cards. */
.reader-wrap:has(#versions .sbs) .compare .outlets,
.reader-wrap:has(#versions .sbs) .compare .source-fold-row { display: none; }
.outlet-name {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  font: 600 11.5px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.outlet-name a, .first-reported a { display: inline-flex; align-items: center; gap: 6px; }
.outlet-name a:hover, .first-reported a:hover { color: var(--ink); }
.outlet-name a:hover span, .first-reported a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.source-time {
  font: 11.5px var(--sans); color: var(--muted); margin-left: 8px;
  letter-spacing: .04em; white-space: nowrap;
}
.first-badge {
  padding: 1px 5px; background: var(--ink); color: var(--paper);
  font: 700 10.5px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase;
}
.outlet h3 { font: 700 16.5px/1.25 "Playfair Display", "Playfair Display Fallback", serif; margin: 6px 0 6px; overflow-wrap: break-word; }
.outlet h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.outlet p { font-size: 14px; line-height: 1.45; color: var(--ink-soft); overflow-wrap: break-word; }
.outlet .note { margin-top: 8px; font-size: 13.5px; line-height: 1.4; }
.outlet .note b { display: block; font: 600 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.filed-quote {
  border-left: 3px solid var(--ink); padding: 4px 0 4px 18px; font-style: italic;
  font-size: 1.125rem; line-height: 1.55; max-width: 42rem; margin: 18px 0 8px;
}
.filed-quote cite { display: block; font-style: normal; font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; margin-top: 6px; }
.caveats, .related-coverage {
  margin: 16px 0; max-width: 42rem; overflow-wrap: anywhere;
}
.caveats {
  background: var(--paper-2); border-left: 3px solid var(--ink-soft); padding: 10px 14px;
}
.caveats ul, .related-coverage ul { margin: 8px 0 0; padding-left: 1.15em; }
.caveats li, .related-coverage li { margin: 4px 0; overflow-wrap: anywhere; }
.related-coverage a {
  display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere;
}
.source-mark {
  position: relative; display: inline-flex; width: 16px; height: 16px; flex: none;
  align-items: center; justify-content: center; background: #fff; border: 1px solid var(--hairline); overflow: hidden;
}
.letter-mark { font: 700 9px/1 var(--sans); color: #111; text-transform: none; letter-spacing: 0; }
/* The outlet's own icon, small and unaltered (Counsel): scaled to fit the box,
   never cropped, recolored or filtered. */
.source-icon { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; opacity: 0; }
.source-mark.ready .source-icon { opacity: 1; }
.source-mark.ready .letter-mark { visibility: hidden; }
.source-mark.fallback .source-icon { display: none; }
.first-reported {
  display: flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%;
  margin: 0 0 12px; padding: 3px 8px 3px 6px; border: 1px solid var(--rule);
  font: 600 13px/1.3 "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
}
.wording { margin-top: 14px; }
.wording ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.wording li {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--rule); padding: 3px 8px 3px 6px; font-size: 15px;
}
.wording .who { font: 600 11.5px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.wording q { font-style: italic; }
.analysis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; margin-top: 16px; }
.analysis h3 { font: 900 12.5px "Playfair Display", "Playfair Display Fallback", serif; text-transform: uppercase; letter-spacing: .1em; padding-bottom: 6px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
.agree ul { list-style: none; }
.agree li { position: relative; padding: 5px 0 5px 20px; font-size: 15.5px; line-height: 1.45; border-bottom: 1px solid var(--hairline); }
.agree li::before { content: "="; position: absolute; left: 2px; top: 4px; font: 700 15px var(--sans); }
.point { padding: 4px 0 10px; border-bottom: 1px solid var(--hairline); }
.point + .point { margin-top: 8px; }
.point-q { font: 700 15.5px/1.35 "Source Serif 4", "Source Serif 4 Fallback", serif; margin-bottom: 6px; }
/* fit-content(40%) caps the outlet column so a long name ("AWS Security Blog (Amazon Threat
   Intelligence)") wraps instead of taking the whole width and squeezing the answer to 0px. */
.point dl { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: 4px 12px; font-size: 14.5px; line-height: 1.4; }
.point dt { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; font: 600 11.5px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.point dt a { min-width: 0; overflow-wrap: anywhere; }
.point dd { margin: 0; overflow-wrap: anywhere; }
.framing { margin-top: 14px; font-style: italic; color: var(--ink-soft); }
.framing b { font-style: normal; }
.analysis-wait { margin-top: 14px; font: 12px var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); animation: pulse 1.6s infinite; }
.analysis-note { margin-top: 12px; font: 12px/1.5 var(--sans); color: var(--muted); }
a.count { border-bottom: 1px dotted currentColor; }
a.count:hover { color: var(--ink); border-bottom-style: solid; }
@media (max-width: 700px) {
  .analysis-grid { grid-template-columns: 1fr; }
  .outlets { grid-template-columns: 1fr; }
  .compare-head { flex-wrap: wrap; }
  .first-reported { white-space: normal; }
}

/* Reading a story: keep the masthead, drop the section nav. */
body.story-view nav.sections { display: none; }

/* ── States ──────────────────────────────────────────────── */
.presses { text-align: center; padding: 80px 20px; }
.presses-title { font: 900 clamp(30px, 5vw, 54px) "Playfair Display", "Playfair Display Fallback", serif; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.presses p { font-style: italic; color: var(--ink-soft); margin-top: 8px; }
.presses .btn { margin-top: 18px; display: inline-block; }

/* ── Footer ──────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--rule); padding: 18px 0 40px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  font: 12px var(--sans); color: var(--muted);
}
footer .mast { font: 800 26px "Texturina", "Texturina Fallback", serif; color: var(--ink); }

/* ── Hierarchy: lead, top stories, section blocks ─ */
.source-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }
.source-chip, .outlet-name a, .first-reported a {
  display: inline-flex; align-items: center; gap: 6px;
}
.source-name, .source-count, .source-more {
  font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.source-chip { color: var(--ink-soft); }
.source-chip:hover { color: var(--ink); }
.lead .source-row { margin: 18px 0 8px; }
.lead-compare { margin-top: 22px; }
.lead-actions { margin-top: 22px; }
.readmore { display: inline-flex; align-items: center; min-height: 44px; }

.top-stories { margin-top: 52px; }
.top-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 10px; }
.top-story { min-width: 0; padding: 4px 22px 8px; }
.top-story:first-child { padding-left: 0; }
.top-story:last-child { padding-right: 0; }
.top-story + .top-story { border-left: 1px solid var(--hairline); }
.top-story .figure { margin-bottom: 0; }
.top-story h3 { font: 700 21px/1.22 "Playfair Display", "Playfair Display Fallback", serif; margin: 6px 0; }
.top-story p { font-size: 15.5px; color: var(--ink-soft); }

.more-link { font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--ink); }

/* When each story went out, readable at a glance. */
.story-time {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px;
  font: 700 12.5px var(--sans); letter-spacing: .02em; color: var(--ink-soft); white-space: nowrap;
}
.story-age {
  padding: 2px 7px; border: 1px solid var(--hairline); color: var(--ink);
  font: 800 11.5px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.story-time.recent .story-age { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.lead .story-time { font-size: 14px; margin: 0 0 14px; }
.lead .story-age { font-size: 12px; padding: 3px 9px; }

@keyframes live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
.live-dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--accent); margin-right: 8px; vertical-align: middle;
  animation: live-pulse 1.6s ease-in-out infinite;
}

/* Latest: a wire ticker across the top of the front page. */
@keyframes ticker-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ticker {
  display: flex; align-items: stretch; margin: 0 0 30px;
  border-bottom: 1px solid var(--rule); overflow: hidden;
}
.ticker-label {
  display: inline-flex; align-items: center; flex: none; padding: 0 16px 0 12px;
  background: var(--accent); color: var(--accent-ink);
  font: 800 12px var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.ticker-label .live-dot { background: currentColor; }
.ticker-track {
  flex: 1; min-width: 0; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.ticker-run { display: flex; width: max-content; animation: ticker-run 70s linear infinite; }
.ticker:hover .ticker-run, .ticker:focus-within .ticker-run { animation-play-state: paused; }
.ticker ul { display: flex; list-style: none; }
.ticker li { flex: none; }
.ticker a {
  display: inline-flex; align-items: baseline; gap: 10px; padding: 11px 26px 10px;
  font: 600 15px/1.3 "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; white-space: nowrap;
  border-left: 1px solid var(--hairline);
}
.ticker a:hover { color: var(--accent); }
.ticker time { font: 800 12px var(--sans); color: var(--accent); letter-spacing: .02em; }

/* Lead on the left, Fresh Off the Press as a timeline on the right. */
.front-top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 0 44px; align-items: start;
}
.fresh-strip {
  border-left: 1px solid var(--hairline); padding-left: 28px;
}
.fresh-head {
  display: flex; align-items: center; border-top: 3px solid var(--accent); padding: 10px 0 4px;
}
.fresh-head h2 {
  display: flex; align-items: center;
  font: 800 14px var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--accent);
}
.fresh-list { list-style: none; position: relative; margin: 6px 0 14px; }
.fresh-list::before {
  content: ""; position: absolute; left: 4px; top: 16px; bottom: 16px; width: 1px; background: var(--hairline);
}
.fresh-list li { position: relative; padding: 12px 0 12px 22px; border-bottom: 1px solid var(--hairline); min-width: 0; }
.fresh-list li:last-child { border-bottom: 0; }
.fresh-list li::before {
  content: ""; position: absolute; left: 0; top: 19px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink-soft); box-sizing: border-box;
}
.fresh-list li:has(.recent)::before { background: var(--accent); border-color: var(--accent); }
.fresh-list .story-time { margin: 0 0 5px; font-size: 12px; }
.fresh-list h3 { font: 700 17px/1.25 "Playfair Display", "Playfair Display Fallback", serif; margin: 0 0 4px; overflow-wrap: break-word; }
.fresh-list .kicker { font-size: 11px; color: var(--muted); }
.fresh-all {
  display: inline-flex; align-items: center; min-height: 40px;
  font: 800 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
  border-bottom: 2px solid var(--accent);
}

/* The Fresh tab in the nav: red, with the pulsing dot. */
nav.sections [data-section="fresh"] { color: var(--accent); }
nav.sections [data-section="fresh"]::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; margin-right: 7px; vertical-align: 1px;
  animation: live-pulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .live-dot, nav.sections [data-section="fresh"]::before { animation: none; }
  .ticker-run { animation: none; }
  .ticker-track { overflow-x: auto; }
  .ticker ul[aria-hidden] { display: none; }
}

.beats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 40px; margin-top: 60px; }
.beat { min-width: 0; }
.beat .story { padding: 16px 0; }
.beat .story + .story { border-top: 1px solid var(--hairline); }
.story-list .story { padding: 18px 0 20px; border-bottom: 1px solid var(--hairline); max-width: 46rem; }
.story h3, .story h2, .top-story h3 { overflow-wrap: break-word; }
.story h3, .story h2 { font: 700 21px/1.24 "Playfair Display", "Playfair Display Fallback", serif; margin: 4px 0 8px; }
.story p { font-size: 16px; color: var(--ink-soft); line-height: 1.5; }
.beat .story h3 { font-size: 19px; }
.beat .story:first-child h3 { font-size: 23px; }

.outlet-byline, .blurb-attr { font: 600 12px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.outlet-summary { margin-top: 8px; }
.outlet-quote { margin: 10px 0; font: italic 1.05rem/1.45 "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; }
.outlet-quote q { quotes: "“" "”" "‘" "’"; }
.outlet-quote cite { font-style: normal; font-size: 0.85em; color: var(--muted); }
.outlet-blurb { color: var(--ink-soft); }

.section-head a { border-bottom: 1px solid transparent; }
.section-head a:hover { border-bottom-color: var(--ink); }

html, body { overflow-x: clip; }
img, svg { max-width: 100%; height: auto; }
h1, h2, h3, p { overflow-wrap: break-word; }


/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  nav.sections {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Spacer scrolls into the fade, so the first and last labels can sit fully in view. */
    padding-left: 20px;
    padding-right: 48px;
    scroll-padding-inline: 20px;
    /* Opaque paper out to the window edges, so stories never show through beside the
       sticky bar. The fades are painted paper (not a mask, which would let text through). */
    box-shadow: 0 0 0 100vmax var(--paper);
    clip-path: inset(0 -100vmax);
  }
  nav.sections::before, nav.sections::after {
    content: ""; position: sticky; flex: none; align-self: stretch; width: 20px; z-index: 1; pointer-events: none;
  }
  nav.sections::before { left: -20px; margin: 0 -20px 0 -20px; background: linear-gradient(90deg, var(--paper), transparent); }
  nav.sections::after { right: -48px; margin: 0 -48px 0 auto; width: 40px; background: linear-gradient(270deg, var(--paper), transparent); }
  nav.sections::-webkit-scrollbar { display: none; }
  .beats { grid-template-columns: 1fr 1fr; }
  .top-list { grid-template-columns: 1fr 1fr; gap: 24px 0; }
  .top-story:nth-child(odd) { padding-left: 0; border-left: 0; }
  .top-story:nth-child(even) { padding-right: 0; }
}
@media (max-width: 960px) {
  .reader-grid { grid-template-columns: 1fr; }
  .front-top { grid-template-columns: 1fr; }
  .fresh-strip { position: static; border-left: 0; padding-left: 0; margin-top: 36px; }
  .front > aside { position: static; }
}
@media (max-width: 768px) {
  body { font-size: 16px; }
  .title { font-size: 46px; }
  .deck, .story p, .top-story p, .outlet p, .filed-quote, .caveats, .related-coverage {
    font-size: 16px; line-height: 1.5;
  }
  .top-list { grid-template-columns: 1fr; gap: 0; }
  .top-story, .top-story:first-child, .top-story:last-child, .top-story:nth-child(n) { padding: 16px 0; border-left: 0; }
  .top-story + .top-story { border-top: 1px solid var(--hairline); }
  .beats { grid-template-columns: 1fr; }
  .ticker { margin-bottom: 22px; }
  .ticker-label { padding: 0 10px; font-size: 12px; }
  .ticker a { font-size: 14px; padding: 12px 18px; }
  .btn, .toggle, nav.sections button, nav.sections a, .source-chip, .source-list a, .back,
  .kicker a, .section-head a, .more-link {
    min-height: 44px;
  }
  .kicker a, .section-head a, .more-link { display: inline-flex; align-items: center; }
  .source-chip { min-width: 44px; }
  /* Icon-only outlets sit side by side; each keeps a 40x44 tap target without wide gaps. */
  .source-row { gap: 4px 0; }
  .source-chip.icon-only { min-width: 40px; justify-content: center; }
  .source-row .source-count, .source-row .source-more { margin-left: 8px; }
  nav.sections button, nav.sections a { display: inline-flex; align-items: center; padding: 0 8px; }
  .search input { font-size: 16px; min-height: 44px; }
  .unverified summary, .verified summary.verified-mark { min-height: 44px; }
  .source-list a { padding: 12px 0; }
  .outlet { padding: 14px 14px 18px; }
  .filed-quote { font-size: 1.0625rem; line-height: 1.55; margin: 16px 0; }
  .controls { width: 100%; gap: 10px; }
  .search { flex: 1 1 auto; min-width: 0; margin-right: 0; }
  .theme-toggle { width: 44px; height: 44px; }
  .search input { width: 100%; }
  .btn { flex: 1; }
  .toggle { flex: 1; justify-content: center; }
  .toggle:first-of-type { border-left: 0; }
  .dateline {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    letter-spacing: .08em; font-size: 12px; text-align: center;
  }
  .dateline > :first-child, .dateline > :last-child, .dateline .motto { text-align: center; }
}
@media (max-width: 700px) {
  .outlets, .analysis-grid { grid-template-columns: 1fr; }
  .compare-head { flex-wrap: wrap; }
  .body-cols { columns: 1; }
  /* On a phone the verified card hangs from the start of its row (the story page's top
     line or a card's foot) and is never wider than that row, so it stays on screen. */
  .reader-top, .card-foot { position: relative; }
  .reader-top .verified, .card-foot .verified { position: static; }
  .reader-top .verified-note, .card-foot .verified-note { width: min(300px, 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .presses-title { animation: none; }
}

/* ── Side by side: every outlet's full article ───────────── */
.sbs { margin: 10px 0 34px; border-top: 2px solid var(--rule); }
.sbs-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; padding: 10px 0 12px; }
.sbs-bar h2 { font: 900 22px/1.1 "Playfair Display", "Playfair Display Fallback", serif; }
.sbs-controls { margin-left: auto; display: flex; gap: 14px; font: 600 12px var(--sans); }
.sbs-controls .toggle:first-child { border-left: 0; padding-left: 0; }
.sbs-tabs { display: none; gap: 6px 18px; flex-wrap: wrap; border-bottom: 1px solid var(--hairline); margin-bottom: 4px; }
.sbs-tab {
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; color: var(--ink-soft);
  font: 600 14px "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; padding: 8px 0 6px;
}
.sbs-tab[aria-pressed="true"], .sbs-tab:hover { color: var(--ink); border-bottom-color: var(--ink); }
.sbs-grid {
  display: grid; grid-template-columns: repeat(var(--sbs-cols), minmax(300px, 1fr));
  overflow-x: auto; border-left: 1px solid var(--rule);
}
.sbs-col { min-width: 0; padding: 14px 18px 18px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sbs-source { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font: 600 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.sbs-source a { display: inline-flex; align-items: center; gap: 6px; }
.sbs-head h3 { font: 700 19px/1.25 "Playfair Display", "Playfair Display Fallback", serif; margin: 8px 0 6px; overflow-wrap: break-word; }
.sbs-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 11.5px var(--sans); color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--hairline); margin-bottom: 12px; }
.sbs-body p { font-size: 15.5px; line-height: 1.6; margin-bottom: 12px; overflow-wrap: break-word; hyphens: auto; }
.sbs-note { font-size: 14px; font-style: italic; color: var(--muted); margin-bottom: 12px; }
.sbs-foot { font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; margin-top: 6px; }
.sbs-foot a { border-bottom: 1px solid currentColor; }
/* One at a time: tabs pick the outlet. */
.sbs.view-single .sbs-tabs { display: flex; }
.sbs.view-single .sbs-grid { grid-template-columns: 1fr; border-left: 0; }
.sbs.view-single .sbs-col { display: none; border: 0; padding: 14px 0; max-width: 70ch; }
.sbs.view-single .sbs-col.active { display: block; }
@media (max-width: 768px) {
  .sbs-controls { margin-left: 0; width: 100%; }
  .sbs-tab { min-height: 44px; }
  .sbs-grid { grid-template-columns: repeat(var(--sbs-cols), 85vw); scroll-snap-type: x mandatory; }
  .sbs-col { scroll-snap-align: start; }
}
.has-versions .reader-body, .has-versions .reader > .original { display: none; }

/* ── Desk report: the desk's own article, cited to every source ── */
.desk-article { font-size: 19px; line-height: 1.7; }
.desk-article > p + p { margin-top: 1em; }
.desk-article > p.lede::first-letter { float: left; font: 900 76px/.82 "Playfair Display", "Playfair Display Fallback", serif; padding: 8px 10px 0 0; }
.cite { font: 600 11px var(--sans); line-height: 0; margin-left: 2px; }
.cite a { color: var(--muted); border-bottom: 1px solid var(--hairline); }
.cite-sep { color: var(--muted); }
.cite a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.bottom-line { margin: 30px 0 0; padding: 14px 0 16px; border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule); }
.bottom-line h2, .cited h2 {
  font: 600 11.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.bottom-line p { font: italic 18px/1.6 "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; }
/* Body-size, like the paragraphs below it; the outlets link like "Read the original". */
.based-on { font: inherit; color: var(--ink); margin: 0 0 1em; }
.based-on a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.primary-sources { font: 600 13px/1.5 var(--sans); color: var(--muted); margin: 0 0 14px; }
.primary-sources a { color: var(--ink); }
.why-it-matters { margin: 26px 0 0; padding: 12px 0 14px; border-top: 1px solid var(--rule); }
.why-it-matters h2 { font: 800 12px var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin: 0 0 6px; }
.why-it-matters p { font-size: 17px; line-height: 1.6; }
.cited { margin: 28px 0 36px; }
.cited ol { list-style: none; border-top: 1px solid var(--hairline); }
/* Number | outlet and headline | time. The time keeps its own column however long the headline runs. */
.cited li {
  display: grid; grid-template-columns: minmax(1.6em, max-content) minmax(0, 1fr) auto; align-items: baseline; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--hairline); font-size: 15px; line-height: 1.4;
}
.cited li::before { content: attr(data-n); font: 600 12px var(--sans); color: var(--muted); }
/* Sources past the first five fold behind the next few names and "+N more" (no logos). */
.cited-fold > summary {
  list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  min-height: 44px; padding: 12px 0; border-bottom: 1px solid var(--hairline);
  font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.cited-fold > summary::-webkit-details-marker { display: none; }
.cited-fold > summary::marker { content: ""; }
.cited-fold > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cited-fold .cited-chip { color: var(--ink); }
.cited-fold .fold-more { white-space: nowrap; border-bottom: 1px dotted var(--muted); }
.cited-fold > summary:hover .fold-more { color: var(--ink); }
.cited-fold .fold-hide, .cited-fold[open] > summary .cited-names, .cited-fold[open] > summary .fold-more { display: none; }
.cited-fold[open] > summary .fold-hide { display: inline; border-bottom: 1px dotted var(--muted); }
.cited-fold > ol { border-top: 0; }
.cited-also { display: block; margin-top: 2px; font: 600 12px var(--sans); color: var(--muted); }
.cited-also a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.wire-credit { margin: 0 0 1em; font: 600 13px var(--sans); color: var(--muted); }
.wire-credit a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.cited li > a { display: block; min-width: 0; }
.cited-source { margin-right: 8px; }
.cited .source-time { margin-left: 0; }
.cited-source { font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
/* A source name stays in one piece (an inline block: "The PHP Foundation" moves to
   the next line whole) but a name too long for the column, like "Multistate
   consent judgment (N.D. Cal.)", wraps inside it instead of running off a phone.
   Long document titles wrap too. */
.cited-source { display: inline-block; max-width: 100%; }
.cited li > a, .cited-body { overflow-wrap: anywhere; }
.cited-title { color: var(--ink-soft); }
.original-link { margin-top: 12px; font-size: 15px; }
.original-link a { text-decoration: underline; text-underline-offset: 3px; }
.cited li > a:hover .cited-title { text-decoration: underline; text-underline-offset: 3px; }
.notice-head { display: block; font: 700 18px/1.3 "Playfair Display", "Playfair Display Fallback", serif; margin-bottom: 4px; }
.notice p { font-size: 15.5px; color: var(--ink-soft); }

/* ── Pages: sections, search, Fresh, Heard on X, story ─────── */
.page-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
  border-top: 4px solid var(--accent); padding: 14px 0 16px; margin-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.page-head h1 { font: 900 clamp(34px, 4vw, 56px)/1.05 "Playfair Display", "Playfair Display Fallback", serif; letter-spacing: -.01em; }
.page-note { font: 700 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Status and outlets share one line under every card. */
.card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 12px; }
.card-foot .unverified, .card-foot .verified, .card-foot .verified-mark { margin: 0; }
.card-foot .source-row { margin: 0; }

/* Section and search pages: newspaper columns with rules between them. */
.story-list {
  columns: 3 300px; column-gap: 44px; column-rule: 1px solid var(--hairline);
}
.story-list .story {
  max-width: none; break-inside: avoid; padding: 18px 0 20px; border-bottom: 1px solid var(--hairline);
}
.story-list .story h3, .story-list .story h2 { font-size: 21px; }
.story-list .story p { font-size: 15.5px; }
.story-list .empty { column-span: all; }

/* Story page. */
.back {
  display: inline-flex; align-items: center; min-height: 36px; margin-bottom: 18px;
  font: 800 11.5px var(--sans); letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 2px solid var(--accent);
}
.back:hover { color: var(--accent); }
.reader-grid { gap: 56px; }
.reader { margin: 0; }
.reader-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.reader-top .unverified, .reader-top .verified, .reader-top .verified-mark { margin: 0; }
.reader h1 { font: 900 clamp(38px, 4.6vw, 66px)/1.04 "Playfair Display", "Playfair Display Fallback", serif; margin: 12px 0 16px; letter-spacing: -.015em; }
.reader .deck { font-size: 21px; line-height: 1.45; }
.reader-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--hairline);
  padding: 10px 0; margin: 4px 0 22px;
}
.reader-meta:empty { display: none; }
.reader-meta .byline { border: 0; padding: 0; margin: 0; font: 700 12px var(--sans); color: var(--ink); }
.reader-meta .story-time { margin: 0; font-size: 13.5px; }
.reader .source-row { margin: 0 0 18px; }
.original { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--rule); }
.original .btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  font: 800 12px var(--sans); letter-spacing: .1em;
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.original .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Story sidebar. The aside fills the first grid row, beside the article; only
   .side-stick inside it is sticky, so it stops at the end of that row and
   scrolls away before the side by side (row 2, both columns) instead of
   sliding over it. */
.reader-grid > aside { align-self: stretch; }
.reader-grid > aside > .side-stick { position: sticky; top: 64px; }
.side-head { font: 800 12.5px var(--sans); letter-spacing: .12em; border-top: 3px solid var(--rule); }
.reader-grid > aside .side-head::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--accent);
}
.reader-grid > aside .side-head { justify-content: flex-start; }
.source-list a { justify-content: flex-start; font: 700 12px var(--sans); }
.source-list .source-time { margin-left: auto; }
.source-list .out { color: var(--muted); }
.trend.tight { padding: 12px 0; }
.trend.tight h4 { font-size: 16px; }
.trend.tight .story-time { margin: 6px 0 0; font-size: 11.5px; }

/* Heard on X. */

@media (max-width: 960px) {
  .reader-grid > aside > .side-stick { position: static; }
}
@media (max-width: 700px) {
  .page-head h1 { font-size: 34px; }
}

/* Outlet photos carry the outlet's credit, linked back to its story. */
/* Outranks the card text rules (.story p, .story-list .story p, .top-story p). */
p.photo-credit, .story p.photo-credit, .top-story p.photo-credit {
  margin: 5px 0 12px; font: 700 11.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.photo-credit a { border-bottom: 1px solid var(--hairline); }
.photo-credit a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.lead .photo-credit { margin-bottom: 18px; }
.story-list .story .figure, .beat .story .figure { margin: 2px 0 0; }

/* Search: older stories from the archive, under today's results. */
.archive-hits { margin-top: 48px; }
.search-status { margin: 18px 0; font: 700 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Top stories sit under the lead, beside the Fresh column, two by two. */
.front .top-stories { margin-top: 40px; }
.front .top-list { grid-template-columns: 1fr 1fr; gap: 0; }
.front .top-list > .top-story:last-child:nth-child(odd) { grid-column: 1 / -1; }
.front .top-list > .top-story:last-child:nth-child(odd):not(:only-child) { border-left: 0; border-top: 1px solid var(--hairline); padding-top: 16px; }
.front .top-list > .top-story:last-child:nth-child(odd) p { max-width: 62ch; }
.front .top-story, .front .top-story:first-child, .front .top-story:last-child { padding: 18px 0; border-left: 0; }
.front .top-story:nth-child(odd) { padding-right: 22px; }
.front .top-story:nth-child(even) { padding-left: 22px; border-left: 1px solid var(--hairline); }
.front .top-story:nth-child(n+3) { border-top: 1px solid var(--hairline); }

/* Section blocks pack into columns like a paper, with no holes under short ones. */
.beats { display: block; columns: 3 300px; column-gap: 40px; column-rule: 1px solid var(--hairline); }
.beat { break-inside: avoid; margin-bottom: 40px; }
@media (max-width: 768px) {
  .front .top-list { grid-template-columns: 1fr; }
  .front .top-story:nth-child(n) { padding: 16px 0; border-left: 0; }
  .front .top-story + .top-story { border-top: 1px solid var(--hairline); }
}

/* ── Fresh Off the Press page: an hourly timeline ─────────── */
.fresh-page-head h1 { display: flex; align-items: center; }
.fresh-page-head .live-dot { width: 14px; height: 14px; margin-right: 14px; }
.fresh-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 0 56px; align-items: start; margin-top: 10px;
}
.fresh-feed { min-width: 0; position: relative; }
/* The rail: one line down the left, a dot for every story. */
.fresh-feed::before {
  content: ""; position: absolute; left: 154px; top: 0; bottom: 0; width: 2px; background: var(--hairline);
}
.fresh-item {
  position: relative; display: grid; grid-template-columns: 140px minmax(0, 1fr) auto;
  column-gap: 44px; padding: 20px 0; border-bottom: 1px solid var(--hairline);
}
.fresh-item::before {
  content: ""; position: absolute; left: 149px; top: 26px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink-soft); box-sizing: border-box;
}
.fresh-item.recent::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.fresh-when .story-time {
  flex-direction: column-reverse; align-items: flex-end; gap: 6px; margin: 2px 0 0; text-align: right;
}
.fresh-when .story-clock { font: 800 17px var(--sans); color: var(--ink); }
/* The time column is 100px: "Updated 19 min ago" wraps inside it instead of
   pushing the column into the rail. */
.fresh-when { min-width: 0; }
@media (min-width: 1101px) {
  .fresh-when .story-time { width: 100%; }
  .fresh-when .updated-tag { white-space: normal; justify-content: flex-end; text-align: right; }
  .fresh-when .updated-tag::before { display: none; }
}
.fresh-body { min-width: 0; }
.fresh-body h3 { font: 700 23px/1.22 "Playfair Display", "Playfair Display Fallback", serif; margin: 4px 0 8px; }
.fresh-body p { font-size: 16px; color: var(--ink-soft); max-width: 62ch; }
.fresh-photo { width: 180px; }
.fresh-photo .figure { aspect-ratio: 3 / 2; }
.fresh-item.has-photo .fresh-photo p.photo-credit { margin: 4px 0 0; font-size: 11px; }

/* The newest story leads the page. */
.fresh-item.featured { padding: 8px 0 28px; border-bottom: 3px solid var(--rule); }
.fresh-item.featured::before { top: 14px; width: 16px; height: 16px; left: 147px; }
.fresh-item.featured .fresh-when .story-clock { font-size: 24px; }
.fresh-item.featured .fresh-photo { width: 320px; }
.fresh-flag {
  display: inline-block; margin-bottom: 8px; padding: 3px 9px; background: var(--accent); color: var(--accent-ink);
  font: 800 12px var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.fresh-item.featured h2 { font: 900 clamp(30px, 3.2vw, 46px)/1.08 "Playfair Display", "Playfair Display Fallback", serif; margin: 6px 0 12px; letter-spacing: -.01em; }
.fresh-item.featured p { font-size: 18px; }

/* Hour headings sit on the rail. */
.fresh-hour { position: relative; }
.fresh-hour-label {
  position: sticky; top: 46px; z-index: 2; display: flex; align-items: baseline; gap: 10px;
  margin: 26px 0 0; padding: 10px 0 8px 144px; background: var(--paper);
  font: 800 13px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.fresh-hour-label small { font: 700 12px var(--sans); color: var(--muted); letter-spacing: .06em; }

/* Sidebar: the pace and the busiest sections. */
.fresh-side { position: sticky; top: 64px; }
.fresh-side .side-head::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--accent);
}
.fresh-side .side-head { justify-content: flex-start; }
.pace { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 28px; }
.pace div { border-left: 3px solid var(--accent); padding: 2px 0 2px 12px; }
.pace b { display: block; font: 900 40px/1 "Playfair Display", "Playfair Display Fallback", serif; }
.pace span { font: 700 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.busiest { list-style: none; margin-top: 6px; }
.busiest li {
  display: grid; grid-template-columns: minmax(0, 1fr) 80px 24px; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--hairline);
}
.busiest-name { font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.busiest-name a:hover { color: var(--accent); }
.busiest-bar { height: 6px; background: var(--paper-2); }
.busiest-bar i { display: block; height: 100%; width: var(--w); background: var(--accent); }
.busiest b { font: 800 13px var(--sans); text-align: right; }

@media (max-width: 1100px) {
  .fresh-layout { grid-template-columns: 1fr; }
  .fresh-side { position: static; order: -1; margin-bottom: 20px; }
  .fresh-side .busiest, .fresh-side .side-head:not(:first-child) { display: none; }
}
@media (max-width: 760px) {
  .fresh-feed::before { left: 5px; }
  .fresh-item { grid-template-columns: minmax(0, 1fr); padding-left: 26px; row-gap: 6px; }
  .fresh-item::before, .fresh-item.featured::before { left: 0; }
  /* One line: time, then age, then "Updated". */
  .fresh-when .story-time { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 4px 10px; text-align: left; }
  .fresh-when .story-clock { order: 1; }
  .fresh-when .story-age { order: 2; }
  .fresh-when .updated-tag { order: 3; }
  .fresh-photo, .fresh-item.featured .fresh-photo { width: 100%; max-width: 420px; }
  .fresh-hour-label { padding-left: 26px; }
}

/* ── Breaking news ───────────────────────────────────────── */
.breaking-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  margin: 10px 0 0; padding: 10px 16px 10px 0;
  background: var(--accent); color: var(--accent-ink);
}
.breaking-tag {
  display: inline-flex; align-items: center; align-self: stretch; padding: 0 16px;
  background: var(--ink); color: var(--paper); margin: -10px 0;
  font: 900 13px var(--sans); letter-spacing: .16em; text-transform: uppercase;
}
.breaking-tag .live-dot { background: var(--accent); }
.breaking-title { flex: 1 1 24rem; min-width: 0; font: 700 clamp(17px, 1.6vw, 21px)/1.25 "Playfair Display", "Playfair Display Fallback", serif; }
.breaking-meta { font: 700 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.breaking-go { font: 900 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.breaking-bar:hover .breaking-title { text-decoration: underline; text-underline-offset: 4px; }

.breaking-flag {
  display: inline-flex; align-items: center; gap: 0; margin: 0 8px 6px 0; padding: 3px 9px 3px 7px;
  background: var(--accent); color: var(--accent-ink);
  font: 900 12px var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.breaking-flag .live-dot { width: 7px; height: 7px; margin-right: 6px; background: currentColor; }
.reader-top .breaking-flag { margin-bottom: 0; }
.fresh-list .breaking-flag { margin-bottom: 4px; }

/* The alert: a full-screen interruption, once per breaking story. */
@keyframes breaking-in { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.breaking-alert {
  width: min(640px, calc(100vw - 32px)); max-width: none; margin: auto; padding: 0; border: 0;
  background: var(--paper); color: var(--ink); box-shadow: 0 24px 80px rgba(0, 0, 0, .45);
  border-top: 10px solid var(--accent);
  animation: breaking-in .35s ease-out;
}
.breaking-alert::backdrop { background: rgba(10, 10, 10, .72); }
.breaking-alert-inner { padding: 26px 30px 28px; }
.breaking-alert-tag {
  display: inline-flex; align-items: center; padding: 6px 12px; background: var(--accent); color: var(--accent-ink);
  font: 900 14px var(--sans); letter-spacing: .2em; text-transform: uppercase;
}
.breaking-alert-tag .live-dot { background: currentColor; }
.breaking-alert h2 { font: 900 clamp(28px, 4vw, 42px)/1.08 "Playfair Display", "Playfair Display Fallback", serif; margin: 18px 0 12px; letter-spacing: -.01em; }
.breaking-alert-meta { font: 800 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.breaking-alert-note { margin-top: 12px; font-size: 17px; color: var(--ink-soft); }
.breaking-alert-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.breaking-read, .breaking-dismiss {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; cursor: pointer;
  font: 800 12.5px var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.breaking-read { background: var(--accent); color: var(--accent-ink); }
.breaking-read:hover { background: var(--ink); color: var(--paper); }
.breaking-dismiss { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.breaking-dismiss:hover { background: var(--ink); color: var(--paper); }
@media (prefers-reduced-motion: reduce) { .breaking-alert { animation: none; } }
@media (max-width: 768px) {
  /* Phones: a tidy card. Tag and "Read" on top, then the headline, then the details. */
  .breaking-bar {
    display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px 12px;
    padding: 12px 14px 13px;
  }
  .breaking-tag {
    grid-column: 1; grid-row: 1; justify-self: start; align-self: center;
    margin: 0; padding: 4px 8px; font-size: 12px; letter-spacing: .14em;
  }
  .breaking-live { grid-column: 2; grid-row: 1; font-size: 11.5px; }
  .breaking-go { grid-column: 3; grid-row: 1; font-size: 12px; }
  .breaking-title {
    grid-column: 1 / -1; grid-row: 2; font-size: 18px; line-height: 1.25;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  }
  .breaking-meta { grid-column: 1 / -1; grid-row: 3; font-size: 11.5px; line-height: 1.4; }
  .breaking-alert-inner { padding: 20px 18px 22px; }
}

/* ── Updates and live news ───────────────────────────────── */
/* A story that changed since we first ran it. */
.updated-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font: 800 11.5px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
}
.updated-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Jev's update label, when UPDATE_NOTES is on. Same accent as What's new. */
.update-note {
  margin: 0 0 16px; padding: 8px 12px;
  border-left: 3px solid var(--accent); background: var(--paper-2);
  font: 800 12px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent);
}
.update-note-correction { border-left-color: var(--ink); color: var(--ink); }

/* "What's new" on the story page. */
.updates {
  margin: 0 0 22px; padding: 12px 16px 10px;
  border-left: 3px solid var(--accent); background: var(--paper-2);
}
.updates-head {
  display: flex; align-items: center;
  font: 800 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 8px;
}
.updates ol { list-style: none; margin: 0; padding: 0; }
.update {
  display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: baseline;
  padding: 6px 0; border-top: 1px solid var(--hairline);
  font: 15px/1.4 "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; color: var(--ink);
}
.update:first-child { border-top: 0; }
.update time { font: 700 12px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.update-was { display: block; font-size: 13px; color: var(--muted); font-style: italic; }
.update-breaking span:first-of-type { font-weight: 600; }
.updates details { margin-top: 4px; }
.updates summary { cursor: pointer; font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 4px 0; }
@media (max-width: 560px) { .update { grid-template-columns: 1fr; gap: 2px; } }

/* An outlet that just picked the story up. */
.new-tag {
  margin-left: 6px; padding: 1px 5px;
  background: var(--accent); color: var(--accent-ink);
  font: 800 11px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}

/* "↑ 3 new stories": offered when the reader is further down the page. */
.fresh-pill {
  /* Bottom of the screen, clear of a phone's home bar. */
  position: fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 60;
  padding: 9px 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  font: 800 12px var(--sans); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
  animation: pill-in .35s ease-out;
}
.fresh-pill[hidden] { display: none; }
.fresh-pill:hover { filter: brightness(1.08); }
@keyframes pill-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* A story that just arrived glows for a moment. */
@keyframes landed { 0% { background-color: color-mix(in srgb, var(--accent) 22%, transparent); } 100% { background-color: transparent; } }
.just-landed { animation: landed 5s ease-out; }

/* Connected to live updates. */
.live-badge {
  display: inline-flex; align-items: center; margin-left: 12px;
  font: 800 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.live-badge .live-dot { width: 7px; height: 7px; margin-right: 5px; }
@media (prefers-reduced-motion: reduce) { .fresh-pill, .just-landed { animation: none; } }

/* ── Responsive fixes (screen-size pass, Oct 20) ─────────── */
/* Huge monitors: stop the paper at 1920px wide and center it, so lines and gaps don't sprawl. */
.wrap { max-width: 1920px; margin-left: auto; margin-right: auto; }
@media (max-width: 768px) {
  /* Shrink the nameplate with the screen so "WhatsNewPaper" never breaks mid-word on small phones. */
  .title { font-size: min(46px, calc((100vw - 32px) / 9)); white-space: nowrap; }
  /* The story page's back link sets 36px after the phone tap-size rule; give it the full 44px. */
  .back { min-height: 44px; }
}
@media (max-width: 760px) {
  /* The lead Fresh Off the Press item lost its left padding, so the rail dot covered its time. */
  .fresh-item.featured { padding-left: 26px; }
}

/* ── About ───────────────────────────────────────────────── */
.about { padding: 24px 0 8px; font: 17px/1.6 "Source Serif 4", "Source Serif 4 Fallback", serif; }
.about p { margin: 0 0 12px; }
.about a { color: var(--ink); }
.about .btn { display: inline-block; font: 700 12px var(--sans); letter-spacing: .1em; padding: 10px 16px; }
.about .btn:hover { color: var(--paper); }
.about kbd { font-size: 12px; padding: 1px 5px; border-radius: 3px; }

.about-hero { max-width: 760px; margin: 18px 0 36px; }
.about-hero .kicker { margin: 0 0 6px; }
.about-hero h2 { font: 900 clamp(34px, 6vw, 54px)/1.05 "Playfair Display", "Playfair Display Fallback", serif; margin: 0 0 14px; letter-spacing: -.01em; }
.about-dek { font: italic 400 clamp(19px, 2.4vw, 23px)/1.45 "Source Serif 4", "Source Serif 4 Fallback", serif; color: var(--ink-soft); }

.about-body { display: grid; grid-template-columns: 190px minmax(0, 820px); gap: 56px; align-items: start; }
.about-toc { position: sticky; top: 20px; border-top: 3px solid var(--rule); padding-top: 12px; }
.about-toc-title { font: 800 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 8px !important; }
.about-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.about-toc li { counter-increment: toc; border-top: 1px solid var(--hairline); }
.about-toc a {
  display: flex; gap: 10px; padding: 9px 0; text-decoration: none;
  font: 600 14px/1.3 var(--sans); color: var(--ink-soft);
}
.about-toc a::before { content: counter(toc); font-weight: 800; color: var(--muted); min-width: 1ch; }
.about-toc a:hover, .about-toc a[aria-current] { color: var(--ink); }
.about-toc a[aria-current]::before { color: var(--accent); }

.about-section { border-top: 3px solid var(--rule); padding-top: 14px; margin: 0 0 48px; scroll-margin-top: 16px; }
.about-section h3 { font: 900 30px/1.15 "Playfair Display", "Playfair Display Fallback", serif; margin: 0 0 10px; }
.about-section h4 { font: 800 15px/1.3 var(--sans); margin: 0 0 6px; }
.about-lead { font-size: 18px; color: var(--ink-soft); max-width: 640px; }
.about-sub {
  margin: 30px 0 4px !important; padding-bottom: 6px; border-bottom: 1px solid var(--hairline);
  font: 800 12.5px var(--sans) !important; letter-spacing: .1em; text-transform: uppercase;
}

/* How it works: three numbered steps. */
.about-steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.about-steps li { padding: 16px 18px 6px; background: var(--paper-2); border-top: 3px solid var(--accent); }
.step-num { display: block; font: 900 40px/1 "Playfair Display", "Playfair Display Fallback", serif; color: var(--accent); margin-bottom: 10px; }
.about-steps p { font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }

/* What the labels mean: each label drawn the way it looks on the page. */
.label-grid { margin: 8px 0 0; display: grid; }
.label-card { display: grid; grid-template-columns: 250px 1fr; gap: 6px 22px; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.label-card:last-child { border-bottom: 0; }
.label-card dd { margin: 0; font-size: 16px; line-height: 1.55; }
.tag {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px;
  font: 700 12px/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-soft);
  border: 1px solid var(--hairline);
}
.tag-verified { color: var(--ink); border-color: var(--ink); white-space: nowrap; }
.tag-verified::before {
  content: "✓"; display: inline-grid; place-items: center; width: 16px; height: 16px; flex: none;
  background: var(--ink); color: var(--paper); border-radius: 50%; font-size: 10px; letter-spacing: 0;
}
.tag-pending { border: 1px dashed var(--ink-soft); }
.tag-unverified { color: var(--muted); border: 1px dotted var(--muted); }
.tag-breaking { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.tag-breaking .live-dot { background: currentColor; margin: 0; }
.tag-fresh { color: var(--accent); border-color: var(--accent); }
.tag-fresh .live-dot { margin: 0; }
.tag-plain { color: var(--ink); border-color: var(--ink); }
.tag-developing { color: var(--accent); border: 1.5px solid var(--accent); }
.tag-updated { color: var(--muted); font-weight: 600; }

/* Reading tips. */
.about-tips { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.about-tips li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--hairline); }
.about-tips p { margin: 0; font-size: 15.5px; line-height: 1.5; }
.tip-key {
  flex: none; display: inline-grid; grid-auto-flow: column; gap: 3px; place-items: center;
  min-width: 40px; height: 40px; padding: 0 6px; background: var(--ink); color: var(--paper);
  font: 700 18px/1 "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
}
.tip-aa span { font-size: 24px; }
.tip-key kbd { color: var(--paper); border-color: var(--paper); font-size: 12px; }

/* The newsroom: one card per bot, faces big enough to watch. */
.about-newsroom { margin: 16px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.about-newsroom li {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px;
  padding: 16px; border: 1px solid var(--hairline); border-top: 0; box-shadow: inset 0 3px 0 var(--ink);
}
.about-newsroom .bot-name { flex-direction: column; align-items: flex-start; gap: 10px; white-space: normal; font: 800 16px/1.2 var(--sans); }
.about-newsroom .bot-icon { width: 52px; height: 52px; }
/* Big faces on /about carry their job prop (public/bot-shapes.js); hover a card and the bot gets to work. */
.about-newsroom .bot-icon.av-big { width: 96px; height: 96px; margin: 0; color: var(--ink); }
.av-big .av-prop g, .av-big .av-prop path, .av-big .av-prop circle { transform-box: fill-box; }
.av-big .pa-pencil { transform-origin: 50% 0%; animation: pa-sway 4s ease-in-out infinite; }
.av-big .pa-glass { transform-origin: 100% 100%; animation: pa-sway 5s ease-in-out infinite; }
.av-big .pa-rocket { animation: pa-hover 2.4s ease-in-out infinite; }
.av-big .pa-flame { transform-origin: 50% 0%; animation: pa-flicker .5s ease-in-out infinite; }
.av-big .pa-bub { opacity: 0; animation: pa-bubble 3s ease-in infinite; } .av-big .pa-bub.b2 { animation-delay: 1s; } .av-big .pa-bub.b3 { animation-delay: 2s; }
.av-big .pa-flask { transform-origin: 50% 100%; }
.av-big .pa-tip { transform-origin: 50% 50%; animation: pa-pulse 2.4s ease-in-out infinite; } .av-big .pa-w1, .av-big .pa-w2 { opacity: .25; }
.av-big .pa-hat { transform-origin: 30% 100%; } .av-big .pa-card { transform-origin: 0% 50%; animation: pa-sway 4.5s ease-in-out infinite; }
.av-big .pa-trail { opacity: .3; }
.about-newsroom li:hover .pa-pencil { animation: pa-scribble .38s ease-in-out infinite; }
/* At work (bylines, "Being verified"): the tool does the job. Margot's own pencil replaces the generic one. */
.av-margot .av-pen { display: none; }
.is-writing .pa-pencil, .is-checking .pa-pencil { animation: pa-scribble .38s ease-in-out infinite; }
.is-writing .pa-glass, .is-checking .pa-glass { animation: pa-scan 2.2s ease-in-out infinite; }
.is-writing .pa-flame { animation: pa-roar .18s ease-in-out infinite; }
.is-writing .pa-bub { animation-duration: 1.1s; } .is-writing .pa-flask { animation: pa-swirl 1.2s ease-in-out infinite; }
.is-writing .pa-w1 { animation: pa-ping 1s ease-out infinite; } .is-writing .pa-w2 { animation: pa-ping 1s ease-out .3s infinite; }
.is-writing .pa-hat { animation: pa-tip 3s ease-in-out infinite; }

.about-newsroom li:hover .pa-glass { animation: pa-scan 2.2s ease-in-out infinite; }
.about-newsroom li:hover .pa-flame { animation: pa-roar .18s ease-in-out infinite; }
.about-newsroom li:hover .pa-bub { animation-duration: 1.1s; }
.about-newsroom li:hover .pa-flask { animation: pa-swirl 1.2s ease-in-out infinite; }
.about-newsroom li:hover .pa-w1 { animation: pa-ping 1s ease-out infinite; } .about-newsroom li:hover .pa-w2 { animation: pa-ping 1s ease-out .3s infinite; }
.about-newsroom li:hover .pa-hat { animation: pa-tip 3s ease-in-out infinite; }
@keyframes pa-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes pa-scribble { 0% { transform: translate(0, 0) rotate(-7deg); } 25% { transform: translate(4px, 3px) rotate(5deg); } 50% { transform: translate(-3px, 5px) rotate(-5deg); } 75% { transform: translate(3px, 1px) rotate(7deg); } 100% { transform: translate(0, 0) rotate(-7deg); } }
@keyframes pa-scan { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-22px, -14px) rotate(-6deg); } 50% { transform: translate(-6px, -26px) rotate(3deg); } 75% { transform: translate(10px, -10px) rotate(6deg); } }
@keyframes pa-hover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pa-flicker { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.75); } }
@keyframes pa-roar { 0%, 100% { transform: scaleY(1.5) scaleX(1.1); } 50% { transform: scaleY(1.15) scaleX(.9); } }
@keyframes pa-bubble { 0% { transform: translateY(8px) scale(.4); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-36px) scale(1.1); opacity: 0; } }
@keyframes pa-swirl { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes pa-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes pa-ping { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes pa-tip { 0%, 60%, 100% { transform: translateY(0) rotate(0); } 75% { transform: translateY(-14px) rotate(-8deg); } 88% { transform: translateY(-4px) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .av-big .av-prop * { animation: none !important; } }
.about-newsroom .bot-role { text-align: left; font: 500 13.5px/1.4 var(--sans); }
.bot-label { display: block; font-weight: 800; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }

/* Credits: the licences fold away until asked for. */
.credit { padding: 4px 0 18px; }
.credit + .credit { border-top: 1px solid var(--hairline); padding-top: 18px; }
.credit p { font-size: 16px; }
.credit p a { text-decoration: underline; text-underline-offset: 3px; }
.license-box summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer;
  font: 700 13px var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
}
.license-box summary::marker { content: ""; }
.license-box summary::-webkit-details-marker { display: none; }
.license-box summary::before { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid currentColor; font-size: 13px; line-height: 1; }
.license-box[open] summary::before { content: "−"; }
.license-box summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.about .license { font: 12px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; background: var(--paper-2); padding: 14px; overflow-x: auto; margin: 8px 0 0; }
.about-fine { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.about-fine p { font: 500 13px var(--sans); color: var(--muted); margin: 0; }
.about-home { margin-top: 8px; }

@media (max-width: 960px) {
  .about-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .about-toc { position: static; margin-bottom: 36px; }
  .about-toc ol { display: flex; flex-wrap: wrap; gap: 8px; }
  .about-toc li { border: 0; }
  .about-toc a { padding: 8px 12px; border: 1px solid var(--hairline); min-height: 44px; align-items: center; }
  .about-newsroom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .about-hero { margin: 8px 0 26px; }
  .about-section h3 { font-size: 26px; }
  .about-steps, .about-tips { grid-template-columns: minmax(0, 1fr); }
  .about-steps li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: 14px 16px 4px; }
  .step-num { grid-row: span 2; font-size: 34px; margin: 0; min-width: 26px; text-align: center; }
  .label-card { grid-template-columns: minmax(0, 1fr); padding: 14px 0; }
  .about-newsroom li { padding: 14px 12px; }
  .about-newsroom .bot-icon { width: 44px; height: 44px; }
}
footer a { color: inherit; }

/* ── Phone layout ────────────────────────────────────────── */
/* One column, read top to bottom: tools, nameplate, sections, breaking news,
   then the paper. Long comparisons swipe sideways instead of stacking. */
@media (max-width: 768px) {
  .wrap { display: flex; flex-direction: column; }
  .wrap > .utility { order: 1; }
  .wrap > .masthead { order: 2; }
  .wrap > nav.sections { order: 3; }
  .wrap > #breaking { order: 4; }
  .wrap > main { order: 5; }
  .wrap > footer { order: 6; }

  /* Tools: one slim row. */
  .utility { padding: 6px 0 2px; }
  .search input { border-bottom-color: transparent; }
  .search input:focus { border-bottom-color: var(--hairline); }

  /* Nameplate: name, motto, date. The volume number is for big screens. */
  /* A little air under the tools row, so the tall nameplate letters clear the buttons. */
  .masthead { padding-top: 8px; }
  .title { padding-bottom: 6px; }
  .dateline { gap: 2px; padding: 6px 0; }
  .dateline #volume { display: none; }

  /* Breaking: a slim card under the sections, two lines of headline at most. */
  #breaking:not(:empty) { margin: 12px 0 4px; }
  #breaking .breaking-bar { margin: 0; }
  .breaking-title { -webkit-line-clamp: 2; line-clamp: 2; font-size: 17px; }

  /* The wire ticker repeats Fresh Off the Press; phones skip it. */
  .ticker { display: none; }
  main { padding-top: 14px; }

  /* Front page lead: headline, summary and its outlets. The full comparison is
     one tap away on the story page. */
  .lead .lead-compare { display: none; }

  /* Story page: each outlet's version is a card you swipe through. */
  .compare .outlets {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    border-left: 0; gap: 10px; padding-bottom: 6px; scrollbar-width: thin;
  }
  .compare .outlet { scroll-snap-align: start; border: 1px solid var(--rule); }

  /* Fresh list: one quiet line of labels (breaking, age, updated) above each headline. */
  .fresh-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
  .fresh-list li > a, .fresh-list li > .kicker { flex: 1 0 100%; }
  .fresh-list .breaking-flag {
    margin: 0; padding: 0; background: none; color: var(--accent); font-size: 11.5px; letter-spacing: .12em;
  }
  .fresh-list .story-age + .story-clock { display: none; }

  /* Outlet rows: icon-only chips sit tight; named chips keep their spacing. */
  .source-row { gap: 4px 12px; }
  .source-row:has(.icon-only) { column-gap: 0; }

  /* Verified / Unverified: the tap target stays 44px tall, the dotted line hugs the words. */
  .unverified summary, .verified summary.verified-mark {
    border-bottom: 0; text-decoration: underline dotted; text-underline-offset: 4px; text-decoration-color: var(--muted);
  }

  /* About: the license keeps its own line breaks and scrolls sideways if it must. */

  /* "Being verified" on a story: writer and editor stack, no dangling dot. */
  .review-line .review-sep { display: none; }

  /* Footer: no keyboard hints on a phone. */
  footer { flex-direction: column; align-items: flex-start; gap: 6px; }
  footer .keys { display: none; }
}
@media (hover: none) { footer .keys { display: none; } }

/* ── Easier to use ───────────────────────────────────────── */
/* Keyboard and screen-reader readers can jump past the masthead. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px;
  background: var(--ink); color: var(--paper); font: 700 14px var(--sans);
}
.skip-link:focus { top: 12px; }

/* "How it works": always one tap away. */
.help-link {
  margin-right: 10px; font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); border-bottom: 1px solid var(--hairline); padding: 2px 0;
}
.help-link:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Search reads as a search box: an icon and a plain-language prompt. */
.search { position: relative; display: inline-flex; align-items: center; }
.search .search-icon { position: absolute; left: 2px; color: var(--muted); pointer-events: none; }
.search input { font: 15px var(--sans); padding: 6px 4px 6px 24px; width: 200px; min-height: 36px; }
.search input::placeholder { text-transform: none; letter-spacing: 0; font-size: 15px; }

/* Larger text: the whole page one step up. */
.text-toggle {
  flex: none; height: 40px; min-width: 40px; padding: 0 6px; cursor: pointer;
  background: transparent; border: 0; color: var(--ink-soft);
  font: 700 13px/1 "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
}
.text-toggle span { font-size: 19px; }
.text-toggle:hover { color: var(--ink); }
.text-toggle[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
body.big-text .wrap, body.big-text .breaking-alert, body.big-text .fresh-pill { zoom: 1.15; }

/* Status labels: verified looks different from unverified at a glance, and
   both are big enough to tap. */
.verified summary.verified-mark { color: var(--ink); padding: 6px 0; }
.verified summary.verified-mark::before {
  content: "✓"; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px;
  background: var(--ink); color: var(--paper); border-radius: 50%; font-size: 10px; letter-spacing: 0;
}
.unverified summary { padding: 6px 0; }
.source-more { color: var(--muted); }

/* The front page's "New here?" card. */
html.intro-seen .intro { display: none; }
.intro {
  margin: 0 0 28px; padding: 18px 22px; border: 1px solid var(--rule); border-left-width: 6px;
  background: var(--paper-2);
}
.intro-title { font: 900 22px/1.2 "Playfair Display", "Playfair Display Fallback", serif; margin-bottom: 6px; }
.intro-lead { font-size: 17px; line-height: 1.5; max-width: 52em; }
.intro-keys { list-style: none; margin: 12px 0 4px; display: grid; gap: 8px; font-size: 15.5px; line-height: 1.45; }
.intro-tag {
  display: inline-block; margin-right: 6px; padding: 2px 8px; border: 1px dotted var(--muted);
  font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
}
.intro-tag.is-verified { border: 1px solid var(--ink); color: var(--ink); }
.intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 12px; font: 600 14px var(--sans); }
.intro-actions a { text-decoration: underline; text-underline-offset: 3px; }
.intro-close { margin-left: auto; }

@media (max-width: 768px) {
  .help-link { display: none; }
  .search input { width: 100%; }
  .intro { padding: 14px 16px; }
  .intro-close { margin-left: 0; }
}

/* ── Developing and Following ────────────────────────────── */
/* Developing: the banner is down but the story is still moving. Red outline,
   no fill, so it reads as one step calmer than Breaking. */
.developing-flag {
  display: inline-flex; align-items: center; margin: 0 8px 6px 0; padding: 2px 8px;
  border: 1.5px solid var(--accent); color: var(--accent);
  font: 900 12px var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.reader-top .developing-flag { margin-bottom: 0; }
.updates.is-developing { border-left-width: 5px; }

/* The front page's "Still developing" and "Following" band. */
.ongoing { display: grid; gap: 0 32px; margin: -10px 0 30px; padding: 14px 0 6px; border-bottom: 1px solid var(--rule); }
.ongoing.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ongoing-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 900 12.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.ongoing-head-link { color: inherit; text-decoration: none; }
.ongoing-head-link::after { content: " →"; }
.ongoing-head-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ongoing-list { list-style: none; margin: 0; padding: 0; }
.ongoing-list li { display: grid; gap: 2px; padding: 9px 0; border-top: 1px solid var(--hairline); }
.ongoing-list a { color: var(--ink); text-decoration: none; }
.ongoing-title { font: 700 17px/1.3 "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; }
.ongoing-list a:hover .ongoing-title { text-decoration: underline; text-underline-offset: 3px; }
.ongoing-latest { font: 15px/1.4 "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; color: var(--ink-soft); }
.ongoing-meta { font: 600 12.5px var(--sans); color: var(--muted); }

/* On a story page: the Following page it belongs to. */
.following-link {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center;
  margin: 14px 0 18px; padding: 12px 16px; border: 1px solid var(--rule); border-left-width: 5px;
  color: var(--ink); text-decoration: none;
}
.following-link-kicker { grid-column: 1; font: 800 11.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.following-link-title { grid-column: 1; font: 900 20px/1.2 "Playfair Display", "Playfair Display Fallback", serif; }
.following-link-go { grid-column: 2; grid-row: 1 / span 2; font: 700 13px var(--sans); white-space: nowrap; }
.following-link:hover .following-link-go { text-decoration: underline; text-underline-offset: 3px; }

/* /following/<slug> */
.following-page { padding: 24px 0 8px; }
.following-head { max-width: 820px; margin: 18px 0 22px; }
.following-head .kicker { margin: 0 0 6px; }
.following-head h1 { font: 900 clamp(34px, 5vw, 54px)/1.05 "Playfair Display", "Playfair Display Fallback", serif; letter-spacing: -.01em; margin: 0 0 10px; }
.following-head.is-closed .kicker { color: var(--muted); }
.following-status { font: 600 14px var(--sans); color: var(--muted); margin: 0; }
.following-correction {
  display: grid; grid-template-columns: auto 1fr auto; gap: 6px 14px; align-items: baseline; max-width: 820px;
  margin: 0 0 26px; padding: 12px 16px; background: var(--paper-2); border-left: 5px solid var(--ink);
}
.following-correction p { margin: 0; font: 16px/1.5 "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; }
.following-correction time { font: 600 12.5px var(--sans); color: var(--muted); white-space: nowrap; }
.correction-tag { display: inline-block; padding: 2px 7px; background: var(--ink); color: var(--paper); font: 800 11.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.following-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.following-grid h2 { font: 900 24px/1.2 "Playfair Display", "Playfair Display Fallback", serif; margin: 0 0 10px; padding-top: 12px; border-top: 3px solid var(--rule); }
.following-summary { margin-bottom: 30px; }
.following-summary p { font: 18px/1.6 "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; margin: 0; }
.timeline { list-style: none; margin: 0; padding: 0; }
.moment { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hairline); position: relative; }
.moment time { font: 700 13px/1.5 var(--sans); color: var(--ink-soft); }
.moment-body p { margin: 0; font: 16.5px/1.5 "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; }
.moment-body .moment-source { margin-top: 4px; font: 600 13px var(--sans); color: var(--muted); }
.moment-source a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.moment.is-correction .correction-tag { margin-bottom: 6px; }
.following-stories ol { list-style: none; margin: 0; padding: 0; }
.following-stories li { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.following-stories a { display: block; color: var(--ink); text-decoration: none; }
.fs-title { font: 700 17px/1.3 "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; }
.following-stories a:hover .fs-title { text-decoration: underline; text-underline-offset: 3px; }
.fs-meta { display: block; margin-top: 3px; font: 600 12.5px var(--sans); color: var(--muted); }
.following-stories .count { font: 700 14px var(--sans); color: var(--muted); vertical-align: middle; }
.empty-note { font: 15px var(--sans); color: var(--muted); }

/* /following */
.following-index { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.following-index li { padding: 16px 18px; border: 1px solid var(--hairline); box-shadow: inset 0 3px 0 var(--accent); }
.following-index.is-closed li { box-shadow: inset 0 3px 0 var(--muted); }
.following-index a { color: var(--ink); text-decoration: none; }
.fi-title { font: 900 22px/1.2 "Playfair Display", "Playfair Display Fallback", serif; }
.following-index a:hover .fi-title { text-decoration: underline; text-underline-offset: 3px; }
.following-index p { margin: 6px 0; font: 15.5px/1.5 "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; color: var(--ink-soft); }
.fi-meta { font: 600 12.5px var(--sans); color: var(--muted); }
.following-index-head { font: 900 22px "Playfair Display", "Playfair Display Fallback", serif; margin: 10px 0 12px; padding-top: 12px; border-top: 3px solid var(--rule); }

@media (max-width: 900px) {
  .following-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .following-stories { margin-top: 20px; }
}
@media (max-width: 760px) {
  .ongoing.two { grid-template-columns: minmax(0, 1fr); }
  .ongoing { margin-top: 0; }
  .ongoing-block + .ongoing-block { margin-top: 14px; }
  .following-link { grid-template-columns: 1fr; }
  .following-link-go { grid-column: 1; grid-row: auto; margin-top: 4px; }
  .following-correction { grid-template-columns: 1fr; }
  .moment { grid-template-columns: 1fr; gap: 4px; }
  .following-index { grid-template-columns: minmax(0, 1fr); }
}

/* ── Livestreams and recaps ──────────────────────────────── */
/* "Watch live" on a story page: every place a stream plays, its status, and
   once it ends, the recording and key moments. Links only; the YouTube player
   loads after a tap. Live is red, upcoming is ink, a recap is a plain section. */
.watch { margin: 18px 0 24px; padding: 14px 16px 12px; border: 1px solid var(--rule); border-left-width: 5px; }
.watch.is-live { border-left-color: var(--accent); }
.watch.is-ended { margin-top: 30px; border-width: 3px 0 1px; padding: 12px 0 10px; }
.watch-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.watch-status {
  display: inline-flex; align-items: center; padding: 3px 9px; border: 1.5px solid var(--ink); color: var(--ink);
  font: 900 12px var(--sans); letter-spacing: .12em; text-transform: uppercase;
}
.watch-status.is-live { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.watch-status.is-live .live-dot { width: 7px; height: 7px; margin-right: 6px; background: currentColor; }
.watch-status.is-ended { border-style: dotted; color: var(--ink-soft); border-color: var(--ink-soft); }
.watch-when { font: 700 13px var(--sans); color: var(--ink); }
.watch-count { margin-left: auto; font: 600 12.5px var(--sans); color: var(--muted); }
.watch-head { font: 900 26px/1.15 "Playfair Display", "Playfair Display Fallback", serif; margin: 10px 0 2px; }
.watch-title { font: 17px/1.45 "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; color: var(--ink-soft); margin: 0 0 10px; }

/* The player: a plain button until the reader taps it. */
.watch-player { margin: 10px 0 12px; }
.watch-play {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 10px 14px;
  background: var(--ink); color: var(--paper); border: 0; cursor: pointer; text-align: left;
  font: 800 15px var(--sans);
}
.watch-play:hover .watch-play-text { text-decoration: underline; text-underline-offset: 3px; }
.watch-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.watch-play-icon {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
}
.watch-play-icon::before { content: ""; margin-left: 3px; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; }
.watch-play-text small { display: block; margin-top: 2px; font: 500 12.5px var(--sans); opacity: .78; }
.watch-player.is-playing { aspect-ratio: 16 / 9; background: #000; }
.watch-player iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Every place to watch, two to a row on wide screens. */
.watch-places { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.watch-places li { border-top: 1px solid var(--hairline); }
.watch-place { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 2px; color: var(--ink); text-decoration: none; }
.watch-place .source-mark { flex: none; }
.watch-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 7px; min-width: 0; }
.watch-source { font: 700 15px var(--sans); }
.watch-platform { font: 500 13.5px var(--sans); color: var(--muted); }
.watch-official {
  flex: none; padding: 1px 6px; border: 1px solid var(--ink); color: var(--ink);
  font: 800 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.watch-go { margin-left: auto; color: var(--muted); font: 700 14px var(--sans); }
.watch-place:hover .watch-source { text-decoration: underline; text-underline-offset: 3px; }

/* Key moments: a time that jumps into the recording, then what happened, cited. */
.watch-sub { font: 800 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 18px 0 4px; }
.key-moments { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.key-moment { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.key-time { font: 700 14px var(--sans); font-variant-numeric: tabular-nums; color: var(--ink); }
a.key-time { text-decoration: underline; text-underline-offset: 3px; }
a.key-time::before { content: "▶"; display: inline-block; margin-right: 5px; font-size: 9px; color: var(--accent); vertical-align: 1px; }
.key-moment p { margin: 0; font: 16.5px/1.5 "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; }
.watch-note { margin: 10px 0 0; font: 500 12.5px/1.45 var(--sans); color: var(--muted); }

/* "Live" on cards, beside Breaking or Developing, and in the breaking banner. */
.live-flag {
  display: inline-flex; align-items: center; margin: 0 8px 6px 0; padding: 3px 9px 3px 7px;
  background: var(--ink); color: var(--paper);
  font: 900 12px var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.live-flag .live-dot { width: 7px; height: 7px; margin-right: 6px; background: var(--accent); }
.reader-top .live-flag { margin-bottom: 0; }
.breaking-live {
  display: inline-flex; align-items: center; justify-self: start; flex: none; padding: 2px 9px 2px 7px;
  background: var(--accent-ink); color: var(--accent);
  font: 900 11.5px var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.breaking-live .live-dot { width: 7px; height: 7px; margin-right: 6px; background: currentColor; }

/* The About page's glossary tag. */
.tag-live { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tag-live .live-dot { background: var(--accent); margin: 0; }

/* A recording cited in an article's Sources list, with the moments it cites. */
.cited-body { display: block; min-width: 0; }
.cited-media { margin-right: 4px; font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.cited-moments { display: block; margin-top: 2px; font: 600 13px var(--sans); color: var(--muted); }
.cited-moments a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
  .watch { padding: 12px 12px 10px; }
  .watch.is-ended { padding: 12px 0 10px; }
  .watch-head { font-size: 23px; }
  .watch-places { grid-template-columns: minmax(0, 1fr); }
  .key-moment { grid-template-columns: 1fr; gap: 0; padding: 4px 0 10px; }
  a.key-time { display: inline-flex; align-items: center; min-height: 44px; }
  .cited-moments a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* The story page's Watch list: cited livestreams and recordings, apart from the outlets. */
.watch-list a { align-items: flex-start; }
.watch-list .watch-play {
  flex: 0 0 18px; align-self: flex-start; display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: 18px; height: 18px; min-height: 0; margin-top: 1px; padding: 0 0 0 1px;
  background: var(--ink); color: var(--paper); font-size: 8px; line-height: 1;
}
.watch-name { display: grid; gap: 1px; flex: 1; }
.watch-name small { font: 500 12px var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }

/* ── Side by side: Summary / In depth ─────────────────────────── */
/* Both versions are in the page; the switch shows one. In depth is our own
   breakdown of each article and a big link to read it at the outlet. */
.sbs.depth-summary .sbs-deep, .sbs.depth-deep .sbs-summary { display: none; }
.sbs-switch { display: inline-flex; gap: 0; }
/* The two switches wrap onto two lines when a phone is too narrow for both. */
.sbs-controls { flex-wrap: wrap; row-gap: 8px; }
.sbs-switch + .sbs-switch { margin-left: 12px; }
.sbs-depth-note { margin: 0 0 12px; font: 15px/1.5 "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; color: var(--ink-soft); }
.sbs-points h4 { margin: 10px 0 4px; font: 800 11.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sbs-points ul { margin: 0 0 8px; padding-left: 18px; }
.sbs-points li { margin: 0 0 6px; font: 15.5px/1.45 "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif; color: var(--ink); }
.sbs-deep .note { margin: 6px 0; }
.sbs-read { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; font: 700 13px var(--sans); letter-spacing: .02em; text-transform: none; }
@media (max-width: 760px) {
  .sbs-switch + .sbs-switch { margin-left: 0; }
  .sbs-read { width: 100%; justify-content: center; }
}

/* ── Alerts desk (/alerts) and the alert strip ───────────── */
:root { --sev-extreme: #b3001b; --sev-severe: #c2410c; --sev-moderate: #a16207; --sev-minor: #66625c; }
body.night { --sev-extreme: #ff5c6c; --sev-severe: #ff8a3d; --sev-moderate: #f2b84b; --sev-minor: #8d897f; }
.sev-extreme { --sev: var(--sev-extreme); }
.sev-severe { --sev: var(--sev-severe); }
.sev-moderate { --sev: var(--sev-moderate); }
.sev-minor, .sev-unknown { --sev: var(--sev-minor); }
.al-icon { flex: none; }

nav.sections .nav-alerts { color: var(--ink); font-weight: 800; display: inline-flex; align-items: center; gap: 6px; }
nav.sections .nav-count {
  display: inline-block; min-width: 18px; padding: 1px 5px; border-radius: 9px; text-align: center;
  background: var(--sev-extreme); color: #fff; font: 800 10.5px/1.4 var(--sans); letter-spacing: 0;
}

/* The strip: under the breaking bar, on every page. */
.alert-strip {
  display: flex; align-items: stretch; gap: 0; margin: 6px 0 0;
  border: 1.5px solid var(--ink); background: var(--paper);
  font-family: var(--sans);
}
.alert-strip-tag {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px; flex: none;
  background: var(--ink); color: var(--paper); text-decoration: none;
  font: 900 12px/1.15 var(--sans); letter-spacing: .12em; text-transform: uppercase;
}
.alert-strip-tag em { display: block; font-style: normal; color: var(--sev-extreme); letter-spacing: .08em; margin-top: 2px; }
body.night .alert-strip-tag em { color: #b3001b; }
.alert-strip-count { font: 900 26px/1 "Playfair Display", "Playfair Display Fallback", serif; letter-spacing: 0; }
.alert-strip-list { list-style: none; display: flex; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.alert-strip-list::-webkit-scrollbar { display: none; }
.alert-strip-list li { flex: 1 1 0; min-width: 210px; border-right: 1px solid var(--hairline); }
.alert-chip {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 1px 8px; align-items: center;
  height: 100%; padding: 8px 12px; text-decoration: none; color: var(--ink);
  border-top: 4px solid var(--sev);
}
.alert-chip .al-icon { grid-column: 1; grid-row: 1 / span 2; color: var(--sev); }
.alert-chip-agency { grid-column: 2; grid-row: 1; font: 900 10.5px var(--sans); letter-spacing: .12em; color: var(--sev); }
.alert-chip-age { grid-column: 3; grid-row: 1; font: 600 11px var(--sans); color: var(--muted); text-align: right; white-space: nowrap; }
.alert-chip-event { grid-column: 2 / span 2; grid-row: 2; font: 700 14px/1.25 "Playfair Display", "Playfair Display Fallback", serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alert-chip:hover .alert-chip-event { text-decoration: underline; text-decoration-color: var(--sev); text-underline-offset: 3px; }
.alert-strip-all {
  display: flex; align-items: center; padding: 0 14px; flex: none; text-decoration: none; color: var(--ink);
  font: 900 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.alert-strip-all:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 720px) {
  .alert-strip { flex-wrap: wrap; }
  .alert-strip-tag { flex: 1 1 auto; }
  .alert-strip-list { order: 3; flex-basis: 100%; border-top: 1px solid var(--hairline); }
  .alert-strip-list li { min-width: 72%; }
  .alert-strip-all { border-left: 1px solid var(--hairline); }
}

/* The page. */
.alerts-page { --gap: 28px; }
.al-head { padding: 6px 0 22px; border-bottom: 3px double var(--rule); }
.al-head .kicker { display: flex; align-items: center; }
.al-head h1 { font: 900 clamp(34px, 5.2vw, 64px)/1.02 "Playfair Display", "Playfair Display Fallback", serif; letter-spacing: -.015em; margin: 10px 0 12px; }
.al-head-note { max-width: 62ch; font-size: 18px; color: var(--ink-soft); }
.al-mock {
  display: inline-block; margin-top: 12px; padding: 4px 10px; border: 1.5px dashed var(--muted);
  font: 800 11.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.al-tally { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 22px; border-top: 1px solid var(--rule); }
.al-tally > div { padding: 12px 14px 4px; border-right: 1px solid var(--hairline); border-top: 5px solid var(--sev, transparent); margin-top: -1px; }
.al-tally > div:last-child { border-right: 0; }
.al-tally dt { font: 800 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.al-tally dd { font: 900 40px/1.1 "Playfair Display", "Playfair Display Fallback", serif; color: var(--sev, var(--ink)); }
.al-tally-act { --sev: var(--ink); background: var(--ink); color: var(--paper); }
.al-tally-act dt { color: var(--paper); opacity: .75; }
.al-tally-act dd { color: var(--paper); }

.al-section-title {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--rule);
  font: 900 13px var(--sans); letter-spacing: .14em; text-transform: uppercase;
}

.al-breaking { padding: 24px 0 8px; }
.al-breaking-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.al-breaking-card a { display: block; height: 100%; padding: 16px 18px 18px; background: var(--accent); color: var(--accent-ink); text-decoration: none; }
.al-breaking-card a:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
.al-breaking-tag { display: flex; align-items: center; font: 900 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.al-breaking-tag .live-dot { background: currentColor; }
.al-breaking-card h3 { font: 900 clamp(22px, 2.4vw, 30px)/1.1 "Playfair Display", "Playfair Display Fallback", serif; margin: 10px 0 8px; }
.al-breaking-sum { font-size: 16px; line-height: 1.45; opacity: .95; }
.al-breaking-card .al-meta { color: inherit; opacity: .85; margin-top: 10px; }
.al-developing { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 14px; }
.al-developing a { color: var(--ink); text-decoration: none; font: 700 16px/1.3 "Playfair Display", "Playfair Display Fallback", serif; }
.al-developing a:hover { text-decoration: underline; }
.al-developing .developing-flag { margin: 0 8px 0 0; font-size: 10.5px; padding: 1px 6px; vertical-align: 2px; }

.al-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: var(--gap); padding-top: 24px; align-items: start; }
.al-side { position: sticky; top: 64px; display: grid; gap: 26px; }
.al-map { display: block; width: 100%; height: auto; }
.al-state { fill: var(--paper-2); stroke: var(--paper); stroke-width: 1; }
.al-state[class*="sev-"] { fill: var(--sev); cursor: pointer; }
.al-state.sev-severe { fill-opacity: .85; }
.al-state.sev-moderate { fill-opacity: .7; }
.al-state[data-state]:hover, .al-state[data-state]:focus-visible { stroke: var(--ink); stroke-width: 2.5; outline: none; }
.al-state.is-selected { stroke: var(--ink); stroke-width: 3.5; }
.al-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font: 700 11.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.al-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; background: var(--sev); vertical-align: -1px; }
.al-hint { margin-top: 8px; font: 500 13px var(--sans); color: var(--muted); }
.al-clear {
  margin-top: 10px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer;
  font: 700 13px var(--sans); text-decoration: underline; text-underline-offset: 3px;
}

.al-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.al-filters-stack { flex-direction: column; gap: 0; }
.al-filter {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; cursor: pointer;
  border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  font: 800 12px var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.al-filter span { font-weight: 700; color: var(--muted); }
.al-filter:hover { background: var(--paper-2); }
.al-filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.al-filter[aria-pressed="true"] span { color: inherit; opacity: .7; }
.al-filter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.al-filters-stack .al-filter {
  justify-content: space-between; border-width: 0 0 1px; border-color: var(--hairline);
  text-transform: none; letter-spacing: 0; font: 600 15px var(--sans); padding: 10px 6px;
}
.al-filters-stack .al-filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.al-main > .al-filters { padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--rule); }
.al-group { padding-top: 18px; }
.al-group-title {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  font: 900 13px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sev);
}
.al-group-title::after { content: ""; flex: 1; height: 2px; background: var(--sev); }
.al-group-title span { order: 2; color: var(--muted); letter-spacing: 0; }

.al-card {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); margin-bottom: 14px;
  border: 1px solid var(--hairline); border-left: 0; background: var(--paper);
  scroll-margin-top: 64px;
}
.al-card-rail { display: flex; justify-content: center; padding-top: 16px; background: var(--sev); color: var(--paper); }
.al-card-rail .al-icon { width: 22px; height: 22px; }
.al-card-body { padding: 14px 18px 14px; }
.al-card.is-urgent { border-color: var(--sev); box-shadow: inset 0 0 0 1px var(--sev); }
.al-card.is-target { animation: al-flash 1.8s ease-out 1; }
@keyframes al-flash { 0%, 30% { background: color-mix(in srgb, var(--sev) 18%, var(--paper)); } 100% { background: var(--paper); } }
.al-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 800 11.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.al-sev { padding: 2px 7px; background: var(--sev); color: var(--paper); }
.al-agency { padding: 1px 6px; border: 1.5px solid currentColor; }
.al-basis { padding: 1px 6px; border: 1.5px dashed currentColor; opacity: .85; }
.al-event { color: var(--sev); }
.al-mag { font: 900 13px var(--sans); letter-spacing: 0; }
.al-card h3 { font: 800 clamp(19px, 1.9vw, 23px)/1.2 "Playfair Display", "Playfair Display Fallback", serif; margin: 8px 0 6px; }
.al-meta { font: 600 12.5px/1.45 var(--sans); color: var(--muted); }
.al-desc { margin-top: 10px; font-size: 16.5px; line-height: 1.5; color: var(--ink-soft); }
.al-do { margin-top: 12px; padding: 10px 14px; border-left: 4px solid var(--sev); background: var(--paper-2); }
.al-do strong { font: 900 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sev); }
.al-do p { margin-top: 3px; font: 600 16px/1.45 var(--sans); }
.is-urgent .al-do { background: var(--sev); color: var(--paper); border-left-color: var(--ink); }
.is-urgent .al-do strong { color: inherit; }
.al-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 12px; font: 700 12.5px var(--sans); }
.al-credit { color: var(--muted); font-weight: 600; flex: 1 1 auto; }
.al-official, .al-story { color: var(--ink); text-decoration: none; letter-spacing: .06em; text-transform: uppercase; font-weight: 800; }
.al-official:hover, .al-story:hover { color: var(--sev); }
.al-story { color: var(--accent); }
.al-sources { margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--hairline); font: 500 13px/1.5 var(--sans); color: var(--muted); }

@media (max-width: 880px) {
  .al-layout { grid-template-columns: 1fr; }
  .al-side { position: static; grid-template-columns: 1fr; }
  .al-filters-stack { flex-direction: row; gap: 8px; }
  .al-filters-stack .al-filter { border-width: 1.5px; padding: 6px 10px; font-size: 13.5px; }
  .al-tally { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .al-tally > div:nth-child(n+4) { border-top-width: 1px; }
}
@media (max-width: 520px) {
  .al-tally dd { font-size: 30px; }
  .al-card { grid-template-columns: 8px minmax(0, 1fr); }
  .al-card-rail .al-icon { display: none; }
  .al-card-body { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) { .al-card.is-target { animation: none; } }

/* The map panel (globe: alerts-globe.js, cobe; U.S.: alerts-usmap.js).
   Follows the paper: day is off-white, night is black. The --g-* names keep
   the map's own shades (land, lines, shadows) in one place per theme. */
.al-globe {
  --g-ink: var(--ink); --g-soft: var(--ink-soft); --g-muted: var(--muted); --g-paper: var(--paper);
  --g-land: #ddd7c9; --g-land-alert: #cfc7b4; --g-land-hover: #bdb4a0;
  --g-line: rgba(17, 17, 16, .16); --g-shadow: rgba(40, 32, 20, .22); --g-tag: rgba(243, 239, 230, .9);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 12px 36px;
  margin-top: 24px; padding: 28px 32px; background: var(--paper-2); color: var(--g-ink);
  border-top: 5px solid var(--sev-extreme);
}
body.night .al-globe {
  --g-land: #2a2a27; --g-land-alert: #34342f; --g-land-hover: #46463f;
  --g-line: rgba(238, 234, 224, .2); --g-shadow: rgba(0, 0, 0, .55); --g-tag: rgba(14, 14, 13, .84);
  background: var(--paper);
}
.al-globe-stage { position: relative; width: 100%; max-width: 560px; justify-self: center; }
.al-globe-stage canvas {
  display: block; width: 100%; aspect-ratio: 1; cursor: grab; touch-action: pan-y;
  opacity: 0; transition: opacity .8s ease;
}
.al-globe-stage canvas.is-ready { opacity: 1; }
.al-globe-stage canvas.is-dragging { cursor: grabbing; }
.al-globe-hint {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
  font: 700 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--g-muted);
  white-space: nowrap;
}
.al-globe.no-globe .al-globe-stage { display: none; }
.al-globe.no-globe { grid-template-columns: 1fr; }
.al-globe-kicker { display: flex; align-items: center; font: 900 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sev-extreme); }
.al-globe-kicker .live-dot { background: var(--sev-extreme); }
.al-globe-focus { min-height: 250px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--g-line); }
.al-globe-count { font: 700 12px var(--sans); color: var(--g-muted); margin-bottom: 10px; letter-spacing: .06em; }
.al-globe .al-sev { color: var(--g-paper); }
.al-globe .al-agency { color: var(--g-ink); }
.al-globe-headline { font: 900 clamp(24px, 2.6vw, 34px)/1.12 "Playfair Display", "Playfair Display Fallback", serif; margin: 10px 0 8px; }
.al-globe .al-meta { color: var(--g-soft); }
.al-globe-do { margin-top: 14px; padding: 10px 14px; background: var(--sev); color: var(--g-paper); font: 600 15.5px/1.45 var(--sans); }
.al-globe-do strong { display: block; font: 900 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.al-globe-desc { margin: 10px 0 0; max-height: 9.5em; overflow-y: auto; font-size: 14px; line-height: 1.45; color: var(--g-ink); white-space: pre-line; }
.al-globe-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; font: 700 12.5px var(--sans); }
.al-resolved { margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid var(--sev-minor); background: var(--paper-2); font-size: 14px; }
.al-resolved strong { margin-right: 6px; font: 800 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.al-card.is-small h3 { color: var(--muted, inherit); }
.al-also { margin: 10px 0 0; font-size: 13.5px; }
.al-also summary { cursor: pointer; font: 700 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.al-also ul { margin: 6px 0 0; padding-left: 18px; }
.al-also li span { font-weight: 700; margin-right: 4px; }
.al-globe-more > summary { cursor: pointer; list-style: none; }
.al-globe-more > summary::-webkit-details-marker { display: none; }
.al-globe-more > summary::after { content: ' ↓'; }
.al-globe-more[open] > summary::after { content: ' ↑'; }
.al-globe-jump { display: inline-block; margin-top: 14px; color: var(--g-ink); font: 800 12.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.al-globe-jump:hover { text-decoration: underline; text-underline-offset: 3px; }
.al-globe-controls { display: flex; gap: 10px; margin-top: 20px; }
.al-globe-controls button {
  padding: 8px 16px; cursor: pointer; background: transparent; color: var(--g-ink); border: 1.5px solid var(--g-ink);
  font: 800 12px var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.al-globe-controls button:hover { background: var(--g-ink); color: var(--g-paper); }
.al-globe-controls button:focus-visible { outline: 2px solid var(--sev-extreme); outline-offset: 2px; }
.al-globe .al-legend { color: var(--g-muted); margin-top: 16px; }
.al-globe-empty { color: var(--g-muted); }
.al-on-globe {
  padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink);
  font: 800 12.5px var(--sans); letter-spacing: .06em; text-transform: uppercase;
}
.al-on-globe::before { content: "◍ "; color: var(--sev); }
.al-on-globe:hover { color: var(--sev); }
@media (max-width: 880px) {
  .al-globe { grid-template-columns: 1fr; padding: 20px 16px; }
  .al-globe-stage { max-width: 420px; }
  .al-globe-focus { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .al-globe-stage canvas { transition: none; } }

/* Pop-ups on the globe: a tag on every alert, a card over the one in focus. */
.al-pins { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.al-pin {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 3px 8px 3px 5px;
  border: 0; border-left: 3px solid var(--sev); background: var(--g-tag); color: var(--g-ink);
  font: 700 10px/1.2 var(--sans); white-space: nowrap; text-align: left;
  translate: 8px -50%; transition: opacity .25s ease;
  backdrop-filter: blur(2px);
}
.al-pin .al-icon { width: 13px; height: 13px; color: var(--sev); }
.al-pin:hover, .al-pin:focus-visible { background: var(--sev); color: var(--g-paper); outline: none; }
.al-pin:hover .al-icon, .al-pin:focus-visible .al-icon { color: inherit; }
.al-pin.is-hidden { opacity: 0; pointer-events: none; }
@keyframes al-pop { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
.al-pin.is-focus {
  display: grid; gap: 2px; width: 180px; padding: 6px 9px 7px; white-space: normal;
  translate: -50% calc(-100% - 12px); transform-origin: 50% 100%;
  border: 0; border-top: 4px solid var(--sev); background: var(--g-paper); color: var(--g-ink);
  box-shadow: 0 10px 30px var(--g-shadow), 0 0 0 1px var(--g-line);
  animation: al-pop .35s cubic-bezier(.2, 1.4, .4, 1) both; z-index: 2;
}
.al-pin.is-focus::after {
  content: ""; position: absolute; left: calc(50% + var(--arrow, 0px)); bottom: -6px; width: 10px; height: 10px; translate: -50% 0; rotate: 45deg;
  background: var(--g-paper); box-shadow: 1px 1px 0 var(--g-line);
}
.al-pin.is-focus.at-below { translate: -50% 12px; transform-origin: 50% 0; border-top: 0; border-bottom: 4px solid var(--sev); }
.al-pin.is-focus.at-below::after { bottom: auto; top: -6px; box-shadow: -1px -1px 0 var(--g-line); }
.al-pin.is-focus.at-right { translate: 14px -50%; transform-origin: 0 50%; border-top: 0; border-left: 4px solid var(--sev); }
.al-pin.is-focus.at-right::after { left: -6px; top: 50%; bottom: auto; translate: 0 -50%; box-shadow: -1px 1px 0 var(--g-line); }
.al-pin.is-focus.at-left { translate: calc(-100% - 14px) -50%; transform-origin: 100% 50%; border-top: 0; border-right: 4px solid var(--sev); padding: 6px 9px 7px; }
.al-pin.is-focus.at-left::after { left: auto; right: -6px; top: 50%; bottom: auto; translate: 0 -50%; box-shadow: 1px -1px 0 var(--g-line); }
.al-pin.is-focus:hover, .al-pin.is-focus:focus-visible { background: var(--g-paper); color: var(--g-ink); box-shadow: 0 10px 30px var(--g-shadow), 0 0 0 2px var(--sev); }
.al-pop-head { display: flex; align-items: center; gap: 5px; font: 900 9.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sev); }
.al-pop-head .al-icon { width: 12px; height: 12px; color: var(--sev); }
.al-pop-event { font: 900 15px/1.15 "Playfair Display", "Playfair Display Fallback", serif; }
.al-pop-area { font: 600 10.5px var(--sans); color: var(--g-soft); }
@media (max-width: 520px) {
  .al-pin:not(.is-focus) span { display: none; }
  .al-pin:not(.is-focus) { padding: 3px; }
  .al-pin.is-focus { width: 138px; padding: 5px 7px 6px; }
  .al-pop-event { font-size: 13px; }
  .al-pop-head { font-size: 8.5px; letter-spacing: .08em; }
  .al-pop-area { font-size: 9.5px; }
  .al-globe { padding: 16px 10px; }
  .al-tally dt { font-size: 9.5px; letter-spacing: .06em; }
  .al-tally > div { padding: 10px 8px 4px; }
}
@media (prefers-reduced-motion: reduce) { .al-pin.is-focus { animation: none; } .al-pin { transition: none; } }

/* One map, two views: Globe | U.S. map. */
.al-map-bar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.al-map-tabs { display: flex; gap: 0; border: 1.5px solid var(--g-ink); }
.al-map-tabs button {
  padding: 8px 18px; cursor: pointer; border: 0; background: transparent; color: var(--g-ink);
  font: 800 12px var(--sans); letter-spacing: .1em; text-transform: uppercase;
}
.al-map-tabs button + button { border-left: 1.5px solid var(--g-ink); }
.al-map-tabs button[aria-pressed="true"] { background: var(--g-ink); color: var(--g-paper); }
.al-map-tabs button:focus-visible { outline: 2px solid var(--sev-extreme); outline-offset: 2px; }
/* Phones: the section nav sticks to the top, and scrolling the map up used to
   slide Globe / U.S. map / zoom underneath it. Pin that bar just below the nav. */
@media (max-width: 880px) {
  .al-globe { scroll-margin-top: 47px; }
  .al-map-bar {
    position: sticky; top: 47px; z-index: 8;
    background: var(--paper-2);
    margin: 0 -16px 10px; padding: 8px 16px;
  }
  body.night .al-map-bar { background: var(--paper); }
  .al-map-tabs button, .al-globe-controls button { min-height: 44px; }
}
@media (max-width: 520px) {
  .al-map-bar { margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px; }
}

/* The U.S. map, dressed like the globe. */
.al-mode-us { grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); }
.al-us-stage { position: relative; width: 100%; }
.al-us { display: block; width: 100%; height: auto; aspect-ratio: 975 / 610; overflow: hidden; }
.al-us .al-state { fill: var(--g-land); stroke: var(--paper-2); stroke-width: .8; vector-effect: non-scaling-stroke; transition: fill .3s ease, opacity .3s ease; }
.al-us .al-state.has-alert { fill: var(--g-land-alert); cursor: pointer; }
.al-us .al-state.is-statewide { stroke: var(--sev); stroke-width: 2; stroke-dasharray: 4 3; }
.al-us .al-state.has-alert:hover, .al-us .al-state:focus-visible { fill: var(--g-land-hover); outline: none; }
.al-us.is-zoomed .al-state { opacity: .35; }
.al-us.is-zoomed .al-state.is-selected { opacity: 1; fill: transparent; }
.al-us .al-county { fill: var(--g-land); stroke: #111110; stroke-width: .5; vector-effect: non-scaling-stroke; pointer-events: none; }
.al-us.is-zoomed .al-county { pointer-events: auto; }
.al-us .al-county.has-alert { fill: var(--sev); }
.al-us .al-county.sev-moderate { fill-opacity: .85; }
.al-us .al-county:hover { stroke: var(--g-ink); stroke-width: 1.6; }
.al-us-back {
  position: absolute; left: 0; top: 0; padding: 6px 12px; cursor: pointer;
  border: 1.5px solid var(--g-ink); background: var(--g-paper); color: var(--g-ink);
  font: 800 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.al-us-back:hover { background: var(--g-ink); color: var(--g-paper); }
.al-us-label { position: absolute; right: 0; bottom: 0; font: 900 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--g-muted); }
.al-globe .al-hint { color: var(--g-muted); margin-top: 6px; }
@media (max-width: 880px) { .al-mode-us { grid-template-columns: 1fr; } }
/* Phones: the back button and the state's name sit under the map, not on it. */
@media (max-width: 520px) {
  .al-us-stage { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
  .al-us { flex: 1 0 100%; }
  .al-us-back, .al-us-label { position: static; }
  .al-us-back { min-height: 44px; }
  .al-us-label:empty { display: none; }
}

/* Tags that flip left of their spot, and the small dots for crowded spots.
   A dot shows its name on hover or focus, above everything else. */
.al-pin { min-height: 22px; z-index: 1; }
.al-pin:hover, .al-pin:focus-visible { z-index: 5; }
.al-pin.is-left { translate: calc(-100% - 8px) -50%; border-left: 0; border-right: 3px solid var(--sev); padding: 3px 5px 3px 8px; }
.al-pin.is-compact {
  width: 14px; min-height: 0; height: 14px; padding: 0; overflow: hidden; translate: -50% -50%;
  border: 2px solid var(--g-paper); border-radius: 50%; background: var(--sev);
  box-shadow: 0 0 0 1px var(--sev);
}
.al-pin.is-compact > * { display: none; }
.al-pin.is-compact::before { content: ""; position: absolute; inset: -8px; } /* a bigger target */
.al-pin.is-compact { overflow: visible; }
.al-pin.is-compact:hover, .al-pin.is-compact:focus-visible {
  width: auto; height: auto; min-height: 22px; padding: 3px 8px 3px 5px; border-radius: 0; translate: 8px -50%;
  border: 0; border-left: 3px solid var(--sev); background: var(--sev); color: var(--g-paper); box-shadow: 0 4px 14px var(--g-shadow);
}
.al-pin.is-compact:hover > *, .al-pin.is-compact:focus-visible > * { display: revert; }
.al-pin.is-compact:hover .al-icon, .al-pin.is-compact:focus-visible .al-icon { display: inline-block; color: inherit; }
.al-pin.is-focus { z-index: 4; }
/* The alert in focus on a phone map: a dot, not a card. The card was covering
   the states and running off the left edge. */
.al-pin.is-current.is-compact {
  width: 18px; height: 18px; z-index: 4;
  box-shadow: 0 0 0 2px var(--g-paper), 0 0 0 4px var(--sev);
}

/* Zoom buttons, top right of either map. */
.al-stage-wrap { position: relative; width: 100%; min-width: 0; }
.al-mode-globe .al-stage-wrap { max-width: 560px; justify-self: center; }
.al-zoom { display: flex; border: 1.5px solid var(--g-ink); }
.al-zoom button {
  width: 34px; height: 34px; padding: 0; cursor: pointer; border: 0; background: transparent; color: var(--g-ink);
  font: 700 20px/1 var(--sans);
}
.al-zoom button + button { border-left: 1.5px solid var(--g-ink); }
.al-zoom button:hover { background: var(--g-ink); color: var(--paper); }
.al-zoom button:focus-visible { outline: 2px solid var(--sev-extreme); outline-offset: 2px; }
.al-us { touch-action: pan-y; }
@media (max-width: 520px) { .al-zoom button { width: 44px; height: 44px; } }

/* County lines are black in both themes; states keep paper-colored borders. */
body.night .al-us .al-county { stroke: #000; }
.al-us .al-county.has-alert { stroke-width: .9; }

/* Phones: a state tile grid instead of the globe and the U.S. map
   (renderTileMap in alerts.js). Every state is the same size, so each is easy
   to tap; the map's scripts don't load at all on a phone (app.js). */
.al-tiles-panel {
  --g-ink: var(--ink); --g-land: #ddd7c9;
  display: none; margin-top: 24px; padding: 16px 12px 14px; background: var(--paper-2); border-top: 5px solid var(--sev-extreme);
}
body.night .al-tiles-panel { --g-land: #2a2a27; background: var(--paper); }
.al-tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin: 12px 0 10px; }
.al-tile {
  aspect-ratio: 1; min-width: 0; padding: 0; border: 0; cursor: pointer; background: var(--g-land); color: var(--muted);
  font: 800 10px var(--sans); letter-spacing: .02em;
}
.al-tile:disabled { cursor: default; opacity: .75; }
.al-tile.has-alert { background: var(--sev); color: var(--paper); }
.al-tile.sev-moderate, .al-tile.sev-minor { opacity: .9; }
.al-tile[aria-pressed="true"] { outline: 3px solid var(--ink); outline-offset: 1px; position: relative; z-index: 1; }
.al-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.al-tiles-panel .al-legend { margin-top: 0; }
.al-tiles-panel .al-hint { margin-top: 10px; }
.al-tiles-head { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 8px; padding-top: 10px; border-top: 1px solid var(--rule); }
.al-tiles-head h2 { font: 900 24px/1.1 "Playfair Display", "Playfair Display Fallback", serif; }
.al-tiles-head span { font: 700 12px var(--sans); color: var(--muted); }
.al-tiles-head .al-clear { margin: 0 0 0 auto; min-height: 44px; }
.al-tcard { margin-bottom: 10px; padding: 10px 12px 12px; background: var(--paper); border-left: 5px solid var(--sev); }
.al-tcard h3 { font: 800 18px/1.2 "Playfair Display", "Playfair Display Fallback", serif; margin: 6px 0 4px; }
.al-tcard-do { margin-top: 8px; padding: 8px 10px; background: var(--sev); color: var(--paper); font: 600 15px/1.4 var(--sans); }
.al-tcard-do strong { display: block; font: 900 10.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.al-tcard .al-globe-jump { display: inline-flex; align-items: center; min-height: 40px; margin-top: 2px; }
/* Alerts abroad under the tiles: a line each that opens into its card. */
.al-world { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--rule); }
.al-tiles-sub { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font: 900 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.al-tiles-sub span { color: var(--muted); letter-spacing: 0; }
.al-wrow { border-bottom: 1px solid var(--hairline); }
.al-wrow > summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 10px; min-height: 48px; padding: 6px 4px 6px 10px;
  cursor: pointer; list-style: none; border-left: 5px solid var(--sev);
}
.al-wrow > summary::-webkit-details-marker { display: none; }
.al-wrow-what { display: inline-flex; align-items: center; gap: 7px; font: 800 16px/1.2 "Playfair Display", "Playfair Display Fallback", serif; }
.al-wrow-what .al-icon { color: var(--sev); flex: none; }
.al-wrow-where { font: 600 12.5px var(--sans); color: var(--muted); }
.al-wrow[open] > summary { background: var(--paper); }
.al-wrow > .al-tcard { margin: 0 0 8px; border-left-width: 5px; }
.al-wmore > summary {
  display: flex; align-items: center; min-height: 44px; cursor: pointer; list-style: none;
  font: 800 12.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px;
}
.al-wmore > summary::-webkit-details-marker { display: none; }
.al-wmore[open] > summary { display: none; }
@media (max-width: 520px) {
  .al-globe { display: none; }
  .al-tiles-panel { display: block; margin-left: -16px; margin-right: -16px; }
  .al-where, .al-on-globe { display: none; }
}

/* Alerts near you (alerts-near.js) */
.al-near { margin: 18px 0 22px; padding: 14px 16px; border: 1.5px solid var(--g-ink, currentColor); }
.al-near .al-section-title span { margin-left: 6px; font-weight: 700; opacity: .7; }
.al-near-note { margin: 4px 0 10px; font-size: 14px; }
.al-near-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.al-near-btn { padding: 8px 14px; border: 1.5px solid var(--g-ink, currentColor); background: var(--g-ink, #111); color: var(--paper, #fff); font: 800 12.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.al-near-btn:disabled { opacity: .6; cursor: wait; }
.al-near-link { padding: 0; border: 0; background: none; color: inherit; font: 700 13px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.al-near-remember { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.al-near-error { margin: 10px 0 0; font-size: 13.5px; color: var(--sev-severe); }
.al-near-pick { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px; }
.al-near-pick label { display: flex; flex-direction: column; gap: 4px; font: 700 12px var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.al-near-pick select { min-width: 200px; min-height: 36px; font-size: 15px; }
.al-near-list { list-style: none; margin: 10px 0 0; padding: 0; }
.al-near-row { border-top: 1px solid var(--g-line, rgba(0,0,0,.15)); }
.al-near-row > a { display: grid; grid-template-columns: 22px 1fr; gap: 2px 8px; padding: 8px 0; color: inherit; text-decoration: none; }
.al-near-row > a > .al-icon { grid-row: span 3; color: var(--sev); margin-top: 2px; }
.al-near-row > a:hover .al-near-head { text-decoration: underline; }
.al-near-what .al-sev { margin-left: 6px; font: 800 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--sev); }
.al-near-head { font-size: 14.5px; }
.al-near-none { margin: 8px 0 0; font-size: 14px; }
.al-near-more summary { cursor: pointer; margin-top: 8px; font: 700 12.5px var(--sans); }
@media (max-width: 520px) { .al-near-btn { min-height: 44px; } .al-near-pick select { min-width: 0; width: 100%; } .al-near-pick label { flex: 1 1 100%; } }