/* Program Notes — the printed show program for psychreavilla.com.
   Paper and type like a book; running order, cues, credits and listings like a broadcast.
   Every colour, size and space comes from the tokens on :root. Motion lives in motion.css. */

/* Fonts: self-hosted, latin subset. Metric-matched fallbacks keep the first paint the same size
   as the final one, so the swap does not move the layout. */
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/newsreader-latin.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap; src: url("../fonts/newsreader-italic-latin.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("../fonts/dmsans-latin.woff2") format("woff2"); }
@font-face { font-family: "Newsreader Fallback"; font-style: normal; src: local("Georgia"); size-adjust: 100.85%; ascent-override: 72.9%; descent-override: 26.3%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback"; font-style: italic; src: local("Georgia Italic"), local("Georgia"); size-adjust: 91.9%; ascent-override: 80%; descent-override: 28.8%; line-gap-override: 0%; }
@font-face { font-family: "DM Sans Fallback"; font-style: normal; src: local("Arial"); size-adjust: 102.8%; ascent-override: 96.5%; descent-override: 30.2%; line-gap-override: 0%; }

/* Reset (from _base, folded in so the system is one file) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, iframe, video { max-width: 100%; height: auto; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, blockquote, fieldset, legend { margin: 0; }

:root {
  /* Colour: the Quiet Pages palette, nothing else */
  --paper: #F6F0E3;
  --paper-2: #ECE3CF;
  --field: #FFFBF2;
  --ink: #211B18;
  --ink-2: #463D35;
  --accent: #8A2C45;
  --accent-strong: #6B2035;
  --accent-soft: #E7B6C2;
  --rule: #C9BBA0;
  --edge: #857562;

  /* Type */
  --serif: "Newsreader", "Newsreader Fallback", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", "DM Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-label: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-0: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-1: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --t-2: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --t-3: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem);
  --t-4: clamp(2.25rem, 1.6rem + 3vw, 4rem);
  --t-5: clamp(2.5rem, 1.5rem + 4.9vw, 5.75rem);
  --track: 0.14em;
  --measure: 62ch;

  /* Space */
  --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: 4.5rem;
  --s-9: 6.5rem;
  --gutter: clamp(1.25rem, 4.5vw, 3rem);
  --w: min(100% - 2 * var(--gutter), 80rem);
  --cue-col: 2.25rem;
  --cue-gap: 0.875rem;
  --tap: 2.75rem;
  --hairline: 1px solid var(--rule);
  --edge-line: 1px solid var(--edge);
}

@media (min-width: 56em) {
  :root { --cue-col: 9.5rem; --cue-gap: var(--s-6); }
}

/* ---------- Base ---------- */

html { scroll-padding-top: 5.5rem; scrollbar-color: var(--edge) var(--paper-2); }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-0);
  line-height: 1.6;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  caret-color: var(--accent);
  overflow-x: clip;
}

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

h1, h2, h3 { font-weight: 450; line-height: 1.08; letter-spacing: -0.012em; text-wrap: balance; }
h1 { font-size: var(--t-5); letter-spacing: -0.025em; }
h2 { font-size: var(--t-4); letter-spacing: -0.02em; }
h3 { font-size: var(--t-2); }
em, cite { font-style: italic; }
strong { font-weight: 650; }
p { text-wrap: pretty; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--accent-strong); }

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

.arrow { width: 1.1em; height: 1.1em; flex: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Small capitals in DM Sans: running-order labels, credits roles, listings meta */
.label {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track);
  text-transform: uppercase;
  line-height: 1.4;
}

/* Timecodes and cue numbers: tabular serif figures so ticking never jitters */
.tc { font-family: var(--serif); font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; letter-spacing: 0.01em; }

#skip-link {
  position: absolute; left: var(--s-4); top: var(--s-2); z-index: 60;
  padding: var(--s-3) var(--s-4);
  background: var(--ink); color: var(--paper);
  font-family: var(--sans); font-weight: 600;
  transform: translateY(-160%);
}
#skip-link:focus { transform: none; }

.wrap { width: var(--w); margin-inline: auto; }

