/* Hallmark · macrostructure: Marquee Hero (HP2 overflow) · tone: tabloid · anchor hue: magenta 354
 * theme: custom (vibe: "honest supermarket tabloid, Leonida dusk")
 * paper oklch(92.5% 0.01 90) newsprint · accent oklch(54% 0.22 354) magenta · Archivo + Literata
 * axes: light / display-condensed / warm-chromatic · nav: N6 Masthead · footer: classifieds
 * Modules in public/css/ are concatenated in filename order into /site.css by build.py. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/brand/fonts/Archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/assets/brand/fonts/Literata-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/assets/brand/fonts/Literata-Italic-var.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
/* Metric-matched fallbacks keep the swap from shifting layout. */
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Narrow"), local("Liberation Sans Narrow"), local("Arial");
  size-adjust: 96%;
  ascent-override: 91%;
  descent-override: 22%;
}
@font-face {
  font-family: "Literata Fallback";
  src: local("Georgia"), local("DejaVu Serif"), local("Times New Roman");
  size-adjust: 104%;
  ascent-override: 113%;
  descent-override: 30%;
}

:root {
  /* Surfaces */
  --color-paper: oklch(92.5% 0.01 90);
  --color-paper-2: oklch(88.5% 0.014 90);
  --color-paper-3: oklch(84% 0.018 90);
  --color-ink: oklch(17% 0.012 300);
  --color-ink-2: oklch(40% 0.02 300);
  --color-rule: oklch(17% 0.012 300);
  --color-rule-soft: oklch(76% 0.02 90);
  /* Tabloid inks */
  --color-magenta: oklch(54% 0.22 354);
  --color-magenta-deep: oklch(46% 0.19 354);
  --color-highlighter: oklch(93% 0.19 105);
  --color-highlighter-soft: oklch(95% 0.11 105);
  --color-stamp: oklch(50% 0.2 27);
  --color-white: oklch(99.4% 0.006 95);
  /* Night band (video, neon) */
  --color-violet: oklch(24% 0.09 300);
  --color-violet-2: oklch(31% 0.11 300);
  --color-on-violet: oklch(92.5% 0.01 90);
  --color-on-violet-2: oklch(84% 0.04 300);
  --color-neon: oklch(86% 0.13 200);
  /* Roles */
  --color-text: var(--color-ink);
  --color-text-2: var(--color-ink-2);
  --color-link-hover: var(--color-magenta-deep);
  --color-focus: var(--color-ink);
  --color-focus-halo: var(--color-highlighter);

  /* Type */
  --font-display: "Archivo", "Archivo Fallback", "Arial Narrow", sans-serif;
  --font-body: "Literata", "Literata Fallback", Georgia, serif;
  --font-ui: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --stretch-splash: 62%;
  --stretch-head: 72%;
  --stretch-ui: 100%;
  --stretch-stamp: 125%;

  --text-2xs: 0.75rem;      /* 12px: floor, uppercase labels only */
  --text-xs: 0.8125rem;     /* 13px metadata */
  --text-sm: 0.9375rem;     /* 15px UI */
  --text-base: 1.0625rem;   /* 17px */
  --text-read: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --text-lg: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem);
  --text-display: clamp(3rem, 1.2rem + 6.2vw, 6rem);
  --leading-tight: 0.95;
  --leading-head: 1.02;
  --leading-ui: 1.35;
  --leading-read: 1.68;
  --measure: 68ch;

  /* Space: 4pt scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 3rem);
  --page-max: 88rem;

  /* Rules, radius */
  --rule-hair: 1px;
  --rule: 2px;
  --rule-heavy: 6px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;
}

/* Base: reset, browser surfaces, layout primitives. */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html {
  scroll-padding-top: var(--space-6);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--color-ink) var(--color-paper-2);
  accent-color: var(--color-magenta);
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-paper);
  color: var(--color-text);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-ui);
  font-kerning: normal;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 800;
  line-height: var(--leading-head);
  text-wrap: balance;
  overflow-wrap: anywhere;
  min-width: 0;
}
p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--color-link-hover); }
a:active { color: var(--color-link-hover); opacity: 0.8; }
input:disabled, select:disabled { opacity: 0.55; cursor: not-allowed; }
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border-radius: 0; }
button:disabled { cursor: not-allowed; opacity: 0.55; }
button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--color-highlighter); color: var(--color-ink); }
::placeholder { color: var(--color-ink-2); opacity: 1; }
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--color-focus-halo);
}
time, .tabular { font-variant-numeric: tabular-nums lining-nums; }

.wrap {
  width: min(var(--page-max), 100% - var(--gutter) * 2);
  margin-inline: auto;
}
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-highlighter);
  color: var(--color-ink);
  font-weight: 800;
}
.skip:focus-visible { top: var(--space-3); }

/* Surfaces that flip the focus pair. */
.surface-dark, .site-footer {
  --color-focus: var(--color-highlighter);
  --color-focus-halo: var(--color-violet);
  --color-link-hover: var(--color-neon);
}
.surface-magenta {
  --color-focus: var(--color-ink);
  --color-focus-halo: var(--color-highlighter);
  --color-link-hover: var(--color-ink);
}

/* Shell: newsstand masthead, desk strap, menu sheet, classifieds footer, toast, breadcrumbs. */
.site-header {
  position: relative;
  z-index: 20;
  background: var(--color-paper);
  border-bottom: var(--rule-heavy) solid var(--color-ink);
}
.masthead {
  width: min(var(--page-max), 100% - var(--gutter) * 2);
  margin-inline: auto;
  min-height: 5.25rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-3);
}
.wordmark {
  display: inline-flex;
  align-items: stretch;
  font-family: var(--font-display);
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  font-size: clamp(1.875rem, 1.2rem + 2.4vw, 3.25rem);
  line-height: 0.86;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.wordmark-vice {
  background: var(--color-magenta);
  color: var(--color-white);
  padding: 0.1em 0.14em 0.02em;
  transform: rotate(-2.5deg);
  transform-origin: 100% 100%;
}
.wordmark-dispatch {
  padding: 0.1em 0 0.02em 0.14em;
  color: var(--color-ink);
}
.wordmark:hover { color: inherit; }
.wordmark:hover .wordmark-vice { background: var(--color-magenta-deep); }
.dateline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  min-width: 0;
  padding-left: var(--space-6);
  border-left: var(--rule) solid var(--color-ink);
}
.dateline-checked {
  font-stretch: var(--stretch-stamp);
  font-weight: 700;
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dateline-checked::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.5em;
  background: var(--color-highlighter);
  outline: 1.5px solid var(--color-ink);
  vertical-align: 0.02em;
}
.strapline {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-2);
}
.header-tools { display: flex; align-items: center; gap: var(--space-2); }
.search-toggle, .menu-toggle {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 0 var(--space-2);
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.search-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.search-toggle:hover, .menu-toggle:hover { background: var(--color-highlighter); color: var(--color-ink); }
.search-toggle:active, .menu-toggle:active { transform: translateY(1px); }
.menu-icon { width: 22px; display: grid; gap: var(--space-2); }
.menu-icon i { display: block; height: 2px; background: currentColor; transition: transform var(--dur) var(--ease-out); }
.menu-toggle[aria-expanded="true"] { background: var(--color-ink); color: var(--color-paper); }
.menu-toggle[aria-expanded="true"] .menu-icon i:first-child { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon i:last-child { transform: translateY(-5px) rotate(-45deg); }

/* Desk strap: the black band under the masthead. */
.primary-nav {
  background: var(--color-ink);
  color: var(--color-paper);
  --color-focus: var(--color-highlighter);
  --color-focus-halo: var(--color-ink);
}
.primary-nav-track {
  width: min(var(--page-max), 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
}
.primary-nav-track::-webkit-scrollbar { display: none; }
.primary-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  font-stretch: var(--stretch-head);
  font-weight: 800;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.primary-nav a:first-child { margin-left: calc(var(--space-3) * -1); }
.primary-nav a:hover { background: var(--color-highlighter); color: var(--color-ink); }
.primary-nav a[aria-current="page"] { background: var(--color-paper); color: var(--color-ink); }
.primary-nav .release-nav { position: sticky; right: 0; margin-left: auto; background: var(--color-magenta); color: var(--color-white); }
.primary-nav .release-nav:hover { background: var(--color-highlighter); color: var(--color-ink); }

/* Menu sheet */
.site-menu {
  background: var(--color-paper-2);
  border-top: var(--rule) solid var(--color-ink);
}
.js .site-menu { display: none; }
.js .site-menu.is-open { display: block; animation: sheet-in var(--dur) var(--ease-out); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-8px); } }
.menu-inner {
  width: min(var(--page-max), 100% - var(--gutter) * 2);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-12);
  padding-block: var(--space-10);
}
.menu-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-6); }
.menu-links a {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: var(--rule-hair) solid var(--color-rule-soft);
  font-family: var(--font-display);
  font-stretch: var(--stretch-head);
  font-weight: 800;
  font-size: var(--text-lg);
  text-transform: uppercase;
}
.site-menu label, .archive-search label {
  display: block;
  margin-bottom: var(--space-3);
  font-weight: 800;
  font-size: var(--text-sm);
}
.search-field {
  display: flex;
  gap: var(--space-2);
  border: var(--rule) solid var(--color-ink);
  background: var(--color-paper);
}
.search-field input {
  flex: 1;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-lg);
}
.search-field input:focus-visible { outline: 3px solid var(--color-focus); outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--color-highlighter); }
.search-field button {
  min-height: 48px;
  padding: 0 var(--space-6);
  border: 0;
  background: var(--color-ink);
  color: var(--color-paper);
  font-weight: 800;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.search-field button:hover { background: var(--color-magenta); color: var(--color-white); }
.search-field button:active { transform: translateY(1px); }

/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-2);
  padding-top: var(--space-6);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-2);
}
.breadcrumbs a {
  display: inline-block;
  line-height: 44px;
  min-height: 44px;
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.breadcrumbs a:last-child { text-decoration: none; color: var(--color-ink); }

/* Footer: violet night band with classified ads. */
.site-footer {
  margin-top: var(--space-24);
  background: var(--color-violet);
  color: var(--color-on-violet);
  border-top: var(--rule-heavy) solid var(--color-magenta);
}
.footer-inner {
  width: min(var(--page-max), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-block: var(--space-16) var(--space-8);
}
.footer-brand { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4) var(--space-8); }
.footer-wordmark {
  font-family: var(--font-display);
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  font-size: clamp(3rem, 1rem + 9vw, 8.5rem);
  line-height: 0.82;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.footer-strap {
  max-width: 28ch;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-on-violet-2);
}
/* Classified-ad index: dense ruled cells of uneven width, terse ad copy. */
.classifieds {
  list-style: none;
  padding: 0;
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-flow: dense;
  border-top: var(--rule) solid var(--color-on-violet);
  border-left: var(--rule-hair) solid var(--color-on-violet-2);
}
/* Paste-up of uneven ads: wanted ad wide, "who we are" a tall box, lost and found as the bottom strip. */
@media (min-width: 1024px) {
  .classifieds { grid-template-areas: "a a a d d b" "f f e d d c" "g g g g g g"; }
  .ad:nth-child(1) { grid-area: a; } .ad:nth-child(2) { grid-area: b; } .ad:nth-child(3) { grid-area: c; }
  .ad:nth-child(4) { grid-area: d; } .ad:nth-child(5) { grid-area: e; } .ad:nth-child(6) { grid-area: f; }
  .ad:nth-child(7) { grid-area: g; }
}
.ad a {
  display: block;
  height: 100%;
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-right: var(--rule-hair) solid var(--color-on-violet-2);
  border-bottom: var(--rule-hair) solid var(--color-on-violet-2);
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--color-on-violet-2);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ad strong {
  display: block;
  margin-bottom: var(--space-1);
  font-stretch: var(--stretch-stamp);
  font-weight: 900;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-violet);
}
.ad--wide strong { font-size: var(--text-sm); }
.ad--tall a { display: flex; flex-direction: column; justify-content: end; }
.ad--tall strong { font-stretch: var(--stretch-splash); font-size: var(--text-2xl); letter-spacing: 0; line-height: 0.95; }
.ad a:hover { background: var(--color-highlighter); color: var(--color-ink); }
.ad a:hover strong { color: var(--color-ink); }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-6);
  margin-top: var(--space-8);
  font-weight: 700;
  font-size: var(--text-sm);
}
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.footer-nav .back-top { margin-left: auto; color: var(--color-neon); }
.legal { margin-top: var(--space-4); max-width: var(--measure); font-size: var(--text-xs); color: var(--color-on-violet-2); }

/* Toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  z-index: 50;
  max-width: calc(100% - var(--space-8));
  padding: var(--space-3) var(--space-5);
  background: var(--color-ink);
  color: var(--color-paper);
  border: var(--rule) solid var(--color-highlighter);
  font-weight: 700;
  font-size: var(--text-sm);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1023px) {
  .strapline { display: none; }
  .menu-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .classifieds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad--wide { grid-column: 1 / -1; }
}
@media (max-width: 719px) {
  .masthead { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); min-height: 4.25rem; }
  .dateline { grid-column: 1 / -1; grid-row: 2; padding-left: 0; border-left: 0; }
  .menu-label { display: none; }
  .primary-nav-track {
    width: 100%;
    padding-inline: var(--gutter);
  }
  .primary-nav a:first-child { margin-left: calc(var(--space-3) * -1); }
  .primary-nav .release-nav { margin-left: 0; }
  .menu-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .classifieds { grid-template-columns: minmax(0, 1fr); }
  .footer-nav .back-top { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js .site-menu.is-open { animation: none; }
  .toast { transition: opacity var(--dur-fast) linear; transform: translate(-50%, 0); }
  .menu-icon i { transition: none; }
}
.dateline-checked:empty { display: none; }
.surface-magenta .breadcrumbs, .surface-magenta .breadcrumbs a:last-child { color: var(--color-white); }
/* The release pill stays pinned at the end of the scrolling desk strap; its
   soft ink edge signals that more desks sit underneath. */
@media (max-width: 1023px) {
  .primary-nav .release-nav { box-shadow: calc(var(--space-4) * -1) 0 var(--space-4) var(--color-ink); }
  .primary-nav-track { padding-right: 0; }
}

/* Shared components: stamps, story cards, section heads, buttons, captions, video player, citations. */

/* Verdict stamp: rubber-stamp from real source records. */
.stamp {
  display: inline-grid;
  justify-items: center;
  gap: 0.15em;
  padding: 0.45em 0.8em 0.4em;
  border: 3px solid currentColor;
  outline: 1.5px solid currentColor;
  outline-offset: 2px;
  color: var(--color-stamp);
  background: var(--color-paper);
  font-family: var(--font-display);
  font-stretch: var(--stretch-stamp);
  line-height: 1;
  text-transform: uppercase;
  transform: rotate(-6deg);
  white-space: nowrap;
}
.stamp--record { color: var(--color-stamp); }
.stamp--press { color: var(--color-ink); }
.stamp-word { font-weight: 900; font-size: 1.35em; letter-spacing: 0.04em; }
.stamp-detail { font-weight: 700; font-size: max(0.72em, var(--text-2xs)); letter-spacing: 0.1em; }
.stamp--lg { font-size: clamp(0.875rem, 0.6rem + 0.9vw, 1.25rem); }
/* Inline mini stamp for cards and lists: flat, readable, no rotation. */
.stamp--mini {
  display: inline-grid;
  justify-items: start;
  row-gap: var(--space-1);
  width: fit-content;
  max-width: 100%;
  padding: 0.3em 0.55em;
  border-width: 2px;
  outline: 0;
  font-size: var(--text-2xs);
  line-height: 1.15;
  transform: none;
  background: transparent;
  white-space: normal;
}
.stamp--mini .stamp-word { font-size: 1em; letter-spacing: 0.06em; }
.stamp--mini .stamp-detail { font-size: 1em; letter-spacing: 0.04em; font-weight: 600; }
.surface-dark .stamp--mini, .surface-magenta .stamp--mini { color: inherit; }

/* Story card */
.story-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.card-image {
  display: block;
  overflow: hidden;
  background: var(--color-paper-3);
  aspect-ratio: 3 / 2;
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur) var(--ease-out);
}
.story-card:hover .card-image img { transform: scale(1.03); }
.card-body { display: grid; gap: var(--space-2); min-width: 0; }
.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-2);
}
.card-desk { color: var(--color-magenta-deep); text-transform: uppercase; letter-spacing: 0.06em; font-stretch: var(--stretch-head); font-weight: 800; }
.surface-dark .card-desk { color: var(--color-neon); }
.surface-dark .card-meta { color: var(--color-on-violet-2); }
.card-title {
  font-stretch: var(--stretch-head);
  font-weight: 800;
  font-size: var(--text-lg);
  line-height: 1.06;
}
.card-title a { background-image: linear-gradient(var(--color-highlighter), var(--color-highlighter)); background-size: 0 0.42em; background-position: 0 88%; background-repeat: no-repeat; transition: background-size var(--dur) var(--ease-out); }
.card-title a:hover { color: inherit; background-size: 100% 0.42em; }
.surface-dark .card-title a:hover, .surface-magenta .card-title a:hover { color: var(--color-ink); background-size: 100% 100%; }
/* Whole card clickable through the headline link. */
.card-title a::after { content: ""; position: absolute; inset: 0; }
.card-excerpt { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-2); }
.surface-dark .card-excerpt { color: var(--color-on-violet-2); }
.card-foot { margin-top: var(--space-1); }

.story-card--splash .card-title { font-size: var(--text-3xl); font-stretch: var(--stretch-splash); font-weight: 900; line-height: var(--leading-tight); text-transform: uppercase; }
.story-card--feature .card-title { font-size: var(--text-2xl); font-stretch: var(--stretch-splash); font-weight: 900; line-height: 0.96; text-transform: uppercase; }
.story-card--feature .card-excerpt { font-size: var(--text-base); }
.story-card--compact { flex-direction: row; gap: var(--space-4); align-items: start; }
.story-card--compact .card-image { flex: 0 0 34%; aspect-ratio: 1; }
.story-card--compact .card-title { font-size: var(--text-base); line-height: 1.12; }
.story-card--compact .card-excerpt { display: none; }
.story-card--row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-6);
  padding-block: var(--space-6);
  border-top: var(--rule) solid var(--color-ink);
}
.story-card--row .card-title { font-size: var(--text-xl); }

/* Default grid used by search results and simple lists. */
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-10) var(--space-6);
}

/* Section head: heading plus one plain link, on a heavy rule. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-2) var(--space-6);
  margin-bottom: var(--space-8);
  padding-top: var(--space-3);
  border-top: var(--rule-heavy) solid currentColor;
}
.section-head h2 {
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  font-size: var(--text-2xl);
  line-height: 0.95;
  text-transform: uppercase;
}
.section-more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 800;
  font-size: var(--text-sm);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 48px;
  padding: 0 var(--space-6);
  border: var(--rule) solid var(--color-ink);
  background: var(--color-ink);
  color: var(--color-paper);
  font-weight: 800;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--color-highlighter); color: var(--color-ink); }
.btn:active { transform: translateY(2px); }
.btn--ghost { background: transparent; color: var(--color-ink); }
.btn--ghost:hover { background: var(--color-ink); color: var(--color-paper); }
.btn--hot { background: var(--color-magenta); border-color: var(--color-magenta); color: var(--color-white); }
.btn--hot:hover { background: var(--color-highlighter); border-color: var(--color-ink); color: var(--color-ink); }

/* Media caption strip */
.media-credit {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-2);
  border-bottom: var(--rule-hair) solid var(--color-rule-soft);
}
.media-credit a { text-decoration: underline; text-underline-offset: 3px; }

