/* ─────────────────────────────────────────────────────────────────────────────
   Sovereign Terminal — main.css
   Design system from DESIGN.md / code.html
   ───────────────────────────────────────────────────────────────────────────── */

/* ── 1. Design Tokens ─────────────────────────────────────────────────────── */
:root {
  /* ── Core palette — warm parchment ─────────────────────────────────────── */
  --base: #fcfaf6;
  --elevated: #ffffff;
  --sunken: #f1ece1;
  --deep: #141210;
  --deep-soft: #1e1a15;

  /* Ink */
  --ink: #211d17;
  --ink-body: #3a342b;
  --ink-muted: #77705f;
  --ink-faint: #a79c87;

  /* Gold */
  --gold: #b08d3f;
  --gold-deep: #8a6b25;
  /* Darkest gold, for large display numerals. Global because the editorial
     index and desk panels use it too, not just the hero. */
  --gold-ink: #6f5518;
  --gold-bright: #e3c983;
  --gold-wash: #f7efdc;
  --gold-hairline: rgba(176, 141, 63, 0.22);
  --gold-hairline-strong: rgba(176, 141, 63, 0.45);

  /* Data semantics — green means "market up", nothing else */
  --data-up: #2e6a55;
  --data-down: #a33f31;
  --data-flat: var(--ink-muted);

  /* ── Legacy aliases ────────────────────────────────────────────────────────
     The theme's original dark-scheme token names are re-pointed here so the
     ~2,900 lines of downstream CSS resolve to light values without edits. */
  --primary: var(--gold);
  --on-primary: var(--ink);
  --primary-container: var(--gold-wash);
  --on-primary-container: var(--gold-deep);
  --primary-fixed: var(--gold-bright);
  --primary-fixed-dim: var(--gold);
  --on-primary-fixed: var(--ink);
  --on-primary-fixed-variant: var(--gold-deep);
  --inverse-primary: var(--gold-bright);

  --secondary: var(--gold-deep);
  --on-secondary: #ffffff;
  --secondary-container: var(--gold-wash);
  --on-secondary-container: var(--gold-deep);
  --secondary-fixed: var(--gold-wash);
  --secondary-fixed-dim: var(--gold-bright);
  --on-secondary-fixed: var(--ink);
  --on-secondary-fixed-variant: var(--gold-deep);

  --tertiary: var(--ink-muted);
  --on-tertiary: #ffffff;
  --tertiary-container: var(--gold-wash);
  --on-tertiary-container: var(--gold-deep);
  --tertiary-fixed: var(--sunken);
  --tertiary-fixed-dim: var(--gold-wash);
  --on-tertiary-fixed: var(--ink);
  --on-tertiary-fixed-variant: var(--ink-body);

  --error: var(--data-down);
  --on-error: #ffffff;
  --error-container: #f7e2de;
  --on-error-container: #7a2c21;

  --surface: var(--base);
  --surface-dim: var(--sunken);
  --surface-bright: var(--elevated);
  --surface-container-lowest: var(--elevated);
  --surface-container-low: var(--base);
  --surface-container: var(--sunken);
  --surface-container-high: var(--sunken);
  --surface-container-highest: var(--elevated);
  --surface-variant: var(--sunken);
  --surface-tint: var(--gold);

  --on-surface: var(--ink);
  --on-surface-variant: var(--ink-muted);
  --inverse-surface: var(--deep);
  --inverse-on-surface: var(--base);

  --outline: var(--ink-muted);
  --outline-variant: var(--gold-hairline);

  --background: var(--base);
  --on-background: var(--ink);

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-headline: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-label: "Inter", system-ui, -apple-system, sans-serif;

  /* Fluid type scale */
  --text-display: clamp(2.5rem, 5vw, 4rem);
  --text-headline-lg: clamp(1.75rem, 3vw, 2.5rem);
  --text-headline-md: clamp(1.25rem, 2vw, 1.6rem);
  --text-headline-sm: clamp(1.05rem, 1.5vw, 1.25rem);
  --text-body: 1rem;
  --text-label: 0.6875rem;

  /* ── Spacing 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;

  /* ── Border radius ─────────────────────────────────────────────────────── */
  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;

  /* ── Nav metrics ───────────────────────────────────────────────────────── */
  --nav-h: 68px;
  --topbar-h: 34px;
  --header-h: calc(var(--nav-h) + var(--topbar-h));

  /* ── Rules ─────────────────────────────────────────────────────────────── */
  --rule: var(--gold-hairline);
  --rule-strong: rgba(33, 29, 23, 0.16);
  --rule-ink: rgba(33, 29, 23, 0.1);

  /* Rules on inverted (deep) grounds */
  --rule-invert: rgba(227, 201, 131, 0.18);

  /* ── Shadows — used sparingly; luxury reads flat ───────────────────────── */
  --shadow-sm: 0 1px 2px rgba(33, 29, 23, 0.04);
  --shadow-md: 0 4px 16px rgba(33, 29, 23, 0.06);
  --shadow-lg: 0 12px 40px rgba(33, 29, 23, 0.08);
}

/* ── 2. Reset & Base ──────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  background-color: var(--base);
  color: var(--ink-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "kern" 1;
  padding-top: var(--header-h);
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  color: var(--gold-deep);
}
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}
ul,
ol {
  list-style: none;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--font-headline);
  line-height: 1.15;
}

h1,
h2,
h3,
h4,
h5 {
  color: var(--ink);
  letter-spacing: -0.02em;
  font-weight: 600;
}

/* Tabular figures everywhere numbers matter */
time,
.ticker__track,
.player__times,
[class*="__count"],
[class*="__index"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ── 3. Layout Utilities ──────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--space-8);
}

.container--narrow {
  max-width: 860px;
}

.section-pad {
  padding-block: var(--space-20);
}

/* ── 4. Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  min-height: 44px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.btn:active {
  transform: translateY(1px);
}

/* Gold fill with ink text — white on gold fails AA at ~2.9:1 */
.btn--primary {
  background-color: var(--gold);
  color: var(--ink);
}

.btn--primary:hover {
  background-color: var(--gold-deep);
  color: #fff;
}

/* --gold-deep on --gold-wash is 4.35:1, which fails AA at this small,
   non-bold text size (needs 4.5:1). Darkened locally rather than changing
   --gold-deep, which passes everywhere else it is used. */
.btn--secondary {
  background-color: var(--gold-wash);
  color: #7c6021;
}

.btn--secondary:hover {
  background-color: var(--gold);
  color: var(--ink);
}

.btn--ghost {
  background: transparent;
  color: var(--ink-body);
  border: 1px solid var(--gold-hairline-strong);
}

.btn--ghost:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
  background-color: var(--gold-wash);
}

/* For use inside --deep blocks (footer, hero console) */
.btn--on-deep {
  background-color: var(--gold-bright);
  color: var(--ink);
}

.btn--on-deep:hover {
  background-color: #fff;
  color: var(--ink);
}

/* ── 5. Chips / Tags ──────────────────────────────────────────────────────── */
.chip {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-full);
  background-color: var(--gold-wash);
  /* --gold-deep on --gold-wash is 4.35:1, below the 4.5:1 AA floor at this
     small size; darkened locally rather than changing --gold-deep, which
     passes everywhere else it is used. */
  color: #7c6021;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
}

.chip:hover {
  background-color: var(--gold);
  color: var(--ink);
}

/* Chips on inverted grounds */
.is-deep .chip,
.chip--on-deep {
  background-color: rgba(227, 201, 131, 0.14);
  color: var(--gold-bright);
}

.is-deep .chip:hover,
.chip--on-deep:hover {
  background-color: var(--gold-bright);
  color: var(--ink);
}

/* ── Shared: the status pulse dot ─────────────────────────────────────────── */
.badge-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--data-up);
  box-shadow: 0 0 0 0 rgba(46, 106, 85, 0.5);
  animation: st-pulse 2.4s ease-out infinite;
}

.is-deep .badge-dot {
  background-color: var(--gold-bright);
  box-shadow: 0 0 0 0 rgba(227, 201, 131, 0.5);
}

@keyframes st-pulse {
  70% {
    box-shadow: 0 0 0 6px rgba(46, 106, 85, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(46, 106, 85, 0);
  }
}

/* ── Shared: visually hidden, still read by screen readers ────────────────── */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Shared: section ground helpers ───────────────────────────────────────── */
.is-sunken {
  background-color: var(--sunken);
}

.is-deep {
  background-color: var(--deep);
  color: var(--base);
}

.is-deep h1,
.is-deep h2,
.is-deep h3,
.is-deep h4 {
  color: var(--base);
}

/* ── Shared: the rail heading used by every section ───────────────────────── */
.rail-heading {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.rail-heading__text {
  font-family: var(--font-headline);
  font-size: var(--text-headline-md);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.is-deep .rail-heading__text {
  color: var(--gold-bright);
}

.rail-heading__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    var(--gold-hairline-strong),
    transparent
  );
}

.rail-heading--tight {
  margin-bottom: var(--space-5);
}

/* ── 6. Navigation ────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: var(--space-3) var(--space-5);
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--elevated);
  border-bottom: 1px solid var(--gold-hairline);
}

/* Topbar — ink strip */
.topbar {
  height: var(--topbar-h);
  overflow: hidden;
  transition:
    height 0.3s ease,
    opacity 0.3s ease;
}

.topbar__inner {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--space-8);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-family: var(--font-label);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.topbar__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--gold-bright);
}

.topbar__date {
  color: rgba(252, 250, 246, 0.55);
}

.topbar__tagline {
  margin-left: auto;
  color: rgba(252, 250, 246, 0.55);
}

/* Nav row */
.nav-primary {
  position: relative;
  background-color: var(--elevated);
}

.nav-inner {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--space-8);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-brand .custom-logo-link,
.nav-brand .custom-logo {
  display: block;
}

/* Height is customizer-driven; --logo-h is printed inline by st_customizer_css() */
.custom-logo {
  max-height: var(--logo-h, 40px);
  width: auto;
  display: block;
}

.site-logo {
  font-family: var(--font-headline);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* Menu — centred */
.nav-menu {
  flex: 1;
  display: flex;
  justify-content: center;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav-list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-body);
  transition: color 0.18s ease;
}

/* Gold underline that wipes in from the left */
.nav-list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 12px;
  width: 100%;
  height: 2px;
  background-color: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-list a:hover,
.nav-list .current-menu-item > a {
  color: var(--ink);
}

.nav-list a:hover::after,
.nav-list .current-menu-item > a::after {
  transform: scaleX(1);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
  margin-left: auto;
}

.nav-cta {
  padding: 0.7rem 1.4rem;
}

/* Condensed state — main.js toggles .site-header--scrolled (verified main.js:32) */
.site-header--scrolled .topbar {
  height: 0;
  opacity: 0;
}

.site-header--scrolled {
  box-shadow: var(--shadow-md);
}

.site-header--scrolled .nav-inner {
  height: 58px;
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
}

.nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  margin-inline: auto;
  background-color: var(--ink);
  transition:
    transform 0.24s ease,
    opacity 0.24s ease;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── 7. Hero — centred broadcast stage ────────────────────────────────────── */
