/*
Theme Name: Different At Work
Theme URI: https://differentatwork.com
Author: Andrew Sanders and Flo LaBrado
Description: A custom classic theme for Different At Work — a podcast and blog about neurodivergence in the workplace. Highway-signage design language, Atkinson Hyperlegible throughout, motion that asks permission. No framework, no build step.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: asanders
Tags: blog, podcast, one-column, custom-colors, editor-style, translation-ready, accessibility-ready
*/

/* ==========================================================================
   1. TOKENS
   ==========================================================================

   The system is borrowed from highway signage, which is the most rigorously
   tested legibility problem in public design: navy guide signs carry the
   information, gold warning signs carry the interruptions, and
   nothing else competes.

   Light mode leads with navy on paper and uses gold as the highlight.
   Dark mode inverts the roles — navy becomes the ground, gold becomes the
   voice. Both directions are deliberate, not a filter applied to one palette.

   Brand values are taken from the site's own assets — about.html declares
   --daw-blue and --daw-gold directly, and the mark and hover states confirm
   the rest. These are no longer reconstructions.

   Contrast governs where each colour may appear. Gold on navy is 8.2:1 and
   carries anything. Gold on white is 1.4:1 and carries nothing — so on light
   grounds gold is strictly decoration (rules, marks, highlights, fills behind
   navy text) and never text itself. Navy on white is 11.7:1 and does the
   reading. Dark mode inverts the pair, which is the whole reason it can.
   ========================================================================== */

:root {
  /* --- BRAND ------------------------------------------------------------ */
  --brand-navy:      #05347e;  /* --daw-blue, as declared by the brand */
  --brand-navy-mid:  #0a4499;  /* one step up, for panels on navy */
  --brand-gold:      #fad566;  /* --daw-gold, as declared by the brand */
  --brand-gold-dark: #e6bd4a;  /* hover: one step down from the brand gold */
  --brand-gold-tint: #fdf0c4;  /* fills behind navy text */
  --brand-gray:      #6b7a8c;  /* matches the theme.json gray token */
  --brand-paper:     #fcfbf8;  /* matches the theme.json paper token */

  /* --- Semantic roles --------------------------------------------------- */
  --c-bg:        var(--brand-paper);
  /* How the brain-noise loop is keyed onto the page. It was authored on a
     near-black ground, which only disappears with `screen` -- and `screen`
     only works over a dark ground. On paper we invert it first so the art is
     dark-on-white, then `multiply` drops the white instead. */
  --media-blend:  multiply;
  --media-filter: invert(1);
  --c-header:    var(--c-bg);
  --grain-blend: multiply;
  --grain-strength: 0.028;
  --c-surface:   #ffffff;
  --c-sunken:    #f1f5f9;
  --c-ink:       var(--brand-navy);
  --c-ink-2:     #475569;
  --c-ink-3:     var(--brand-gray);
  --c-line:      #e2e8f0;
  --c-line-2:    #cbd5e1;
  --c-accent:    var(--brand-navy-mid);
  --c-accent-2:  var(--brand-navy);
  --c-accent-bg: #eef2f7;
  --c-focus:     #2563eb;

  /* Sign vocabulary. Guide signs inform, warning signs interrupt. */
  --c-guide-bg:    var(--brand-navy);
  --c-guide-fg:    #ffffff;
  --c-warn-bg:     var(--brand-gold);
  --c-warn-fg:     var(--brand-navy);
  --c-warn-tint:   var(--brand-gold-tint);

  /* Type.
     Atkinson Hyperlegible was drawn by the Braille Institute specifically to
     keep letterforms distinguishable at low acuity — the same problem road
     signs solve. It reads as a values statement as much as a typeface, so it
     carries the body. Poppins sets the display: geometric, wide, sign-like. */
  --f-display: "Poppins", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --f-body: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type scale — 1.25 minor third at small, 1.333 at large.
     Atkinson runs large for its point size, so the body steps are a touch
     smaller than they would be for a typical grotesque. */
  --t--1: clamp(0.8rem, 0.78rem + 0.10vw, 0.855rem);
  --t-0:  clamp(1.02rem, 0.99rem + 0.15vw, 1.115rem);
  --t-1:  clamp(1.22rem, 1.15rem + 0.33vw, 1.46rem);
  --t-2:  clamp(1.45rem, 1.31rem + 0.70vw, 1.95rem);
  --t-3:  clamp(1.8rem,  1.51rem + 1.42vw, 2.75rem);
  --t-4:  clamp(2.1rem,  1.55rem + 2.75vw, 3.95rem);
  --t-5:  clamp(2.45rem, 1.55rem + 4.50vw, 5.4rem);

  /* Space — 4px base, fluid at the top end */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: clamp(3rem, 2rem + 5vw, 5rem);
  --s-9: clamp(4rem, 2.5rem + 7.5vw, 8rem);

  /* Measure and gutters */
  --measure: 68ch;
  --width-text: 44rem;
  --width-wide: 68rem;
  --width-full: 90rem;
  --gutter: clamp(1.25rem, 0.7rem + 2.8vw, 3rem);

  /* Surface treatment. Road signs have a consistent corner radius and a thin
     inset border — both are load-bearing here, not decoration. */
  --radius: 12px;
  --radius-sm: 7px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgb(10 28 53 / 0.05), 0 8px 24px -12px rgb(10 28 53 / 0.14);
  --shadow-lift: 0 2px 4px rgb(10 28 53 / 0.06), 0 18px 40px -18px rgb(10 28 53 / 0.22);

  --ease: cubic-bezier(0.2, 0.6, 0.25, 1);
  --dur: 220ms;

  color-scheme: light;
}

/* Dark mode inverts the sign logic: the navy that was ink becomes the ground,
   and gold steps up from decoration to primary voice — which it can only do
   here, where it finally has the contrast for it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --media-blend:  screen;
    --media-filter: none;
    /* Dark mode inverts the header: a warm, gold-tinted light grey bar over the
       brand blue page, so the chrome reads as the sign face and the content as
       the road behind it. */
    --c-header:    #e8e3d6;
    --grain-blend: screen;
    --grain-strength: 0.05;
    --c-header-ink: #05347e;
    --c-bg:        #05347e;
    --c-surface:   #0a4099;
    --c-sunken:    #042a66;
    --c-ink:       #eef2f7;
    --c-ink-2:     #a8bacd;
    --c-ink-3:     #7b8ea3;
    --c-line:      #1a4b8c;
    --c-line-2:    #2a5fa8;
    --c-accent:    var(--brand-gold);
    --c-accent-2:  #f3cd72;
    --c-accent-bg: #22283048;
    --c-focus:     #7cb3f0;
    --c-guide-bg:  #0a4099;
    --c-guide-fg:  #eef2f7;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px -12px rgb(0 0 0 / 0.6);
    --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.4), 0 18px 40px -18px rgb(0 0 0 / 0.7);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  /* Must stay in step with the prefers-color-scheme block above -- this one
     wins whenever the reader has used the toggle, and it is the palette most
     people actually see. Built from the brand blue, not from black. */
  --c-bg:        #05347e;
  --c-surface:   #0a4099;
  --media-blend:  screen;
  --media-filter: none;
  /* Dark mode inverts the header: a warm, gold-tinted light grey bar over the
     brand blue page, so the chrome reads as the sign face and the content as
     the road behind it. */
  --c-header:     #e8e3d6;
  --grain-blend: screen;
  --grain-strength: 0.05;
  --c-header-ink: #05347e;
  --c-sunken:    #042a66;
  --c-ink:       #eef2f7;
  --c-ink-2:     #c3d3e8;
  --c-ink-3:     #93aacb;
  --c-line:      #1a4b8c;
  --c-line-2:    #2a5fa8;
  --c-accent:    var(--brand-gold);
  --c-accent-2:  #f3cd72;
  --c-accent-bg: #22283048;
  --c-focus:     #9fc8f5;
  --c-guide-bg:  #0a4099;
  --c-guide-fg:  #eef2f7;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px -12px rgb(0 0 0 / 0.6);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.4), 0 18px 40px -18px rgb(0 0 0 / 0.7);
  color-scheme: dark;
}

/* ==========================================================================
   2. RESET
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  /* A little tooth on the paper. The mark is road signage, so the ground gets
     the faintest asphalt grain rather than staying perfectly flat. Tiled into
     the background instead of laid over the page as an overlay -- an overlay
     would sit in the stacking context and tint everything above it. */
  background-color: var(--c-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
  background-blend-mode: var(--grain-blend, multiply);
  background-size: 140px 140px;
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--t-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

img, picture, svg, video, canvas, iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p, li { text-wrap: pretty; }

:where(a) { color: inherit; }

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--c-accent); color: var(--c-bg); }

hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin-block: var(--s-7);
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   One grid drives every page. Content sits in the centre column; anything
   that needs to breathe opts into `wide` or `full` without leaving the flow.
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--width-full);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.flow > * + * { margin-block-start: var(--flow-space, var(--s-5)); }