/* ---------- Buttons and the ON AIR tally ---------- */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap);
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--accent);
  border-radius: 2px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  isolation: isolate;
  overflow: hidden;
  cursor: pointer;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent-strong);
  transform: scaleX(0); transform-origin: 0 50%;
}
.btn:hover, .btn:focus-visible { color: var(--paper); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
/* Ghost fill sweeps in from the left as an inset shadow on the button itself (no ::before layer) */
.btn--ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 0 var(--accent); }
.btn--ghost::before { content: none; }
.btn--ghost:hover, .btn--ghost:focus-visible { box-shadow: inset 30rem 0 0 0 var(--accent); }
.btn .arrow { width: 1em; height: 1em; flex: none; }

.tally {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.18em 0.5em 0.14em;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-family: var(--sans); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.2;
  white-space: nowrap;
}
.tally::before {
  content: ""; width: 0.5em; height: 0.5em; border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
}
/* Lit only on the media path: the Media page, and Contact with a media enquiry */
.tally.is-lit, body[data-onair] .tally.tally--header {
  background: var(--accent); border-color: var(--accent); color: var(--paper);
}
.tally.is-lit::before, body[data-onair] .tally.tally--header::before { background: var(--paper); border-color: var(--paper); }
.btn .tally { font-size: 0.625rem; }
.btn--ghost .tally { color: var(--accent); }
.btn:hover .tally, .btn:focus-visible .tally { color: var(--paper); }

/* ---------- Header ---------- */

#site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: var(--hairline);
}
#site-header .bar {
  width: var(--w); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
  min-height: 4rem;
}
#brand {
  display: inline-flex; align-items: center; gap: var(--s-3);
  color: var(--ink); text-decoration: none;
  min-height: var(--tap);
  margin-right: auto;
}
#brand { mix-blend-mode: multiply; }
#brand img { width: 2.5rem; height: 2.5rem; mix-blend-mode: multiply; }
#brand-name { font-family: var(--sans); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.12em; line-height: 1.1; }
#brand-tagline { display: none; font-family: var(--serif); font-style: italic; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.1; }
#brand .brand-text { display: grid; gap: 0.2rem; }

.nav-toggle { display: none; }
.js .nav-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); min-width: var(--tap);
  padding: 0 var(--s-3);
  border: var(--edge-line); border-radius: 2px;
  background: transparent; color: var(--ink);
  font-family: var(--sans); font-weight: 600; font-size: var(--t-sm);
  cursor: pointer;
}
.nav-toggle .bars { position: relative; width: 1.1rem; height: 0.7rem; }
.nav-toggle .bars::before, .nav-toggle .bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor;
}
.nav-toggle .bars::before { top: 0; }
.nav-toggle .bars::after { bottom: 0; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(0.3rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-0.3rem) rotate(-45deg); }

#site-nav ul { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
#site-nav li a {
  position: relative;
  display: inline-flex; align-items: center; min-height: var(--tap);
  color: var(--ink); text-decoration: none;
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 500;
}
#site-nav li a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.55rem; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
}
#site-nav li a:hover::after, #site-nav li a[aria-current="page"]::after { transform: scaleX(1); }
#site-nav li a[aria-current="page"] { color: var(--accent); }

.header-cta {
  display: none;
  align-items: center; gap: var(--s-2);
  min-height: var(--tap);
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--accent); border-radius: 2px;
  color: var(--accent); text-decoration: none;
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 600;
}
.header-cta:hover, .header-cta:focus-visible { background: var(--accent); color: var(--paper); }
.header-cta:hover .tally, .header-cta:focus-visible .tally { color: var(--paper); }
.menu-cta { padding-top: var(--s-3); }

/* Running time: a hairline that fills as you read the page (scaled by motion.js) */
.runtime {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent);
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  pointer-events: none;
}

/* Mobile: the nav folds into a panel under the bar (only when JS can open it) */
@media (max-width: 63.99em) {
  .js #site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper);
    border-bottom: var(--edge-line);
    padding: var(--s-2) var(--gutter) var(--s-5);
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
  }
  .js #site-nav.is-open { visibility: visible; clip-path: inset(0 0 0 0); }
  .js #site-nav ul { display: grid; gap: 0; }
  .js #site-nav li { border-bottom: var(--hairline); padding-block: var(--s-2); }
  .js #site-nav li a { width: 100%; min-height: var(--tap); font-family: var(--serif); font-size: var(--t-2); font-weight: 400; }
  .js #site-nav li a::after { bottom: 0.65rem; right: auto; width: 2.5rem; }
  #site-nav .menu-cta { display: block; }
}
@media (min-width: 40em) {
  #brand-tagline { display: block; }
}
@media (min-width: 64em) and (max-width: 89.99em) {
  #brand-tagline { display: none; }
}
@media (min-width: 64em) {
  .js .nav-toggle { display: none; }
  .header-cta { display: inline-flex; }
  #site-nav .menu-cta { display: none; }
}