/* New shades, mixed from the existing gold so they stay in family:
   --ink-deep  a warmer near-black for the console
   --parchment-warm  a faintly warmer base for the stage ground */
.hero--stage {
  --ink-deep: #17130d;
  --parchment-warm: #fbf7ee;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--space-16) var(--space-12);
  background-color: var(--parchment-warm);
  text-align: center;
}

/* ── Decorative field ─────────────────────────────────────────────────────── */
.stage__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ── Full-bleed subject plate ─────────────────────────────────────────────── */
.stage__plate {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.stage__plate-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Hold the eye-line near the top third — the crop's strongest region — rather
     than drifting to the chin on wide viewports. */
  object-position: 50% 12%;
  /* Strip the blue/purple source, lift contrast, then sepia-shift toward gold */
  filter: grayscale(1) contrast(1.34) brightness(1.02) sepia(0.62) saturate(1.5)
    hue-rotate(-12deg);
  opacity: 0.58;
  /* No transform/scale transition: the hero's height changes whenever the
     synopsis expands or a scrollbar appears, and an animated transform turns
     that reflow into a visible zoom. Only opacity animates now. */
  transition: opacity 0.6s ease;
  animation: stage-plate-in 1.2s ease both;
}

@keyframes stage-plate-in {
  from {
    opacity: 0;
  }
}

/* Cursor lifts the plate's presence — brightness only, no geometry change */
.hero--stage.is-hovered .stage__plate-img {
  opacity: 0.72;
}

/* ── Cursor lens ───────────────────────────────────────────────────────────
   A second copy of the plate, un-veiled and cooler-graded, revealed only
   inside a disc that follows the pointer. Because it sits ABOVE the veil it
   genuinely uncovers the photograph rather than washing colour over it. */
.stage__lens {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.45s ease;
  /* Fades out over the lower third so the lens can never wash out the dossier
     and synopsis, whose AA margin was measured against the veiled plate. */
  --lens-cutoff: linear-gradient(
    to bottom,
    #000 0%,
    #000 44%,
    rgba(0, 0, 0, 0.2) 54%,
    transparent 60%
  );
  /* Disc mask ∩ lower cutoff. Two layers with mask-composite:intersect so the
     lens is both circular AND absent over the text zone. */
  mask-image:
    radial-gradient(
      220px circle at var(--mx, 50%) var(--my, 40%),
      #000 0%,
      #000 42%,
      rgba(0, 0, 0, 0.55) 62%,
      transparent 78%
    ),
    var(--lens-cutoff);
  mask-composite: intersect;
  -webkit-mask-image:
    radial-gradient(
      220px circle at var(--mx, 50%) var(--my, 40%),
      #000 0%,
      #000 42%,
      rgba(0, 0, 0, 0.55) 62%,
      transparent 78%
    ),
    var(--lens-cutoff);
  -webkit-mask-composite: source-in;
}

.hero--stage.is-hovered .stage__lens {
  opacity: 1;
}

.stage__lens-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  /* Same crop, graded hard and cool: a steel-blue counterpoint to the warm gold
     plate, so the disc reads as a different exposure rather than a brightness
     bump. sepia() then hue-rotate() is the reliable way to tint a greyscale
     image — hue-rotate alone does nothing to desaturated pixels. */
  filter: grayscale(1) contrast(1.7) brightness(0.86) sepia(0.85)
    hue-rotate(165deg) saturate(2.6);
  opacity: 0.95;
}

/* Gold rim + inner shadow give the disc a physical edge */
.stage__lens-rim {
  position: absolute;
  left: var(--mx, 50%);
  top: var(--my, 40%);
  width: 440px;
  height: 440px;
  margin: -220px 0 0 -220px;
  border-radius: 50%;
  border: 1px solid rgba(227, 201, 131, 0.55);
  box-shadow:
    /* Inner vignette seats the disc into the page */
    inset 0 0 70px rgba(23, 19, 13, 0.5),
    /* Thin cool inner line + warm outer bloom: a two-tone edge reads as glass */
    inset 0 0 0 1px rgba(150, 190, 220, 0.28),
    0 0 50px rgba(176, 141, 63, 0.22);
  pointer-events: none;
}


/* Gold duotone wash locks the photo into the palette */
.stage__plate-duotone {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    150deg,
    rgba(176, 141, 63, 0.4),
    rgba(23, 19, 13, 0.32) 55%,
    rgba(176, 141, 63, 0.28)
  );
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* Parchment veil: keeps body copy readable over the photo. Strongest at the
   centre column where the text sits, lighter at the edges so the image reads. */
.stage__plate-veil {
  position: absolute;
  inset: 0;
  background:
    /* Readability pocket: opaque only directly behind the headline + standfirst,
       falling away fast so the portrait stays legible either side of the column. */
    radial-gradient(
      ellipse 40% 46% at 50% 30%,
      var(--parchment-warm) 42%,
      rgba(251, 247, 238, 0.82) 68%,
      rgba(251, 247, 238, 0) 100%
    ),
    /* Feathered edges, plus a solid floor from ~62% down. Measured against the
       rendered pixels, the dossier and synopsis sat on the photo's dark chin
       area at 1.6-3.0:1 — well under AA. The image stays open across the
       headline band and the outer margins, which is where it reads anyway. */
    linear-gradient(
      to bottom,
      var(--parchment-warm) 0%,
      rgba(251, 247, 238, 0.34) 24%,
      rgba(251, 247, 238, 0.46) 52%,
      rgba(251, 247, 238, 0.93) 66%,
      var(--parchment-warm) 74%,
      var(--parchment-warm) 100%
    );
}

/* Fine broadcast scanlines — ties the photo to the "on air" idea */
.stage__plate-scan {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(23, 19, 13, 0.06) 0,
    rgba(23, 19, 13, 0.06) 1px,
    transparent 1px,
    transparent 4px
  );
  opacity: 0.5;
  mix-blend-mode: multiply;
}

/* Fine gold rule grid, faded at the edges */
.stage__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--gold-hairline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--gold-hairline) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.42;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 42%, #000 35%, transparent 78%);
}

/* Second grid pass, lit only under the cursor — the lines brighten locally as
   the pointer crosses them, which reads as a scanning instrument. */
.stage__grid-live {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--gold) 1px, transparent 1px),
    linear-gradient(to bottom, var(--gold) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0;
  transition: opacity 0.45s ease;
  mask-image: radial-gradient(
    300px circle at var(--mx, 50%) var(--my, 40%),
    #000 10%,
    rgba(0, 0, 0, 0.35) 45%,
    transparent 72%
  );
  -webkit-mask-image: radial-gradient(
    300px circle at var(--mx, 50%) var(--my, 40%),
    #000 10%,
    rgba(0, 0, 0, 0.35) 45%,
    transparent 72%
  );
}

.hero--stage.is-hovered .stage__grid-live {
  opacity: 0.55;
}

/* Cursor-tracked warm spotlight. main.js publishes --mx/--my on #hero and
   toggles .is-hovered — no new script needed. */