/* Breakout grid: children default to the readable column, and can escape. */
.prose-grid {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter), 1fr)
    [wide-start] minmax(0, calc((var(--width-wide) - var(--width-text)) / 2))
    [text-start] min(var(--width-text), calc(100% - var(--gutter) * 2)) [text-end]
    minmax(0, calc((var(--width-wide) - var(--width-text)) / 2)) [wide-end]
    minmax(var(--gutter), 1fr) [full-end];
}
.prose-grid > * { grid-column: text; }
.prose-grid > .is-wide,
.prose-grid > .alignwide { grid-column: wide; }
.prose-grid > .is-full,
.prose-grid > .alignfull { grid-column: full; }

.stack-lg > * + * { margin-block-start: var(--s-8); }

.skip-link {
  position: absolute;
  left: var(--s-4);
  top: var(--s-4);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--c-ink);
  color: var(--c-bg);
  border-radius: var(--radius-sm);
  font-size: var(--t--1);
  font-weight: 600;
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

main { flex: 1 0 auto; }

/* ==========================================================================
   4. TYPOGRAPHY
   ========================================================================== */

h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--c-ink);
}
h1, .h1 { font-size: var(--t-4); }
h2, .h2 { font-size: var(--t-3); line-height: 1.12; }
h3, .h3 { font-size: var(--t-2); line-height: 1.18; }

h4, h5, h6 {
  font-family: var(--f-body);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
h4 { font-size: var(--t-1); }
h5 { font-size: var(--t-0); }
h6 { font-size: var(--t--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-ink-2); }

.eyebrow {
  font-family: var(--f-body);
  font-size: var(--t--1);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  display: block;
}

.lede {
  font-size: var(--t-1);
  line-height: 1.5;
  color: var(--c-ink-2);
  max-width: 40rem;
  letter-spacing: -0.008em;
}

.meta {
  font-size: var(--t--1);
  color: var(--c-ink-3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}
.meta > * + *::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: currentColor;
  margin-inline-end: var(--s-3);
  vertical-align: middle;
  opacity: 0.6;
}

/* Body links: a considered underline, not a browser default. */
.prose a,
.link {
  color: var(--c-ink);
  text-decoration: none;
  background-image: linear-gradient(var(--c-accent), var(--c-accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
  padding-bottom: 1px;
  transition: background-size var(--dur) var(--ease), color var(--dur) var(--ease);
}
.prose a:hover,
.link:hover {
  color: var(--c-accent);
  background-size: 100% 2px;
}

/* ==========================================================================
   5. PROSE — the article body. Editor output lands here.
   ========================================================================== */

.prose {
  font-size: var(--t-0);
  line-height: 1.72;
  color: var(--c-ink);
}
.prose > * + * { margin-block-start: 1.4em; }
.prose > h2 { margin-block-start: 2.2em; margin-block-end: 0.6em; }
.prose > h3 { margin-block-start: 1.9em; margin-block-end: 0.5em; }
.prose > h4 { margin-block-start: 1.7em; margin-block-end: 0.4em; }
.prose > h2 + *, .prose > h3 + *, .prose > h4 + * { margin-block-start: 0; }

.prose :where(ul, ol) { padding-inline-start: 1.4em; }
.prose li + li { margin-block-start: 0.5em; }
.prose li::marker { color: var(--c-ink-3); }

.prose blockquote {
  margin-inline: 0;
  padding-inline-start: var(--s-5);
  border-inline-start: 2px solid var(--c-accent);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-1);
  line-height: 1.42;
  color: var(--c-ink-2);
}
.prose blockquote p + p { margin-block-start: 0.6em; }
.prose blockquote cite {
  display: block;
  margin-block-start: var(--s-3);
  font-family: var(--f-body);
  font-size: var(--t--1);
  font-style: normal;
  color: var(--c-ink-3);
}

.prose :where(code, kbd, samp) {
  font-family: var(--f-mono);
  font-size: 0.88em;
  background: var(--c-sunken);
  border: 1px solid var(--c-line);
  border-radius: 5px;
  padding: 0.12em 0.36em;
}
.prose pre {
  background: var(--c-sunken);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--s-5);
  overflow-x: auto;
  font-size: var(--t--1);
  line-height: 1.6;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }

.prose :where(figure) { margin-inline: 0; }
.prose :where(img, figure img) { border-radius: var(--radius); }
.prose figcaption {
  margin-block-start: var(--s-3);
  font-size: var(--t--1);
  color: var(--c-ink-3);
  line-height: 1.5;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t--1);
}
.prose :where(th, td) {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-line);
  text-align: start;
}
.prose th { font-weight: 600; color: var(--c-ink-2); }

/* Wide/full images must be able to escape the column and still look intentional */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   6. HEADER + NAV
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--c-header) 92%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.site-header[data-stuck="true"] { border-bottom-color: var(--c-line); }

/* When the header bar is light and the page is dark, the header's own text and
   controls must flip with it rather than inherit the page ink.

   These need `.site-header` in front of every selector. `.nav__list a` sets
   `color: var(--c-ink-2)` further down the file at the same specificity, so a
   bare `.site-header a` loses on source order -- which is how the labels ended
   up pale blue-grey on a pale grey bar. Measured: 5.1:1 idle, 7.9:1 active. */
.site-header,
.site-header button { color: var(--c-header-ink, var(--c-ink)); }

.site-header .nav__list a {
  color: color-mix(in srgb, var(--c-header-ink, var(--c-ink)) 80%, transparent);
}

.site-header .nav__list a:hover,
.site-header .nav__list a:focus-visible,
.site-header .nav__list .current-menu-item > a,
.site-header .nav__list .current_page_item > a {
  color: var(--c-header-ink, var(--c-ink));
  background: color-mix(in srgb, var(--brand-gold) 34%, transparent);
}

/* The theme toggle sits in the bar, so it takes the bar's ink too. */
.site-header .theme-toggle {
  color: var(--c-header-ink, var(--c-ink));
  border-color: color-mix(in srgb, var(--c-header-ink, var(--c-ink)) 38%, transparent);
}
.site-header .theme-toggle:hover {
  background: color-mix(in srgb, var(--brand-gold) 34%, transparent);
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--c-bg); } }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 4.5rem;
}

.site-brand {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-1);
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--c-ink);
  margin-inline-end: auto;
  white-space: nowrap;
}
.site-brand:hover { color: var(--c-accent); }
.site-brand img { max-height: 2.25rem; width: auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__list a {
  display: block;
  padding: var(--s-2) var(--s-3);
  font-size: var(--t--1);
  font-weight: 500;
  color: var(--c-ink-2);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__list a:hover { color: var(--c-ink); background: var(--c-sunken); }
.nav__list .current-menu-item > a,
.nav__list .current_page_item > a { color: var(--c-ink); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: var(--s-2); }

.icon-btn {
  display: grid;
  place-items: center;
  width: 2.375rem;
  height: 2.375rem;
  border: 1px solid var(--c-line);
  background: transparent;
  color: var(--c-ink-2);
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.icon-btn:hover { color: var(--c-ink); border-color: var(--c-line-2); background: var(--c-sunken); }
.icon-btn svg { width: 1.05rem; height: 1.05rem; }

/* Theme toggle shows the icon for the mode it will switch *to* */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
}

.nav-toggle { display: none; }

@media (max-width: 46.875rem) {
  .nav-toggle { display: grid; }
  /* The drawer is the header bar continued downwards, so it takes the bar's
     own ground -- not the page's. Painting it `--c-bg` put navy labels on a
     navy panel in dark mode, because the `.site-header` ink rules above key
     the labels to the *bar*, which is light there. Opaque, not the bar's 92%
     mix: page content scrolls underneath this one. */
  .site-nav {
    position: fixed;
    inset: 4.5rem 0 auto 0;
    background: var(--c-header);
    border-bottom: 1px solid color-mix(in srgb, var(--c-header-ink, var(--c-ink)) 20%, transparent);
    padding: var(--s-4) var(--gutter) var(--s-6);
    display: none;
  }
  .site-nav[data-open="true"] { display: block; }
  /* Bar and drawer are one panel while the menu is open, so the bar drops its
     92% mix and matches the drawer's opaque ground. */
  .site-header:has(.site-nav[data-open="true"]) { background: var(--c-header); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list a {
    padding: var(--s-4) var(--s-2);
    font-size: var(--t-0);
    border-radius: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--c-header-ink, var(--c-ink)) 14%, transparent);
  }
}

/* ==========================================================================
   7. BUTTONS
   ========================================================================== */

.btn {
  --btn-bg: var(--c-ink);
  --btn-fg: var(--c-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.72em 1.35em;
  font-size: var(--t--1);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-decoration: none;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

.btn--accent { --btn-bg: var(--brand-gold); --btn-fg: var(--brand-navy); }
.btn--accent:hover { --btn-bg: var(--brand-gold-dark); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  border-color: var(--c-line-2);
}
.btn--ghost:hover { background: var(--c-sunken); }

.btn--sm { padding: 0.5em 1em; font-size: var(--t--1); }
.btn--lg { padding: 0.85em 1.75em; font-size: var(--t-0); }

/* ==========================================================================
   8. CARDS + LISTS
   ========================================================================== */

.grid {
  display: grid;
  gap: var(--s-6) var(--s-5);
  /* auto-FIT, not auto-fill. The wrap is 90rem wide, so at 19rem minimum the
     browser lays out four tracks -- and a row of three cards then fills three
     of them and leaves a dead column on the right. auto-fit collapses tracks
     nothing occupies, so whatever the count is, it spreads across the width. */
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(24rem, 100%), 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  position: relative;
  isolation: isolate;
}
.card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--c-sunken);
  aspect-ratio: 16 / 10;
  margin-block-end: var(--s-2);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}
.card:hover .card__media img { transform: scale(1.035); }

.card__title {
  font-family: var(--f-display);
  font-size: var(--t-2);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.018em;
}
.card__title a { text-decoration: none; }
/* Full-card click target without nesting interactive elements */
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card:hover .card__title { color: var(--c-accent); }

.card__excerpt { color: var(--c-ink-2); font-size: var(--t--1); line-height: 1.6; }

/* The article index: a quiet ruled list, not a wall of boxes. */
.entry-list { list-style: none; margin: 0; padding: 0; }
.entry-list > li { border-top: 1px solid var(--c-line); }
.entry-list > li:last-child { border-bottom: 1px solid var(--c-line); }

.entry-row {
  position: relative;
  display: grid;
  gap: var(--s-2) var(--s-6);
  padding-block: var(--s-6);
  align-items: start;
  transition: background var(--dur) var(--ease);
}
@media (min-width: 46.875rem) {
  .entry-row { grid-template-columns: 8rem 1fr; }
  .entry-row__date { padding-top: 0.55rem; }
}
.entry-row:hover .entry-row__title { color: var(--c-accent); }
.entry-row__date { font-size: var(--t--1); color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.entry-row__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-2);
  line-height: 1.15;
  letter-spacing: -0.015em;
  transition: color var(--dur) var(--ease);
}
.entry-row__title a { text-decoration: none; }
.entry-row__title a::after { content: ""; position: absolute; inset: 0; }
.entry-row__excerpt { color: var(--c-ink-2); font-size: var(--t--1); margin-block-start: var(--s-2); max-width: 46rem; }