/* Highlighter citations [n]: marker swipe, publisher on hover/focus. */
.citation {
  position: relative;
  display: inline-block;
  min-width: 2em;
  min-height: 24px;
  margin-inline: 0.1em 0;
  padding: 0.15em 0.3em;
  font-family: var(--font-ui);
  font-size: 0.72em;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  vertical-align: 0.2em;
  color: var(--color-ink);
  background: var(--color-highlighter);
  box-decoration-break: clone;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.citation:hover { background: var(--color-ink); color: var(--color-highlighter); }
.citation::after {
  content: attr(data-publisher);
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--space-2));
  z-index: 5;
  padding: var(--space-1) var(--space-2);
  background: var(--color-ink);
  color: var(--color-paper);
  font-size: var(--text-2xs);
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
/* Tooltip exists only while shown, so it never widens the layout off-screen. */
.citation::after { display: none; }
.citation[data-publisher]:hover::after, .citation[data-publisher]:focus-visible::after { display: block; opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .citation[data-publisher]:hover::after { display: none; } }

/* Official video player (click-to-load). */
.video-card { min-width: 0; display: grid; gap: var(--space-3); align-content: start; }
.video-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-violet-2); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-play {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-paper);
  text-align: left;
}
.video-play img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.video-play:hover img { transform: scale(1.03); }
.play-icon {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-magenta);
  color: var(--color-white);
  font-weight: 900;
  font-size: var(--text-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.play-icon svg { width: 0.9em; height: 0.9em; fill: currentColor; }
.video-play:hover .play-icon, .video-play:focus-visible .play-icon { background: var(--color-highlighter); color: var(--color-ink); }
.video-meta { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-2); }
.video-card h3 { font-stretch: var(--stretch-head); font-weight: 800; font-size: var(--text-lg); line-height: 1.08; }
.video-card > p:not(.video-meta) { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-2); }
.video-source a { font-size: var(--text-xs); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.surface-dark .video-meta, .surface-dark .video-card > p:not(.video-meta) { color: var(--color-on-violet-2); }

.empty-state { grid-column: 1 / -1; padding-block: var(--space-10); font-family: var(--font-body); font-size: var(--text-lg); }
.empty-state a { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 719px) {
  .story-card--row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .stamp:not(.stamp--mini) { transform: rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) {
  .card-image img, .video-play img { transition: none; }
  .story-card:hover .card-image img, .video-play:hover img { transform: none; }
  .card-title a { transition: none; }
  .citation::after { transition: opacity var(--dur-fast) linear; transform: translate(-50%, 0); }
}

/* Authored arrow pair, drawn in the search icon's stroke. */
.icon {
  display: inline-block;
  flex: none;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.35em;
  vertical-align: -0.06em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
}
a:hover .icon-next, button:hover .icon-next { transform: translateX(2px); }
@media (prefers-reduced-motion: no-preference) { .icon-next { transition: transform var(--dur-fast) var(--ease-out); } }

/* Headline first: desk, kind and read time sit under the title, not above it. */
.card-title { order: -1; }
.video-card .video-frame { order: -2; }
.video-card h3 { order: -1; }
/* Mini stamps set in normal width so "8 sources · 2 official" holds one line in narrow columns. */
.stamp--mini .stamp-detail { font-stretch: var(--stretch-ui); }

/* Front page (body.home): splash, release ticker, front grid, desk rails, night band, desk index.
 * Rhythm: loud splash, sticker ticker, dense ruled front, portrait strip, quiet world spread,
 * text columns, magenta music band, violet night band, classified desk index. */

/* Narrow columns: verdict minis wrap inside their column instead of pushing it wider. */

/* ---------- 1. Splash ---------- */
.splash { padding-block: var(--space-6) var(--space-10); }
.splash-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.splash-figure { grid-row: 1; position: relative; margin-inline: calc(var(--gutter) * -1); }
.splash-image {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-paper-3);
}
.splash-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transition: transform var(--dur-slow) var(--ease-out);
}
.splash-figure:hover .splash-image img { transform: scale(1.02); }
/* Bottom-right of the photo, clear of the subject's face (the credit line sits below). */
.splash-stamp {
  position: absolute;
  bottom: var(--space-12);
  right: var(--space-3);
  z-index: 3;
  pointer-events: none;
}
.splash-stamp .stamp { transform: rotate(-7deg); }
@media (max-width: 719px) { .splash-stamp .stamp { font-size: var(--text-xs); } }
.splash-credit {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-2) var(--gutter) 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-2);
}
.splash-credit a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The magenta band: headline set as a pasted-on strip that breaks the column. */
.splash-title {
  grid-row: 2;
  position: relative;
  z-index: 2;
  /* Inset 4px each side so the -1.2deg tilt's corners stay inside the viewport. */
  margin: var(--space-5) calc(var(--gutter) * -1 + var(--space-1)) 0;
  padding: var(--space-4) calc(var(--gutter) - var(--space-1)) var(--space-5);
  background: var(--color-magenta);
  color: var(--color-white);
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  line-height: var(--leading-tight);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  transform: rotate(-1.2deg);
}
.splash-title--long { font-size: var(--text-3xl); }
.splash-title--short { font-size: var(--text-display); }
.splash-title a { color: inherit; }
.splash-title a:hover { color: var(--color-ink); }

.splash-deck {
  grid-row: 3;
  display: grid;
  gap: var(--space-4);
  justify-items: start;
  padding-top: var(--space-6);
}
.splash-excerpt {
  order: 1;
  max-width: 42ch;
  font-family: var(--font-body);
  font-size: var(--text-read);
  line-height: 1.5;
}
.splash-cta { order: 3; }
.splash-meta {
  order: 4;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-2);
}

@media (max-width: 1023px) {
  .splash { padding-top: var(--space-4); }
  .splash-image { aspect-ratio: 16 / 9; }
  .splash-title { margin-top: var(--space-4); padding-block: var(--space-3) var(--space-4); }
  .splash-deck { gap: var(--space-3); padding-top: var(--space-5); }
}
@media (max-width: 479px) {
  .splash-excerpt { font-size: var(--text-base); }
}
@media (min-width: 1024px) {
  .splash { padding-block: var(--space-8) var(--space-12); }
  .splash-inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: var(--space-6);
  }
  .splash-figure { grid-column: 5 / -1; grid-row: 1 / span 2; margin-inline: 0; }
  .splash-image { aspect-ratio: 16 / 10; }
  .splash-stamp { top: auto; bottom: var(--space-16); right: var(--space-6); }
  .splash-credit { padding-inline: 0; }
  .splash-title {
    grid-column: 1 / span 7;
    grid-row: 1;
    margin: var(--space-8) 0 0;
    padding: var(--space-5) var(--space-8) var(--space-6) 0;
  }
  /* HP2 overflow: the band runs off the left edge of the page (html clips x). */
  .splash-title::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 50vw;
    background: inherit;
  }
  .splash-deck { grid-column: 1 / span 4; grid-row: 2; padding-top: var(--space-8); }
  .splash-meta { order: 2; }
}

/* ---------- 2. Release ticker: price-sticker band ---------- */
.ticker {
  background: var(--color-highlighter);
  color: var(--color-ink);
  border-block: var(--rule-heavy) solid var(--color-ink);
}
.ticker-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5) var(--space-10);
  padding-block: var(--space-5);
}
.ticker-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-10);
  min-width: 0;
}
.ticker-fact { display: grid; gap: var(--space-1); min-width: 0; }
.ticker-fact dt {
  font-stretch: var(--stretch-stamp);
  font-weight: 700;
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ticker-fact dd {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  font-size: var(--text-xl);
  line-height: 0.95;
  text-transform: uppercase;
}
.ticker-fact--platforms dd {
  font-stretch: var(--stretch-head);
  font-weight: 800;
  font-size: var(--text-lg);
  line-height: 1.1;
}
.sticker {
  padding: var(--space-2) var(--space-4) var(--space-3);
  background: var(--color-magenta);
  color: var(--color-white);
  border: var(--rule) solid var(--color-ink);
  transform: rotate(-3deg);
}
.sticker--ultimate { background: var(--color-ink); color: var(--color-highlighter); transform: rotate(2deg); }
.sticker dd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.sticker-cur, .sticker-note {
  font-family: var(--font-ui);
  font-stretch: var(--stretch-stamp);
  font-weight: 800;
  font-size: var(--text-2xs);
  letter-spacing: 0.06em;
}
.sticker-amount { font-size: var(--text-xl); letter-spacing: -0.01em; }
@media (max-width: 719px) {
  .ticker-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-4); width: 100%; }
  .ticker-fact--date, .ticker-fact--platforms { grid-column: 1 / -1; }
  .sticker { padding-inline: var(--space-3); }
  .ticker-inner { gap: var(--space-4); }
  .desk-index .desk-index-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desk-index .desk-index-list a { flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); }
}
.ticker-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); }
.ticker-cta:hover { background: var(--color-paper); }
.ticker-source {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 3. Hold the front page: feature, ruled stack, fact-check box ---------- */
.front { padding-top: var(--space-16); }
.front-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
}
.front-stack { display: grid; align-content: start; }
.front-stack .story-card { padding-block: var(--space-5); }
.front-stack .story-card:first-child { padding-top: 0; }
.front-stack .story-card + .story-card { border-top: var(--rule) solid var(--color-ink); }
.front-stack .story-card:first-child .card-title { font-size: var(--text-xl); font-stretch: var(--stretch-splash); font-weight: 900; text-transform: uppercase; line-height: 0.98; }

