/* Food Court — redesign system (v7.1 "two colors, separated")
   Confirmed direction 2026-07-04. Homepage first; other surfaces migrate here in later craft passes.
   Rooms: pink = listening, cyan = reading, butter = the archive's rhythm and the exit. */

@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/fonts/hanken-grotesk-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Wix Madefor Text';
  src: url('/fonts/wix-madefor-text-latin-var.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --ground: #F6EBF1;
  --ground-hi: #F9F1F5;
  --ground-lo: #F1E2EA;
  --raised: #FCF7FA;
  --tint: #F0DEE9;
  --ink: #2A2026;
  --ink-soft: #6E616A;      /* tuned from #776972 for AA on --tint */
  --pink: #A62A7C;
  --pink-deep: #8E2168;
  --pink-soft: rgba(166, 42, 124, 0.12);
  --on-pink: #FBF3F8;
  --cyan: #0E7786;          /* tuned from #0F7E8D for AA on cyan tints */
  --cyan-deep: #0B6470;
  --cyan-soft: rgba(15, 126, 141, 0.14);
  --cyan-tint: #E3F1F3;
  --cyan-raised: #F2FAFB;
  --cyan-head: #123B41;
  --butter-tint: #F7EEDC;
  --butter-soft: rgba(146, 113, 40, 0.18);
  --butter-deep: #7C6120;
  --butter-ink: #4E3D13;
  --butter-text: #6B5A2E;
  --sans-head: 'Hanken Grotesk', system-ui, sans-serif;
  --sans-text: 'Wix Madefor Text', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--ground); }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans-text);
  font-size: 1.03rem;
  line-height: 1.62;
  background: radial-gradient(130% 80% at 20% 0%, var(--ground-hi) 0%, var(--ground) 50%, var(--ground-lo) 100%) fixed;
  -webkit-font-smoothing: antialiased;
}

/* Grain: the anti-flatness layer. Invisible-but-felt. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

.shell {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.25rem);
  position: relative;
  z-index: 1;
}

a { color: var(--pink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a, button { transition: color 150ms ease-out, background-color 150ms ease-out; }

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

h1, h2, h3 { font-family: var(--sans-head); }
.num { font-variant-numeric: tabular-nums; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  z-index: 10;
  font-family: var(--sans-head);
  font-weight: 700;
  background: var(--raised);
  color: var(--pink-deep);
  padding: 0.7rem 1.1rem;
  border-radius: 7px;
  box-shadow: 0 2px 10px rgba(94, 38, 72, 0.2);
}
.skip-link:focus-visible { left: 0.5rem; }

/* ---------- nav ---------- */
.nav-row { display: flex; align-items: center; gap: 0.9rem; padding-top: 1.3rem; padding-bottom: 0.4rem; }
.nav-row .logo { width: 120px; height: auto; filter: drop-shadow(0 2px 6px rgba(166, 42, 124, 0.28)); }
.wordmark {
  font-family: var(--sans-head);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  padding: 0.6rem 0;
  white-space: nowrap;
}
.nav-links { margin-left: auto; display: flex; flex-wrap: wrap; gap: clamp(0.7rem, 2.5vw, 1.6rem); font-family: var(--sans-head); font-size: 0.92rem; font-weight: 600; }
.nav-links a { color: var(--ink); text-decoration: none; padding: 0.72rem 0.1rem; }
.nav-links a:hover { color: var(--pink); }
.nav-links a[aria-current] { color: var(--pink); box-shadow: 0 2px 0 var(--pink); }