.tag-list { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.tag {
  display: inline-block;
  padding: 0.28em 0.75em;
  font-size: var(--t--1);
  font-weight: 500;
  color: var(--c-ink-2);
  background: var(--c-sunken);
  border: 1px solid var(--c-line);
  border-radius: 100px;
  text-decoration: none;
  position: relative;
  z-index: 2;
  transition: all var(--dur) var(--ease);
}
.tag:hover { color: var(--c-accent); border-color: var(--c-accent); background: var(--c-accent-bg); }

/* ==========================================================================
   9. HERO / FRONT PAGE
   ========================================================================== */

.hero {
  padding-block: clamp(3.5rem, 2rem + 8vw, 8rem) var(--s-8);
}
.hero__title {
  font-size: var(--t-5);
  line-height: 0.98;
  letter-spacing: -0.03em;
  max-width: 18ch;
}
.hero__lede { margin-block-start: var(--s-5); font-size: var(--t-1); max-width: 44ch; }
.hero__actions { margin-block-start: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }

.section { padding-block: var(--s-8); }
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block-end: var(--s-6);
  padding-block-end: var(--s-4);
  border-bottom: 1px solid var(--c-line);
}
.section__title { font-size: var(--t-2); }
.section__link {
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--c-ink-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}
.section__link:hover { color: var(--c-accent); gap: var(--s-3); }

/* Featured lead article on the front page */
.feature {
  display: grid;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 56.25rem) {
  .feature { grid-template-columns: 1.05fr 1fr; gap: var(--s-8); }
  .feature--flip .feature__media { order: 2; }
}
.feature__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-sunken);
  aspect-ratio: 4 / 3;
}
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__title { font-size: var(--t-3); margin-block: var(--s-3); }
.feature__title a { text-decoration: none; }
.feature__title a:hover { color: var(--c-accent); }

/* ==========================================================================
   10. SINGLE ENTRY
   ========================================================================== */

.entry-header { padding-block: var(--s-8) var(--s-6); }
.entry-header__title { margin-block: var(--s-4) var(--s-5); }
.entry-header .meta { margin-block-start: var(--s-5); }

.entry-hero {
  margin-block: var(--s-6) var(--s-8);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--c-sunken);
}
.entry-hero img { width: 100%; }

.entry-footer {
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-6);
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  align-items: center;
  justify-content: space-between;
}

.post-nav {
  display: grid;
  gap: var(--s-4);
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-6);
  border-top: 1px solid var(--c-line);
}
@media (min-width: 46.875rem) { .post-nav { grid-template-columns: 1fr 1fr; gap: var(--s-6); } }
.post-nav__item { text-decoration: none; display: block; }
.post-nav__item--next { text-align: end; }
.post-nav__label { font-size: var(--t--1); color: var(--c-ink-3); display: block; margin-block-end: var(--s-2); }
.post-nav__title { font-family: var(--f-display); font-size: var(--t-1); line-height: 1.2; }
.post-nav__item:hover .post-nav__title { color: var(--c-accent); }

/* ==========================================================================
   11. PODCAST
   ========================================================================== */

.episode-row {
  position: relative;
  display: grid;
  gap: var(--s-4) var(--s-5);
  padding-block: var(--s-6);
  align-items: start;
}
@media (min-width: 40rem) { .episode-row { grid-template-columns: 6.5rem 1fr; } }
.episode-art {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-sunken);
  aspect-ratio: 1;
  width: 6.5rem;
}
.episode-art img { width: 100%; height: 100%; object-fit: cover; }
.episode-num {
  font-size: var(--t--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-accent);
}

/* Gold on the spotlight band, where it reads at 12.8:1 and does the popping
   it is there to do. Scoped rather than global: gold on the light paper is
   1.4:1, which is decoration-only territory and would make the number
   effectively invisible on any pale ground. */
.section--spotlight .episode-num,
:root[data-theme="dark"] .episode-num { color: var(--brand-gold); }
.episode-title { font-family: var(--f-display); font-size: var(--t-2); line-height: 1.15; margin-block: var(--s-2); }
.episode-title a { text-decoration: none; }
.episode-title a::after { content: ""; position: absolute; inset: 0; }
.episode-row:hover .episode-title { color: var(--c-accent); }

/* Custom audio player — replaces the host's default embed */
.player {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
  box-shadow: var(--shadow);
  display: grid;
  gap: var(--s-4);
  position: relative;
  z-index: 2;
}
.player__row { display: flex; align-items: center; gap: var(--s-4); }
.player__play {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.25rem; height: 3.25rem;
  border: 0;
  border-radius: 50%;
  background: var(--brand-gold);
  color: var(--brand-navy);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.player__play:hover { background: var(--brand-gold-dark); }
.player__play:hover { transform: scale(1.05); }
.player__play svg { width: 1.25rem; height: 1.25rem; }
.player__play .icon-pause { display: none; }
.player[data-playing="true"] .icon-play { display: none; }
.player[data-playing="true"] .icon-pause { display: block; }

.player__body { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--s-2); }
.player__title {
  font-size: var(--t--1);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player__scrub {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 100px;
  background: var(--c-line);
  cursor: pointer;
  background-image: linear-gradient(var(--c-accent), var(--c-accent));
  background-repeat: no-repeat;
  background-size: var(--progress, 0%) 100%;
}
.player__scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--c-accent);
  border: 2px solid var(--c-surface);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
}
.player__scrub::-moz-range-thumb {
  width: 14px; height: 14px;
  border: 2px solid var(--c-surface);
  border-radius: 50%;
  background: var(--c-accent);
}
.player__scrub::-moz-range-progress { background: var(--c-accent); height: 6px; border-radius: 100px; }