.factbox {
  align-self: start;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--color-paper-2);
  border: var(--rule-heavy) solid var(--color-ink);
}
.factbox-title {
  display: inline;
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  font-size: var(--text-2xl);
  line-height: 1;
  text-transform: uppercase;
  background-image: linear-gradient(var(--color-highlighter), var(--color-highlighter));
  background-repeat: no-repeat;
  background-size: 100% 0.45em;
  background-position: 0 85%;
}
.factbox-intro {
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-2);
}
.factbox-list { list-style: none; padding: 0; margin-top: var(--space-5); }
.factbox-item {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-top: var(--rule-hair) solid var(--color-ink);
}
.factbox-item:last-child { padding-bottom: 0; }
.factbox-item a {
  font-family: var(--font-display);
  font-stretch: var(--stretch-head);
  font-weight: 800;
  font-size: var(--text-base);
  line-height: 1.12;
}
.factbox-item a:hover { color: var(--color-ink); background: var(--color-highlighter); }

@media (min-width: 720px) {
  .front-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-10) var(--space-8); }
  .front-feature { grid-column: 1 / -1; }
  .front-grid--open .front-stack { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .front-grid { grid-template-columns: minmax(0, 10fr) minmax(0, 7fr) minmax(0, 7fr); gap: var(--space-8); }
  .front-grid--open { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .front-feature, .front-grid--open .front-stack { grid-column: auto; }
  .front-stack { padding-left: var(--space-8); border-left: var(--rule-hair) solid var(--color-ink); }
}

/* ---------- 4. Desk rails ---------- */
.desk { padding-top: var(--space-20); }

/* One story: horizontal feature. */
.desk-solo .story-card--feature { gap: var(--space-5); }
.desk-solo .story-card--feature .card-title { font-size: var(--text-2xl); }
@media (min-width: 1280px) { .desk-solo .story-card--feature .card-title { font-size: var(--text-3xl); } }
@media (min-width: 1024px) {
  .desk-solo .story-card--feature {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-8);
    align-items: center;
  }
}
/* One story with no fresh picture: a quiet two-column text spread. */
.desk-solo--text .story-card--feature { display: block; padding-block: var(--space-2) var(--space-6); border-bottom: var(--rule) solid var(--color-ink); }
@media (min-width: 720px) {
  .desk-solo--text .card-body {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-3) var(--space-10);
    align-items: start;
  }
  .desk-solo--text .card-meta { grid-column: 1 / -1; }
  .desk-solo--text .card-title { grid-column: 1; grid-row: 2 / span 2; }
  .desk-solo--text .card-excerpt { grid-column: 2; grid-row: 2; font-size: var(--text-read); line-height: 1.6; }
  .desk-solo--text .card-foot { grid-column: 2; grid-row: 3; }
}

/* Two stories: unequal diptych. */
.desk-diptych { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
@media (min-width: 720px) {
  .desk-diptych { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); }
  .desk-diptych > * + * { padding-left: var(--space-8); border-left: var(--rule-hair) solid var(--color-ink); }
}

/* Characters: staggered portrait strip, framed like pasted photos. */
.desk-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-4);
  align-items: start;
}
.desk-strip .card-image { aspect-ratio: 4 / 5; border: var(--rule) solid var(--color-ink); }
.desk-strip .card-image img { object-position: 50% 25%; }
.desk-strip .story-card:nth-child(even) { margin-top: var(--space-8); }
@media (min-width: 900px) {
  .desk-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
  .desk-strip .story-card:nth-child(even) { margin-top: var(--space-12); }
  .desk-strip .story-card:nth-child(3n+1) .card-image { transform: rotate(-1deg); }
  .desk-strip .story-card:nth-child(3n+2) .card-image { transform: rotate(0.8deg); }
}

/* World: one big picture plus a ruled list. */
.desk-spread { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
.desk-spread-lead .card-image { aspect-ratio: 16 / 10; }
.desk-spread-list { display: grid; align-content: start; }
.desk-spread-list .story-card { padding-block: var(--space-4); border-top: var(--rule-hair) solid var(--color-ink); }
.desk-spread-list .story-card:first-child { border-top: var(--rule-heavy) solid var(--color-ink); }
.desk-spread-list .story-card--compact .card-image { flex-basis: 30%; aspect-ratio: 4 / 3; }
@media (min-width: 900px) {
  .desk-spread { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-10); }
  .desk-spread-list .story-card:first-child { border-top: 0; padding-top: 0; }
}

/* Three or more, no pictures: ruled newspaper columns. */
.desk-columns { display: grid; grid-template-columns: minmax(0, 1fr); }
.desk-columns .story-card { padding-block: var(--space-5); }
.desk-columns .story-card + .story-card { border-top: var(--rule) solid var(--color-ink); }
.desk-columns .card-title { font-size: var(--text-xl); }
@media (min-width: 900px) {
  /* Lead story large on the left, the rest stacked as a ruled list: never three equal columns. */
  .desk-columns { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-10); }
  .desk-columns .story-card:first-child { grid-row: 1 / span 3; padding: 0 var(--space-10) 0 0; border-right: var(--rule-hair) solid var(--color-ink); }
  .desk-columns .story-card:first-child .card-title { font-size: var(--text-2xl); font-stretch: var(--stretch-splash); font-weight: 900; text-transform: uppercase; line-height: 0.98; }
  .desk-columns .story-card:first-child .card-excerpt { font-size: var(--text-base); }
  .desk-columns .story-card:not(:first-child) { padding-block: var(--space-4); }
  .desk-columns .story-card:nth-child(2) { padding-top: 0; border-top: 0; }
  .desk-columns .story-card:not(:first-child) .card-title { font-size: var(--text-lg); }
  .desk-columns .story-card:only-child { grid-column: 1 / -1; border-right: 0; }
}

/* Music: a loud magenta band with a square record sleeve. */
.desk--music {
  margin-top: var(--space-20);
  padding-block: var(--space-12) var(--space-16);
  background: var(--color-magenta);
  color: var(--color-white);
}
.desk--music .section-head { border-top-color: var(--color-white); }
.desk--music .card-desk, .desk--music .card-meta, .desk--music .card-excerpt { color: var(--color-white); }
.desk--music .card-image { aspect-ratio: 1; border: var(--rule) solid var(--color-ink); }
.desk--music .stamp--mini { color: var(--color-white); }
@media (min-width: 720px) {
  .desk--music .desk-solo .story-card--feature { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-10); }
}
@media (min-width: 1024px) {
  .desk--music .desk-solo .card-image { max-width: 30rem; }
}

/* ---------- 5. Night band ---------- */
.night {
  margin-top: var(--space-20);
  padding-block: var(--space-12) var(--space-16);
  background: var(--color-violet);
  color: var(--color-on-violet);
}
.desk--music + .night { margin-top: 0; }
.night .section-head h2 { color: var(--color-on-violet); }
.night-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
.night-reels { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.night-reels .video-card:first-child h3 { font-size: var(--text-xl); }
.night-desk { align-self: start; padding-top: var(--space-4); border-top: var(--rule-heavy) solid var(--color-neon); }
.night-desk-title {
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  font-size: var(--text-xl);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-neon);
}
.night-list { list-style: none; padding: 0; margin-block: var(--space-4); }
.night-list li {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-top: var(--rule-hair) solid var(--color-on-violet-2);
}
.night-list li:first-child { border-top: 0; }
.night-list a {
  font-family: var(--font-display);
  font-stretch: var(--stretch-head);
  font-weight: 800;
  font-size: var(--text-lg);
  line-height: 1.1;
}
.night-list .stamp--mini { color: var(--color-on-violet-2); }
.night-desk .section-more { color: var(--color-neon); }
@media (min-width: 720px) {
  .night-reels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); }
  .night-reels .video-card:first-child { grid-column: 1 / -1; }
}
/* Desktop: lead reel two-thirds wide with the other two stacked beside it;
   the trailer desk runs underneath as a two-column ruled list, so no hole opens. */
@media (min-width: 1024px) {
  .night-reels { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
  .night-reels .video-card:first-child { grid-column: 1; grid-row: 1 / span 2; }
  .night-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-10); }
  .night-list li:nth-child(2) { border-top: 0; }
}

/* ---------- 6. Every desk: classified index ---------- */
.desk-index { padding-top: var(--space-20); }
.night + .desk-index { padding-top: var(--space-16); margin-top: var(--space-4); }
.desk-index-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  border-top: var(--rule-hair) solid var(--color-ink);
  border-left: var(--rule-hair) solid var(--color-ink);
}
.desk-index-list a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 44px;
  height: 100%;
  padding: var(--space-4) var(--space-5);
  border-right: var(--rule-hair) solid var(--color-ink);
  border-bottom: var(--rule-hair) solid var(--color-ink);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.desk-index-list a:hover { background: var(--color-highlighter); color: var(--color-ink); }