.stage__spot {
  position: absolute;
  inset: 0;
  background:
    /* Tight warm core */
    radial-gradient(
      180px circle at var(--mx, 50%) var(--my, 40%),
      rgba(227, 201, 131, 0.5),
      rgba(176, 141, 63, 0.22) 45%,
      transparent 72%
    ),
    /* Wide ambient bloom that keeps the falloff from banding */
    radial-gradient(
      520px circle at var(--mx, 50%) var(--my, 40%),
      rgba(176, 141, 63, 0.14),
      transparent 68%
    );
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.hero--stage.is-hovered .stage__spot {
  opacity: 1;
}

/* Concentric gold seal behind the headline */
.stage__seal {
  position: absolute;
  top: 8%;
  left: 50%;
  width: min(560px, 78vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid var(--gold-hairline);
  box-shadow:
    0 0 0 1px transparent,
    inset 0 0 0 44px transparent,
    inset 0 0 0 45px var(--gold-hairline),
    inset 0 0 0 96px transparent,
    inset 0 0 0 97px rgba(176, 141, 63, 0.1);
  opacity: 0.5;
  animation: stage-seal 26s linear infinite;
}

@keyframes stage-seal {
  to {
    transform: translateX(-50%) rotate(360deg);
  }
}

/* ── Stage column ─────────────────────────────────────────────────────────── */
.stage {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Entrance: each element rises in sequence */
.stage > * {
  animation: stage-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.stage__kicker { animation-delay: 0.05s; }
.stage__title { animation-delay: 0.12s; }
.stage__standfirst { animation-delay: 0.2s; }
.stage__console { animation-delay: 0.28s; }
.stage__dossier { animation-delay: 0.36s; }
.stage__about { animation-delay: 0.44s; }

@keyframes stage-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Kicker ───────────────────────────────────────────────────────────────── */
.stage__kicker {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.stage__kicker-mark,
.stage__kicker-rule {
  height: 1px;
  width: clamp(24px, 8vw, 72px);
  background: linear-gradient(to right, transparent, var(--gold));
}

.stage__kicker-rule {
  background: linear-gradient(to left, transparent, var(--gold));
}

.stage__kicker-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
  white-space: nowrap;
}

/* ── Headline ─────────────────────────────────────────────────────────────── */
.stage__title {
  font-family: var(--font-headline);
  font-size: clamp(2.75rem, 9vw, 6.5rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-bottom: var(--space-5);
}

.stage__line {
  display: block;
}

/* The accent line is outlined, not filled — the strongest single departure
   from the old solid-serif hero. */
.stage__line--accent {
  font-style: italic;
  font-weight: 400;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-ink);
  background-image: linear-gradient(
    to bottom,
    rgba(176, 141, 63, 0.16),
    rgba(176, 141, 63, 0)
  );
  -webkit-background-clip: text;
  background-clip: text;
}

.stage__standfirst {
  font-size: clamp(0.9375rem, 1.6vw, 1.125rem);
  line-height: 1.55;
  color: var(--ink-body);
  max-width: 46ch;
  margin-bottom: var(--space-10);
  text-wrap: balance;
}

/* ── Console ──────────────────────────────────────────────────────────────────
   Treated as a machined object rather than a rounded box: the top-right corner
   is cut on a 45° chamfer, gold light rakes across it at an angle, and a bevel
   catches the edge. The obliques are what stop it reading as a plain card. */
.stage__console {
  position: relative;
  width: 100%;
  background-color: var(--ink-deep);
  /* Extra top padding clears the chamfer so the runtime label never collides
     with the cut corner. */
  padding: var(--space-8) var(--space-6) var(--space-5);
  box-shadow:
    0 28px 70px rgba(23, 19, 13, 0.22),
    0 2px 0 rgba(227, 201, 131, 0.14) inset;
  text-align: left;
  overflow: hidden;
  /* Chamfered top-right corner — the console's signature cut. */
  clip-path: polygon(
    0 0,
    calc(100% - 34px) 0,
    100% 34px,
    100% 100%,
    34px 100%,
    0 calc(100% - 34px)
  );
}

/* ── Unmute prompt ────────────────────────────────────────────────────────────
   Floats over the console's bottom-right while the episode plays silently.
   Positioned inside .stage__console, which is position:relative. */
.unmute {
  position: absolute;
  /* Bottom-left: the transport is centred and the rate button sits right, so
     this corner is free. Also keeps the prompt clear of the runtime label. */
  left: var(--space-6);
  bottom: var(--space-5);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0.7rem 1.1rem 0.7rem 0.8rem;
  border-radius: var(--radius-full);
  background: linear-gradient(145deg, var(--gold-bright), var(--gold));
  color: var(--ink);
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 10px 28px rgba(176, 141, 63, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
  /* Entry state — .is-visible flips these */
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  transition:
    opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s ease;
}

.unmute.is-visible {
  opacity: 1;
  transform: none;
}

.unmute:hover {
  box-shadow:
    0 14px 34px rgba(176, 141, 63, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.unmute:active {
  transform: translateY(1px);
}

.unmute__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  background: rgba(23, 19, 13, 0.16);
}

/* Loud icon is revealed on hover — a preview of what the tap does */
.unmute__icon-loud {
  display: none;
}

.unmute:hover .unmute__icon-muted {
  display: none;
}

.unmute:hover .unmute__icon-loud {
  display: block;
}

/* Expanding ring, drawing the eye without moving the button */
.unmute__pulse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--gold-bright);
  animation: st-unmute-pulse 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes st-unmute-pulse {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

/* ── Oblique furniture ────────────────────────────────────────────────────── */
.stage__console-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Angled gold bands raking across the panel */
.stage__console-oblique {
  position: absolute;
  inset: -30%;
  background: repeating-linear-gradient(
    115deg,
    transparent 0,
    transparent 46px,
    rgba(227, 201, 131, 0.05) 46px,
    rgba(227, 201, 131, 0.05) 47px,
    transparent 47px,
    transparent 92px,
    rgba(176, 141, 63, 0.09) 92px,
    rgba(176, 141, 63, 0.09) 94px,
    transparent 94px,
    transparent 150px
  );
  mask-image: linear-gradient(115deg, #000 5%, rgba(0, 0, 0, 0.35) 45%, transparent 75%);
  -webkit-mask-image: linear-gradient(115deg, #000 5%, rgba(0, 0, 0, 0.35) 45%, transparent 75%);
}

/* Warm bevel down the left edge + a highlight along the chamfer */
.stage__console-bevel {
  position: absolute;
  inset: 0;
  background:
    /* Bright inner edge, top */
    linear-gradient(
      to bottom,
      rgba(227, 201, 131, 0.3),
      rgba(227, 201, 131, 0.05) 2px,
      transparent 14px
    ),
    /* Warm corner light falling from the top-left */
    radial-gradient(
      130% 100% at 2% 0%,
      rgba(176, 141, 63, 0.22),
      transparent 58%
    ),
    /* Deep shadow pooling bottom-right, opposite the light */
    radial-gradient(
      90% 80% at 100% 100%,
      rgba(0, 0, 0, 0.42),
      transparent 60%
    );
}

/* The cut corner, drawn as a gold hairline so the chamfer reads deliberate */
.stage__console-notch {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 50px;
  height: 50px;
  background: linear-gradient(
    225deg,
    transparent 0,
    transparent calc(50% - 1px),
    rgba(227, 201, 131, 0.55) calc(50% - 1px),
    rgba(227, 201, 131, 0.55) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

.stage__console-fx::after {
  content: "";
  position: absolute;
  left: -1px;
  bottom: -1px;
  width: 50px;
  height: 50px;
  background: linear-gradient(
    45deg,
    transparent 0,
    transparent calc(50% - 1px),
    rgba(227, 201, 131, 0.4) calc(50% - 1px),
    rgba(227, 201, 131, 0.4) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

.stage__console-grain {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cfilter id='cg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='110' height='110' filter='url(%23cg)' opacity='0.3'/%3E%3C/svg%3E");
}

/* Console content clears the furniture */
.stage__console-head,
.stage__wave-wrap,
.stage__transport {
  position: relative;
  z-index: 1;
}

.stage__console-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  font-family: var(--font-label);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.stage__nowplaying {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--gold-bright);
}

.stage__runtime {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  color: rgba(252, 250, 246, 0.5);
}

.stage__runtime-val {
  color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
}

/* ── Waveform scrubber ────────────────────────────────────────────────────── */
.stage__wave-wrap {
  margin-bottom: var(--space-5);
}

/* .player__bar.stage__wave, not .stage__wave alone: the base .player__bar rule
   (height:4px) is defined later in the file, so a single class would lose the
   cascade and collapse the waveform to a hairline.
   container-type lets the played-bar copy size to this track via 100cqw. */
.player__bar.stage__wave {
  position: relative;
  height: 56px;
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  container-type: inline-size;
}

/* The generated bars sit under the fill and read the fill width via a mask */
.stage__wave-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  pointer-events: none;
}

.stage__wave-bars i {
  flex: 1;
  height: var(--h, 40%);
  min-height: 3px;
  border-radius: var(--radius-full);
  background-color: rgba(252, 250, 246, 0.16);
  transition: background-color 0.2s ease;
}

.stage__wave .player__bar-buffer {
  height: 100%;
  background-color: rgba(252, 250, 246, 0.05);
  border-radius: 0;
}

/* The fill is a clipping window: main.js sets its width as a %, and the gold
   bar copy inside is pinned to the full track width, so the gold bars stay in
   register with the grey ones underneath instead of sliding or restretching. */
.stage__wave .player__bar-fill {
  height: 100%;
  border-radius: 0;
  background: none;
  overflow: hidden;
}

/* Pinned to the TRACK's box (not the narrower fill) via 100cqw, so the gold
   bars stay in register with the grey ones as the fill grows. */
.stage__wave-bars--played {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100cqw;
  display: flex;
  align-items: center;
  gap: 3px;
  pointer-events: none;
}

.stage__wave-bars--played i {
  flex: 1;
  height: var(--h, 40%);
  min-height: 3px;
  border-radius: var(--radius-full);
  background-color: var(--gold-bright);
}

/* Keep the played portion emphatic during playback. Without this the rising
   unplayed bars close the tonal gap and the gold reads as fading out. */
.hero__console.is-playing .stage__wave-bars--played i {
  background-color: #f2ddb0;
  box-shadow: 0 0 6px rgba(227, 201, 131, 0.45);
}

.stage__wave .player__bar-knob {
  right: -5px;
  width: 10px;
  height: 10px;
  background-color: var(--gold-bright);
  box-shadow: 0 0 0 5px rgba(227, 201, 131, 0.16);
}

.stage__wave:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 8px;
  border-radius: var(--radius-sm);
}

.stage__times {
  margin-top: var(--space-3);
  color: rgba(252, 250, 246, 0.55);
}

/* ── Transport ────────────────────────────────────────────────────────────── */
/* Transport centres the three playback controls; the rate toggle is pushed to
   the right edge so it reads as a setting rather than part of the cluster. */
.stage__transport {
  position: relative;
  justify-content: center;
  gap: var(--space-5);
}

.stage__transport .player__rate {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.stage__play {
  position: relative;
  width: 56px;
  height: 56px;
}

/* Pulsing ring while playing */
.stage__play-ring {
  position: absolute;
  inset: -6px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(227, 201, 131, 0.45);
  opacity: 0;
}

.stage__play.is-playing .stage__play-ring {
  animation: stage-ring 2s ease-out infinite;
}

@keyframes stage-ring {
  0% {
    opacity: 0.8;
    transform: scale(0.9);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

/* ── Dossier ──────────────────────────────────────────────────────────────── */
.stage__dossier {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8) var(--space-12);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--gold-hairline);
  width: 100%;
}

.stage__datum {
  text-align: center;
}

.stage__datum-label {
  font-family: var(--font-label);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* --ink-body, not --ink-muted: measured against the rendered plate pixels,
     --ink-muted lands at 3.85:1 here. These sit over the photo, not a flat
     token background, so the usual token-vs-token check understates them. */
  color: var(--ink-body);
  margin-bottom: var(--space-2);
}

.stage__datum-val {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-body);
}

/* Oversized serif numerals — the dossier's visual hook */
.stage__num {
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
}

/* ── Synopsis ─────────────────────────────────────────────────────────────── */
.stage__about {
  margin-top: var(--space-8);
  max-width: 62ch;
}

.stage__about-text {
  font-size: 0.9375rem;
  line-height: 1.75;
  /* Over the plate, --ink-muted measures 4.18:1 against real pixels. */
  color: var(--ink-body);
  margin-bottom: var(--space-4);
}

.stage__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* #5C4614, darker than --gold-ink: the cursor spotlight can wash a warm
     rgb(219,204,159) bloom across this row, where --gold-ink measures 4.40:1
     against the rendered pixels. This clears AA even under the brightest
     point of the bloom. */
  color: #5c4614;
  transition: color 0.18s ease, gap 0.18s ease;
}

.stage__toggle:hover {
  color: var(--ink);
  gap: var(--space-3);
}

.stage__toggle .hero__about-toggle-icon {
  transition: transform 0.24s ease;
}

.stage__toggle[aria-expanded="true"] .hero__about-toggle-icon {
  transform: rotate(180deg);
}

/* ── Equaliser (kept from the previous hero, restyled) ─────────────────────── */
.hero__eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.hero__eq i {
  width: 2px;
  /* Full height + scaleY transform origin at the base: animating `height` here
     loses to the flex container's sizing, so the bars stayed pinned at 3px.
     A transform can't be overridden by layout and is cheaper to animate. */
  height: 12px;
  transform: scaleY(0.25);
  transform-origin: bottom;
  background-color: var(--gold-bright);
  transition: transform 0.2s ease;
}

.hero__console.is-playing .hero__eq i {
  animation: st-eq 0.9s ease-in-out infinite;
}

.hero__console.is-playing .hero__eq i:nth-child(2) { animation-delay: 0.15s; }
.hero__console.is-playing .hero__eq i:nth-child(3) { animation-delay: 0.3s; }
.hero__console.is-playing .hero__eq i:nth-child(4) { animation-delay: 0.45s; }

/* Defined here because the previous hero owned this keyframe and was replaced —
   without it the bars sit frozen at their 4px base height. */
@keyframes st-eq {
  0%,
  100% {
    transform: scaleY(0.25);
  }
  50% {
    transform: scaleY(1);
  }
}

/* Unplayed bars lift slightly while playing. Kept subtle so it never competes
   with the gold played portion. */
.hero__console.is-playing .stage__wave-bars:not(.stage__wave-bars--played) i {
  background-color: rgba(252, 250, 246, 0.22);
}
/* ── Podcast Player — gold controls on ink ────────────────────────────────── */
.player__track {
  margin-bottom: var(--space-5);
}

.player__bar {
  position: relative;
  height: 4px;
  border-radius: var(--radius-full);
  background-color: rgba(252, 250, 246, 0.14);
  cursor: pointer;
}

.player__bar:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 6px;
}

/* Wider invisible hit area — the 4px bar alone is not a 44px target */
.player__bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  bottom: -20px;
}

.player__bar-buffer {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  background-color: rgba(252, 250, 246, 0.16);
}

.player__bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--gold-deep), var(--gold-bright));
}

.player__bar-knob {
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background-color: var(--gold-bright);
  box-shadow: 0 0 0 4px rgba(227, 201, 131, 0.18);
}

.player__times {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-3);
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(252, 250, 246, 0.6);
}

.player__transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
}

.player__skip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  color: rgba(252, 250, 246, 0.75);
  transition:
    color 0.18s ease,
    background-color 0.18s ease;
}