/* ---------- hero ---------- */
.hero { padding-top: clamp(2.5rem, 6vw, 4.2rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
h1 {
  font-weight: 800;
  font-size: clamp(1.9rem, 4.4vw, 2.9rem);
  line-height: 1.13;
  letter-spacing: -0.022em;
  margin: 0 0 1.15rem;
  max-width: 24ch;
  text-wrap: balance;
}
.hero > * { max-width: 56ch; }
.hero p { margin: 0 0 0.9rem; }
.hero .quiet { color: var(--ink-soft); font-size: 0.95rem; }
.hero-actions { display: flex; align-items: center; gap: 1.4rem; margin-top: 1.8rem; flex-wrap: wrap; }
.btn {
  display: inline-block;
  font-family: var(--sans-head);
  font-weight: 700;
  font-size: 0.97rem;
  background-color: var(--pink);
  background-image: linear-gradient(var(--pink), var(--pink-deep));
  color: var(--on-pink);
  text-decoration: none;
  padding: 0.78rem 1.35rem;
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(94, 38, 72, 0.3), 0 4px 12px rgba(166, 42, 124, 0.22);
}
.btn:hover { background-image: none; }
.btn:active { background-image: none; background-color: var(--pink-deep); }
.hero-actions .plain { font-family: var(--sans-head); font-weight: 600; font-size: 0.97rem; padding: 0.72rem 0; }

/* ---------- latest ---------- */
.latest {
  background: var(--raised);
  border: 1px solid var(--pink-soft);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(94, 38, 72, 0.06), 0 8px 24px rgba(94, 38, 72, 0.09);
  padding: 1.4rem 1.6rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
.latest .lab {
  font-family: var(--sans-head);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pink);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.latest h2 { font-size: 1.25rem; font-weight: 700; margin: 0.25rem 0 0.2rem; letter-spacing: -0.01em; }
.latest h2 a { color: var(--ink); text-decoration: none; }
.latest h2 a:hover { color: var(--pink); }
.latest .sub { margin: 0; color: var(--ink-soft); font-size: 0.95rem; max-width: 46ch; }
.latest .meta { font-family: var(--sans-head); font-weight: 600; color: var(--ink-soft); font-size: 0.85rem; margin-top: 0.5rem; display: flex; gap: 1.1rem; }
.play {
  margin-left: auto;
  inline-size: 58px;
  block-size: 58px;
  border-radius: 50%;
  flex: none;
  background: linear-gradient(var(--pink), var(--pink-deep));
  color: var(--on-pink);
  box-shadow: 0 1px 2px rgba(94, 38, 72, 0.32), 0 5px 14px rgba(166, 42, 124, 0.28);
  display: grid;
  place-items: center;
  text-decoration: none;
  font-size: 1.05rem;
  transition: transform 150ms ease-out;
}
.play:hover { transform: scale(1.04); }

.tbtn {
  font-family: var(--sans-head); font-weight: 700; font-size: 0.84rem;
  border: 1.5px solid var(--cyan); color: var(--cyan); border-radius: 6px;
  padding: 0.34rem 0.75rem; text-decoration: none;
}
.tbtn:hover { background: rgba(15, 126, 141, 0.08); color: var(--cyan-deep); }
.tbtn:focus-visible { outline-color: var(--cyan); }

/* ---------- catalogue ---------- */
.catalogue { padding-top: clamp(2.6rem, 5vw, 3.8rem); padding-bottom: 1rem; }
.transcripts + .catalogue { padding-top: 1.2rem; }
.cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.cat-head h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); font-weight: 800; letter-spacing: -0.015em; margin: 0; }
.cat-head .count { font-family: var(--sans-head); font-weight: 600; font-size: 0.85rem; color: var(--ink-soft); }
.cat-intro { color: var(--ink-soft); font-size: 0.97rem; margin: 0 0 1.6rem; max-width: 52ch; }
.cat-intro a { color: var(--cyan); }
.cat-intro a:hover { color: var(--cyan-deep); }
.year { font-family: var(--sans-head); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; margin: 1.9rem 0 0.5rem; display: flex; align-items: center; gap: 0.9rem; }
.year b { font-weight: 700; padding: 0.22rem 0.6rem; border-radius: 5px; background: var(--cyan-tint); color: var(--cyan-deep); box-shadow: inset 0 0 0 1px rgba(15, 126, 141, 0.09); }
.year::after { content: ""; flex: 1; border-top: 1px solid var(--cyan-soft); }
.list { background: rgba(252, 247, 250, 0.6); border: 1px solid var(--pink-soft); border-radius: 10px; padding: 0.35rem; }
.ep { display: flex; gap: 1.1rem; align-items: baseline; padding: 0.72rem 1rem; border-radius: 7px; text-decoration: none; color: var(--ink); min-height: 44px; }
.ep:hover { background: #EBF6F7; box-shadow: inset 0 0 0 1px rgba(15, 126, 141, 0.09); }
.ep + .ep { border-top: 1px solid rgba(166, 42, 124, 0.07); }
.ep .n { font-family: var(--sans-head); color: var(--pink); font-weight: 700; font-size: 0.88rem; width: 2.7rem; flex: none; }
.ep .t { font-family: var(--sans-head); font-weight: 600; font-size: 1rem; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep .s { color: var(--ink-soft); font-size: 0.93rem; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep .m { margin-left: auto; font-family: var(--sans-head); font-weight: 600; color: var(--ink-soft); font-size: 0.84rem; white-space: nowrap; }
.more { display: inline-block; margin: 1.3rem 0 0; font-family: var(--sans-head); font-weight: 700; font-size: 0.95rem; padding: 0.5rem 0; }

/* ---------- transcripts (the cyan reading room) ---------- */
.transcripts { padding-top: clamp(2.4rem, 5vw, 3.6rem); padding-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.transcripts-inner {
  background: linear-gradient(160deg, var(--cyan-raised), var(--cyan-tint));
  border: 1px solid var(--cyan-soft);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(11, 100, 112, 0.06), 0 10px 30px rgba(11, 100, 112, 0.1);
  padding: clamp(1.8rem, 4vw, 2.6rem);
}
.transcripts h2 { color: var(--cyan-head); font-size: clamp(1.35rem, 2.6vw, 1.7rem); font-weight: 800; letter-spacing: -0.015em; margin: 0 0 0.7rem; }
.transcripts p { max-width: 54ch; margin: 0 0 1.4rem; }
.transcripts a { color: var(--cyan); }
.transcripts :focus-visible { outline-color: var(--cyan); }
.transcripts .row { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.transcripts .btn {
  background-color: var(--cyan);
  background-image: linear-gradient(var(--cyan), var(--cyan-deep));
  color: var(--on-pink);
  box-shadow: 0 1px 2px rgba(11, 100, 112, 0.3), 0 4px 12px rgba(15, 126, 141, 0.22);
}
.transcripts .btn:hover { background-image: none; }
.transcripts .btn:active { background-image: none; background-color: var(--cyan-deep); }
.btn-ghost {
  display: inline-block;
  font-family: var(--sans-head);
  font-weight: 700;
  font-size: 0.97rem;
  border: 1.5px solid var(--pink);
  color: var(--pink);
  border-radius: 7px;
  padding: 0.72rem 1.3rem;
  text-decoration: none;
}
.btn-ghost:hover { background: rgba(166, 42, 124, 0.08); }
.transcripts .btn-ghost { border-color: var(--cyan); color: var(--cyan); }
.transcripts .btn-ghost:hover { background: rgba(15, 126, 141, 0.08); }

/* ---------- hosts ---------- */
.hosts { padding-bottom: clamp(2.4rem, 5vw, 3.4rem); }
.hosts h2 { font-size: 1.2rem; font-weight: 800; margin: 0 0 0.6rem; }
.hosts p { margin: 0; color: var(--ink-soft); font-size: 0.98rem; max-width: 56ch; }

/* ---------- footer (the butter room) ---------- */
footer { background: var(--butter-tint); border-top: 1px solid var(--butter-soft); padding: 2rem 0 2.8rem; position: relative; z-index: 1; }
.foot-row { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: baseline; }
.foot-row p { margin: 0; color: var(--butter-text); font-size: 0.9rem; max-width: 46ch; }
.foot-row .license { font-size: 0.82rem; margin-top: 0.7rem; }
.foot-row .license a { color: var(--butter-ink); }
.foot-links { display: flex; gap: 0.2rem 1.4rem; flex-wrap: wrap; font-family: var(--sans-head); font-weight: 600; font-size: 0.88rem; }
.foot-links a { color: var(--butter-ink); text-decoration: none; padding: 0.6rem 0; }
.foot-links a:hover { color: var(--pink); }
footer :focus-visible { outline-color: var(--butter-deep); }

/* ---------- episodes index ---------- */
.index { padding-top: clamp(2.2rem, 5vw, 3.2rem); }
.index-title {
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}
/* Catalogue search widget (FCSearch.initCatalogue, injected into #ep-search).
   Episode cards stay in the pink room; moments are transcript affordances,
   so they speak cyan like every other reading surface. */
.fc-search { margin: 1.7rem 0 0.2rem; }
.fc-search-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--raised);
  border: 1px solid var(--pink-soft);
  border-radius: 7px;
  padding: 0 0.95rem;
  width: min(100%, 30rem);
  color: var(--ink-soft);
}
.fc-search-bar:focus-within { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 7px; }
.fc-search-input {
  font-family: var(--sans-head);
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0.62rem 0;
  flex: 1;
  min-width: 0;
  min-height: 44px;
  outline: none;
}
.fc-search-input::placeholder { color: var(--ink-soft); opacity: 1; }
.fc-search-status {
  font-family: var(--sans-head);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0.55rem 0 0;
  min-height: 1.45em;
}
.fc-search-results { margin-top: 1.1rem; }
.fc-ep {
  background: var(--raised);
  border: 1px solid var(--pink-soft);
  border-radius: 10px;
  padding: 0.9rem 1.1rem 1rem;
  margin-bottom: 0.9rem;
}
.fc-ep-head { display: flex; gap: 1.1rem; align-items: baseline; text-decoration: none; color: var(--ink); }
.fc-ep-num { font-family: var(--sans-head); color: var(--pink); font-weight: 700; font-size: 0.88rem; flex: none; font-variant-numeric: tabular-nums; }
.fc-ep-title { font-family: var(--sans-head); font-weight: 600; font-size: 1.02rem; min-width: 0; }
.fc-ep-head:hover .fc-ep-title { color: var(--pink); }
.fc-ep-date { margin-left: auto; font-family: var(--sans-head); font-weight: 600; color: var(--ink-soft); font-size: 0.84rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fc-ep-moments { margin-top: 0.55rem; display: grid; gap: 3px; justify-items: start; }
.fc-ep-loading, .fc-ep-nomoments, .fc-ep-meta-match { color: var(--ink-soft); font-size: 0.92rem; margin: 0.15rem 0; }
.fc-ep-meta-tag { font-family: var(--sans-head); font-weight: 700; font-size: 0.78rem; color: var(--cyan-deep); margin-right: 0.6rem; }
.fc-moment {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  flex-wrap: wrap;
  justify-self: stretch;
  padding: 0.5rem 0.75rem;
  border-radius: 7px;
  text-decoration: none;
  color: var(--ink);
  background: var(--cyan-raised);
  box-shadow: inset 0 0 0 1px rgba(15, 126, 141, 0.09);
}
.fc-moment:hover { background: #EBF6F7; }
.fc-moment:focus-visible { outline-color: var(--cyan); }
.fc-moment-meta { display: flex; gap: 0.6rem; flex: none; font-family: var(--sans-head); font-weight: 700; font-size: 0.8rem; color: var(--cyan-deep); }
.fc-moment-time { font-variant-numeric: tabular-nums; }
.fc-moment-text { color: var(--ink-soft); font-size: 0.92rem; min-width: 0; flex: 1 1 24ch; }
mark.fc-hit { background: var(--cyan-tint); color: var(--cyan-head); border-radius: 3px; padding: 0 2px; }
.fc-ep-more {
  font-family: var(--sans-head);
  font-weight: 700;
  font-size: 0.84rem;
  border: 1.5px solid var(--cyan);
  color: var(--cyan);
  background: none;
  border-radius: 6px;
  padding: 0.34rem 0.75rem;
  margin-top: 0.35rem;
  cursor: pointer;
}
.fc-ep-more:hover { background: rgba(15, 126, 141, 0.08); color: var(--cyan-deep); }
.fc-ep-more:focus-visible { outline-color: var(--cyan); }
.fc-hidden { display: none; }

/* ---------- episode page ----------
   Meta + player stay pink (listening); the transcript and its filter speak
   cyan (reading), same idioms as the catalogue widget. transcript.js renders
   the .seg / .seg-speaker markup; search.js drives .transcript-filtering. */
.episode-detail { max-width: 860px; padding-top: clamp(1.6rem, 4vw, 2.6rem); padding-bottom: clamp(2.2rem, 5vw, 3.2rem); }
.episode-meta-row { display: flex; gap: 0.6rem; align-items: center; font-family: var(--sans-head); font-weight: 600; font-size: 0.85rem; color: var(--ink-soft); }
.episode-meta-row .tag { font-weight: 700; font-size: 0.8rem; padding: 0.2rem 0.55rem; border-radius: 5px; background: var(--pink-soft); color: var(--pink-deep); box-shadow: inset 0 0 0 1px rgba(166, 42, 124, 0.08); }
/* Title + player pin together as one sticky cluster while the transcript
   scrolls. The background repeats the body's fixed radial gradient so the
   veil samples the exact pixels behind it (fixed attachment is viewport-
   anchored); keep it in sync with the body rule. The grain tile repeats on
   top because the sticky paints above the body::after grain layer — without
   it the cluster reads lighter and flat against the page. A soft ::after
   fade hides the line where scrolling text slips under. */
.episode-sticky {
  position: sticky; top: 0; z-index: 40; padding: 0.7rem 0 0.4rem;
  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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"), radial-gradient(130% 80% at 20% 0%, var(--ground-hi) 0%, var(--ground) 50%, var(--ground-lo) 100%);
  background-attachment: fixed, fixed;
}
.episode-sticky::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; background: linear-gradient(var(--ground), rgba(246, 235, 241, 0)); pointer-events: none; }
.episode-title { font-size: clamp(1.55rem, 3.6vw, 2.3rem); margin: 0 0 0.9rem; max-width: none; }
/* Autoplay-blocked notice (transcript.js showCueNotice): a tab that slides out
   of the bottom of the sticky cluster when a #t= deep link cues but the
   browser refuses to start playback. The tab is itself a play button. */
.cue-notice {
  position: absolute; top: 100%; left: 1rem; z-index: 41;
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sans-head); font-weight: 700; font-size: 0.84rem;
  color: var(--pink-deep); background: var(--raised);
  border: 1px solid var(--pink-soft); border-top: 0;
  border-radius: 0 0 7px 7px; padding: 0.42rem 0.85rem; cursor: pointer;
  box-shadow: 0 1px 2px rgba(94, 38, 72, 0.06), 0 6px 18px rgba(94, 38, 72, 0.1);
  animation: cue-notice-in 220ms ease-out;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cue-notice:hover { color: var(--pink); }
.cue-notice-glyph { font-size: 0.66rem; color: var(--pink); }
.cue-notice-out { opacity: 0; transform: translateY(-6px); transition: opacity 200ms ease-out, transform 200ms ease-out; }
@keyframes cue-notice-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  .cue-notice { animation: none; }
  .cue-notice-out { transition: none; }
}
/* Back-to-top pill (transcript.js initBackToTop): the nav only lives at the
   top of the page, so deep in a transcript this is the way back to it. */
.to-top {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: 1.4rem; z-index: 50;
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px;
  font-family: var(--sans-head); font-weight: 700; font-size: 0.84rem;
  color: var(--pink-deep); background: var(--raised);
  border: 1px solid var(--pink-soft); border-radius: 999px;
  padding: 0.5rem 1rem; cursor: pointer;
  box-shadow: 0 1px 2px rgba(94, 38, 72, 0.08), 0 6px 18px rgba(94, 38, 72, 0.14);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 180ms ease-out, transform 180ms ease-out, color 150ms ease-out;
}
.to-top-show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--pink); }
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; transform: none; }
}
.episode-player {
  background: var(--raised);
  border: 1px solid var(--pink-soft);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(94, 38, 72, 0.06), 0 6px 18px rgba(94, 38, 72, 0.08);
  padding: 0.85rem 1rem;
}
.episode-player audio { width: 100%; display: block; }
.episode-subtitle { color: var(--ink-soft); font-size: 1.02rem; margin: 1.15rem 0 0; max-width: 56ch; }
.episode-notes { margin: 0.8rem 0 0; }
.episode-notes-summary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sans-head); font-weight: 700; font-size: 0.9rem;
  color: var(--pink-deep); cursor: pointer; list-style: none;
  padding: 0.45rem 0; user-select: none;
}
.episode-notes-summary:hover { color: var(--pink); }
.episode-notes-summary::-webkit-details-marker { display: none; }
.episode-notes-summary::before { content: '▸'; font-size: 0.7rem; color: var(--pink); transition: transform 150ms ease-out; }
.episode-notes[open] .episode-notes-summary::before { transform: rotate(90deg); }
.episode-description { max-width: 62ch; }
.episode-description p { margin: 0.3rem 0 0.9rem; text-wrap: pretty; }
.episode-description p:last-child { margin-bottom: 0; }