.desk-index-name {
  font-family: var(--font-display);
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  font-size: var(--text-xl);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.desk-index-count {
  font-stretch: var(--stretch-stamp);
  font-weight: 700;
  font-size: var(--text-xs);
  white-space: nowrap;
  color: var(--color-text-2);
}
.desk-index-list a:hover .desk-index-count { color: var(--color-ink); }

/* ---------- Motion: the one authored moment, the verdict stamp landing ---------- */
@media (prefers-reduced-motion: no-preference) {
  .splash-stamp .stamp { animation: stamp-land var(--dur-slow) var(--ease-out) 200ms both; }
}
@keyframes stamp-land {
  from { transform: rotate(-14deg) scale(1.7); }
  to { transform: rotate(-7deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .splash-image img { transition: none; }
  .splash-figure:hover .splash-image img { transform: none; }
  .desk-index-list a { transition: none; }
}
@media (min-width: 1200px) {
  .desk-index-list { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .desk-index-list a { flex-direction: column; justify-content: start; }
}
@media (min-width: 1200px) { .desk-index-name { font-size: var(--text-lg); } }

/* Facts lead with the value; the label follows as a plain caption, not a kicker. */
.ticker-fact { display: flex; flex-direction: column; }
.ticker-fact dt { order: 2; margin-top: var(--space-1); font-stretch: var(--stretch-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0; text-transform: none; }

/* Desk pages (/news/, /category/<key>/): magenta desk masthead, file-tab strip,
 * stamped lead splash, ruled rows with a boxed desk index, and on /news/ the
 * stories grouped desk by desk (the trailers desk runs in the night band). */

/* Desk masthead: full-bleed magenta splash band between heavy ink rules. */
.desk-masthead {
  margin-top: var(--space-2);
  background: var(--color-magenta);
  color: var(--color-white);
  border-block: var(--rule-heavy) solid var(--color-ink);
}
.desk-masthead-inner {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-8) var(--space-8);
}
.desk-masthead h1 {
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  font-size: min(6rem, max(var(--text-display), 15vw));
  line-height: 0.84;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.desk-remit { display: grid; gap: var(--space-4); align-content: end; min-width: 0; }
.desk-intro {
  max-width: 44ch;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.45;
}

/* Tally: highlighter swipes in expanded Archivo, computed from source records. */
.desk-tally {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.desk-tally span {
  padding: var(--space-1) var(--space-2);
  background: var(--color-highlighter);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-stretch: var(--stretch-stamp);
  font-weight: 800;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
}
.desk-tally span:first-child { background: var(--color-ink); color: var(--color-highlighter); }

/* Topic tabs: file-folder tabs on a heavy ink rule; scrolls sideways on small screens. */
.topic-tabs {
  display: flex;
  margin-top: var(--space-8);
  padding-inline-start: var(--rule);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  border-bottom: var(--rule-heavy) solid var(--color-ink);
}
.topic-tabs a {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  margin-inline-start: calc(var(--rule) * -1);
  padding: 0 var(--space-4);
  border: var(--rule) solid var(--color-ink);
  border-bottom: 0;
  background: var(--color-paper-2);
  font-stretch: var(--stretch-head);
  font-weight: 800;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.topic-tabs a:hover { background: var(--color-highlighter); color: var(--color-ink); }
.topic-tabs a[aria-current="page"] { background: var(--color-ink); color: var(--color-paper); }
.topic-tabs a:focus-visible { outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--color-focus-halo); }
.tab-count {
  font-size: var(--text-xs);
  font-stretch: var(--stretch-ui);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-text-2);
}
.topic-tabs a[aria-current="page"] .tab-count { color: var(--color-highlighter); }

/* Lead splash: big cropped plate, rotated verdict stamp on its corner. */
.desk-lead { position: relative; margin-top: var(--space-10); }
.desk-lead .story-card--splash { gap: var(--space-5); }
.desk-lead .card-image { aspect-ratio: 3 / 2; border: var(--rule) solid var(--color-ink); }
.desk-lead .card-title { line-height: 0.9; }
.desk-lead--short .card-title { font-size: var(--text-3xl); }
.desk-lead--long .card-title { font-size: var(--text-2xl); }
.desk-lead .card-excerpt { max-width: 52ch; font-size: var(--text-base); color: var(--color-ink-2); }
.desk-lead .card-foot { display: none; }
.desk-lead .card-body { gap: var(--space-4); align-content: end; }
.desk-lead-stamp {
  position: absolute;
  z-index: 2;
  top: var(--space-4);
  left: var(--space-4);
  pointer-events: none;
  animation: desk-stamp-land var(--dur-slow) var(--ease-out) 160ms both;
}
.desk-lead-credit { margin-top: var(--space-3); }
@keyframes desk-stamp-land {
  from { transform: scale(1.6); }
  to { opacity: 1; transform: scale(1); }
}

/* Desk page body: ruled rows beside a boxed desk index. */
.desk-more {
  display: grid;
  gap: var(--space-12);
  margin-top: var(--space-12);
}
.desk-rows { min-width: 0; border-bottom: var(--rule) solid var(--color-ink); }
.desk-rows .story-card--row:first-child { border-top: var(--rule-heavy) solid var(--color-ink); }
.desk-rows .card-image { aspect-ratio: 4 / 3; }
.desk-rows .card-title { font-size: var(--text-xl); }

aside.desk-index {
  align-self: start;
  padding: var(--space-5) var(--space-5) var(--space-3);
  border: var(--rule) solid var(--color-ink);
  outline: var(--rule-hair) solid var(--color-ink);
  outline-offset: 3px;
  background: var(--color-paper-2);
}
aside.desk-index h2 {
  padding-bottom: var(--space-3);
  border-bottom: var(--rule-heavy) solid var(--color-ink);
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  font-size: var(--text-xl);
  line-height: 0.95;
  text-transform: uppercase;
}
aside.desk-index ul { margin: 0; padding: 0; list-style: none; }
aside.desk-index li + li { border-top: var(--rule-hair) solid var(--color-ink); }
aside.desk-index a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 48px;
  font-stretch: var(--stretch-head);
  font-weight: 800;
  font-size: var(--text-base);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
aside.desk-index a:hover { background: var(--color-highlighter); color: var(--color-ink); }
.desk-index-count {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text-2);
}

/* /news/: one ruled block per desk; trailers flips into the night band. */
.desk-group { padding-block: var(--space-12) 0; }
.desk-group:first-of-type { padding-top: var(--space-16); }
.desk-group-inner {
  display: grid;
  gap: var(--space-6) var(--space-10);
  padding-top: var(--space-4);
  border-top: var(--rule-heavy) solid currentColor;
}
.desk-group-head { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.desk-group-head h2 {
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  font-size: var(--text-3xl);
  line-height: 0.86;
  text-transform: uppercase;
}
.desk-group-link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 800;
  font-size: var(--text-sm);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.desk-group-stories { min-width: 0; display: grid; gap: var(--space-6); }
.desk-group-stories > .story-card--row { padding-top: 0; border-top: 0; }
.desk-group-more {
  display: grid;
  gap: var(--space-6) var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--rule) solid currentColor;
}
.desk-group-more .card-title { font-size: var(--text-lg); }

.desk-group.surface-dark {
  margin-top: var(--space-16);
  padding-block: var(--space-12) var(--space-16);
  background: var(--color-violet);
  color: var(--color-on-violet);
  border-block: var(--rule-heavy) solid var(--color-magenta);
}
.desk-group.surface-dark .desk-group-inner { border-top-color: var(--color-neon); }
.desk-group.surface-dark h2 { color: var(--color-neon); }
.desk-group.surface-dark .card-image { background: var(--color-violet-2); }
.desk-group.surface-dark + .desk-group { padding-top: var(--space-16); }

@media (min-width: 720px) {
  .desk-group-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .desk-masthead-inner {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--space-12);
    padding-block: var(--space-12) var(--space-10);
  }
  .desk-lead .story-card--splash {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-10);
    align-items: end;
  }
  .desk-lead .card-body { padding-bottom: var(--space-2); }
  .desk-lead-credit { width: calc(58.333% - var(--space-6)); }
  .desk-lead-stamp { top: var(--space-6); left: var(--space-6); }
  .desk-more { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-12); }
  .desk-more--solo { grid-template-columns: minmax(0, 1fr); }
  .desk-more--solo aside.desk-index ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-8); }
  .desk-more--solo aside.desk-index li { border-top: 0; border-bottom: var(--rule-hair) solid var(--color-ink); }
  aside.desk-index { position: sticky; top: var(--space-6); }
  .desk-more--solo aside.desk-index { position: static; }
  .desk-group-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
  .desk-group-head { position: sticky; top: var(--space-6); align-self: start; }
  .desk-group-head h2 { font-size: var(--text-2xl); }
}

/* Mini stamps may wrap inside narrow columns rather than clip. */

@media (max-width: 719px) {
  .desk-rows .story-card--row { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: var(--space-4); padding-block: var(--space-5); }
  .desk-rows .card-image { aspect-ratio: 1; }
  .desk-rows .card-title { font-size: var(--text-lg); }
  .desk-lead-stamp { top: var(--space-3); left: var(--space-3); }
  .desk-group-head h2 { font-size: var(--text-2xl); }
}

@media (max-width: 479px) {
  .desk-rows .card-excerpt { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .desk-lead-stamp { animation: none; }
  .topic-tabs a { transition: none; }
}

/* Article page: magenta splash header with the receipts panel, the photo plate,
 * a ruled Literata reading column with a sticky story rail, the numbered source
 * list and the keep-reading block. Scoped to body.article-page. */

/* Splash band: white type on hot magenta, the plate overlaps its foot. */
.article-splash {
  background: var(--color-magenta);
  color: var(--color-white);
  padding-bottom: var(--space-24);
}
.article-splash .breadcrumbs,
.article-splash .breadcrumbs a,
.article-splash .breadcrumbs a:last-child { color: var(--color-white); }
.article-splash .breadcrumbs a:hover { color: var(--color-ink); background: var(--color-highlighter); }
.article-splash .breadcrumbs a:last-child { opacity: 1; text-decoration: none; }

.splash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
  gap: var(--space-12) var(--space-16);
  align-items: start;
  padding-top: var(--space-8);
}
.article-heading { min-width: 0; }
.article-headline {
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  line-height: var(--leading-tight);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}
.headline--xl { font-size: var(--text-display); }
.headline--l { font-size: var(--text-3xl); }
.headline--m { font-size: var(--text-2xl); }
@media (min-width: 1024px) {
  .headline--m { font-size: var(--text-3xl); }
}
.article-deck {
  max-width: 58ch;
  margin-top: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.5;
}
.article-byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-3);
  border-top: var(--rule) solid var(--color-white);
  font-size: var(--text-xs);
  font-stretch: var(--stretch-stamp);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.article-byline > * + *::before { content: "·"; margin-right: var(--space-3); }