.player__skip:hover {
  color: var(--gold-bright);
  background-color: rgba(227, 201, 131, 0.1);
}

.player__skip-num {
  position: absolute;
  font-family: var(--font-label);
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* Gold disc — the console's focal point */
.player__play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background: linear-gradient(145deg, var(--gold-bright), var(--gold));
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(176, 141, 63, 0.28);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.player__play-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 26px rgba(176, 141, 63, 0.4);
}

.player__play-btn:active {
  transform: scale(0.97);
}

/* Icon swap — main.js toggles .is-playing on the button */
.player__play-btn .icon-pause {
  display: none;
}

.player__play-btn.is-playing .icon-play {
  display: none;
}

.player__play-btn.is-playing .icon-pause {
  display: block;
}

.player__rate {
  min-width: 44px;
  height: 44px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-full);
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(252, 250, 246, 0.75);
  transition:
    color 0.18s ease,
    background-color 0.18s ease;
}

.player__rate:hover {
  color: var(--gold-bright);
  background-color: rgba(227, 201, 131, 0.1);
}

.player__bar.is-scrubbing .player__bar-knob {
  transform: translateY(-50%) scale(1.25);
  box-shadow: 0 0 0 6px rgba(227, 201, 131, 0.22);
}

/* ── 8. Market Ticker — full-bleed ink rail ───────────────────────────────── */
.ticker {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: 46px;
  padding-inline: var(--space-8);
  border-top: 1px solid var(--rule-invert);
  border-bottom: 1px solid var(--rule-invert);
  overflow: hidden;
}

.ticker__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius-full);
  background-color: var(--gold);
  color: var(--ink);
  font-family: var(--font-label);
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ticker__viewport {
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 3%,
    #000 97%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 3%,
    #000 97%,
    transparent
  );
}

/* NOTE: no `animation` property here. renderTicker() sets it inline
   (main.js:152) and drives distance via --ticker-to. Declaring animation
   here is dead code and risks breaking the marquee. Pause-on-hover is
   also handled in JS via animationPlayState (main.js:118-131). */
.ticker__track {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  white-space: nowrap;
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgba(252, 250, 246, 0.8);
  will-change: transform;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(var(--ticker-to, -50%));
  }
}

/* Item structure is generated by buildTickerItem() — main.js:183 */
.ticker__item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}

.ticker__label {
  color: var(--gold-bright);
  font-weight: 600;
}

.ticker__val {
  color: var(--base);
  font-variant-numeric: tabular-nums;
}

/* Lighter tints than --data-up / --data-down: those are tuned for parchment
   and are too dark to read on the ink ground. */
.ticker__delta {
  font-variant-numeric: tabular-nums;
}

.ticker__delta--up {
  color: #6fbf9b;
}

.ticker__delta--down {
  color: #e2897c;
}

/* ── 9. Editorial — asymmetric lead + numbered index ──────────────────────── */
.editorial {
  background-color: var(--base);
}

/* Section head: title, flexible rule, "all coverage" link */
.editorial__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

.editorial__title {
  font-family: var(--font-headline);
  font-size: var(--text-headline-md);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.editorial__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--gold-hairline-strong), transparent);
}

.editorial__all {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  transition: gap 0.18s ease, color 0.18s ease;
}

.editorial__all:hover {
  color: var(--ink);
  gap: var(--space-3);
}

/* ── Feature: image bleeds left, copy panel overlaps from the right ───────── */
.feature {
  position: relative;
  display: grid;
  grid-template-columns: 7fr 5fr;
  align-items: center;
  margin-bottom: var(--space-16);
}

.feature__media {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  background-color: var(--sunken);
}

.feature__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.feature:hover .feature__img {
  transform: scale(1.04);
}

/* Warm grade ties the photo to the palette */
.feature__grade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(176, 141, 63, 0.16),
    transparent 55%
  );
  pointer-events: none;
}

/* The panel steps back over the image — the overlap is the whole idea */
.feature__panel {
  position: relative;
  z-index: 1;
  margin-left: calc(var(--space-16) * -1);
  padding: var(--space-10);
  background-color: var(--elevated);
  border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.feature__title {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-block: var(--space-3);
  text-wrap: balance;
}

.feature__title a {
  transition: color 0.18s ease;
}

.feature__title a:hover {
  color: var(--gold-deep);
}

.feature__excerpt {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-body);
  margin-bottom: var(--space-4);
}

.feature__meta {
  font-family: var(--font-label);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ── Index: numbered three-column list ────────────────────────────────────── */
.editorial__index {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 var(--space-10);
  border-top: 1px solid var(--gold-hairline-strong);
}

.idx {
  border-bottom: 1px solid var(--gold-hairline);
}

.idx__link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  padding-block: var(--space-5);
  transition: background-color 0.2s ease;
}

/* Inset padding rather than a spread box-shadow: the shadow extended the
   painted area 12px sideways, so the pointer could sit in a strip that looked
   hovered but belonged to no item — which read as flicker. */
.idx__link {
  padding-inline: var(--space-3);
  margin-inline: calc(var(--space-3) * -1);
  border-radius: var(--radius-sm);
}

.idx__link:hover {
  background-color: var(--gold-wash);
}

/* Serif numeral, hairline-outlined until hover fills it */
.idx__num {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
  /* Both properties must transition together. Animating only `color` meant the
     stroke disappeared instantly while the fill was still fading in, blinking
     the numeral out of existence mid-transition. */
  transition:
    color 0.2s ease,
    -webkit-text-stroke-color 0.2s ease;
  font-variant-numeric: tabular-nums;
}

.idx__link:hover .idx__num {
  color: var(--gold-ink);
  -webkit-text-stroke-color: transparent;
}

.idx__body {
  display: block;
  min-width: 0;
}

.idx__title {
  display: block;
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.32;
  color: var(--ink);
  margin-bottom: var(--space-2);
  transition: color 0.18s ease;
}

.idx__link:hover .idx__title {
  color: var(--gold-deep);
}

.idx__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.idx__cat {
  color: var(--gold-deep);
  font-weight: 600;
}

.idx__cat::after {
  content: "·";
  margin-left: var(--space-2);
  color: var(--ink-faint);
}

/* ── 10. Morning Brief — full-width ink band ──────────────────────────────── */
.brief {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-12);
  align-items: center;
  margin-top: var(--space-16);
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-lg);
  background-color: var(--deep);
  background-image:
    radial-gradient(
      520px circle at 12% 50%,
      rgba(176, 141, 63, 0.18),
      transparent 70%
    );
  overflow: hidden;
  position: relative;
}

/* Hairline gold rule along the top edge */
.brief::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(
    to right,
    transparent,
    var(--gold-bright),
    transparent
  );
  opacity: 0.5;
}

/* ── Decorative field ─────────────────────────────────────────────────────── */
.brief__fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

/* Slow-breathing warm bloom behind the copy */
.brief__bloom {
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(
      36% 60% at 14% 50%,
      rgba(176, 141, 63, 0.34),
      transparent 68%
    ),
    radial-gradient(
      30% 50% at 72% 30%,
      rgba(227, 201, 131, 0.12),
      transparent 66%
    );
  animation: st-brief-bloom 18s ease-in-out infinite alternate;
}

@keyframes st-brief-bloom {
  0% {
    transform: translate3d(-1.5%, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(2.5%, 1.5%, 0) scale(1.07);
  }
}

/* Concentric rings anchored off the right edge — echoes the hero's seal */
.brief__rings {
  position: absolute;
  top: 50%;
  right: -110px;
  width: 420px;
  height: 420px;
  margin-top: -210px;
  border-radius: 50%;
  border: 1px solid rgba(227, 201, 131, 0.12);
  box-shadow:
    inset 0 0 0 59px transparent,
    inset 0 0 0 60px rgba(227, 201, 131, 0.09),
    inset 0 0 0 129px transparent,
    inset 0 0 0 130px rgba(227, 201, 131, 0.06);
  animation: st-brief-rings 34s linear infinite;
}

@keyframes st-brief-rings {
  to {
    transform: rotate(360deg);
  }
}

/* Ticker rail: repeating tick marks that scroll, like a market tape */
.brief__rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26px;
  background-image: repeating-linear-gradient(
    to right,
    rgba(227, 201, 131, 0.3) 0,
    rgba(227, 201, 131, 0.3) 1px,
    transparent 1px,
    transparent 22px
  );
  mask-image: linear-gradient(to bottom, transparent, #000 90%),
    linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 90%),
    linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  animation: st-brief-rail 8s linear infinite;
}

@keyframes st-brief-rail {
  to {
    background-position-x: 22px;
  }
}

/* Grain kills banding across the wide dark band */
.brief__grain {
  position: absolute;
  inset: 0;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='bn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23bn)' opacity='0.3'/%3E%3C/svg%3E");
}

/* Content sits above the field */
.brief__copy,
.brief__action {
  position: relative;
  z-index: 1;
}

.brief__copy {
  min-width: 0;
}

.brief__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-family: var(--font-label);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.brief__heading {
  font-family: var(--font-headline);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--base);
  margin-bottom: var(--space-2);
}

.brief__heading em {
  color: var(--gold-bright);
  font-style: italic;
  font-weight: 400;
}

.brief__sub {
  font-size: 0.875rem;
  color: rgba(252, 250, 246, 0.66);
}

.brief__action {
  min-width: 0;
}

/* Fused pill, matching the footer form's treatment */
.brief__row {
  position: relative;
  display: flex;
  align-items: stretch;
  width: min(440px, 100%);
  padding: 5px;
  border-radius: var(--radius-full);
  background-color: rgba(252, 250, 246, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(227, 201, 131, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(252, 250, 246, 0.08),
    0 8px 28px rgba(0, 0, 0, 0.32);
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background-color 0.22s ease;
}

.brief__row:hover {
  border-color: rgba(227, 201, 131, 0.5);
  background-color: rgba(252, 250, 246, 0.1);
}

.brief__row:focus-within {
  border-color: var(--gold-bright);
  background-color: rgba(252, 250, 246, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(252, 250, 246, 0.1),
    0 0 0 3px rgba(227, 201, 131, 0.16),
    0 8px 28px rgba(0, 0, 0, 0.32);
}

.brief__row .newsletter-form__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  padding-inline: var(--space-5);
  color: var(--base);
}

.brief__row .newsletter-form__input:focus {
  outline: none;
  box-shadow: none;
}

.brief__row .newsletter-form__input::placeholder {
  color: rgba(252, 250, 246, 0.38);
}

.brief__row .newsletter-form__btn {
  flex-shrink: 0;
  border-radius: var(--radius-full);
  padding-inline: var(--space-6);
}

/* Message sits under the pill; colours come from the .is-deep rules below */
.brief .newsletter-form__msg {
  margin-top: var(--space-3);
}

.brief .newsletter-form__msg--success {
  color: #6fbf9b;
}

.brief .newsletter-form__msg--error {
  color: #e2897c;
}

/* Shared newsletter field styling on ink grounds.
   NOTE: the footer form depends on these — do not scope them to the brief. */
.is-deep .newsletter-form__input {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(252, 250, 246, 0.16);
  background-color: rgba(252, 250, 246, 0.05);
  color: var(--base);
  font-family: var(--font-body);
  font-size: 0.875rem;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}

.is-deep .newsletter-form__input::placeholder {
  color: rgba(252, 250, 246, 0.38);
}

.is-deep .newsletter-form__input:focus {
  outline: none;
  border-color: var(--gold-bright);
  background-color: rgba(252, 250, 246, 0.08);
}

/* Verified class names — main.js:105. */
.is-deep .newsletter-form__msg--success {
  color: #6fbf9b;
}

.is-deep .newsletter-form__msg--error {
  color: #e2897c;
}

/* ── 10b. Single-post sidebar ──────────────────────────────────────────────
   The front page no longer has a sidebar, but single.php still renders
   .sidebar-panel / .side-article / .sidebar-newsletter__inner. These styles
   stay for that template — deleting them with the editorial redesign would
   have left every article page unstyled. */
.sidebar-panel__heading {
  font-family: var(--font-headline);
  font-size: var(--text-headline-sm);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--gold-hairline-strong);
}

.side-article {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--gold-hairline);
}