/* ---------- Page head: title plus the folio (page number of the program) ---------- */

.page-head {
  width: var(--w); margin-inline: auto;
  padding-top: clamp(var(--s-6), 5vw, var(--s-8));
}
.program-rule { height: 5px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink); }
.folio {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  padding-top: var(--s-2);
  color: var(--ink-2);
}
.folio .tc { font-size: var(--t-sm); }

/* ---------- Segments: the running-order unit used on every page ---------- */

.seg {
  width: var(--w); margin-inline: auto;
  display: grid;
  grid-template-columns: var(--cue-col) minmax(0, 1fr);
  column-gap: var(--cue-gap);
  padding-block: clamp(var(--s-7), 7vw, var(--s-9));
  position: relative;
}
.seg::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--rule);
  transform-origin: 0 50%;
}
.seg--first::before { display: none; }
.seg-body { min-width: 0; }
.seg-body > * + * { margin-top: var(--s-5); }
.seg-body h2 { margin-bottom: var(--s-5); }
.seg-body > h2 + * { margin-top: 0; }
.seg-body .row-actions { margin-top: var(--s-5); }
.onair-head h2 { margin-bottom: 0; }
.onair-head { margin-bottom: var(--s-5); }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: var(--s-4); }

/* The cue column: a light, the cue number, and the timecode, like a stage manager's cue sheet */
.cue {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2);
  color: var(--ink-2);
  padding-top: 0.45rem;
}
.cue-light {
  position: relative;
  width: 0.75rem; height: 0.75rem; border-radius: 50%;
  border: 1.5px solid var(--edge);
  background: transparent;
}
.cue-light::after {
  content: ""; position: absolute; inset: -0.4rem; border-radius: 50%;
  border: 1px solid var(--accent);
  opacity: 0; transform: scale(0.4);
}
.cue-no { font-size: var(--t-2); line-height: 1; color: var(--ink); }
.cue-tc { font-size: var(--t-sm); line-height: 1; writing-mode: vertical-rl; transform: rotate(180deg); }
.cue-name { display: none; }
.seg.is-live .cue-light { background: var(--accent); border-color: var(--accent); }
.seg.is-done .cue-light { background: var(--ink-2); border-color: var(--ink-2); }

@media (min-width: 56em) {
  .cue { position: sticky; top: 6.5rem; align-self: start; gap: var(--s-3); padding-top: 0.6rem; }
  .cue-no { font-size: var(--t-3); }
  .cue-tc { writing-mode: horizontal-tb; transform: none; font-size: var(--t-1); }
  .cue-name { display: block; font-family: var(--serif); font-style: italic; font-size: var(--t-sm); color: var(--ink-2); max-width: 8.5rem; line-height: 1.4; }
  .cue-light { width: 0.875rem; height: 0.875rem; }
}

/* The ink studio band: one per page at most */
.studio {
  background: var(--ink); color: var(--paper);
  padding-block: clamp(var(--s-7), 7vw, var(--s-9));
}
.studio .seg { padding-block: 0; }
.studio .seg::before { display: none; }
.studio .cue, .studio .cue-name { color: var(--accent-soft); }
.studio .cue-no { color: var(--paper); }
.studio .cue-light { border-color: var(--accent-soft); }
.studio .seg.is-live .cue-light { background: var(--accent-soft); border-color: var(--accent-soft); }
.studio .seg.is-live .cue-light::after { border-color: var(--accent-soft); }
.studio a { color: var(--accent-soft); }
.studio a:hover { color: var(--paper); }
.studio :focus-visible { outline-color: var(--accent-soft); }

/* ---------- Home: the program cover ---------- */

.cover { width: var(--w); margin-inline: auto; padding-top: var(--s-5); }
.cover-grid { display: grid; gap: var(--s-5); }
.cover h1 { font-size: var(--t-5); font-weight: 420; line-height: 1.02; max-width: 13ch; }
.cover h1 em { color: var(--accent); }
.cover .lede { font-size: var(--t-1); max-width: 34ch; line-height: 1.45; }
.cover .lede-2 { margin-top: var(--s-3); font-size: var(--t-sm); font-family: var(--sans); color: var(--ink-2); max-width: 44ch; line-height: 1.55; }
.cover .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.cover .actions .btn { flex: 1 1 9.5rem; }
@media (max-width: 29.99em) { .cover .actions .btn { flex-basis: 100%; } }