.transcript { margin-top: clamp(1.9rem, 4vw, 2.7rem); }
.transcript :focus-visible { outline-color: var(--cyan); }
.transcript-head { padding-top: 1.4rem; border-top: 1px solid var(--cyan-soft); margin-bottom: 1.1rem; }
.transcript-head-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.transcript-title { color: var(--cyan-head); font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 800; letter-spacing: -0.015em; margin: 0; }
.transcript-toggle {
  font-family: var(--sans-head); font-weight: 700; font-size: 0.84rem;
  border: 1.5px solid var(--cyan); color: var(--cyan); background: none;
  border-radius: 6px; padding: 0.34rem 0.75rem; cursor: pointer;
}
.transcript-toggle:hover { background: rgba(15, 126, 141, 0.08); color: var(--cyan-deep); }
.transcript-note { color: var(--ink-soft); font-size: 0.9rem; margin: 0.45rem 0 0; }
.transcript-filter-row {
  display: flex; align-items: center; gap: 0.6rem; margin-top: 0.95rem;
  background: var(--cyan-raised); border: 1px solid var(--cyan-soft);
  border-radius: 7px; padding: 0 0.95rem; width: min(100%, 26rem); color: var(--ink-soft);
}
.transcript-filter-row:focus-within { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 7px; }
.transcript-filter-row svg { color: var(--cyan-deep); flex: none; }
.transcript-filter {
  font-family: var(--sans-head); font-weight: 600; font-size: 0.95rem;
  color: var(--ink); background: none; border: 0; padding: 0.55rem 0;
  flex: 1; min-width: 0; min-height: 44px; outline: none;
}
.transcript-filter::placeholder { color: var(--ink-soft); opacity: 1; }
.transcript-filter-count { font-family: var(--sans-head); font-weight: 600; font-size: 0.84rem; color: var(--cyan-deep); white-space: nowrap; font-variant-numeric: tabular-nums; }
.transcript-status { color: var(--ink-soft); padding: 0.6rem 0; margin: 0; }
.transcript-status-error { color: var(--pink-deep); }
.transcript-license { color: var(--ink-soft); font-size: 0.82rem; line-height: 1.55; margin: 1.6rem 0 0; padding-top: 1rem; border-top: 1px solid var(--cyan-soft); max-width: 62ch; }
.transcript-license a { color: var(--cyan); }