.side-article:last-child {
  border-bottom: none;
}

.side-article__title {
  font-family: var(--font-headline);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.side-article__title a {
  transition: color 0.18s ease;
}

.side-article__title a:hover {
  color: var(--gold-deep);
}

.side-article__time {
  font-family: var(--font-label);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.sidebar-newsletter__inner {
  margin-top: var(--space-10);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  background-color: var(--sunken);
  border: 1px solid var(--gold-hairline);
}

.sidebar-newsletter__heading {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.sidebar-newsletter__sub {
  font-size: 0.8125rem;
  line-height: 1.55;
  /* --ink-body not --ink-muted: this sits on --sunken, where muted is ~4.2:1. */
  color: var(--ink-body);
  margin-bottom: var(--space-5);
}

.sidebar-newsletter__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sidebar-newsletter__inner .newsletter-form__msg--success {
  color: var(--data-up);
}

.sidebar-newsletter__inner .newsletter-form__msg--error {
  color: var(--data-down);
}
/* ── 11. Section Heading ──────────────────────────────────────────────────── */
.section-heading {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-10);
}

/* ── 12. Post Grid — 4-up tiles ───────────────────────────────────────────── */
.post-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.post-grid--3 {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.post-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--elevated);
  border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    border-color 0.32s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Gold hairline that wipes across the top edge on hover */
.post-tile::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2;
  background: linear-gradient(
    to right,
    var(--gold-bright),
    var(--gold),
    transparent
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.post-tile:hover::after {
  transform: scaleX(1);
}

.post-tile:hover {
  border-color: var(--gold-hairline-strong);
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(33, 29, 23, 0.14);
}

.post-tile__thumb-link {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--sunken);
}

/* Warm scrim over the artwork; clears as the tile is hovered */
.post-tile__thumb-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(23, 19, 13, 0.28),
    rgba(176, 141, 63, 0.1) 55%,
    transparent
  );
  opacity: 1;
  transition: opacity 0.42s ease;
  pointer-events: none;
}

.post-tile:hover .post-tile__thumb-link::after {
  opacity: 0.25;
}

.post-tile__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Desaturated at rest so colour arrives on hover — the artwork animates
     without moving, which keeps a 4-up grid calm. */
  filter: saturate(0.7) contrast(1.04);
  transform: scale(1.01);
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.5s ease;
}

.post-tile:hover .post-tile__thumb {
  transform: scale(1.07);
  filter: saturate(1.05) contrast(1.02);
}

.post-tile__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  flex: 1;
}

.post-tile__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.post-tile__title {
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  flex: 1;
}

.post-tile__title a {
  transition: color 0.18s ease;
}

.post-tile__title a:hover {
  color: var(--gold-deep);
}

.post-tile__date {
  font-family: var(--font-label);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.post-tile__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.post-tile__excerpt {
  font-size: 0.9rem;
  color: var(--ink-muted);
  line-height: 1.5;
  margin-bottom: var(--space-3);
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 13. Pagination ───────────────────────────────────────────────────────── */
/* the_posts_pagination() outputs <nav class="navigation pagination">. Style that
   directly — the template no longer wraps it in a second <nav>. */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: var(--space-16);
  padding-top: var(--space-10);
  border-top: 1px solid var(--gold-hairline);
}

.pagination .nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
}

/* min-width, not width: "Prev"/"Next" are text labels and were being crushed
   into the 40px square sized for single digits. */
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: var(--elevated);
  font-family: var(--font-label);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-body);
  font-variant-numeric: tabular-nums;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.pagination .page-numbers:hover {
  border-color: var(--gold);
  background: var(--gold-wash);
  color: #7c6021;
  transform: translateY(-2px);
}

/* Current page reads as a filled gold chip */
.pagination .page-numbers.current {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.pagination .page-numbers.dots {
  background: transparent;
  color: var(--ink-muted);
  min-width: 24px;
  padding-inline: 0;
}

.pagination .page-numbers.dots:hover {
  transform: none;
  border-color: transparent;
  background: transparent;
}

/* Prev / Next get room to breathe and an arrow that shifts on hover */
.pagination .prev.page-numbers,
.pagination .next.page-numbers {
  padding-inline: var(--space-5);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.6875rem;
  gap: var(--space-2);
  border-color: var(--gold-hairline-strong);
}

.pagination .prev.page-numbers::before {
  content: "←";
  transition: transform 0.2s ease;
}

.pagination .next.page-numbers::after {
  content: "→";
  transition: transform 0.2s ease;
}

.pagination .prev.page-numbers:hover::before {
  transform: translateX(-3px);
}

.pagination .next.page-numbers:hover::after {
  transform: translateX(3px);
}

.pagination-wrap {
  text-align: center;
  margin-top: var(--space-10);
}

/* ── 14. Single Post ──────────────────────────────────────────────────────── */
.single-main,
.page-main,
.archive-main,
.error-main {
  padding-bottom: var(--space-24);
}

/* Two-column layout: article + sidebar */
.single-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-12);
  align-items: start;
}

.single-main-col {
  min-width: 0;
}

.single-article {
  min-width: 0;
}

.single-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  position: sticky;
  top: calc(var(--header-h) + var(--space-8));
}

.article-header {
  padding-block: var(--space-16) var(--space-10);
}

.article-header__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.article-header__title {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: var(--space-5);
}

.article-header__excerpt {
  font-size: 1.2rem;
  color: var(--on-surface-variant);
  line-height: 1.6;
  max-width: 700px;
  margin-bottom: var(--space-6);
}

.article-header__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--font-label);
  font-size: 0.8rem;
  color: var(--on-surface-variant);
}

.article-header__author {
  color: var(--on-surface);
  font-weight: 600;
}

.article-hero {
  margin-bottom: var(--space-12);
}
.article-hero__img {
  width: 100%;
  border-radius: var(--radius-md);
  max-height: 500px;
  object-fit: cover;
}
.article-hero__caption {
  font-family: var(--font-label);
  font-size: 0.75rem;
  color: var(--on-surface-variant);
  margin-top: var(--space-3);
  text-align: center;
}

/* Entry content typography */
.entry-content {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--on-surface);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: var(--font-headline);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
}

.entry-content h2 {
  font-size: 1.8rem;
}
.entry-content h3 {
  font-size: 1.4rem;
}
.entry-content h4 {
  font-size: 1.15rem;
}

.entry-content p {
  margin-bottom: var(--space-5);
}

.entry-content a {
  color: var(--secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-content blockquote {
  border-left: 4px solid var(--primary);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-8) 0;
  color: var(--on-surface-variant);
  font-size: 1.15rem;
  background: var(--surface-container-low);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.entry-content ul,
.entry-content ol {
  padding-left: var(--space-6);
  margin-bottom: var(--space-5);
}
.entry-content li {
  margin-bottom: var(--space-2);
}
.entry-content ul li {
  list-style-type: disc;
}
.entry-content ol li {
  list-style-type: decimal;
}

.entry-content code {
  font-size: 0.875em;
  background: var(--surface-container-highest);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}

.entry-content pre {
  background: var(--surface-container-lowest);
  padding: var(--space-6);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-6);
  font-size: 0.875rem;
}

.entry-content hr {
  border: none;
  border-top: 1px solid var(--gold-hairline);
  margin: var(--space-10) 0;
}

.entry-content figure {
  margin: var(--space-8) 0;
}
.entry-content figcaption {
  font-size: 0.8rem;
  color: var(--on-surface-variant);
  text-align: center;
  margin-top: var(--space-2);
}

/* Article navigation */
.article-nav {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--gold-hairline);
}

.article-nav__prev,
.article-nav__next {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.article-nav__next {
  text-align: right;
}

.article-nav__label {
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}

.article-nav__link {
  font-family: var(--font-headline);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--on-surface);
  transition: color 0.15s;
}
.article-nav__link:hover {
  color: var(--secondary);
}

/* Related posts */
.related-posts {
  margin-top: var(--space-16);
}

.related-posts__heading {
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: var(--space-8);
}

/* ── 15. Archive ──────────────────────────────────────────────────────────── */
/* Ink band header, echoing the Subscribe/footer rhythm rather than sitting as
   plain text on parchment. */
.archive-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--deep);
  margin-bottom: var(--space-12);
}

.archive-hero__fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.archive-hero__bloom {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(
      40% 60% at 16% 45%,
      rgba(176, 141, 63, 0.3),
      transparent 68%
    ),
    radial-gradient(
      36% 50% at 82% 70%,
      rgba(227, 201, 131, 0.12),
      transparent 66%
    );
  animation: st-archive-bloom 22s ease-in-out infinite alternate;
}

@keyframes st-archive-bloom {
  to {
    transform: translate3d(2.5%, 1.5%, 0) scale(1.06);
  }
}

.archive-hero__mesh {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(227, 201, 131, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(227, 201, 131, 0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 80% at 25% 50%, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 25% 50%, #000, transparent 80%);
}

.archive-hero__inner {
  position: relative;
  padding-block: var(--space-16) var(--space-12);
  max-width: 62ch;
}

.archive-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-family: var(--font-label);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.archive-hero__title {
  font-family: var(--font-headline);
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--base);
  margin-bottom: var(--space-4);
  text-wrap: balance;
}

.archive-hero__desc {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(252, 250, 246, 0.72);
  margin-bottom: var(--space-4);
}

.archive-hero__count {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(252, 250, 246, 0.6);
}

.archive-hero__count strong {
  color: var(--gold-bright);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── Archive grid ─────────────────────────────────────────────────────────── */
/* 4-up, with the first two tiles spanning two columns so the page opens with
   weight instead of a uniform wall of cards. */
.post-grid--archive {
  grid-template-columns: repeat(4, 1fr);
}

.post-tile--feature {
  grid-column: span 2;
}

.post-tile--feature .post-tile__thumb-link {
  aspect-ratio: 16 / 9;
}

.post-tile--feature .post-tile__title {
  font-size: var(--text-headline-md);
  line-height: 1.2;
}

.post-tile--feature .post-tile__excerpt {
  font-size: 0.9375rem;
}

/* Excerpt + meta row */
.post-tile__excerpt {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-body);
  margin-bottom: var(--space-3);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-tile__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--gold-hairline);
  font-family: var(--font-label);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.post-tile__read {
  margin-left: auto;
  color: var(--gold-deep);
}

/* ── 16. Static Page ──────────────────────────────────────────────────────── */
.page-header {
  padding-block: var(--space-12) var(--space-8);
}

.page-header__title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-3);
}