.cover-copy { padding-top: var(--s-2); }

/* Portrait with the broadcast name plate as a lower third */
.portrait { position: relative; }
.portrait .frame {
  overflow: hidden;
  aspect-ratio: 4 / 3.6;
  background: var(--paper-2);
  border: 1px solid var(--rule);
}
.portrait .frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transform: translateY(var(--py, 0)) scale(1.06); }
.nameplate {
  position: relative;
  margin: -2.25rem var(--s-4) 0 auto;
  width: min(100% - var(--s-5), 24rem);
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: var(--s-3) var(--s-4);
  display: grid;
}
.nameplate .np-name { font-family: var(--serif); font-size: var(--t-2); line-height: 1.1; font-weight: 500; }
.nameplate .np-role { color: var(--ink-2); margin-top: 0.3rem; font-size: 0.75rem; letter-spacing: 0.03em; text-transform: none; }
.portrait figcaption { margin: 0; }

@media (min-width: 56em) {
  .cover { padding-top: var(--s-6); }
  .cover-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s-8); align-items: center; }
  .cover .actions .btn { flex: 0 0 auto; }
  .portrait .frame { aspect-ratio: 4 / 4.3; }
  .nameplate { margin: -3rem auto 0 calc(-1 * var(--s-7)); width: min(100% + var(--s-5), 25rem); }
}

/* As seen on: a broadcast ticker between rules */
.seen-on {
  margin-top: var(--s-7);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-4);
  min-height: 3.5rem;
}
.seen-on .label { color: var(--accent); padding-block: var(--s-3); }
.ticker { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent); }
.ticker-track { display: flex; flex-wrap: wrap; column-gap: var(--s-5); row-gap: var(--s-1); padding-block: var(--s-3); }
.ticker-track li { white-space: nowrap; font-size: var(--t-1); font-style: italic; display: inline-flex; align-items: center; gap: var(--s-5); }
.ticker-track li::after { content: ""; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: var(--accent); }
.ticker-track.dup { display: none; }
.ticker-pause { display: none; }

/* With motion allowed and JS running, the ticker runs as one line and can be paused */
.mo-on .ticker-wrap { display: flex; width: max-content; animation: ticker var(--dur-ticker) linear infinite; }
.mo-on .ticker-track { flex-wrap: nowrap; padding-right: var(--s-5); }
.mo-on .ticker-track.dup { display: flex; }
.mo-on .seen-on.is-paused .ticker-wrap, .mo-on .seen-on:hover .ticker-wrap, .mo-on .seen-on:focus-within .ticker-wrap { animation-play-state: paused; }
.mo-on .ticker-pause {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); min-width: var(--tap); padding: 0 var(--s-3);
  border: var(--edge-line); border-radius: 2px; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: var(--t-label); font-weight: 600; cursor: pointer;
}
.ticker-pause svg { width: 0.85rem; height: 0.85rem; }
@keyframes ticker { to { transform: translateX(-50%); } }

@media (max-width: 39.99em) {
  .seen-on { grid-template-columns: minmax(0, 1fr) auto; }
  .seen-on .label { grid-column: 1 / -1; padding-bottom: 0; }
}