.player__times {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--c-ink-3);
  font-variant-numeric: tabular-nums;
}
.player__controls { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.player__chip {
  border: 1px solid var(--c-line);
  background: transparent;
  color: var(--c-ink-2);
  border-radius: 100px;
  padding: 0.3em 0.7em;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: all var(--dur) var(--ease);
}
.player__chip:hover { color: var(--c-ink); border-color: var(--c-line-2); background: var(--c-sunken); }

.subscribe-links { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ==========================================================================
   12. SUBSCRIBE FORM (styles the companion plugin's markup)
   ========================================================================== */

.subscribe {
  background: var(--c-sunken);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}
.subscribe--bare { background: none; border: 0; padding: 0; }
.subscribe__title { font-size: var(--t-2); }
.subscribe__lede { margin-block-start: var(--s-3); color: var(--c-ink-2); font-size: var(--t--1); max-width: 44ch; }

.subscribe__form {
  margin-block-start: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  max-width: 32rem;
}
.subscribe__form .field { flex: 1 1 14rem; }

.field input[type="email"],
.field input[type="text"] {
  width: 100%;
  padding: 0.72em 1em;
  background: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-line-2);
  border-radius: 100px;
  font-size: var(--t--1);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input::placeholder { color: var(--c-ink-3); }

/* The signup field stays off-white in both modes.
   Following the theme tokens made it a mid-blue panel inside a navy card --
   two blues with almost no separation, so the field stopped reading as
   something you type into. A pale field is the one element on that card that
   should look like an input, and it behaves identically in light and dark
   rather than asking the reader to relearn it. Navy on off-white is 11.7:1;
   the placeholder is 5.3:1, so it stays legible instead of being a hint only
   people with good eyes can find. */
/* Every text control a reader types into is off-white in both modes.

   Following the theme tokens made these mid-blue panels on a blue page --
   two blues with almost no separation, so a field stopped looking like a
   field. Applied once here rather than per form, so the comment box, the
   contact form and the signup all behave the same way and none of them
   quietly drifts back. Navy on off-white is 11.3:1; the placeholder 5.3:1. */
.subscribe .field input[type="email"],
.subscribe .field input[type="text"],
.contact-form .field input,
.contact-form .field textarea,
.comment-form :where(input[type="text"], input[type="email"], input[type="url"], textarea) {
  background: var(--brand-paper);
  color: var(--brand-navy);
  border: 1px solid color-mix(in srgb, var(--brand-navy) 25%, transparent);
}

.subscribe .field input::placeholder,
.contact-form .field input::placeholder,
.contact-form .field textarea::placeholder,
.comment-form :where(input, textarea)::placeholder { color: #5a6b82; opacity: 1; }

.subscribe .field input:focus,
.contact-form .field input:focus,
.contact-form .field textarea:focus,
.comment-form :where(input, textarea):focus {
  border-color: var(--brand-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold) 45%, transparent);
  outline: none;
}

/* The consent checkbox sits on the dark ground, not on a field, so it needs
   its own accent rather than inheriting the pale one. */
.comment-form input[type="checkbox"] { accent-color: var(--brand-gold); }

/* The searchable line, under the headline the reader came for. */
.entry-subtitle {
  font-size: var(--t-1);
  line-height: 1.45;
  color: var(--c-ink-2);
  margin-block: var(--s-3) 0;
  max-width: 52ch;
  text-wrap: pretty;
}

.comment-subscribe { display: flex; align-items: center; gap: var(--s-2); }
.comment-subscribe input { width: auto; flex: none; }
.comment-subscribe label { font-size: var(--t--1); }
.field input:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-bg);
  outline: none;
}

/* Honeypot — hidden from people, reachable by bots */
.subscribe__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.notice {
  margin-block-start: var(--s-4);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-sm);
  font-size: var(--t--1);
  border: 1px solid var(--c-line);
  background: var(--c-surface);
}
.notice--ok { border-color: var(--c-accent); background: var(--c-accent-bg); color: var(--c-ink); }
.notice--err { border-color: #d14343; background: color-mix(in srgb, #d14343 10%, var(--c-surface)); }

.form-fineprint { margin-block-start: var(--s-3); font-size: 0.75rem; color: var(--c-ink-3); }

/* ==========================================================================
   13. PAGINATION, SEARCH, 404
   ========================================================================== */

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  justify-content: center;
  margin-block-start: var(--s-8);
}
.pagination .page-numbers {
  display: grid;
  place-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding-inline: var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: 100px;
  font-size: var(--t--1);
  font-weight: 500;
  text-decoration: none;
  color: var(--c-ink-2);
  transition: all var(--dur) var(--ease);
}
.pagination .page-numbers:hover { color: var(--c-ink); border-color: var(--c-line-2); background: var(--c-sunken); }
.pagination .page-numbers.current {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-bg);
}
.pagination .dots { border: 0; }

.search-form { display: flex; gap: var(--s-3); max-width: 30rem; }
.search-form .field { flex: 1; }

.empty-state { padding-block: var(--s-9); text-align: center; }
.empty-state__title { font-size: var(--t-3); }
.empty-state p { margin-block-start: var(--s-4); color: var(--c-ink-2); }

.error-404 { padding-block: var(--s-9); }
.error-404__code {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-5);
  line-height: 1;
  color: var(--c-accent);
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */

.site-footer {
  margin-block-start: var(--s-9);
  border-top: 1px solid var(--c-line);
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--t--1);
  color: var(--c-ink-2);
}
.site-footer__grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}
.site-footer__brand { font-family: var(--f-display); font-size: var(--t-1); color: var(--c-ink); }
.site-footer h2 {
  font-family: var(--f-body);
  font-size: var(--t--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-ink-3);
  margin-block-end: var(--s-3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.site-footer a { text-decoration: none; color: var(--c-ink-2); transition: color var(--dur) var(--ease); }
.site-footer a:hover { color: var(--c-accent); }
.site-footer__bottom {
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-5);
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--c-ink-3);
}

/* ==========================================================================
   15. COMMENTS
   ========================================================================== */

.comments { margin-block-start: var(--s-8); padding-block-start: var(--s-6); border-top: 1px solid var(--c-line); }
.comment-list { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-6); }
.comment-list ol.children { list-style: none; margin: var(--s-5) 0 0 var(--s-5); padding-inline-start: var(--s-5); border-inline-start: 1px solid var(--c-line); display: grid; gap: var(--s-5); }
.comment-body { font-size: var(--t--1); }
.comment-meta { display: flex; align-items: center; gap: var(--s-3); margin-block-end: var(--s-3); }
.comment-author { font-weight: 600; }
.comment-metadata a { color: var(--c-ink-3); text-decoration: none; font-size: 0.75rem; }
.comment-form { display: grid; gap: var(--s-4); margin-block-start: var(--s-6); max-width: 40rem; }
.comment-form label { display: block; font-size: var(--t--1); font-weight: 500; margin-block-end: var(--s-2); }
.comment-form :where(input[type="text"], input[type="email"], input[type="url"], textarea) {
  width: 100%;
  padding: 0.7em 0.9em;
  background: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-line-2);
  border-radius: var(--radius-sm);
  font-size: var(--t--1);
}
.comment-form textarea { min-height: 9rem; resize: vertical; border-radius: var(--radius); }
.comment-form input:focus, .comment-form textarea:focus {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-bg);
  outline: none;
}

/* ==========================================================================
   16. WORDPRESS CORE CLASSES
   Core emits these regardless of theme; they need to look deliberate.
   ========================================================================== */

.alignleft { float: left; margin: 0.4rem var(--s-5) var(--s-4) 0; max-width: 50%; }
.alignright { float: right; margin: 0.4rem 0 var(--s-4) var(--s-5); max-width: 50%; }
.aligncenter { margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .blocks-gallery-caption {
  font-size: var(--t--1); color: var(--c-ink-3); margin-block-start: var(--s-3);
}
.sticky .entry-row__title::before {
  content: "★";
  color: var(--c-accent);
  margin-inline-end: var(--s-2);
  font-size: 0.7em;
  vertical-align: middle;
}
.wp-block-image { margin-inline: 0; }
.wp-block-separator { border-top: 1px solid var(--c-line); border-bottom: 0; margin-block: var(--s-7); }
.wp-block-button__link {
  background: var(--c-ink);
  color: var(--c-bg);
  border-radius: 100px;
  padding: 0.72em 1.35em;
  font-size: var(--t--1);
  font-weight: 600;
  text-decoration: none;
}
.wp-block-pullquote { border: 0; padding: 0; }
.wp-block-embed__wrapper { position: relative; }
.wp-block-embed.wp-has-aspect-ratio iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border-radius: var(--radius); }

/* Admin bar must not hide behind the sticky header */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

/* ==========================================================================
   17. MOTION — entrance only, and only if the reader wants it
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  }
  .reveal.is-in { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .subscribe, .player, .post-nav, .comments { display: none !important; }
  body { background: #fff; color: #000; }
  .prose a { background: none; text-decoration: underline; }
}

/* ==========================================================================
   18. SIGN VOCABULARY
   Highway signage as a component set. Used sparingly — a page covered in
   signs is a page with no signs, because nothing stands out any more.
   ========================================================================== */

/* Guide sign: navy panel, white text, thin inset keyline. The keyline is the
   detail that makes it read as signage rather than as a coloured box. */
.sign {
  --sign-bg: var(--c-guide-bg);
  --sign-fg: var(--c-guide-fg);
  position: relative;
  background: var(--sign-bg);
  color: var(--sign-fg);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  isolation: isolate;
}
.sign::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1.5px solid currentColor;
  border-radius: calc(var(--radius-lg) - 5px);
  opacity: 0.42;
  pointer-events: none;
}
.sign :where(h1, h2, h3, p, li) { color: inherit; }
.sign__inner { position: relative; z-index: 1; }