.transcript-body { display: flex; flex-direction: column; }
/* The filter hides non-matching lines and the Hide/Show toggle hides the whole
   body via the [hidden] attribute, but `.seg { display: grid }` and
   `.transcript-body { display: flex }` would otherwise win over the UA
   `[hidden]` rule. */
.seg[hidden], .transcript-body[hidden] { display: none !important; }
/* Speaker chip — printed once at the start of each turn, tinted per speaker.
   hsl(H 60% 29%) passes AA (4.5+) on --ground-lo for every hue in the wheel. */
.seg-speaker { font-family: var(--sans-head); font-weight: 700; font-size: 0.84rem; letter-spacing: 0.01em; color: hsl(var(--spk) 60% 29%); margin: 1.15rem 0 0.25rem; padding-left: 2px; }
.seg-speaker:first-child { margin-top: 0; }
/* One segment per line: [timestamp] text [copy]. */
.seg {
  display: grid; grid-template-columns: 3.2rem 1fr 1.7rem; align-items: baseline;
  gap: 0.75rem; padding: 0.2rem 0.6rem 0.2rem 0.7rem; border-radius: 7px;
  border-left: 2px solid transparent; scroll-margin-top: 120px;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}
.seg-text { font-size: 0.99rem; line-height: 1.62; color: var(--ink); text-wrap: pretty; }
.seg-time {
  font-family: var(--sans-head); font-weight: 600; font-size: 0.78rem;
  font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-soft);
  background: none; border: 0; cursor: pointer; padding: 2px 0; line-height: 1.62;
  opacity: 0.65; transition: opacity 150ms ease-out, color 150ms ease-out;
}
.seg:hover .seg-time { opacity: 1; color: hsl(var(--spk) 60% 29%); }
.seg-copy {
  background: none; border: 0; cursor: pointer; font-size: 0.8rem;
  padding: 2px; line-height: 1; opacity: 0; transition: opacity 150ms ease-out;
  align-self: center; position: relative;
}
.seg:hover .seg-copy { opacity: 0.45; }
.seg-copy:hover { opacity: 1; }
.seg-copy.seg-copied { opacity: 1; }
.seg-copy.seg-copied::after {
  content: 'Copied'; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  margin-left: 6px; font-family: var(--sans-head); font-size: 0.72rem; font-weight: 700;
  color: hsl(var(--spk) 60% 29%); white-space: nowrap;
}
.seg:hover { background: rgba(15, 126, 141, 0.055); }
.seg.seg-active { background: hsl(var(--spk) 60% 50% / 0.09); border-left-color: hsl(var(--spk) 55% 45%); }
.seg.seg-active .seg-time { opacity: 1; color: hsl(var(--spk) 60% 29%); }
/* While filtering, collapse the inter-turn spacing so matches read as a tight list. */
.transcript-filtering .seg-speaker { margin-top: 0.6rem; }