.article-byline strong { font-weight: 900; }
.article-notes { display: grid; justify-items: start; gap: var(--space-2); margin-top: var(--space-5); }
.event-note, .updated {
  max-width: 62ch;
  padding: var(--space-2) var(--space-3);
  background: var(--color-highlighter);
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: 1.45;
}
.updated { background: var(--color-paper); }
.event-note strong, .updated strong {
  margin-right: var(--space-1);
  font-size: var(--text-2xs);
  font-stretch: var(--stretch-stamp);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Receipts panel: the article's signature, a boxed fact sheet with the verdict stamp. */
.receipts {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-paper);
  color: var(--color-ink);
  border: var(--rule-heavy) solid var(--color-ink);
  --color-focus: var(--color-ink);
  --color-focus-halo: var(--color-highlighter);
  --color-link-hover: var(--color-magenta-deep);
}
.splash-grid > .receipts { margin-top: var(--space-10); }
.receipts .stamp {
  justify-self: end;
  margin-top: calc(-1 * var(--space-12));
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  animation: receipts-stamp var(--dur-slow) var(--ease-out) 120ms both;
}
@keyframes receipts-stamp {
  from { scale: 1.22; }
}
.receipts-title {
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  font-size: var(--text-xl);
  line-height: 0.95;
  text-transform: uppercase;
}
.receipts-facts { margin: 0; border-top: var(--rule) solid var(--color-ink); }
.receipts-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  border-bottom: var(--rule-hair) solid var(--color-rule-soft);
}
.receipts-row dt {
  font-size: var(--text-2xs);
  font-stretch: var(--stretch-stamp);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-2);
}
.receipts-row dd {
  margin: 0;
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  font-size: var(--text-xl);
  line-height: 1;
}
.receipts-row--date dd { font-stretch: var(--stretch-head); font-weight: 800; font-size: var(--text-sm); }
.receipts-link { width: 100%; }

/* Plate: official image, wide, overlapping the splash foot. */
.article-plate { position: relative; margin-top: calc(-1 * var(--space-16)); }
.plate-frame { background: var(--color-ink); border: var(--rule-heavy) solid var(--color-ink); }
.plate-frame img { width: 100%; }
.article-plate--tall .plate-frame img { height: min(80vh, 46rem); object-fit: contain; }
.plate-alt { flex: 1 1 32rem; min-width: 0; }
.plate-credit { font-weight: 700; white-space: nowrap; }

/* Reading layout: Literata column on the left, ruled story rail on the right. */
.reading-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--measure)) minmax(16rem, 22rem);
  justify-content: space-between;
  gap: var(--space-12) var(--space-16);
  margin-top: var(--space-16);
}
.article-body { grid-column: 1; grid-row: 1; min-width: 0; }
.reading-rail {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  min-width: 0;
}
.rail-title {
  margin-bottom: var(--space-2);
  font-size: var(--text-2xs);
  font-stretch: var(--stretch-stamp);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.story-toc { padding-top: var(--space-3); border-top: var(--rule-heavy) solid var(--color-ink); }
.toc-list { list-style: none; margin: 0; padding: 0; border-top: var(--rule) solid var(--color-ink); }
.toc-list li { border-bottom: var(--rule-hair) solid var(--color-rule-soft); }
.toc-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-2);
  font-stretch: var(--stretch-head);
  font-weight: 700;
  font-size: var(--text-sm);
  line-height: 1.2;
}
.toc-list a:hover { background: var(--color-highlighter); color: var(--color-ink); }
.toc-list li:last-child a { font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; }
.share-tools { padding-top: var(--space-3); border-top: var(--rule) solid var(--color-ink); }
.share-row { display: flex; gap: var(--space-2); }
.share-btn { flex: 1 1 0; padding-inline: var(--space-4); }
.rail-policy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 800;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Reading column */
.article-body {
  font-family: var(--font-body);
  font-size: var(--text-read);
  line-height: var(--leading-read);
}
.article-body > * + * { margin-top: var(--space-5); }
.article-body > h2 {
  margin-top: var(--space-12);
  padding-top: var(--space-3);
  border-top: var(--rule-heavy) solid var(--color-ink);
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  font-size: var(--text-xl);
  line-height: 0.98;
  text-transform: uppercase;
  scroll-margin-top: var(--space-6);
}
.article-body > h2:first-child { margin-top: 0; }
.article-body > h3 {
  margin-top: var(--space-8);
  font-stretch: var(--stretch-head);
  font-weight: 800;
  font-size: var(--text-lg);
  line-height: 1.1;
  scroll-margin-top: var(--space-6);
}
.article-body > h2 + *, .article-body > h3 + * { margin-top: var(--space-4); }
.article-body > p:first-of-type { font-size: var(--text-lg); line-height: 1.6; }
.article-body strong {
  font-weight: 700;
  background: linear-gradient(transparent 58%, var(--color-highlighter) 58%, var(--color-highlighter) 92%, transparent 92%);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.article-body > p a:not(.citation), .article-body li a:not(.citation) {
  text-decoration: underline;
  text-decoration-color: var(--color-magenta);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.article-body .citation { min-height: 24px; line-height: 1.45; }
.article-body > ul, .article-body > ol { padding-left: var(--space-6); }
.article-body > ul li::marker { color: var(--color-magenta); }
.article-body > ol li::marker { font-family: var(--font-display); font-weight: 800; color: var(--color-magenta-deep); }
.article-body > ul li + li, .article-body > ol li + li { margin-top: var(--space-2); }
.article-body > blockquote {
  margin-block: var(--space-10);
  padding-block: var(--space-5) var(--space-6);
  border-top: var(--rule-heavy) solid var(--color-ink);
  border-bottom: var(--rule) solid var(--color-ink);
  font-family: var(--font-display);
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  font-size: var(--text-xl);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-magenta-deep);
}
.article-body code { padding: 0 var(--space-1); background: var(--color-paper-2); font-size: 0.88em; }

/* Official video: a dusk night band inside the column. */
.article-video {
  margin-block: var(--space-10);
  padding: var(--space-5);
  background: var(--color-violet);
  color: var(--color-on-violet);
  border-top: var(--rule-heavy) solid var(--color-neon);
}
.article-body > .article-video + * { margin-top: var(--space-10); }
.article-video .video-card h3 { font-size: var(--text-xl); }
.article-video .video-source a { color: var(--color-neon); }

/* Sources: ruled, numbered receipts. */
.sources {
  margin-top: var(--space-16);
  padding-top: var(--space-4);
  border-top: var(--rule-heavy) solid var(--color-ink);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-ui);
  scroll-margin-top: var(--space-6);
}
.article-body > .sources { margin-top: var(--space-16); }
.sources h2 {
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  font-size: var(--text-2xl);
  line-height: 0.95;
  text-transform: uppercase;
}
.sources-summary {
  max-width: 60ch;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-2);
}
.source-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; border-top: var(--rule) solid var(--color-ink); }
.source-list li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3);
  border-bottom: var(--rule-hair) solid var(--color-rule-soft);
  scroll-margin-top: var(--space-8);
}
.source-list li:target { background: var(--color-highlighter); border-bottom-color: var(--color-ink); }
.source-number {
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  font-size: var(--text-xl);
  line-height: 1;
}
.source-entry { min-width: 0; }
.source-title {
  font-stretch: var(--stretch-head);
  font-weight: 800;
  font-size: var(--text-base);
  line-height: 1.2;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.source-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-2);
}
.source-publisher { font-weight: 800; color: var(--color-ink); }
.source-list li:target .source-meta { color: var(--color-ink); }

/* Keep reading: one feature, two compact. */
.article-page .related { margin-top: var(--space-24); }
.more-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-10) var(--space-12);
}
.more-stack { display: grid; align-content: start; }
.more-stack .story-card { padding-block: var(--space-6); border-top: var(--rule) solid var(--color-ink); }
.more-stack .story-card:first-child { padding-top: 0; border-top: 0; }

@media (min-width: 1024px) and (min-height: 760px) {
  .reading-rail { position: sticky; top: var(--space-6); }
}

@media (max-width: 1023px) {
  .splash-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }
  .receipts { max-width: 34rem; }
  .article-splash { padding-bottom: var(--space-20); }
  .article-plate { margin-top: calc(-1 * var(--space-12)); }
  .reading-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); margin-top: var(--space-10); }
  .reading-rail, .article-body { grid-column: 1; grid-row: auto; }
  .article-body { max-width: var(--measure); }
  .reading-rail { gap: var(--space-5); }
  .toc-list {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding-block: var(--space-3);
    border-top: 0;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .toc-list li { flex: none; border: 0; scroll-snap-align: start; }
  .toc-list a { white-space: nowrap; padding-inline: var(--space-3); border: var(--rule) solid var(--color-ink); }
  .share-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
  .share-tools .rail-title { flex: 1 0 100%; margin-bottom: 0; }
  .share-row { flex: 1 1 18rem; }
  .rail-policy { margin-top: 0; }
  .more-grid { grid-template-columns: minmax(0, 1fr); }
  .more-stack .story-card:first-child { padding-top: var(--space-6); border-top: var(--rule) solid var(--color-ink); }
}