/* The running order: the program's contents, numbered segments with a cue time */
.running-order { width: var(--w); margin-inline: auto; padding-block: var(--s-4) clamp(var(--s-6), 5vw, var(--s-8)); }
.running-order h2 { font-size: var(--t-3); }
.ro-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--ink); }
.ro-head .label { color: var(--ink-2); }
.ro-list li { border-bottom: var(--hairline); padding-block: var(--s-2); }
.ro-row {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  grid-template-areas: "no title arrow" "no line arrow";
  column-gap: var(--s-3);
  align-items: center;
  padding-block: var(--s-2);
  color: var(--ink); text-decoration: none;
  isolation: isolate;
}
.ro-row::before {
  content: ""; position: absolute; inset: calc(-1 * var(--s-2)) calc(-1 * var(--s-3)); z-index: -1;
  background: var(--paper-2);
  transform: scaleY(0); transform-origin: 50% 100%;
}
.ro-row:hover::before, .ro-row:focus-visible::before { transform: scaleY(1); }
.ro-row:hover { color: var(--ink); }
.ro-no { grid-area: no; font-size: var(--t-2); color: var(--accent); align-self: start; padding-top: 0.15rem; }
.ro-title { grid-area: title; font-size: var(--t-2); line-height: 1.15; }
.ro-line { grid-area: line; font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-2); margin-top: 0.2rem; }
.ro-tc { display: none; }
.ro-arrow { grid-area: arrow; width: 1.5rem; height: 1.5rem; color: var(--accent); }
@media (min-width: 56em) {
  .ro-row {
    grid-template-columns: 4.5rem minmax(0, 1.1fr) minmax(0, 1fr) 6rem 2rem;
    grid-template-areas: "no title line tc arrow";
    padding-block: var(--s-4);
  }
  .ro-no { font-size: var(--t-3); padding-top: 0; align-self: center; }
  .ro-title { font-size: var(--t-3); }
  .ro-line { margin-top: 0; }
  .ro-tc { display: block; grid-area: tc; font-size: var(--t-1); color: var(--ink-2); text-align: right; }
}

/* Opening credits */
.credits { display: grid; gap: var(--s-5); max-width: 46rem; }
.credits li { font-size: var(--t-2); line-height: 1.4; }
.credits .role { display: block; color: var(--accent); margin-bottom: var(--s-2); }
.credits li + li { padding-top: var(--s-5); border-top: var(--hairline); }
@media (min-width: 56em) {
  .credits { margin-inline: auto; text-align: center; }
  .credits li + li { border-top: 0; padding-top: 0; }
  .credits li + li::before { content: ""; display: block; width: 2.5rem; height: 1px; margin: 0 auto var(--s-5); background: var(--rule); }
  .seg--credits .seg-body > h2 { text-align: center; }
}

/* Plain program rows: services, acts, sessions */
.acts li { border-top: var(--hairline); padding-block: var(--s-4); }
.acts li:last-child { border-bottom: var(--hairline); }
.acts h3 { font-size: var(--t-2); }
.acts p { margin-top: var(--s-2); max-width: var(--measure); color: var(--ink-2); }

.row-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.text-link {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap);
  font-family: var(--sans); font-weight: 600; font-size: var(--t-sm);
  text-decoration: none;
}
.text-link::after {
  content: ""; position: absolute; left: 0; right: 1.6rem; bottom: 0.6rem; height: 1px; background: currentColor;
  transform-origin: 0 50%;
}
.text-link:hover::after, .text-link:focus-visible::after { transform: scaleY(2); }
.text-link .arrow { width: 1.1rem; height: 1.1rem; }

/* Home: In the Media, in the studio band */
.studio h2 { color: var(--paper); }
.onair-head { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.onair-head .tally { font-size: 0.75rem; }
.listing-short li { border-top: 1px solid rgb(231 182 194 / 0.35); padding-block: var(--s-2); }
.listing-short li:last-child { border-bottom: 1px solid rgb(231 182 194 / 0.35); }
.listing-short a {
  display: grid; gap: 0.15rem var(--s-4);
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "show date" "title date";
  padding-block: var(--s-2);
  color: var(--paper); text-decoration: none;
}
.listing-short .show { grid-area: show; color: var(--accent-soft); }
.listing-short .title { grid-area: title; font-size: var(--t-2); line-height: 1.2; }
.listing-short .date { grid-area: date; color: var(--accent-soft); font-family: var(--sans); font-size: var(--t-sm); align-self: end; white-space: nowrap; }
.listing-short a:hover .title, .listing-short a:focus-visible .title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (max-width: 39.99em) {
  .listing-short a { grid-template-columns: minmax(0, 1fr); grid-template-areas: "show" "title" "date"; }
}

/* Book: a typographic stand-in, clearly not the real cover */
.book-grid { display: grid; gap: var(--s-6); align-items: start; }
.standin {
  width: min(100%, 13.5rem);
  aspect-ratio: 2 / 3;
  background: var(--accent);
  color: var(--paper);
  padding: var(--s-5) var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
  border: 1px solid var(--accent-strong);
  box-shadow: 0 1.25rem 2rem -1.25rem rgb(33 27 24 / 0.55);
  transform: rotate(var(--rot, -2deg));
}
.standin .st-title { font-size: 2.1rem; line-height: 1; font-weight: 500; }
.standin .st-sub { font-style: italic; font-size: 1rem; line-height: 1.4; color: var(--accent-soft); }
.standin .st-author { margin-top: auto; font-family: var(--sans); font-size: 0.75rem; font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; }
.standin .tally { align-self: flex-start; color: var(--accent-soft); }
.standin-note { font-family: var(--sans); font-size: var(--t-label); color: var(--ink-2); margin-top: var(--s-3); max-width: 17rem; }
@media (min-width: 48em) {
  .standin { width: 17rem; }
  .book-grid { grid-template-columns: 17rem minmax(0, 1fr); column-gap: var(--s-8); }
}

/* ---------- Inner pages ---------- */

.page-title { padding-block: var(--s-5) 0; }
.page-title h1 { max-width: 16ch; }
.page-title .lede { margin-top: var(--s-4); font-size: var(--t-1); max-width: 40ch; line-height: 1.5; }

/* About */
.about-grid { display: grid; gap: var(--s-6); }
@media (min-width: 56em) {
  .about-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--s-8); align-items: start; }
}
.drop-in { font-size: var(--t-1); line-height: 1.55; }
.big-number { font-size: var(--t-5); line-height: 1; color: var(--accent); }
.stills { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); max-width: 52rem; }
.still .frame { overflow: hidden; border: 1px solid var(--rule); aspect-ratio: 4 / 5; background: var(--paper-2); }
.still img { width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--py, 0)) scale(1.08); }
.still figcaption { display: flex; gap: var(--s-3); align-items: baseline; padding-top: var(--s-2); color: var(--ink-2); }