/* Warning sign: gold ground, navy text. For interruptions only. */
.sign--warn {
  --sign-bg: var(--c-warn-bg);
  --sign-fg: var(--c-warn-fg);
}

/* The diamond warning badge, at the scale of an eyebrow. */
.diamond {
  display: inline-grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  flex: none;
  background: var(--c-warn-bg);
  color: var(--c-warn-fg);
  border: 1.5px solid var(--c-warn-fg);
  border-radius: 3px;
  rotate: 45deg;
  font-size: 0.72em;
  font-weight: 700;
}
.diamond > * { rotate: -45deg; }

/* Eyebrow, upgraded: a short gold rule leading into the label, the way a
   sign's border leads into its legend. */
.eyebrow--sign {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow--sign::before {
  content: "";
  width: 1.75rem;
  height: 3px;
  border-radius: 2px;
  background: var(--brand-gold);
  flex: none;
}

/* Barricade stripes. A section divider that earns its keep — diagonal
   hazard bands, sized so they read at a glance and never tile visibly. */
.barricade {
  height: 10px;
  border-radius: 3px;
  background: repeating-linear-gradient(
    -45deg,
    var(--brand-gold) 0 14px,
    var(--c-ink) 14px 28px
  );
  opacity: 0.9;
}
:root[data-theme="dark"] .barricade { opacity: 0.75; }

/* Route-marker numerals for episode numbers: a shield, essentially. */
.route-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.22em 0.7em 0.28em;
  background: var(--c-guide-bg);
  color: var(--c-guide-fg);
  border-radius: 5px;
  font-family: var(--f-display);
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .route-badge {
  background: var(--brand-gold);
  color: var(--brand-navy);
}

/* Highlighter: gold behind a phrase, like a marked-up sign spec. */
.marker {
  background: linear-gradient(transparent 62%, var(--c-warn-tint) 62%);
  padding-inline: 0.1em;
}
:root[data-theme="dark"] .marker {
  background: linear-gradient(transparent 62%, rgb(235 183 64 / 0.28) 62%);
}

/* ==========================================================================
   19. SUBSCRIBE PAGE
   ========================================================================== */

.subscribe-page { padding-block: var(--s-8) var(--s-9); }

.subscribe-hero {
  display: grid;
  gap: var(--s-7);
  align-items: center;
}
@media (min-width: 56.25rem) {
  .subscribe-hero { grid-template-columns: 1.15fr 1fr; gap: var(--s-8); }
}
.subscribe-hero__title { font-size: var(--t-4); line-height: 1.02; }
.subscribe-hero__lede { margin-block-start: var(--s-5); }

/* What you actually get — three plain promises, not marketing bullets. */
.promises {
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-4);
}
.promises li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: start;
  font-size: var(--t--1);
  color: var(--c-ink-2);
  line-height: 1.6;
}
.promises strong { color: var(--c-ink); display: block; font-size: var(--t-0); margin-block-end: 2px; }

.subscribe-card { position: relative; }

/* Frequency picker on the full page — checkboxes styled as sign chips. */
.choice-grid { display: grid; gap: var(--s-3); margin-block-start: var(--s-5); }
.choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: start;
  padding: var(--s-4);
  border: 1.5px solid var(--c-line-2);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--c-surface);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.choice:hover { border-color: var(--c-accent); }
.choice:has(input:checked) {
  border-color: var(--c-accent);
  background: var(--c-accent-bg);
}
.choice:has(input:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.choice input { margin-block-start: 0.25em; accent-color: var(--c-accent); }
.choice__title { font-weight: 600; font-size: var(--t--1); }
.choice__note { font-size: 0.78rem; color: var(--c-ink-3); margin-block-start: 2px; }

/* Stack the form vertically on the subscribe page, where there is room. */
.subscribe--page .subscribe__form { flex-direction: column; max-width: none; }
.subscribe--page .subscribe__form .field { flex: 1 1 auto; width: 100%; }
.subscribe--page .subscribe__form .btn { width: 100%; }

/* ==========================================================================
   20. MODAL
   Deliberately restrained: it slides, it does not pounce. Gated behind real
   engagement, capped hard, and silent for anyone who has already subscribed.
   ========================================================================== */

.daw-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  place-items: end center;
  padding: var(--gutter);
  pointer-events: none;
}
@media (min-width: 46.875rem) {
  .daw-modal { place-items: center; }
}
.daw-modal[hidden] { display: none; }

.daw-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgb(10 28 53 / 0.42);
  opacity: 0;
  transition: opacity 260ms var(--ease);
  pointer-events: auto;
}
.daw-modal[data-open="true"] .daw-modal__scrim { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .daw-modal__scrim { transition: none; }
}

.daw-modal__panel {
  position: relative;
  width: min(34rem, 100%);
  max-height: calc(100svh - var(--gutter) * 2);
  overflow-y: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  pointer-events: auto;
  transform: translateY(18px);
  opacity: 0;
  transition: transform 300ms var(--ease), opacity 260ms var(--ease);
}
.daw-modal[data-open="true"] .daw-modal__panel { transform: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .daw-modal__panel { transition: none; transform: none; }
}

/* A gold rule across the top — the sign edge, at panel scale. */
.daw-modal__panel::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 5px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--brand-gold);
}

.daw-modal__close {
  position: absolute;
  top: var(--s-4);
  inset-inline-end: var(--s-4);
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-ink-2);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.daw-modal__close:hover { color: var(--c-ink); background: var(--c-sunken); border-color: var(--c-line-2); }
.daw-modal__close svg { width: 1rem; height: 1rem; }

.daw-modal .subscribe { background: none; border: 0; padding: 0; }
.daw-modal .subscribe__title { font-size: var(--t-2); padding-inline-end: 2.5rem; }

.daw-modal__dismiss {
  margin-block-start: var(--s-4);
  background: none;
  border: 0;
  padding: 0;
  font-size: 0.78rem;
  color: var(--c-ink-3);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.daw-modal__dismiss:hover { color: var(--c-ink-2); }

/* When the modal is open the page behind it must not scroll. */
body.daw-modal-open { overflow: hidden; }

/* ==========================================================================
   21. COMMENTS, CONTINUED
   Native WordPress comments, dressed to match. Threading gets a gold spine
   so a reply is legible as a reply at a glance.
   ========================================================================== */

.comment-list ol.children { border-inline-start-color: var(--brand-gold); }

.comment-awaiting-moderation {
  display: inline-block;
  margin-block-start: var(--s-2);
  padding: 0.2em 0.6em;
  background: var(--c-warn-tint);
  color: var(--c-warn-fg);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}
:root[data-theme="dark"] .comment-awaiting-moderation {
  background: rgb(235 183 64 / 0.2);
  color: var(--brand-gold);
}

.comment-form__note {
  font-size: 0.78rem;
  color: var(--c-ink-3);
  line-height: 1.55;
}

/* The comment honeypot, hidden the same way the subscribe one is. */
.comment-form__hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   22. HERO MEDIA
   The brain-noise video sits behind the headline, never in front of it. The
   headline is real text in normal flow, so it paints first and the video is
   decoration that arrives late — which is what keeps LCP honest.
   ========================================================================== */

.hero--media {
  position: relative;
  /* No `isolation: isolate`. It creates a stacking context, and `screen` can
     only composite against what is inside one -- which was nothing, so the
     loop needed an opaque disc painted behind it just to hide its own black.
     That disc was the visible "card": flat colour sitting on a page that
     carries grain. Without isolation the video blends against the real page,
     texture included, and the edge disappears because there is no edge. */
  padding-block: clamp(4rem, 2.5rem + 9vw, 9rem);
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--c-guide-bg);
}

.hero-media__poster,
.hero-media__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The poster carries the hero until — and if — the video ever plays. */
.hero-media__video { opacity: 0; transition: opacity 600ms var(--ease); }

/* The brain-noise loop was authored on a near-black ground because keying it
   frame by frame in Photoshop was not worth the afternoon. `screen` does it
   in one line: black composites to nothing, so the lines sit directly on the
   navy -- which is what the animation was always meant to look like. */
.hero-media__video,
.hero-media__poster {
  mix-blend-mode: var(--media-blend);
  filter: var(--media-filter);
}

/* The header mark, whichever path produced it.
   `the_custom_logo()` emits the attachment at its registered dimensions with
   no size ceiling of its own -- a 2111x1115 upload rendered ~950px wide and
   swallowed the header. Constrain both the Customizer logo and the theme's
   bundled fallback to the same height so the header cannot be broken by
   whatever someone uploads. */
/* --- Buttons inside prose -------------------------------------------------
   `.prose a` (0,1,1) outscores `.btn` (0,1,0), so a button dropped into page
   content inherited the prose link's colour and gold underline -- which meant
   navy label on a navy pill. The label was there the whole time, invisible. */