@media (max-width: 719px) {
  .article-splash { padding-bottom: var(--space-16); }
  .splash-grid { padding-top: var(--space-4); }
  .headline--l { font-size: var(--text-3xl); }
  .article-deck { font-size: var(--text-base); }
  .article-byline { gap: var(--space-1) var(--space-5); }
  .article-byline > * + *::before { content: none; }
  .receipts { padding: var(--space-5); }
  .receipts .stamp { margin-top: calc(-1 * var(--space-10)); }
  .article-plate { width: 100%; margin-top: calc(-1 * var(--space-10)); }
  .plate-frame { border-inline: 0; }
  .article-plate .media-credit { padding-inline: var(--gutter); }
  .plate-credit { white-space: normal; }
  .article-video { margin-inline: calc(-1 * var(--gutter)); padding: var(--space-4) var(--gutter); }
  .source-list li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); padding-inline: var(--space-2); }
  .article-body > blockquote { font-size: var(--text-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .receipts .stamp { animation: none; }
}

/* Keep reading: cap the lead picture so the compact column is not left short. */
.more-grid .story-card--feature .card-image { aspect-ratio: 16 / 9; }

/* When the plate would repeat the clip poster, the official player takes its place. */
.article-plate--video {
  padding: var(--space-6) var(--space-6) var(--space-8);
  background: var(--color-violet);
  color: var(--color-on-violet);
}
.article-plate--video .video-card { gap: var(--space-3); }
.article-plate--video .video-card h3 { font-size: var(--text-xl); }
@media (max-width: 719px) {
  .article-plate--video { padding: var(--space-4) var(--gutter) var(--space-6); }
}

/* Utility pages: release tracker, video night band, search, reading pages, 404.
 * Owned by Site.utility_pages in build.py. Every class here is prefixed pg-
 * except the hooks site.js and the tests rely on (archive-search, search-status,
 * search-fallback, archive-links). */

/* ---------- Shared page head ---------- */
.pg-head {
  display: grid;
  gap: var(--space-4);
  padding-block: var(--space-8) var(--space-10);
}
.pg-head h1 {
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.pg-deck {
  max-width: 46ch;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.45;
}
.pg-section-note {
  max-width: var(--measure);
  margin: calc(var(--space-4) * -1) 0 var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-2);
}
.pg-source {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 800;
  font-size: var(--text-sm);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---------- /release-date/: magenta splash ---------- */
.pg-rd-splash {
  margin-top: var(--space-4);
  background: var(--color-magenta);
  color: var(--color-white);
  border-block: var(--rule-heavy) solid var(--color-ink);
}
.pg-rd-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--space-10) var(--space-12);
  padding-block: var(--space-12) var(--space-16);
}
.pg-rd-title {
  display: grid;
  justify-items: start;
  gap: var(--space-3);
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  text-transform: uppercase;
  line-height: var(--leading-tight);
}
.pg-rd-lead {
  font-stretch: var(--stretch-head);
  font-weight: 800;
  font-size: var(--text-xl);
  letter-spacing: 0.01em;
}
.pg-rd-day {
  padding: 0.08em 0.2em 0;
  background: var(--color-highlighter);
  color: var(--color-ink);
  font-size: var(--text-3xl);
  transform: rotate(-2deg);
  transform-origin: 0 100%;
}
.pg-rd-date {
  margin-top: var(--space-2);
  font-size: clamp(3.75rem, 1rem + 10vw, 9rem);
  line-height: 0.84;
  letter-spacing: -0.015em;
}
.pg-rd-year { display: block; }
.pg-rd-side {
  display: grid;
  justify-items: start;
  gap: var(--space-6);
}
.pg-rd-stamp {
  justify-self: end;
  margin-bottom: var(--space-2);
  animation: pg-stamp-in var(--dur-slow) var(--ease-out) both;
}
@keyframes pg-stamp-in {
  from { transform: rotate(-14deg) scale(1.5); }
  to { transform: rotate(-6deg) scale(1); }
}
.pg-rd-facts { width: 100%; margin: 0; }
.pg-rd-facts dt {
  font-stretch: var(--stretch-stamp);
  font-weight: 700;
  font-size: var(--text-2xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pg-rd-facts dd {
  margin: 0;
  padding-block: var(--space-2);
  border-bottom: var(--rule) solid var(--color-white);
  font-family: var(--font-display);
  font-stretch: var(--stretch-head);
  font-weight: 900;
  font-size: var(--text-2xl);
  line-height: 1;
  text-transform: uppercase;
}
.pg-rd-facts dt + dd { margin-top: var(--space-2); border-top: var(--rule-heavy) solid var(--color-white); }
.pg-rd-note {
  max-width: 42ch;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
}
.pg-rd-cta:hover { border-color: var(--color-ink); }

/* Editions: price tags with a marker swipe. */
.pg-rd-editions { padding-top: var(--space-16); }
.pg-edition-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr);
  border: var(--rule) solid var(--color-ink);
}
.pg-edition {
  display: grid;
  align-content: space-between;
  gap: var(--space-8);
  min-width: 0;
  padding: var(--space-6);
}
.pg-edition + .pg-edition { border-left: var(--rule) solid var(--color-ink); }
.pg-edition h3 {
  font-stretch: var(--stretch-head);
  font-weight: 900;
  font-size: var(--text-xl);
  line-height: 1;
  text-transform: uppercase;
}
.pg-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  font-family: var(--font-display);
}
.pg-price-cur, .pg-price-rest {
  font-stretch: var(--stretch-stamp);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pg-price-amount {
  padding-inline: 0.06em;
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  font-size: var(--text-3xl);
  line-height: 0.9;
  background-image: linear-gradient(var(--color-highlighter), var(--color-highlighter));
  background-repeat: no-repeat;
  background-size: 100% 0.42em;
  background-position: 0 86%;
}
.pg-edition--collector { background: var(--color-ink); color: var(--color-paper); }
.pg-collector {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: 1.4;
}
.pg-price-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-4);
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-2);
}
.pg-price-note .pg-source { color: var(--color-ink); font-family: var(--font-ui); }

/* Evidence timeline: a ruled strip of dated records. */
.pg-rd-trail {
  margin-top: var(--space-16);
  padding-block: var(--space-12) var(--space-16);
  background: var(--color-paper-2);
  border-block: var(--rule) solid var(--color-ink);
}
.pg-timeline {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: var(--rule-heavy) solid var(--color-ink);
}
.pg-event {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-8) var(--space-5) var(--space-4) 0;
}
.pg-event::before {
  content: "";
  position: absolute;
  top: calc(var(--space-4) * -1);
  left: 0;
  width: var(--space-6);
  height: var(--space-6);
  background: var(--color-highlighter);
  outline: var(--rule) solid var(--color-ink);
}
.pg-event-date {
  font-stretch: var(--stretch-stamp);
  font-weight: 800;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pg-event h3 {
  font-stretch: var(--stretch-head);
  font-weight: 900;
  font-size: var(--text-xl);
  line-height: 1;
  text-transform: uppercase;
}
.pg-event p {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-2);
}
.pg-event--launch {
  padding-left: var(--space-5);
  background: var(--color-magenta);
  color: var(--color-white);
  --color-link-hover: var(--color-ink);
  --color-focus-halo: var(--color-highlighter);
}
.pg-event--launch::before { left: var(--space-5); background: var(--color-white); }
.pg-event--launch p { color: var(--color-white); }

/* Known / not announced ledger. */
.pg-ledger { padding-top: var(--space-16); }
.pg-ledger-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-6);
}
.pg-ledger-col {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--rule) solid var(--color-ink);
}
.pg-ledger-col h3 {
  font-stretch: var(--stretch-stamp);
  font-weight: 800;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pg-ledger-col ul { list-style: none; padding: 0; }
.pg-ledger-col--known li {
  padding-block: var(--space-3);
  border-top: var(--rule-hair) solid var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.45;
}
.pg-ledger-col--unknown {
  background: var(--color-ink);
  color: var(--color-paper);
  border-color: var(--color-ink);
}
.pg-ledger-col--unknown h3 { color: var(--color-highlighter); }
.pg-ledger-col--unknown li {
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  font-size: var(--text-2xl);
  line-height: 0.98;
  text-transform: uppercase;
}
.pg-ledger-foot {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-paper-3);
}
.pg-desk { padding-top: var(--space-16); }
.pg-desk .section-head { margin-bottom: 0; }

/* ---------- /videos/: full-page night band ---------- */
.pg-night {
  background: var(--color-violet);
  color: var(--color-on-violet);
  padding-bottom: var(--space-20);
}
.page-videos .site-footer, .page-404 .site-footer { margin-top: 0; }
.pg-night .breadcrumbs { color: var(--color-on-violet-2); }
.pg-night .breadcrumbs a:last-child { color: var(--color-on-violet); }
.pg-head--night { padding-bottom: var(--space-12); }
.pg-head--night h1 { color: var(--color-neon); }
.pg-head--night .pg-deck { color: var(--color-on-violet-2); }
.pg-vid-section + .pg-vid-section { margin-top: var(--space-20); }
.pg-band-head {
  margin-bottom: var(--space-8);
  padding-top: var(--space-3);
  border-top: var(--rule-heavy) solid var(--color-neon);
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  font-size: var(--text-2xl);
  line-height: 0.95;
  text-transform: uppercase;
}
.pg-band-note {
  max-width: var(--measure);
  margin: calc(var(--space-4) * -1) 0 var(--space-8);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-on-violet-2);
}
.pg-vid-lead {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-8) var(--space-8);
}
.pg-vid-lead > .video-card:first-child { grid-row: span 2; }
.pg-vid-lead > .video-card:first-child h3 {
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  text-transform: uppercase;
}
.pg-vid-lead > .video-card:first-child > p:not(.video-meta) { max-width: 60ch; font-size: var(--text-base); }
.pg-vid-lead > .video-card:not(:first-child) {
  padding-top: var(--space-4);
  border-top: var(--rule) solid var(--color-on-violet-2);
}
.pg-vid-lead > .video-card:not(:first-child) > p:not(.video-meta) { display: none; }
.pg-vid-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8) var(--space-6);
}
.pg-vid-grid > .video-card:first-child { grid-column: span 2; grid-row: span 2; }
.pg-vid-grid > .video-card:first-child h3 { font-stretch: var(--stretch-splash); font-weight: 900; font-size: var(--text-2xl); text-transform: uppercase; line-height: 0.96; }
.pg-vid-grid > .video-card:not(:first-child) > p:not(.video-meta) { display: none; }
.pg-night .video-source a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-neon); }
.pg-night .video-meta { color: var(--color-neon); }