.page-header__updated {
  font-family: var(--font-label);
  font-size: 0.8rem;
  color: var(--on-surface-variant);
}

.page-hero {
  margin-bottom: var(--space-10);
}
.page-hero__img {
  width: 100%;
  border-radius: var(--radius-md);
  max-height: 400px;
  object-fit: cover;
}

.page-content {
  /* inherits .entry-content */
}

/* ── 17. 404 ──────────────────────────────────────────────────────────────── */
.error-main {
  display: flex;
  align-items: center;
}

.error-page {
  text-align: center;
  padding-block: var(--space-24);
  max-width: 600px;
  margin-inline: auto;
}

/* Outlined gold numerals — the same display treatment as .idx__num. The
   previous rule clipped a white-to-parchment gradient to the text, which was
   invisible against the light base. */
.error-page__code {
  font-family: var(--font-headline);
  font-size: clamp(6rem, 15vw, 12rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold-wash);
  /* --gold-ink, not --gold: the lighter gold measured 2.99:1 against the base,
     just under the 3:1 floor for large text. Stroke weight scales with the
     numerals so it reads at every clamp size. */
  -webkit-text-stroke: clamp(2px, 0.6vw, 4px) var(--gold-ink);
  margin-bottom: var(--space-4);
}

/* text-stroke is unsupported outside WebKit/Blink; fall back to solid ink-gold
   so the numerals never vanish. */
@supports not (-webkit-text-stroke: 1px red) {
  .error-page__code {
    color: var(--gold-ink);
  }
}

.error-page__title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: var(--space-5);
  letter-spacing: -0.03em;
}

.error-page__desc {
  font-size: 1.1rem;
  color: var(--on-surface-variant);
  margin-bottom: var(--space-10);
  line-height: 1.6;
}

.error-page__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-16);
}

.error-page__actions .search-form {
  display: flex;
  gap: var(--space-3);
}

.error-page__actions input[type="search"] {
  background: var(--surface-container);
  border: 1px solid var(--gold-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  color: var(--on-surface);
  font-family: var(--font-body);
  min-width: 260px;
}

.error-page__actions button[type="submit"] {
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.error-recent__heading {
  font-family: var(--font-headline);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: var(--space-5);
}

.error-recent__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-align: left;
}

.error-recent__list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--gold-hairline);
}

.error-recent__list a {
  font-family: var(--font-headline);
  font-weight: 600;
  color: var(--on-surface);
  transition: color 0.15s;
  line-height: 1.3;
}
.error-recent__list a:hover {
  color: var(--secondary);
}

.error-recent__list time {
  font-family: var(--font-label);
  font-size: 0.75rem;
  color: var(--on-surface-variant);
  flex-shrink: 0;
}

/* ── 18. No Results ───────────────────────────────────────────────────────── */
.no-results,
.no-posts {
  text-align: center;
  padding: var(--space-16);
  color: var(--on-surface-variant);
  font-size: 1.1rem;
}

/* ── 18b. Subscribe — full preference form above the footer ───────────────── */
.subscribe {
  background-color: var(--deep);
  color: rgba(252, 250, 246, 0.72);
  position: relative;
  overflow: hidden;
}

/* ── Decorative field ─────────────────────────────────────────────────────── */
.subscribe__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* 1. Aurora — three slow-drifting colour bodies. Because they sit on the ink
      ground at low alpha they read as depth rather than as gradients. */
.subscribe__aurora {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(
      42% 55% at 18% 42%,
      rgba(176, 141, 63, 0.34),
      transparent 68%
    ),
    radial-gradient(
      38% 48% at 78% 28%,
      rgba(227, 201, 131, 0.16),
      transparent 66%
    ),
    radial-gradient(
      50% 42% at 62% 88%,
      rgba(120, 92, 30, 0.26),
      transparent 70%
    );
  filter: blur(6px);
  animation: st-aurora 24s ease-in-out infinite alternate;
}

@keyframes st-aurora {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }
  50% {
    transform: translate3d(3%, 2%, 0) scale(1.06);
  }
  100% {
    transform: translate3d(-1%, 3%, 0) scale(1.02);
  }
}

/* 2. Mesh — a fine gold lattice, masked to a soft band so it never tiles flat */
.subscribe__mesh {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(227, 201, 131, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(227, 201, 131, 0.09) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(
    ellipse 80% 70% at 30% 45%,
    #000 15%,
    rgba(0, 0, 0, 0.4) 55%,
    transparent 85%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 80% 70% at 30% 45%,
    #000 15%,
    rgba(0, 0, 0, 0.4) 55%,
    transparent 85%
  );
}

/* 3. Market line — the thematic anchor. Draws itself on load, then breathes. */
.subscribe__chart {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 62%;
  opacity: 0.9;
  /* Fade the right end so the line dissolves rather than colliding with the
     glass panel edge. */
  mask-image: linear-gradient(to right, #000 0%, #000 52%, rgba(0, 0, 0, 0.35) 74%, transparent 92%);
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 52%, rgba(0, 0, 0, 0.35) 74%, transparent 92%);
}

.subscribe__chart-area {
  fill: url(#st-fill-grad);
  opacity: 0;
  animation: st-chart-area 1.6s ease-out 0.5s forwards;
}

@keyframes st-chart-area {
  to {
    opacity: 1;
  }
}

.subscribe__chart-line {
  fill: none;
  stroke: url(#st-line-grad);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* Long enough to cover the path; the dash offset animates the draw-on. */
  stroke-dasharray: 3200;
  stroke-dashoffset: 3200;
  animation: st-draw 2.6s cubic-bezier(0.33, 1, 0.68, 1) 0.2s forwards;
  filter: drop-shadow(0 0 6px rgba(227, 201, 131, 0.35));
}

/* Second, fainter line offset below — implies a comparison series */
.subscribe__chart-ghost {
  fill: none;
  stroke: rgba(227, 201, 131, 0.22);
  stroke-width: 1;
  stroke-dasharray: 4 7;
  stroke-linecap: round;
  opacity: 0;
  animation: st-ghost-in 1.4s ease-out 1.3s forwards, st-ghost-drift 30s linear 1.3s infinite;
}

@keyframes st-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes st-ghost-in {
  to {
    opacity: 1;
  }
}

@keyframes st-ghost-drift {
  to {
    stroke-dashoffset: -220;
  }
}

/* 4. Motes — slow rising particles, each with its own lane and tempo */
.subscribe__motes {
  position: absolute;
  inset: 0;
}

.subscribe__motes i {
  position: absolute;
  left: var(--x);
  bottom: -12px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--gold-bright);
  opacity: 0;
  transform: scale(var(--s, 1));
  box-shadow: 0 0 8px rgba(227, 201, 131, 0.7);
  animation: st-mote var(--t, 22s) linear var(--d, 0s) infinite;
}

@keyframes st-mote {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(var(--s, 1));
  }
  12% {
    opacity: 0.85;
  }
  80% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
    /* 108% of the section height, so motes clear the top edge before resetting */
    transform: translateY(-108%) translateX(26px) scale(var(--s, 1));
  }
}

/* 5. Sweep — a wide specular pass, like light moving across brushed metal */
.subscribe__sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  left: -45%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(227, 201, 131, 0.07) 40%,
    rgba(252, 250, 246, 0.05) 50%,
    rgba(227, 201, 131, 0.07) 60%,
    transparent
  );
  animation: st-sweep 11s ease-in-out 2s infinite;
}

@keyframes st-sweep {
  0% {
    left: -45%;
  }
  55%,
  100% {
    left: 125%;
  }
}

/* 6. Grain — breaks up gradient banding on wide, dark surfaces */
.subscribe__grain {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}

/* Gold hairlines seal the top and bottom edges */
.subscribe::before,
.subscribe::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(
    to right,
    transparent,
    rgba(227, 201, 131, 0.5),
    transparent
  );
  pointer-events: none;
}

.subscribe::before {
  top: 0;
}

.subscribe::after {
  bottom: 0;
}

.subscribe__inner {
  position: relative;
  max-width: 1440px;
  margin-inline: auto;
  padding: var(--space-20) var(--space-8);
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--space-16);
  align-items: start;
}

/* ── Intro column ─────────────────────────────────────────────────────────── */
.subscribe__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-family: var(--font-label);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.subscribe__heading {
  font-family: var(--font-headline);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--base);
  margin-bottom: var(--space-4);
}

.subscribe__heading em {
  display: block;
  color: var(--gold-bright);
  font-style: italic;
  font-weight: 400;
}

.subscribe__sub {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(252, 250, 246, 0.7);
  max-width: 42ch;
  margin-bottom: var(--space-6);
}

.subscribe__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.subscribe__points li {
  position: relative;
  padding-left: var(--space-5);
  font-size: 0.8125rem;
  color: rgba(252, 250, 246, 0.62);
}

.subscribe__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background-color: var(--gold);
}

/* ── Form panel ───────────────────────────────────────────────────────────── */
/* Glass panel: semi-transparent so the aurora and chart read behind it, with a
   blur so the form stays legible over moving content. */
.subscribe__form-wrap {
  position: relative;
  padding: var(--space-8);
  border-radius: var(--radius-lg);
  background-color: rgba(30, 26, 21, 0.72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(227, 201, 131, 0.16);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(252, 250, 246, 0.06);
}

/* Gold light-catch along the panel's top edge */
.subscribe__form-wrap::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(227, 201, 131, 0.7),
    transparent
  );
}

/* The shared .newsletter-form base is `display:flex; max-width:420px`, which
   would squeeze this multi-row form into one narrow strip. Reset it here. */
.subscribe__form {
  display: block;
  max-width: none;
}

.subscribe__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.field__label {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-label);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(252, 250, 246, 0.7);
}

.field__optional {
  /* 0.4 alpha measured 3.7:1 on --deep-soft; 0.62 clears AA. */
  color: rgba(252, 250, 246, 0.62);
  font-weight: 500;
  letter-spacing: 0.1em;
}

.field__input {
  width: 100%;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(252, 250, 246, 0.16);
  background-color: rgba(252, 250, 246, 0.05);
  color: var(--base);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}

.field__input::placeholder {
  color: rgba(252, 250, 246, 0.36);
}

.field__input:focus {
  outline: none;
  border-color: var(--gold-bright);
  background-color: rgba(252, 250, 246, 0.08);
  box-shadow: 0 0 0 3px rgba(227, 201, 131, 0.14);
}

.subscribe__group {
  border: none;
  padding: 0;
  margin-bottom: var(--space-6);
}

.subscribe__group .field__label {
  margin-bottom: var(--space-4);
}