.prose a.btn,
.entry-content a.btn,
.resource__body a.btn {
  color: var(--btn-fg);
  background-image: none;
  background: var(--btn-bg);
  padding: 0.72em 1.35em;
}
.prose a.btn:hover,
.entry-content a.btn:hover { color: var(--btn-fg); background: var(--btn-bg); }

/* --- Episode grid --------------------------------------------------------- */
.episode-grid {
  list-style: none;
  margin: var(--s-7) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

.episode-card > article {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.episode-card:hover > article { border-color: var(--brand-gold); }

.episode-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  flex: 1 1 auto;
}

/* The number reads as a label, like the plate on a sign. */
.episode-card__num {
  align-self: flex-start;
  margin: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--t--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-navy);
  background: var(--brand-gold);
  border-radius: 999px;
  padding: 0.25em 0.75em;
}

.episode-card__title { font-size: var(--t-2); line-height: 1.2; margin: 0; }
.episode-card__excerpt { margin: 0; color: var(--c-ink-2); font-size: var(--t--1); }
.episode-card__meta {
  margin-block-start: auto;
  padding-block-start: var(--s-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: var(--t--1);
  color: var(--c-ink-3);
}

/* --- Image width policy ---------------------------------------------------
   Two rules, applied everywhere rather than decided per image.

   1. Never upscale. --nw carries the file's real width from PHP, so a 400px
      original renders at 400px instead of being stretched across a 1400px
      column. Stretching is what makes a small image look bad; the size of the
      slot is not the problem.

   2. Cap the hero. Even a large featured image does not need the full content
      width -- 52rem keeps it proportionate to the measure of the text it
      introduces, and stops a landscape photo pushing the first paragraph
      below the fold.

   The var() fallback is 100%, so an image without --nw behaves exactly as it
   did before. */
.entry-hero {
  max-width: min(100%, 52rem);
  margin-inline: auto;
}

/* Only where an image stands on its own. Card and feature media are
   fixed-ratio crops -- the picture is supposed to fill the frame, and
   refusing to upscale there leaves a small image marooned in a large panel,
   which looks broken in a way a slightly soft crop does not. A soft crop is
   a content problem; a hole in the layout is a design one. */
.entry-hero img,
.prose img,
.entry-content img {
  height: auto;
  max-width: min(100%, var(--nw, 100%));
  margin-inline: auto;
}

/* Cropped slots fill, always. */
.card__media img,
.feature__media img,
.entry-row__media img {
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Article images float, newspaper style ---------------------------------
   Images in a piece are decoration that breaks up a column of text, not
   full-bleed statements. Alternating sides gives a long read some rhythm
   without needing a layout decision per image.

   Headings clear the float so a subhead never wraps into a picture, and below
   46rem the float is dropped entirely -- a 40% image in a phone-width column
   leaves a gutter too narrow to read in. */
.prose > figure,
.entry-content > figure,
.prose > p > img,
.entry-content > p > img {
  max-width: min(42%, 22rem);
  margin-block: var(--s-2) var(--s-5);
}

.prose > figure:nth-of-type(odd),
.entry-content > figure:nth-of-type(odd) {
  float: inline-end;
  margin-inline-start: var(--s-6);
}

.prose > figure:nth-of-type(even),
.entry-content > figure:nth-of-type(even) {
  float: inline-start;
  margin-inline-end: var(--s-6);
}

.prose > figure img,
.entry-content > figure img { width: 100%; height: auto; border-radius: var(--radius); display: block; }

.prose > figure figcaption,
.entry-content > figure figcaption {
  font-size: var(--t--1);
  color: var(--c-ink-3);
  margin-block-start: var(--s-2);
}

.prose > h2, .prose > h3,
.entry-content > h2, .entry-content > h3 { clear: both; }

@media (max-width: 46rem) {
  .prose > figure,
  .entry-content > figure {
    float: none;
    max-width: 100%;
    margin-inline: 0;
  }
}

/* --- The end of an article -------------------------------------------------
   Share, then what to read next, then the conversation. Unstyled these ran
   together as one column of grey text with no sense of where one ended and the
   next began. Each gets a rule and a ground of its own -- minimal, but not
   undifferentiated. */
.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-5);
  border-top: 3px solid transparent;
  border-image: repeating-linear-gradient(
    135deg,
    var(--brand-gold) 0 10px,
    color-mix(in srgb, var(--c-ink) 55%, transparent) 10px 20px
  ) 3;
}
.share__label { font-weight: 700; color: var(--c-ink); letter-spacing: 0.02em; }
.share__link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: var(--s-3);
  border-radius: 999px;
  color: var(--c-ink-2);
}
.share__link:hover { background: var(--c-accent-bg); color: var(--c-ink); }

.post-nav {
  margin-block-start: var(--s-7);
  padding: var(--s-5);
  background: var(--c-sunken);
  border-radius: var(--radius-lg);
  gap: var(--s-5);
}
.post-nav__label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--t--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.post-nav__title { font-weight: 600; line-height: 1.25; }
.post-nav__item { display: flex; flex-direction: column; gap: var(--s-2); min-height: 44px; }

.comments {
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-6);
  border-top: 1px solid var(--c-line);
}
.comments > .h3 { display: flex; align-items: center; gap: var(--s-3); }
.comments > .h3::after {
  content: "";
  flex: 1 1 auto;
  height: 3px;
  border-radius: 2px;
  background: repeating-linear-gradient(
    135deg,
    var(--brand-gold) 0 8px,
    transparent 8px 16px
  );
}

/* --- Article rows ---------------------------------------------------------
   Image beside the copy, byline underneath. With two authors the byline is
   load-bearing -- it is how a reader decides what to open -- so it gets real
   space rather than being folded into a meta line of dates. */
.entry-row {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 1rem + 2vw, 2.5rem);
  align-items: start;
  padding-block: var(--s-7);
  border-top: 1px solid var(--c-line);
}

.entry-row__media { display: block; border-radius: var(--radius); overflow: hidden; }
.entry-row__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

.entry-row__body { display: flex; flex-direction: column; gap: var(--s-3); }
.entry-row__title { font-size: var(--t-2); line-height: 1.2; margin: 0; }
.entry-row__excerpt { margin: 0; color: var(--c-ink-2); }
.entry-row__more { font-weight: 700; align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; }

.entry-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-block-start: var(--s-2); }

.byline { display: inline-flex; align-items: center; gap: var(--s-2); }
.byline__mark {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--brand-navy);
  color: var(--brand-gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex: none;
}
.byline__name { font-weight: 600; color: var(--c-ink); }
:root[data-theme="dark"] .byline__mark { background: var(--brand-gold); color: var(--brand-navy); }

/* One column before the image gets too small to be worth the space. */
@media (max-width: 46rem) {
  .entry-row { grid-template-columns: minmax(0, 1fr); }
}

/* --- Contact form --------------------------------------------------------- */
.contact-form { margin-block-start: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); max-width: 34rem; }
.field { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; }
.field label { font-weight: 600; font-size: var(--t--1); }
.field input,
.field textarea {
  font: inherit;
  font-size: var(--t-0);
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-line-2);
  border-radius: var(--radius-sm);
  padding: 0.7em 0.85em;
  min-height: 44px;
}
.field textarea { resize: vertical; }
.field input:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* Off-screen rather than display:none -- bots that skip hidden inputs still
   fill this one, which is the whole point of a honeypot. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-notice {
  border-radius: var(--radius-sm);
  padding: var(--s-3) var(--s-4);
  border-inline-start: 4px solid var(--c-accent);
  background: var(--c-sunken);
}
.form-notice--ok { border-inline-start-color: var(--brand-gold); }
.form-notice--warn { border-inline-start-color: #c2410c; }

/* --- Resources ------------------------------------------------------------
   Three to a row with the row banding alternating, so a long list stays
   scannable instead of becoming one endless column. The banding is why the
   old page worked for this audience and the single column did not. */
.resource-row { padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.resource-row--alt { background: var(--c-sunken); }

.resource-row__inner {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  align-items: start;
}

/* Title, button and body line up across the row regardless of how long any one
   name runs -- "988 Suicide and Crisis Lifeline" wraps to two lines where
   "CHADD" does not, and without this the buttons sit at different heights.

   Subgrid rather than a fixed min-height: it measures the tallest title in
   each row and matches the others to it, so it stays correct when a resource
   is added or renamed. The rows are chunked to three in PHP, which is what
   makes each row a single grid row this can align against. */
@supports (grid-template-rows: subgrid) {
  .resource-row__inner { grid-template-rows: auto auto 1fr; }

  .resource {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    gap: 0;
  }
}

.resource__name {
  font-size: var(--t-1);
  line-height: 1.25;
  margin: 0 0 var(--s-3);
  padding: 0.35em 0.6em;
  background: var(--brand-navy);
  color: #fff;
  border-radius: var(--radius-sm);
}

.resource__action { margin-block-end: var(--s-4); display: flex; align-items: start; min-height: 1px; }

/* Grid items stretch by default, which turned a pill button into a full-height
   gold slab once it became a subgrid row. Pin it to its own size. */
.resource__link { align-self: start; justify-self: start; flex: 0 0 auto; }

.resource__body { font-size: var(--t--1); }
.resource__body > :first-child { margin-block-start: 0; }
.resource__body p { margin-block: 0 var(--s-3); }

:root[data-theme="dark"] .resource__name { background: var(--brand-gold); color: var(--brand-navy); }

/* --- Listener reviews ----------------------------------------------------- */
.review-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.review {
  margin: 0;
  background: var(--brand-gold-tint);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 1rem + 1.4vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  color: var(--brand-navy);
}

.review__stars { display: flex; gap: 3px; color: var(--brand-navy); }
.review__title { font-weight: 700; font-size: var(--t-1); margin: 0; }
.review__body { margin: 0; font-size: var(--t-0); line-height: 1.6; }
.review__body::before { content: "\201C"; }
.review__body::after  { content: "\201D"; }
.review__who {
  margin-block-start: auto;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--t--1);
  color: color-mix(in srgb, var(--brand-navy) 65%, transparent);
}

/* The tint panel stays light in both modes on purpose: it is the sign face,
   and it is what makes a quotation read as a quotation rather than as another
   card. Its ink is fixed to brand navy for the same reason -- inheriting the
   page ink would put near-white text on a pale gold panel in dark mode. */

/* --- Host cards -----------------------------------------------------------
   The About page ran as one long column of prose with two full-bleed photos
   at different aspect ratios. Cards give the two of you equal weight, and a
   fixed square crop normalises a 576px square portrait against a 2560px
   landscape one.

   The photos are also requested at 400px rather than full size: Andrew's
   original is only 576px wide, so displaying it larger was upscaling and it
   went soft. Smaller really is sharper here. */
.host-grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  margin-block: var(--s-7);
}