.episode-nav {
  display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem;
  padding-top: 1.4rem; border-top: 1px solid var(--pink-soft);
  font-family: var(--sans-head); font-weight: 600; font-size: 0.95rem;
}
.episode-nav-link { color: var(--pink); text-decoration: none; padding: 0.4rem 0; }
.episode-nav-link:hover { color: var(--pink-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.episode-nav-next { text-align: right; }

/* ---------- hosts page ----------
   (.hosts is the homepage teaser section; these are the /hosts.html cards.)
   One card per color room, following the accent identities the old page
   assigned: Allan pink, Chael cyan. The about block speaks butter, the
   archive's register. Photos sit beside the names as rounded squares
   (Chael's call 2026-07-07: photos over initials, crops kept loose). */
.hosts-main { padding-top: clamp(2.2rem, 5vw, 3.2rem); padding-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.host-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.host-card {
  background: var(--raised);
  border: 1px solid var(--pink-soft);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(94, 38, 72, 0.06), 0 8px 24px rgba(94, 38, 72, 0.09);
  padding: 1.5rem 1.6rem 1.4rem;
}
.host-card h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.15rem; }
.host-role { font-family: var(--sans-head); font-weight: 700; font-size: 0.84rem; color: var(--pink); margin: 0 0 0.85rem; }
.host-bio { color: var(--ink-soft); font-size: 0.95rem; margin: 0; text-wrap: pretty; }
.host-head { display: flex; align-items: center; gap: 1.15rem; margin-bottom: 0.9rem; }
.host-head h2 { margin: 0 0 0.15rem; }
.host-head .host-role { margin: 0; }
.host-photo { inline-size: 176px; block-size: 176px; object-fit: cover; border-radius: 10px; flex: none; border: 1px solid var(--pink-soft); }
.host-card-cyan {
  background: var(--cyan-raised);
  border-color: var(--cyan-soft);
  box-shadow: 0 1px 2px rgba(11, 100, 112, 0.06), 0 8px 24px rgba(11, 100, 112, 0.09);
}
.host-card-cyan .host-role { color: var(--cyan); }
.host-card-cyan .host-photo { border-color: var(--cyan-soft); }
.host-card-cyan a { color: var(--cyan); }
.host-card-cyan :focus-visible { outline-color: var(--cyan); }
.about-show {
  margin-top: 2.4rem;
  background: var(--butter-tint);
  border: 1px solid var(--butter-soft);
  border-radius: 12px;
  padding: clamp(1.5rem, 4vw, 2.1rem);
}
.about-show h2 { color: var(--butter-ink); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 0.6rem; }
.about-show p { color: var(--butter-text); font-size: 0.97rem; margin: 0; max-width: 62ch; text-wrap: pretty; }

/* ---------- subscribe page ----------
   Directory cards keep the old page's accent alternation (Apple pink,
   Spotify cyan, Overcast pink). The manual-feed box speaks cyan like the
   other technical/reading surfaces; the hairline hover echoes .ep rows. */
.subscribe-main { padding-top: clamp(2.2rem, 5vw, 3.2rem); padding-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.sub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 1.7rem; }
.sub-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  background: var(--raised);
  border: 1px solid var(--pink-soft);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(94, 38, 72, 0.06), 0 8px 24px rgba(94, 38, 72, 0.09);
  padding: 1.15rem 1.3rem;
  text-decoration: none;
  color: var(--ink);
  min-height: 44px;
}
.sub-card .sub-name { font-family: var(--sans-head); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; }
.sub-card .go { font-family: var(--sans-head); font-weight: 700; font-size: 0.84rem; color: var(--pink); white-space: nowrap; }
.sub-card:hover { box-shadow: 0 1px 2px rgba(94, 38, 72, 0.06), 0 8px 24px rgba(94, 38, 72, 0.09), inset 0 0 0 1px rgba(166, 42, 124, 0.09); }
.sub-card:hover .sub-name { color: var(--pink); }
.sub-card-cyan {
  background: var(--cyan-raised);
  border-color: var(--cyan-soft);
  box-shadow: 0 1px 2px rgba(11, 100, 112, 0.06), 0 8px 24px rgba(11, 100, 112, 0.09);
}
.sub-card-cyan .go { color: var(--cyan); }
.sub-card-cyan:hover { box-shadow: 0 1px 2px rgba(11, 100, 112, 0.06), 0 8px 24px rgba(11, 100, 112, 0.09), inset 0 0 0 1px rgba(15, 126, 141, 0.09); }
.sub-card-cyan:hover .sub-name { color: var(--cyan); }
.sub-card-cyan:focus-visible { outline-color: var(--cyan); }
.feed-box {
  margin-top: 2.4rem;
  background: linear-gradient(160deg, var(--cyan-raised), var(--cyan-tint));
  border: 1px solid var(--cyan-soft);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(11, 100, 112, 0.06), 0 10px 30px rgba(11, 100, 112, 0.1);
  padding: clamp(1.5rem, 4vw, 2.1rem);
}
.feed-box h2 { color: var(--cyan-head); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 0.6rem; }
.feed-box p { margin: 0 0 1.2rem; max-width: 54ch; }
.feed-box :focus-visible { outline-color: var(--cyan); }
.feed-row { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: stretch; }
.feed-url {
  flex: 1 1 260px;
  min-width: 0;
  min-height: 44px;
  font-family: var(--sans-head);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--cyan-soft);
  border-radius: 7px;
  padding: 0.55rem 0.95rem;
}
.feed-box .btn {
  border: 0;
  cursor: pointer;
  background-color: var(--cyan);
  background-image: linear-gradient(var(--cyan), var(--cyan-deep));
  box-shadow: 0 1px 2px rgba(11, 100, 112, 0.3), 0 4px 12px rgba(15, 126, 141, 0.22);
}
.feed-box .btn:hover { background-image: none; }
.feed-box .btn:active { background-image: none; background-color: var(--cyan-deep); }
.feed-quiet { color: var(--ink-soft); font-size: 0.9rem; margin: 1.2rem 0 0; }
.feed-box .feed-quiet { margin-bottom: 0; max-width: none; }