/* ---------- /search/ ---------- */
.pg-head--search { padding-bottom: var(--space-8); }
.pg-finder {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--color-ink);
  color: var(--color-paper);
  --color-focus: var(--color-highlighter);
  --color-focus-halo: var(--color-ink);
}
.pg-finder label {
  font-stretch: var(--stretch-stamp);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pg-finder .search-field { border: 0; background: var(--color-paper); color: var(--color-ink); }
.pg-finder .search-field input {
  min-height: 4rem;
  font-size: var(--text-xl);
}
.pg-finder .search-field button {
  min-height: 4rem;
  background: var(--color-magenta);
  color: var(--color-white);
  white-space: nowrap;
}
.pg-finder .search-field button:hover { background: var(--color-highlighter); color: var(--color-ink); }
.pg-finder select {
  width: 100%;
  min-height: 4rem;
  padding: 0 var(--space-4);
  border: var(--rule) solid var(--color-ink);
  border-radius: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-weight: 800;
  font-size: var(--text-base);
}
.search-status {
  min-height: 1.5em;
  margin-block: var(--space-6) var(--space-8);
  font-stretch: var(--stretch-stamp);
  font-weight: 800;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.search-status:empty { margin: 0; min-height: var(--space-6); }
.page-search:not(.search-ready) .pg-results { display: none; }
.pg-results { padding-bottom: var(--space-16); }
.search-fallback { padding-top: var(--space-8); }
.archive-links {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-10);
  border-bottom: var(--rule) solid var(--color-ink);
}
.archive-links li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-3);
  border-top: var(--rule-hair) solid var(--color-ink);
}
.archive-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-stretch: var(--stretch-head);
  font-weight: 800;
  font-size: var(--text-lg);
  line-height: 1.1;
}
.archive-links a:hover { color: var(--color-ink); background: var(--color-highlighter); }
.archive-links span {
  font-stretch: var(--stretch-head);
  font-weight: 800;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-magenta-deep);
  white-space: nowrap;
}

/* ---------- Reading pages: about, privacy (prose) and editorial policy (notice) ---------- */
.pg-reading {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--space-12);
}
.pg-reading > .breadcrumbs { grid-column: 1 / -1; }
.pg-head--reading {
  align-self: start;
  position: sticky;
  top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--rule-heavy) solid var(--color-ink);
  margin-top: var(--space-4);
}
.pg-head--reading h1 { font-size: var(--text-3xl); }
.pg-byline {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-2);
}
.pg-byline strong { color: var(--color-ink); }
.pg-prose {
  max-width: var(--measure);
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-read);
  line-height: var(--leading-read);
}
.pg-prose-part { padding-block: var(--space-6) var(--space-8); border-top: var(--rule) solid var(--color-ink); }
.pg-prose-part--coda { border-top: 0; padding-top: 0; }
.pg-prose h2, .pg-rule h2 {
  margin-bottom: var(--space-4);
  font-stretch: var(--stretch-head);
  font-weight: 900;
  font-size: var(--text-xl);
  line-height: 1;
  text-transform: uppercase;
}
.pg-prose p + p { margin-top: var(--space-4); }
.pg-prose a, .pg-rule a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.pg-prose-part:first-child > p:first-of-type { font-size: var(--text-lg); line-height: 1.55; }

/* Editorial policy: house rules set as ruled tabloid columns (no frames, no nested boxes). */
.page-notice .pg-reading { grid-template-columns: minmax(0, 1fr); }
.page-notice .pg-head--reading { position: static; padding-bottom: var(--space-8); }
.page-notice .pg-head--reading h1 { font-size: var(--text-display); }
.pg-notice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-12);
}
.pg-rule {
  min-width: 0;
  padding-block: var(--space-5) var(--space-10);
  border-top: var(--rule) solid var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
}
.pg-rule h2 { margin-bottom: var(--space-3); font-stretch: var(--stretch-splash); font-weight: 900; font-size: var(--text-xl); line-height: 1; text-transform: uppercase; }
.pg-rule:has(.pg-legend) { grid-column: 1 / -1; border-top-width: var(--rule-heavy); }
.pg-legend {
  margin: var(--space-4) 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--space-8);
}
.pg-legend > div { min-width: 0; padding-top: var(--space-4); border-top: var(--rule-hair) solid var(--color-ink); }
.pg-legend dt {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 0.2em 0.5em;
  border: var(--rule) solid var(--color-stamp);
  color: var(--color-stamp);
  font-family: var(--font-display);
  font-stretch: var(--stretch-stamp);
  font-weight: 900;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pg-legend dd { margin: 0; font-size: var(--text-base); line-height: 1.5; }

/* ---------- 404 ---------- */
.pg-lost {
  margin-top: var(--space-10);
  background: var(--color-magenta);
  color: var(--color-white);
  border-block: var(--rule-heavy) solid var(--color-ink);
}
.pg-lost-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-10);
  padding-block: var(--space-16) var(--space-20);
}
.pg-lost-copy { display: grid; gap: var(--space-6); justify-items: start; }
.pg-lost h1 {
  font-stretch: var(--stretch-splash);
  font-weight: 900;
  font-size: clamp(4rem, 1rem + 11vw, 9.5rem);
  line-height: 0.84;
  text-transform: uppercase;
  letter-spacing: -0.015em;
}
.pg-lost-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pg-btn-paper { background: var(--color-paper); color: var(--color-ink); }
.pg-btn-paper:hover { background: var(--color-highlighter); }
.pg-lost-stamp {
  justify-self: center;
  font-size: clamp(1.125rem, 0.6rem + 1.6vw, 1.875rem);
  animation: pg-stamp-in var(--dur-slow) var(--ease-out) both;
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .pg-rd-grid, .pg-lost-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-rd-stamp { justify-self: start; }
  .pg-edition-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pg-edition--collector { grid-column: 1 / -1; }
  .pg-edition--collector.pg-edition { border-left: 0; border-top: var(--rule) solid var(--color-ink); }
  .pg-timeline { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .pg-event {
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: var(--space-6);
    padding: var(--space-5) var(--space-5) var(--space-5) var(--space-10);
    border-top: var(--rule) solid var(--color-ink);
  }
  .pg-event > :not(.pg-event-date) { grid-column: 2; }
  .pg-event-date { grid-row: 1 / span 3; padding-top: 0.3em; }
  .pg-event::before { top: var(--space-5); left: 0; }
  .pg-event--launch::before { left: var(--space-3); }
  .pg-ledger-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-vid-lead { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pg-vid-lead > .video-card:first-child { grid-column: 1 / -1; grid-row: auto; }
  .pg-vid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-reading { grid-template-columns: minmax(0, 1fr); }
  .pg-head--reading { position: static; }
  .pg-notice { grid-template-columns: minmax(0, 1fr); }
  .pg-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-6); }
  .archive-links { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 719px) {
  .pg-head { padding-block: var(--space-6) var(--space-8); }
  .pg-rd-grid { padding-block: var(--space-10) var(--space-12); }
  .pg-rd-day { font-size: var(--text-2xl); }
  .pg-finder { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  .pg-finder .search-field input { font-size: var(--text-lg); }
  .pg-finder .search-field button { padding: 0 var(--space-4); }
  .pg-edition-list { grid-template-columns: minmax(0, 1fr); }
  .pg-edition + .pg-edition { border-left: 0; border-top: var(--rule) solid var(--color-ink); }
  .pg-edition { padding: var(--space-5); gap: var(--space-4); }
  .pg-event { grid-template-columns: minmax(0, 1fr); padding-left: var(--space-10); }
  .pg-event > :not(.pg-event-date), .pg-event-date { grid-column: 1; grid-row: auto; padding-top: 0; }
  .pg-vid-lead, .pg-vid-grid { grid-template-columns: minmax(0, 1fr); }
  .pg-vid-grid > .video-card:first-child { grid-column: auto; grid-row: auto; }
  .pg-rule { padding-block: var(--space-5) var(--space-8); }
  .pg-legend { grid-template-columns: minmax(0, 1fr); }
  .archive-links li { grid-template-columns: minmax(0, 1fr); }
  .archive-links a { font-size: var(--text-base); }
}
@media (prefers-reduced-motion: reduce) {
  .pg-rd-stamp, .pg-lost-stamp { animation: none; }
}

/* With JS the filtered results replace the full no-JS list. */
.js.search-ready .search-fallback { display: none; }

/* Facts lead with the value; the label follows as a plain caption, not a kicker. */
.pg-rd-facts > div { display: flex; flex-direction: column; }
.pg-rd-facts dt { order: 2; margin-top: var(--space-1); font-stretch: var(--stretch-ui); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0; text-transform: none; }