.host {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  position: relative;
  overflow: hidden;
}

/* The sign's edge, cropped to a corner. Decoration that comes from the brand
   rather than from a shape library. */
.host::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 5px;
  background: repeating-linear-gradient(
    135deg,
    var(--brand-gold) 0 10px,
    color-mix(in srgb, var(--c-ink) 70%, transparent) 10px 20px
  );
  opacity: 0.8;
}

.host__figure { margin: 0 0 var(--s-4); }

/* `.prose img` is 0,1,1 and this was 0,1,0, so the width policy for standalone
   prose images was overriding the portrait's own size and letting it fill the
   card. Scoped to match, so the card keeps control of its own photo. */
.host__photo,
.prose .host__photo,
.entry-content .host__photo {
  width: 100%;
  max-width: 16rem;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--c-line);
  display: block;
  margin-inline: 0;
}

.host__name { font-size: var(--t-2); line-height: 1.15; margin: 0; }

.host__cred {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--t--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin: var(--s-1) 0 var(--s-4);
}

.host__lead { font-size: var(--t-1); line-height: 1.55; }
.host__body > p + p { margin-block-start: var(--s-4); }

/* A gold rule under prose headings, so a page of body copy has some punctuation. */
.prose h2::after,
.entry-content h2::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  margin-block-start: var(--s-3);
  border-radius: 2px;
  background: var(--brand-gold);
}
.prose h2.has-text-align-center::after,
.entry-content h2.has-text-align-center::after { margin-inline: auto; }

/* --- Episode dialog -------------------------------------------------------
   Plays the newest episode without leaving the page. Native <dialog>, so the
   focus trap, Escape handling and background inerting are the browser's job
   rather than ours. */
.ep-dialog {
  border: 0;
  padding: 0;
  max-width: min(38rem, calc(100vw - 2rem));
  width: 100%;
  background: transparent;
  color: var(--c-ink);
}
.ep-dialog::backdrop {
  background: rgb(3 21 47 / 0.72);
  backdrop-filter: blur(3px);
}
.ep-dialog__inner {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  box-shadow: var(--shadow-lift);
}
.ep-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
}
.ep-dialog__close {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.ep-dialog__close:hover { background: var(--c-sunken); }
.ep-dialog__title {
  font-family: var(--font-display, inherit);
  font-size: var(--t-2);
  line-height: 1.2;
  margin-block: var(--s-2) var(--s-5);
}
.ep-dialog__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: var(--s-5);
  min-height: 44px;
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  .ep-dialog[open] { animation: daw-dialog-in 180ms var(--ease) both; }
}
@keyframes daw-dialog-in {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}

/* --- Spotlight band -------------------------------------------------------
   The episode list carries artwork, so it earns a darker ground than the rest
   of the page -- covers and gold accents read louder against near-black than
   against either paper or the brand blue.

   Implemented by redefining the ink tokens inside the band rather than
   restyling each child. Anything dropped in here -- a card, a button, a
   future block -- inherits the right colours without knowing it is on dark.

   The band is only 1.6:1 against the dark-mode page, which reads as a
   deliberate step rather than a separate surface, so it carries a hairline
   edge to define itself. On paper it is 17.6:1 and needs no help. */
.section--spotlight {
  --c-ink:      #eef2f7;
  --c-ink-2:    #c3d3e8;
  --c-ink-3:    #93aacb;
  --c-line:     #143458;
  --c-line-2:   #1d4779;
  --c-surface:  #07203f;
  --c-sunken:   #061a35;
  --c-accent-bg: #ffffff14;

  background: #03152f;
  color: var(--c-ink);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--brand-gold) 20%, transparent);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
}

.section--spotlight .section__title,
.section--spotlight .section__link { color: var(--c-ink); }
.section--spotlight .section__link:hover { color: var(--brand-gold); }

/* --- Mark handoff ---------------------------------------------------------
   The mark opens at full size in the hero and hands off to the header copy as
   the reader scrolls. Driven by scroll position rather than a scroll event
   listener, so it costs no JavaScript and cannot jank the main thread.

   The unenhanced state is the safe one: without scroll-timeline support, or
   with reduced motion asked for, the header mark is simply visible from the
   start and the hero mark sits above the headline. Nothing depends on the
   animation running. */
.hero__mark {
  display: block;
  width: min(78%, 26rem);
  height: auto;
  margin-block-end: var(--s-6);
  transform-origin: 0 50%;
}

/* On archive headers it leads the page title, so it wants to be smaller than
   the homepage's statement version. */
.page-hero .hero__mark,
.archive-head .hero__mark { width: min(60%, 18rem); margin-block-end: var(--s-5); }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header__inner .custom-logo-link,
    .site-header__inner .site-brand {
      animation: daw-mark-in linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 14rem;
    }

    .hero__mark {
      animation: daw-mark-out linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 14rem;
    }
  }
}

@keyframes daw-mark-in {
  from { opacity: 0; transform: translateY(-0.5rem) scale(0.86); }
  to   { opacity: 1; transform: none; }
}

@keyframes daw-mark-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-1.5rem) scale(0.7); }
}

/* The caution band. The mark is a work-zone sign, so the header wears the
   same edge -- it ties the chrome to the logo rather than decorating it.
   Static: an earlier version crawled and had to go, since continuous linear
   motion is a vestibular trigger and this sits on every page. */
.site-header__band {
  height: 7px;
  background: repeating-linear-gradient(
    135deg,
    var(--brand-gold) 0 14px,
    var(--brand-navy) 14px 28px
  );
}

.custom-logo-link,
.site-brand--mark { display: inline-flex; align-items: center; }

.custom-logo,
.site-brand__mark {
  display: block;
  height: clamp(2.5rem, 4.4vw, 3.25rem);
  width: auto;
  max-width: min(100%, 20rem);
  object-fit: contain;
}

.hero-media[data-playing="true"] .hero-media__video { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-media__video { transition: none; }
}

/* Legibility scrim. Text over video is unreadable without one, and a
   neurodivergence site is the last place to be casual about contrast. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgb(10 28 53 / 0.92) 0%,
    rgb(10 28 53 / 0.82) 42%,
    rgb(10 28 53 / 0.55) 100%
  );
}

.hero--media .hero__title,
.hero--media .hero__lede,
.hero--media .eyebrow {
  position: relative;
  color: #fff;
}
.hero--media .hero__lede { color: rgb(255 255 255 / 0.88); }
.hero--media .eyebrow { color: var(--brand-gold); }
.hero--media .eyebrow--sign::before { background: var(--brand-gold); }

/* The pause control. WCAG 2.2.2 wants it reachable, so it is a real button
   in the tab order — not a hover-reveal. */
.hero-media__toggle {
  position: absolute;
  z-index: 2;
  bottom: var(--s-4);
  inset-inline-end: var(--s-4);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.45em 0.9em;
  background: rgb(10 28 53 / 0.72);
  color: #fff;
  border: 1px solid rgb(255 255 255 / 0.34);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero-media__toggle:hover {
  background: rgb(10 28 53 / 0.9);
  border-color: rgb(255 255 255 / 0.6);
}
.hero-media__toggle:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 2px;
}