/* ---------- social page ----------
   Two link cards on the subscribe-card idiom, stacked name + handle, with
   the old page's accent identities (Mastodon cyan, RSS pink). The closing
   subscribe pointer reuses the butter .about-show box. */
.soc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.7rem; }
.soc-card { flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 1.3rem 1.4rem 1.25rem; }
.soc-handle { font-family: var(--sans-head); font-weight: 600; font-size: 0.9rem; color: var(--pink); }
.sub-card-cyan .soc-handle { color: var(--cyan); }
.about-show a { color: var(--butter-ink); }

/* Pin the footer to the viewport bottom on short pages (an empty filter result).
   .shell flex children need explicit width: auto side margins disable stretch. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body > .shell { width: 100%; }
main { flex: 1 0 auto; }

/* ---------- responsive ---------- */
@media (max-width: 640px) {
  .ep .s { display: none; }
  .host-grid { grid-template-columns: 1fr; }
  .host-photo { inline-size: 132px; block-size: 132px; }
  .latest { padding: 1.2rem 1.25rem; gap: 1rem; }
  .nav-row { flex-wrap: wrap; }
  .nav-row .logo { width: 80px; }
  .latest .meta { flex-wrap: wrap; gap: 0.4rem 1.1rem; }
  .nav-links { flex-basis: 100%; margin-left: 0; padding-bottom: 0.2rem; }
  .episode-title { font-size: 1.45rem; }
  .seg { grid-template-columns: 2.6rem 1fr 1.6rem; gap: 0.55rem; padding-left: 0.45rem; }
  .seg-copy { opacity: 0.35; }
  .episode-nav { flex-direction: column; }
  .episode-nav-next { text-align: left; }
  .sub-grid { grid-template-columns: 1fr; gap: 0.9rem; }
  .soc-grid { grid-template-columns: 1fr; gap: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .play, a, button { transition: none; }
  .play:hover { transform: none; }
}

/* ---------- dark "after close" variant (B "violet night") ----------
   The rooms after close: the ground shifts cool toward violet so the two
   saturated voices read like lit signs at night. Accents lighten for text;
   button fills keep the shipped saturated values so the accents still glow.
   The butter room shifts from yellow toward caramel (dark yellow goes olive;
   caramel is the only direction it survives). Every text pair re-tuned AA
   for the dark grounds; chip formula hsl(H 50% 72%) passes every hue. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ground: #251A2F;
    --ground-hi: #2C2038;
    --ground-lo: #1D1326;
    --raised: #302342;
    --tint: #382A4B;
    --ink: #EEE7F4;
    --ink-soft: #B1A4C0;
    --pink: #E77FBE;
    --pink-deep: #F09BD1;
    --pink-soft: rgba(231, 127, 190, 0.18);
    --on-pink: #FBF3F8;
    --cyan: #52BFD1;
    --cyan-deep: #7ED4E2;
    --cyan-soft: rgba(82, 191, 209, 0.2);
    --cyan-tint: #0F2127;
    --cyan-raised: #152B31;
    --cyan-head: #C9EBF0;
    --butter-tint: #31200E;
    --butter-soft: rgba(227, 184, 97, 0.24);
    --butter-deep: #E3B861;
    --butter-ink: #EFDCAD;
    --butter-text: #D5BC8D;
  }

  /* Grain reads heavier on a dark ground: one notch down (0.045 -> 0.03). */
  body::after {
    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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  }

  /* Saturated fills stay on the shipped light-mode accents; the lightened
     dark accents are for text. on-pink still passes on these fills. */
  .btn {
    background-color: #A62A7C;
    background-image: linear-gradient(#A62A7C, #8E2168);
  }
  .btn:hover { background-image: none; background-color: #A62A7C; }
  .btn:active { background-image: none; background-color: #8E2168; }
  .play { background: linear-gradient(#A62A7C, #8E2168); }
  .transcripts .btn, .feed-box .btn {
    background-color: #0E7786;
    background-image: linear-gradient(#0E7786, #0B6470);
  }
  .transcripts .btn:hover, .feed-box .btn:hover { background-image: none; background-color: #0E7786; }
  .transcripts .btn:active, .feed-box .btn:active { background-image: none; background-color: #0B6470; }

  /* Shadows: violet-black, pulled deep enough to read on dark. */
  .skip-link { box-shadow: 0 2px 10px rgba(13, 7, 20, 0.55); }
  .latest, .host-card, .sub-card, .episode-player {
    box-shadow: 0 1px 2px rgba(13, 7, 20, 0.5), 0 8px 24px rgba(13, 7, 20, 0.35);
  }
  .transcripts-inner, .feed-box {
    box-shadow: 0 1px 2px rgba(4, 16, 18, 0.5), 0 10px 30px rgba(4, 16, 18, 0.35);
  }
  .cue-notice, .to-top {
    box-shadow: 0 1px 2px rgba(13, 7, 20, 0.5), 0 6px 18px rgba(13, 7, 20, 0.4);
  }

  /* Hardcoded light values with no token: hover washes, hairlines, sheets. */
  .ep:hover {
    background: rgba(82, 191, 209, 0.09);
    box-shadow: inset 0 0 0 1px rgba(82, 191, 209, 0.14);
  }
  .fc-moment { box-shadow: inset 0 0 0 1px rgba(82, 191, 209, 0.14); }
  .fc-moment:hover { background: rgba(82, 191, 209, 0.09); }
  .list { background: rgba(48, 35, 66, 0.6); }
  .tbtn:hover, .transcripts .btn-ghost:hover, .fc-ep-more:hover,
  .transcript-toggle:hover { background: rgba(82, 191, 209, 0.1); }
  .btn-ghost:hover { background: rgba(231, 127, 190, 0.1); }
  .year b { box-shadow: inset 0 0 0 1px rgba(82, 191, 209, 0.14); }
  .ep + .ep { border-top-color: rgba(231, 127, 190, 0.1); }
  .sub-card:hover {
    box-shadow: 0 1px 2px rgba(13, 7, 20, 0.5), 0 8px 24px rgba(13, 7, 20, 0.35),
      inset 0 0 0 1px rgba(231, 127, 190, 0.14);
  }
  .sub-card-cyan:hover {
    box-shadow: 0 1px 2px rgba(13, 7, 20, 0.5), 0 8px 24px rgba(13, 7, 20, 0.35),
      inset 0 0 0 1px rgba(82, 191, 209, 0.14);
  }
  .feed-url { background: rgba(15, 9, 22, 0.45); }

  /* Episode page: the sticky cluster repaints the dark ground + the dark
     grain tile (keep in sync with body); its fade goes to transparent dark
     ground. Speaker chips flip to hsl(H 50% 72%): AA on every ground for
     every hue (worst case blue, 5.4:1 on ground-hi). */
  .episode-sticky {
    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.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"), radial-gradient(130% 80% at 20% 0%, var(--ground-hi) 0%, var(--ground) 50%, var(--ground-lo) 100%);
  }
  .episode-sticky::after { background: linear-gradient(var(--ground), rgba(37, 26, 47, 0)); }
  .seg:hover { background: rgba(82, 191, 209, 0.07); }
  .seg-speaker { color: hsl(var(--spk) 50% 72%); }
  .seg:hover .seg-time { color: hsl(var(--spk) 50% 72%); }
  .seg-copy.seg-copied::after { color: hsl(var(--spk) 50% 72%); }
  .seg.seg-active { background: hsl(var(--spk) 60% 50% / 0.13); border-left-color: hsl(var(--spk) 50% 62%); }
  .seg.seg-active .seg-time { color: hsl(var(--spk) 50% 72%); }
}