/* Work With Me: session types set like running times */
.sessions li { display: grid; grid-template-columns: minmax(0, auto) minmax(1.5rem, 1fr) auto; align-items: baseline; column-gap: var(--s-3); padding-block: var(--s-4); border-top: var(--hairline); }
.sessions li:last-child { border-bottom: var(--hairline); }
.sessions h3 { font-size: var(--t-2); }
.sessions .leader { height: 1px; border-bottom: 2px dotted var(--edge); transform-origin: 0 50%; transform: scaleX(var(--l, 1)); align-self: center; margin-top: 0.6em; }
.sessions p { font-size: var(--t-1); white-space: nowrap; }
@media (max-width: 39.99em) {
  .sessions li { grid-template-columns: minmax(0, 1fr) auto; }
  .sessions .leader { display: none; }
}
.sessions .dur-label { font-family: var(--sans); font-size: var(--t-label); color: var(--ink-2); letter-spacing: var(--track); text-transform: uppercase; margin-right: var(--s-2); }

/* Forms */
.form { display: grid; gap: var(--s-5); max-width: 40rem; }
.field { display: grid; gap: var(--s-2); }
.field label, .form legend { font-family: var(--sans); font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.field .req { font-weight: 400; color: var(--ink-2); }
.field input, .field textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 0.7rem 0.85rem;
  background: var(--field);
  border: 1px solid var(--edge);
  border-radius: 2px;
  color: var(--ink);
  font-family: var(--sans); font-size: 1rem;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; background-size: 100% 2px; }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--accent); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form legend { margin-bottom: var(--s-3); padding: 0; }
.choices { display: grid; gap: var(--s-2); }
.choice {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--tap);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule); border-radius: 2px;
  background: var(--field);
  font-family: var(--sans); font-size: 1rem;
  cursor: pointer;
}
.choice:hover { border-color: var(--edge); }
.choice input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--accent); flex: none; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--paper); }
.choice .tally { margin-left: auto; color: var(--accent); }
.choice:has(input:checked) .tally { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.choice:has(input:checked) .tally::before { background: var(--paper); border-color: var(--paper); }
@media (min-width: 40em) { .choices--2 { grid-template-columns: 1fr 1fr; } }
.form-note { font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-2); max-width: 46ch; }
.media-note { padding: var(--s-3) var(--s-4); border: 1px solid var(--accent); background: var(--field); }
.media-note[hidden] { display: none; }