/* ── Topics — custom checkboxes ───────────────────────────────────────────── */
.topics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}

.topic {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(252, 250, 246, 0.12);
  background-color: rgba(252, 250, 246, 0.03);
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background-color 0.18s ease;
}

.topic:hover {
  border-color: rgba(227, 201, 131, 0.45);
  background-color: rgba(227, 201, 131, 0.06);
}

/* Native input stays in the a11y tree; the box below is the visual. */
.topic__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  pointer-events: none;
}

.topic__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(252, 250, 246, 0.28);
  background-color: transparent;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease;
}

.topic__box svg {
  width: 13px;
  height: 13px;
  color: var(--ink);
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.16s ease,
    transform 0.16s cubic-bezier(0.22, 1.4, 0.5, 1);
}

.topic__input:checked + .topic__box {
  background-color: var(--gold-bright);
  border-color: var(--gold-bright);
}

.topic__input:checked + .topic__box svg {
  opacity: 1;
  transform: scale(1);
}

.topic__input:focus-visible + .topic__box {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

.topic__input:checked ~ .topic__label {
  color: var(--base);
}

.topic__label {
  font-size: 0.8125rem;
  line-height: 1.3;
  color: rgba(252, 250, 246, 0.72);
  transition: color 0.18s ease;
}

/* ── Cadence — segmented pills ────────────────────────────────────────────── */
.cadence {
  display: inline-flex;
  gap: var(--space-2);
  padding: 4px;
  border-radius: var(--radius-full);
  background-color: rgba(252, 250, 246, 0.05);
  border: 1px solid rgba(252, 250, 246, 0.12);
}

.cadence__input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  pointer-events: none;
}

.cadence__pill {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding-inline: var(--space-5);
  border-radius: var(--radius-full);
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(252, 250, 246, 0.65);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.cadence__opt:hover .cadence__pill {
  color: var(--base);
}

.cadence__input:checked + .cadence__pill {
  background-color: var(--gold-bright);
  color: var(--ink);
}

.cadence__input:focus-visible + .cadence__pill {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

/* ── Honeypot: off-screen but not display:none, which some bots detect ────── */
.subscribe__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Submit row ───────────────────────────────────────────────────────────── */
.subscribe__submit {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.subscribe__submit .newsletter-form__btn {
  padding-inline: var(--space-8);
}

.subscribe__privacy {
  font-size: 0.75rem;
  color: rgba(252, 250, 246, 0.5);
}

/* Message sits outside the form (JS reads form.nextElementSibling) */
.subscribe__form-wrap .newsletter-form__msg {
  margin-top: var(--space-4);
  font-family: var(--font-label);
  font-size: 0.8125rem;
  font-weight: 500;
}

.subscribe__form-wrap .newsletter-form__msg--success {
  color: #6fbf9b;
}

.subscribe__form-wrap .newsletter-form__msg--error {
  color: #e2897c;
}

/* ── 19. Footer — light block ─────────────────────────────────────────────── */
/* --base, not --sunken: the more-posts section above is already --sunken, so a
   sand footer merges into one flat band. Warm white gives a real tonal step. */
.site-footer {
  position: relative;
  background-color: var(--base);
  color: var(--ink-body);
  border-top: 1px solid var(--gold-hairline-strong);
  overflow: hidden;
}

/* ── Decorative field ─────────────────────────────────────────────────────── */
.footer-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Faint gold lattice, fading out toward the bottom */
.footer-fx__mesh {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(176, 141, 63, 0.13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(176, 141, 63, 0.13) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0.25) 62%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0.25) 62%, transparent);
}

/* Warm bloom anchored to the brand column */
.footer-fx__bloom {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      460px circle at 12% 18%,
      rgba(176, 141, 63, 0.12),
      transparent 68%
    ),
    radial-gradient(
      520px circle at 88% 90%,
      rgba(227, 201, 131, 0.1),
      transparent 70%
    );
}

/* Content clears the field */
.footer-inner,
.footer-bottom {
  position: relative;
  z-index: 1;
}

/* Link deck */
.footer-inner {
  max-width: 1440px;
  margin-inline: auto;
  padding: var(--space-12) var(--space-8);
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--space-16);
  border-top: 1px solid var(--gold-hairline);
}

.footer-brand__logo {
  margin-bottom: var(--space-5);
}

.footer-brand__logo .custom-logo {
  max-height: 40px;
  width: auto;
}

.footer-brand__name {
  display: block;
  font-family: var(--font-headline);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-4);
}

.footer-brand__desc {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: 38ch;
  margin-bottom: var(--space-5);
}

.footer-brand__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-label);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* Newsletter */
/* The compact one-line form (single.php's sidebar). Scoped with :not() so it
   cannot squeeze the multi-row subscribe form, which carries the same base
   class for the shared JS handler but needs a block layout. */
.newsletter-form:not(.subscribe__form) {
  display: flex;
  gap: var(--space-3);
  max-width: 420px;
}

/* Light-ground field — single.php's sidebar only. The brief and subscribe
   forms sit on ink and style their own inputs. */
.sidebar-newsletter__inner .newsletter-form__input {
  flex: 1;
  width: 100%;
  /* --elevated so the field reads as an input against the --sunken CTA panel;
     --surface-container resolves to --sunken, i.e. the same colour as the panel. */
  background: var(--elevated);
  border: 1px solid var(--gold-hairline-strong);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: box-shadow 0.15s;
}

.sidebar-newsletter__inner .newsletter-form__input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--primary);
}

.sidebar-newsletter__inner .newsletter-form__input::placeholder {
  color: var(--ink-muted);
}

.newsletter-form__btn {
  border-radius: var(--radius-md);
}

.newsletter-form__msg {
  margin-top: var(--space-3);
  font-family: var(--font-label);
  font-size: 0.85rem;
}

.newsletter-form__msg--success {
  color: var(--data-up);
}
.newsletter-form__msg--error {
  color: var(--data-down);
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-10);
}

.footer-col__heading {
  font-family: var(--font-label);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--gold-hairline);
}

.footer-col__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer-col__list a {
  position: relative;
  display: inline-block;
  font-size: 0.875rem;
  color: var(--ink-body);
  transition:
    color 0.22s ease,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Gold underline wipes in from the left */
.footer-col__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background-color: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-col__list a:hover {
  color: var(--gold-deep);
  transform: translateX(4px);
}

.footer-col__list a:hover::after {
  transform: scaleX(1);
}

/* Bottom bar */
.footer-bottom {
  max-width: 1440px;
  margin-inline: auto;
  padding: var(--space-5) var(--space-8) var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  border-top: 1px solid var(--gold-hairline);
}

.footer-copy,
.footer-legal a {
  font-family: var(--font-label);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

.footer-legal a {
  transition: color 0.18s ease;
}

.footer-legal a:hover {
  color: var(--gold-deep);
}

/* ── 19b. Desks — stacked panels with gold accent bars ────────────────────── */
.desks__head {
  margin-bottom: var(--space-10);
}

.desks__intro {
  font-size: 0.9375rem;
  /* --ink-muted on --base/--elevated passes AA, but this paragraph sits on
     the .desks .is-sunken band, where it is 4.18:1 (fails 4.5:1). Darkened
     locally rather than changing --ink-muted, which passes everywhere else
     it is used. */
  color: var(--ink-body);
  max-width: 56ch;
}

.desks__stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.desk {
  position: relative;
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: var(--space-8);
  padding: var(--space-6) var(--space-8);
  background-color: var(--elevated);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease;
}

.desk:hover {
  transform: translateY(-2px);
  border-color: var(--gold-hairline-strong);
  box-shadow: 0 18px 40px rgba(33, 29, 23, 0.1);
}

/* Gold accent bar — 3px at rest, swells to 6px and brightens on hover */
.desk__accent {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(
    to bottom,
    var(--gold-bright),
    var(--gold),
    var(--gold-deep)
  );
  transition:
    width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease;
}

.desk:hover .desk__accent {
  width: 6px;
  box-shadow: 0 0 18px rgba(176, 141, 63, 0.5);
}

/* Warm bloom that wipes in from the accent edge */
.desk__glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(176, 141, 63, 0.1),
    rgba(176, 141, 63, 0.03) 32%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.desk:hover .desk__glow {
  opacity: 1;
}

/* Oversized outlined numeral — filled gold on hover */
.desk__index {
  font-family: var(--font-headline);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease, -webkit-text-stroke-color 0.3s ease;
}

.desk:hover .desk__index {
  color: var(--gold-ink);
  -webkit-text-stroke-color: transparent;
}

/* Arrow slides in from the left on hover */
.desk__arrow {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-2);
  color: var(--gold-deep);
  opacity: 0;
  transform: translateX(-8px);
  transition:
    opacity 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.desk:hover .desk__arrow {
  opacity: 1;
  transform: translateX(0);
}

.desk__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-1);
}

.desk__cat-name {
  font-family: var(--font-headline);
  font-size: var(--text-headline-sm);
  font-weight: 600;
  color: var(--ink);
  transition: color 0.18s ease;
}

.desk__cat:hover .desk__cat-name {
  color: var(--gold-deep);
}

.desk__count {
  font-family: var(--font-label);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.desk__body {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--space-8);
  /* stretch, not start: the lead column was pinned to the top and left ~72px
     of dead space beneath it whenever the headline list ran taller. */
  align-items: stretch;
}

/* Lead item */
.desk-lead {
  display: grid;
  grid-template-columns: 208px 1fr;
  gap: var(--space-6);
  align-items: center;
}

/* ── Lead artwork ──────────────────────────────────────────────────────────
   Full-bleed: the image runs flush to the panel's top, bottom and left edges,
   meeting the gold accent bar with no gap. Negative margins cancel the panel's
   padding; .desk's overflow:hidden clips it to the rounded corners. */
.desk-lead__media {
  display: block;
  position: relative;
  align-self: stretch;
  margin: calc(var(--space-6) * -1) 0 calc(var(--space-6) * -1)
    calc(var(--space-8) * -1);
  overflow: hidden;
  background-color: var(--sunken);
}

/* Warm grade tying the photograph to the gold palette */
.desk-lead__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(23, 19, 13, 0.34),
    rgba(176, 141, 63, 0.14) 55%,
    transparent
  );
  opacity: 1;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.desk:hover .desk-lead__media::after {
  opacity: 0.4;
}

/* Thin gold rule on the inner edge — separates artwork from copy cleanly */
.desk-lead__media::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--gold),
    transparent
  );
  opacity: 0.55;
  transition: opacity 0.4s ease;
}

.desk:hover .desk-lead__media::before {
  opacity: 1;
}

.desk-lead__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) contrast(1.06);
  transform: scale(1.02);
  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.55s ease;
}

.desk:hover .desk-lead__img {
  transform: scale(1.08);
  filter: saturate(1.04) contrast(1.02);
}

.desk-lead__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.desk-lead__title {
  font-family: var(--font-headline);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.28;
  color: var(--ink);
  margin-bottom: var(--space-2);
  transition: color 0.18s ease;
}

.desk-lead:hover .desk-lead__title {
  color: var(--gold-deep);
}