/* Two bars when playing, a triangle when paused — drawn in CSS so there is
   no icon font and no second SVG to ship. */
.hero-media__toggle-icon {
  width: 9px;
  height: 11px;
  flex: none;
  background: currentColor;
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
}
.hero-media__toggle[aria-pressed="true"] .hero-media__toggle-icon {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* The buttons under the hero need to survive the dark scrim too. */
.hero--media .btn--ghost {
  --btn-fg: #fff;
  border-color: rgb(255 255 255 / 0.45);
}
.hero--media .btn--ghost:hover { background: rgb(255 255 255 / 0.12); }

/* --- Contained hero: undo the light-on-dark assumptions -------------------
   These rules were written for a full-bleed dark hero, where white text sat
   on video. The hero is now the page's own ground with the loop beside it,
   so white type is white-on-white. Colour comes from the theme tokens
   instead, which means it also survives the dark-mode switch. */
.hero--media .hero__title,
.hero--media .eyebrow { color: var(--c-ink); }
.hero--media .hero__lede { color: var(--c-ink-2); }
.hero--media .btn--ghost { border-color: var(--c-line-2); color: var(--c-ink); }
.hero--media .btn--ghost:hover { background: var(--c-accent-bg); }

/* The pause control. WCAG 2.2.2 requires a way to stop motion that runs past
   five seconds, so it cannot simply be deleted -- but it does not need to sit
   on the artwork. Hidden until the circle is hovered or the control itself is
   focused, which keeps it fully keyboard-reachable. */
.hero--media .hero-media__toggle {
  position: absolute;
  inset-block-end: 0.75rem;
  inset-inline-start: 50%;
  translate: -50% 0;
  margin: 0;
  opacity: 0;
  transition: opacity 180ms var(--ease);
}
.hero-media:hover .hero-media__toggle,
.hero-media__toggle:focus-visible {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hero--media .hero-media__toggle { transition: none; }
}
/* No hover on touch, so there it stays visible rather than unreachable. */
@media (hover: none) {
  .hero--media .hero-media__toggle { opacity: 1; }
}


/* --- Hero motion ----------------------------------------------------------
   Two deliberate animations. A level meter was tried and cut: with the
   title shimmer and the brain-noise loop already running, a third moving
   thing in the same eyeline was one too many.

   Everything here changes in place -- opacity, brightness, height. Nothing
   travels and nothing rotates, which is the line that separates decoration
   from a vestibular trigger. An earlier pass had the sign swaying and the
   hazard stripes crawling; both were removed after they gave a reader a
   headache, which is the only test that matters. */

/* 1. The eyebrow's dash becomes a live dot. */
.eyebrow--sign::before {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  animation: daw-blip 1.8s ease-in-out infinite;
}
@keyframes daw-blip {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.78); }
}

/* 2. Light sweeps the headline, the way a road sign catches headlights. */
.hero--media .hero__title {
  /* Ink, not white: in light mode the hero sits on paper, and a white-to-gold
     sweep is white-on-white. --c-ink is navy on light, near-white on dark. */
  background: linear-gradient(100deg, var(--c-ink) 38%, var(--brand-gold) 48%, var(--c-ink) 58%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: daw-sweep 6s ease-in-out infinite;
}
@keyframes daw-sweep {
  0%, 100% { background-position: 120% 0; }
  50%      { background-position: -20% 0; }
}

  to   { height: var(--h, 24px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow--sign::before,
  .hero--media .hero__title,

  .hero--media .hero__title {
    background: none;
    color: #fff;
    -webkit-text-fill-color: currentColor;
  }
}


/* --- Contained brain-noise ------------------------------------------------
   Full-bleed turned a distinctive asset into wallpaper, and put moving art
   directly under the text it competes with. Contained, it becomes a subject:
   a porthole beside the headline rather than behind it.

   Because the text no longer sits on the video, the legibility scrim below is
   switched off and the copy runs on flat navy -- better contrast than a scrim
   over motion ever gives you. */
.hero--media {
  padding-block: clamp(3rem, 2rem + 6vw, 6.5rem);
}

.hero-media {
  inset: auto;
  inset-inline-end: clamp(1rem, 3vw, 3.5rem);
  top: 50%;
  translate: 0 -50%;
  width: min(34vw, 22rem);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  /* This element carries `translate`, and a transform creates a stacking
     context -- so `screen`/`multiply` on the video composite against *this*
     box, not the page behind it. With a transparent box there is nothing to
     composite against and the video's own black comes through. (Light mode
     only looked right by accident: invert() turns that black white, which
     happens to match paper.)
     So the box is painted to match the page exactly -- same colour, same
     grain, same blend -- which makes it invisible while still giving the
     blend mode a ground. The grain is what gave the old flat disc away. */
  background-color: var(--c-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
  background-blend-mode: var(--grain-blend, multiply);
  background-size: 140px 140px;
}

/* Feather the frame edge so the loop never reads as a cropped square. */
.hero-media__poster,
.hero-media__video {
  /* A long feather: solid only in the middle third, gone well before the
     frame. Anything tighter leaves a discernible rim where the mask stops. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 32%, rgba(0,0,0,0.55) 58%, transparent 76%);
          mask-image: radial-gradient(circle at 50% 50%, #000 32%, rgba(0,0,0,0.55) 58%, transparent 76%);
}

/* No text over the video any more, so the scrim would only mute the art. */
.hero--media .hero-media::after { display: none; }

@media (min-width: 62rem) {
  .hero--media { padding-inline-end: min(40%, 26rem); }
}

/* Narrow screens: the circle stops floating and moves below the buttons.
   It is the first child in the markup because on desktop it is positioned
   absolutely and source order does not matter. On a phone it does -- and a
   decorative loop arriving before the logo and headline is the wrong thing
   first, both for what the reader sees and for what loads. Reordering with
   flex leaves the markup (and the reading order for assistive tech) intact. */
@media (max-width: 61.99rem) {
  .hero--media {
    display: flex;
    flex-direction: column;
  }

  .hero-media {
    position: relative;
    inset: auto;
    top: auto;
    translate: none;
    order: 10;
    width: min(62vw, 15rem);
    margin-inline: auto;
    margin-block: var(--s-6) 0;
  }

  /* The pause control travels with it. */
  .hero--media .hero-media__toggle { inset-block-end: -0.25rem; }
}

/* The pause control belongs to the circle now, not the hero's corner. */
.hero--media .hero-media__toggle {
  inset-block-end: auto;
  inset-inline: auto;
  position: relative;
  margin-block-start: var(--s-5);
}


@media (max-width: 46.875rem) {
  .hero-media { border-radius: var(--radius); }
  .hero-media::after {
    background: linear-gradient(
      180deg,
      rgb(10 28 53 / 0.86) 0%,
      rgb(10 28 53 / 0.92) 100%
    );
  }
}

/* ==========================================================================
   23. SHARE LINKS
   The current site exposes raw URLs as visible link text. Links should say
   where they go, not recite their own address.
   ========================================================================== */

.share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-block-start: var(--s-6);
  padding-block-start: var(--s-5);
  border-top: 1px solid var(--c-line);
}
.share__label {
  font-size: var(--t--1);
  font-weight: 600;
  color: var(--c-ink-3);
}
.share__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.4em 0.85em;
  border: 1px solid var(--c-line);
  border-radius: 100px;
  font-size: var(--t--1);
  font-weight: 500;
  color: var(--c-ink-2);
  text-decoration: none;
  background: none;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.share__link:hover {
  color: var(--c-accent);
  border-color: var(--c-accent);
  background: var(--c-accent-bg);
}
.share__copied {
  font-size: var(--t--1);
  color: var(--c-accent);
  font-weight: 600;
}

/* --- Motion toggle ---------------------------------------------------------
   data-motion="reduced" is the button's equivalent of the OS setting, so the
   same animations stop either way. Kept next to the reduced-motion rules it
   mirrors rather than scattered, so the two cannot drift apart. */
.motion-toggle .icon-play { display: none; }
.motion-toggle[aria-pressed="true"] .icon-pause { display: none; }
.motion-toggle[aria-pressed="true"] .icon-play { display: block; }

:root[data-motion="reduced"] .hero-media__video,
:root[data-motion="reduced"] .hero-media__poster,
:root[data-motion="reduced"] .eyebrow--sign::before,
:root[data-motion="reduced"] .hero--media .hero__title,
:root[data-motion="reduced"] .hero__mark,
:root[data-motion="reduced"] .site-header__inner .custom-logo-link,
:root[data-motion="reduced"] .site-header__inner .site-brand {
  animation: none !important;
  transition: none !important;
}

:root[data-motion="reduced"] .hero--media .hero__title {
  background: none;
  color: var(--c-ink);
  -webkit-text-fill-color: currentColor;
}