/* Media: the guest booking desk */
.desk { display: grid; gap: var(--s-6); }
.desk-lead { font-size: var(--t-1); max-width: 40ch; line-height: 1.5; }
.desk-grid { display: grid; gap: var(--s-6); }
@media (min-width: 56em) {
  .desk-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: var(--s-8); }
}
.desk h3 { font-size: var(--t-1); font-weight: 600; margin-bottom: var(--s-3); }
.desk-block + .desk-block { margin-top: var(--s-6); }
.topics { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.topics li {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--edge); border-radius: 2px;
  font-family: var(--sans); font-size: var(--t-sm);
}
.formats li { padding-block: var(--s-3); border-top: var(--hairline); display: grid; gap: 0.15rem; }
.formats li:last-child { border-bottom: var(--hairline); }
.formats .fmt { font-size: var(--t-1); }
.formats .fmt-where { font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-2); }
.headshots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.headshots figure { display: grid; gap: var(--s-2); }
.headshots .frame { overflow: hidden; aspect-ratio: 3 / 4; border: 1px solid var(--rule); background: var(--paper-2); }
.headshots img { width: 100%; height: 100%; object-fit: cover; }
.headshots a { font-family: var(--sans); font-size: var(--t-label); font-weight: 600; display: inline-flex; min-height: var(--tap); align-items: center; }
.booking-strip {
  background: var(--ink); color: var(--paper);
  padding: var(--s-5);
  display: grid; gap: var(--s-4);
}
.booking-strip p { max-width: 44ch; }
.booking-strip .btn { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--ink); }
.booking-strip .btn::before { background: var(--paper); }
.booking-strip .btn:hover, .booking-strip .btn:focus-visible { color: var(--ink); }
.booking-strip .btn .tally { color: var(--ink); }
.booking-strip :focus-visible { outline-color: var(--accent-soft); }
@media (min-width: 48em) { .booking-strip { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }

/* Media: past episodes listing */
.listing-tools { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.jump ul, .filters { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.jump { position: relative; }
.jump a, .filters button {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-3);
  border: 1px solid var(--edge); border-radius: 2px;
  background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: var(--t-sm); font-weight: 500; text-decoration: none;
  cursor: pointer;
}
.jump a:hover, .filters button:hover { border-color: var(--accent); color: var(--accent); }
.jump a[aria-current="location"] { border-color: var(--accent); color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.filters button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.jump .count, .filters .count { font-family: var(--serif); font-variant-numeric: tabular-nums; color: inherit; opacity: 0.85; }
.filters[hidden], .filter-status[hidden] { display: none; }
.filter-status { font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-2); }
.tools-label { color: var(--ink-2); }

.episodes > li { border-top: var(--hairline); }
.episodes > li:last-child { border-bottom: var(--hairline); }
.ep {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main main" "act year";
  align-items: center;
  column-gap: var(--s-3);
  padding-block: var(--s-4);
  isolation: isolate;
}
.ep::before {
  content: ""; position: absolute; inset: 0 calc(-1 * var(--s-3)); z-index: -1;
  background: var(--paper-2); transform: scaleX(0); transform-origin: 0 50%;
}
.ep:hover::before, .ep:focus-within::before { transform: scaleX(1); }
.ep-year { grid-area: year; font-size: var(--t-1); color: var(--accent); line-height: 1.4; }
.ep-meta .date { white-space: nowrap; }
.ep-main { grid-area: main; min-width: 0; }
.ep h3 { font-size: var(--t-1); line-height: 1.4; font-weight: 500; overflow-wrap: anywhere; }
.ep-meta { margin-top: 0.3rem; font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-2); }
.ep-meta .source { font-weight: 600; color: var(--ink); }
.ep-act { grid-area: act; margin-top: var(--s-1); }
.ep-act a { font-family: var(--sans); font-weight: 600; font-size: var(--t-sm); display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap); }
.ep-act .arrow { width: 1rem; height: 1rem; }
.ep-thumb { display: none; }
@media (min-width: 48em) {
  .ep {
    grid-template-columns: 5rem minmax(0, 1fr) 7rem 8rem;
    grid-template-areas: "year main thumb act";
    align-items: center;
    padding-block: var(--s-5);
  }
  .ep-year { font-size: var(--t-2); align-self: start; }
  .ep h3 { font-size: var(--t-2); line-height: 1.2; }
  .ep-act { margin-top: 0; justify-self: end; }
  .ep-thumb { display: block; grid-area: thumb; justify-self: end; width: 6rem; aspect-ratio: 10 / 7; overflow: hidden; border: 1px solid var(--rule); }
  .ep-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; }
  .ep:hover .ep-thumb img, .ep:focus-within .ep-thumb img { opacity: 1; transform: scale(1.12); }
}
.section-count { color: var(--ink-2); }
.list-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.list-head h2 { font-size: var(--t-3); }
.seg[hidden] { display: none; }