.desk-lead__date {
  font-family: var(--font-label);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Secondary headline list */
.desk__list {
  display: flex;
  flex-direction: column;
}

.desk__list-item + .desk__list-item {
  border-top: 1px solid var(--gold-hairline);
}

.desk__list-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block: var(--space-3);
}

.desk__list-title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink-body);
  transition: color 0.18s ease;
}

.desk__list-link:hover .desk__list-title {
  color: var(--gold-deep);
}

.desk__list-time {
  font-family: var(--font-label);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ── 20. WordPress core alignment helpers ─────────────────────────────────── */
.alignleft {
  float: left;
  margin: 0 var(--space-6) var(--space-4) 0;
}
.alignright {
  float: right;
  margin: 0 0 var(--space-4) var(--space-6);
}
.aligncenter {
  display: block;
  margin-inline: auto;
}
.alignwide {
  margin-inline: calc(-1 * var(--space-8));
}
.alignfull {
  margin-inline: calc(-50vw + 50%);
  width: 100vw;
  max-width: 100vw;
}
.wp-caption {
  max-width: 100%;
}
.wp-caption-text {
  font-size: 0.8rem;
  color: var(--on-surface-variant);
  margin-top: var(--space-2);
  text-align: center;
}

/* ── 21. Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .desk {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .desk__head {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--gold-hairline);
  }

  .desk__body {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  /* Feature un-overlaps and stacks; index drops to two columns */
  .feature {
    grid-template-columns: 1fr;
  }

  .feature__panel {
    margin-left: 0;
    margin-top: calc(var(--space-10) * -1);
    margin-inline: var(--space-6);
    padding: var(--space-8);
  }

  .editorial__index {
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--space-8);
  }

  .brief {
    grid-template-columns: 1fr;
    gap: var(--space-8);
    padding: var(--space-8);
  }

  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .post-grid--archive {
    grid-template-columns: repeat(2, 1fr);
  }

  .post-tile--feature {
    grid-column: span 2;
  }

  .archive-hero__inner {
    padding-block: var(--space-12) var(--space-10);
  }

  .subscribe__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
    padding-block: var(--space-16);
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .topbar__tagline {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  /* Anchored to the header's own box, not a fixed token: the header condenses
     on scroll (topbar collapses, nav shortens), so a static --header-h offset
     leaves a gap of page content showing above the panel. */
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - 100%);
    height: calc(100dvh - 100%);
    display: block;
    background-color: var(--elevated);
    padding: var(--space-6) var(--space-6) var(--space-16);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    visibility: hidden;
    flex: none;
  }

  .nav-menu.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-list li {
    border-bottom: 1px solid var(--gold-hairline);
  }

  .nav-list a {
    display: flex;
    width: 100%;
    min-height: 56px;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
  }

  .nav-list a::after {
    display: none;
  }
}

@media (max-width: 768px) {
  /* ── Hero stage ─────────────────────────────────────────────────────────── */
  .hero--stage {
    padding-block: var(--space-10) var(--space-8);
  }

  .stage__seal {
    width: 96vw;
    top: 4%;
  }

  .stage__console {
    padding: var(--space-6) var(--space-4) var(--space-4);
    /* Smaller cut: the console is narrow here, and a 34px chamfer clipped the
       runtime label's last character. */
    clip-path: polygon(
      0 0,
      calc(100% - 20px) 0,
      100% 20px,
      100% 100%,
      20px 100%,
      0 calc(100% - 20px)
    );
  }

  .stage__console-notch,
  .stage__console-fx::after {
    width: 30px;
    height: 30px;
  }

  /* The prompt shares the head row; drop its label so it can't crowd the
     state text on a narrow console. */
  .unmute {
    left: var(--space-4);
    bottom: var(--space-4);
    /* Icon-only here. Explicit box, because padding alone landed at 43px. */
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }

  .unmute__text {
    display: none;
  }

  .stage__nowplaying {
    max-width: 60%;
  }

  .player__bar.stage__wave {
    height: 44px;
  }

  .stage__dossier {
    gap: var(--space-6) var(--space-8);
    margin-top: var(--space-8);
    padding-top: var(--space-6);
  }

  :root {
    --space-20: 3rem;
    --space-16: 2.5rem;
  }

  .container {
    padding-inline: var(--space-5);
  }

  .nav-inner {
    padding-inline: var(--space-5);
  }

  .topbar__inner,
  .subscribe__inner,
  .footer-inner,
  .footer-bottom {
    padding-inline: var(--space-5);
  }

  /* Name + email stack; topics go single column */
  .subscribe__fields,
  .topics {
    grid-template-columns: 1fr;
  }

  .subscribe__form-wrap {
    padding: var(--space-5);
  }

  .cadence {
    width: 100%;
  }

  .cadence__opt {
    flex: 1;
  }

  .cadence__pill {
    width: 100%;
    justify-content: center;
    padding-inline: var(--space-3);
  }

  .subscribe__submit .newsletter-form__btn {
    width: 100%;
  }

  .section-pad {
    padding-block: var(--space-12);
  }

  /* CTA lives in the drawer's place on mobile; the hamburger takes priority */
  .nav-cta {
    display: none;
  }

  .topbar__inner {
    justify-content: center;
    gap: var(--space-4);
  }

  .topbar__date {
    padding-left: var(--space-4);
  }

  .desk {
    padding: var(--space-5) var(--space-5) var(--space-5) var(--space-6);
  }

  .desk-lead {
    grid-template-columns: 112px 1fr;
    gap: var(--space-4);
  }

  /* Bleed left to the accent bar only. The vertical bleed is dropped here —
     stacked panels are short, so a full-height image crops the subject. */
  .desk-lead__media {
    margin: 0 0 0 calc(var(--space-6) * -1);
    aspect-ratio: 4 / 3;
    align-self: start;
  }

  .editorial__index {
    grid-template-columns: 1fr;
  }

  .editorial__head {
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .editorial__rule {
    order: 3;
    flex-basis: 100%;
  }

  .feature__panel {
    margin-inline: var(--space-4);
    padding: var(--space-6);
  }

  .brief {
    padding: var(--space-6);
  }

  .brief__row {
    width: 100%;
  }


  .ticker__tag {
    padding-inline: var(--space-4);
  }

  .footer-links {
    grid-template-columns: 1fr 1fr;
  }

  /* single.php's sidebar form stacks on mobile. The :not() guards matter —
     the front page's brief form also carries .sidebar-newsletter__form, and
     it lays its controls out inside .brief__row, which owns its own stacking
     rules. Without the guard, width:100% applied to both children of that
     horizontal flex row, so the non-shrinking button claimed the full width
     and crushed the email input to ~40px. */
  .sidebar-newsletter__form:not(.brief__form) {
    flex-direction: column;
  }

  .sidebar-newsletter__form:not(.brief__form) .newsletter-form__input,
  .sidebar-newsletter__form:not(.brief__form) .newsletter-form__btn {
    width: 100%;
  }


  .single-layout {
    grid-template-columns: 1fr;
  }

  .single-sidebar {
    position: static;
  }

  .article-nav {
    flex-direction: column;
  }

  .error-page__actions {
    padding-inline: var(--space-4);
  }
  .error-page__actions .search-form {
    flex-wrap: wrap;
  }
  .error-page__actions input[type="search"] {
    min-width: 0;
    width: 100%;
  }
}

/* Below this width the fused brief pill cannot hold both controls side by
   side: the button's label sets a width floor that crushes the input to a few
   dozen pixels and then overflows the pill's right edge. Stack them — a
   full-width input above a full-width button, both keeping the pill shape. */
@media (max-width: 560px) {
  .brief__row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: 28px;
  }

  .brief__row .newsletter-form__input {
    width: 100%;
    min-height: 48px;
    padding-inline: var(--space-4);
    /* Explicit: the --radius-sm/md tokens are 2-4px, far too sharp against a
       48px control. This keeps the pill's soft character while stacked. */
    border-radius: 999px;
    /* 16px floor: anything smaller makes iOS Safari zoom the page on focus. */
    font-size: 1rem;
    text-align: center;
  }

  .brief__row .newsletter-form__btn {
    width: 100%;
    min-height: 48px;
    padding-inline: var(--space-4);
    /* Explicit: the --radius-sm/md tokens are 2-4px, far too sharp against a
       48px control. This keeps the pill's soft character while stacked. */
    border-radius: 999px;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  /* Dossier becomes a single row of three so it never wraps awkwardly */
  .stage__dossier {
    gap: var(--space-4);
    justify-content: space-between;
  }

  .stage__datum {
    flex: 1;
    min-width: 0;
  }

  .stage__datum-val {
    flex-direction: column;
    gap: 2px;
    font-size: 0.625rem;
  }

  .stage__transport {
    justify-content: center;
  }

  .player__bar.stage__wave {
    height: 38px;
  }

  .post-grid,
  .post-grid--archive {
    grid-template-columns: 1fr;
  }

  .post-tile--feature {
    grid-column: span 1;
  }

  .pagination .page-numbers {
    min-width: 40px;
    height: 40px;
  }

  .pagination .prev.page-numbers,
  .pagination .next.page-numbers {
    padding-inline: var(--space-4);
  }

  .footer-links {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .ticker__tag {
    display: none;
  }

  /* Speed control rejoins the flow so it can't collide with the skip buttons */
  .player__transport {
    gap: var(--space-4);
  }

  .player__rate {
    position: static;
  }

  .player__play-btn {
    width: 48px;
    height: 48px;
  }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* renderTicker() sets .ticker__track's animation inline (main.js:152);
     !important here is required to win over that inline style. */
  .ticker__track {
    animation: none !important;
  }

  .hero__console.is-playing .hero__eq i {
    animation: none !important;
  }

  .badge-dot {
    animation: none !important;
  }

  /* Hero stage: kill the decorative loops, and make sure the entrance can't
     strand content at opacity:0 if the animation never runs. */
  .stage__seal,
  .stage__play.is-playing .stage__play-ring {
    animation: none !important;
  }

  .stage > * {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  .stage__spot {
    display: none;
  }

  /* Subscribe field: hold every layer at its resting state. The chart must end
     fully drawn, not stuck at dashoffset 3200 (i.e. invisible). */
  .subscribe__aurora,
  .subscribe__sweep,
  .subscribe__motes i,
  .subscribe__chart-ghost {
    animation: none !important;
  }

  .subscribe__sweep,
  .subscribe__motes {
    display: none;
  }

  .subscribe__chart-line {
    animation: none !important;
    stroke-dashoffset: 0;
  }

  .subscribe__chart-area,
  .subscribe__chart-ghost {
    animation: none !important;
    opacity: 1;
  }

  .archive-hero__bloom,
  .unmute__pulse {
    animation: none !important;
  }

  .unmute__pulse {
    display: none;
  }

  /* Morning Brief band: hold the decorative layers still. */
  .brief__bloom,
  .brief__rings,
  .brief__rail {
    animation: none !important;
  }

  /* Desks + tiles: no lift or zoom, but keep the colour/《state》cues so hover
     still reads as interactive. */
  .desk:hover,
  .post-tile:hover {
    transform: none;
  }

  .post-tile:hover .post-tile__thumb {
    transform: none;
  }

  .footer-col__list a:hover {
    transform: none;
  }
}