/* Books */
.coming-up { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; }
.book-title { font-size: var(--t-3); }
.seg-body .book-title { margin-bottom: var(--s-3); }
.book-grid .lede { margin-bottom: var(--s-4); }
.research-credit { font-size: var(--t-2); line-height: 1.35; max-width: 34ch; }

/* Contact */
.contact-lines li { border-top: var(--hairline); padding-block: var(--s-2); }
.contact-lines li:last-child { border-bottom: var(--hairline); }
.contact-lines .arrow { width: 1.25rem; height: 1.25rem; color: var(--accent); }
.contact-lines a { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); min-height: var(--tap); text-decoration: none; font-size: var(--t-1); color: var(--ink); }
.contact-lines a:hover, .contact-lines a:focus-visible { color: var(--accent); }
.contact-lines .label { color: var(--ink-2); }

/* Next page: the program's page-turn link at the end of every page */
.next-page { width: var(--w); margin: 0 auto; padding-block: var(--s-7) var(--s-8); }
.next-page a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-4);
  padding-top: var(--s-4);
  border-top: 2px solid var(--ink);
  color: var(--ink); text-decoration: none;
}
.next-page .np-label { grid-column: 1 / -1; color: var(--ink-2); }
.next-page .np-title { font-size: var(--t-4); line-height: 1; }
.next-page .np-folio { font-size: var(--t-1); color: var(--accent); }
.next-page a:hover .np-title, .next-page a:focus-visible .np-title { color: var(--accent); }

/* ---------- Footer ---------- */

#site-footer { background: var(--paper-2); border-top: 1px solid var(--ink); }
.footer-inner { width: var(--w); margin-inline: auto; padding-block: var(--s-7) var(--s-9); display: grid; gap: var(--s-6); }
.crisis {
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: var(--s-5);
  display: grid; gap: var(--s-3);
}
#site-footer .crisis h2 { font-family: var(--serif); font-size: var(--t-2); font-weight: 450; letter-spacing: -0.01em; text-transform: none; margin: 0; }
.crisis .big { font-size: var(--t-1); }
.crisis .big a { font-weight: 650; display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); }
.crisis ul { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.crisis ul a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-3);
  border: 1px solid var(--edge); border-radius: 2px;
  font-family: var(--sans); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums;
}
.crisis ul a:hover { border-color: var(--accent); }
.crisis .note { font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-2); max-width: 52ch; }

.footer-grid { display: grid; gap: var(--s-6); }
@media (min-width: 56em) {
  .footer-grid { grid-template-columns: 1.3fr 0.8fr 1.2fr 1fr; column-gap: var(--s-6); }
}
#footer-brand { display: grid; gap: var(--s-2); align-content: start; font-size: var(--t-sm); color: var(--ink-2); }
#footer-brand img { width: 4rem; height: 4rem; mix-blend-mode: multiply; }
#footer-brand strong { color: var(--ink); font-family: var(--sans); letter-spacing: 0.12em; }
#site-footer h2 { font-family: var(--sans); font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track); text-transform: uppercase; color: var(--ink); margin-bottom: var(--s-3); }
#footer-nav h2 { margin-bottom: var(--s-2); }
#footer-nav a, #footer-social a {
  display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap);
  color: var(--ink); text-decoration: none; font-family: var(--sans); font-size: var(--t-sm);
}
#footer-nav a:hover, #footer-social a:hover { color: var(--accent); text-decoration: underline; }
#newsletter p { font-size: var(--t-sm); color: var(--ink-2); }
#newsletter form { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
#newsletter label { font-family: var(--sans); font-size: var(--t-sm); font-weight: 600; }
#newsletter .row { display: flex; gap: var(--s-2); }
#newsletter input {
  flex: 1; min-width: 0; min-height: var(--tap);
  padding: 0 var(--s-3);
  background: var(--field); border: 1px solid var(--edge); border-radius: 2px; color: var(--ink);
  font-family: var(--sans); font-size: 1rem;
}
#newsletter input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
#footer-social p { font-size: var(--t-sm); color: var(--ink-2); }
#footer-social ul { display: grid; margin-top: var(--s-2); }
.footer-end { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--edge); font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-2); }
.footer-end p { margin: 0; }