/* ═══════════════════════════════════════════════════════════════════════════
   OH MY WORD — design tokens
   A 1990s football fanzine meets matchday programme. Newsprint paper, ink,
   slab condensed display type, halftone, restraint with bursts of accent.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* Paper & ink */
  --paper:        #f1ebdf;   /* warm cream newsprint */
  --paper-warm:   #ece4d3;   /* slightly aged */
  --paper-dim:    #e3dac4;   /* card / tone block */
  --ink:          #15110a;   /* warm black, like printed ink */
  --ink-soft:     #2a241a;
  --ink-mid:      #5a544a;
  --ink-faded:    #736850;   /* secondary text, metadata — darkened to meet WCAG AA (4.6:1 on paper) */
  --rule:         #c9bfa5;
  --rule-dark:    #a89c80;

  /* Accents — Watford kit, printed not pristine */
  --gold:         #f3c41a;   /* Watford yellow, with just enough warmth */
  --gold-deep:    #c89a18;
  --inkstamp:     #c0252b;   /* kit red, ink-on-paper rather than fire-engine */
  --inkstamp-dark:#931c1f;

  /* Type stacks */
  --font-display: 'Big Shoulders Display', 'Impact', sans-serif;
  --font-serif:   'Newsreader', 'Georgia', serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;

  /* Motion */
  --t-quick:   180ms cubic-bezier(.2,.7,.2,1);
  --t-base:    320ms cubic-bezier(.2,.7,.2,1);
  --t-slow:    640ms cubic-bezier(.2,.7,.2,1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Reset & base
   ═════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.55;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  font-feature-settings: 'kern', 'liga', 'onum';
  font-variation-settings: 'opsz' 16;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--gold); color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════════
   Atmosphere — paper grain + halftone
   ═════════════════════════════════════════════════════════════════════════ */

/* Persistent grain texture across whole page */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Subtle paper warp / vignette */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 59;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(21,17,10,0.07) 100%);
}

/* Halftone dot pattern — used as section accents */
.halftone {
  background-image: radial-gradient(var(--ink) 1px, transparent 1.4px);
  background-size: 8px 8px;
  background-position: 0 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Reveal-on-scroll
   ═════════════════════════════════════════════════════════════════════════ */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms cubic-bezier(.16,.7,.2,1), transform 700ms cubic-bezier(.16,.7,.2,1); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-d-1 { transition-delay: 90ms; }
.reveal-d-2 { transition-delay: 180ms; }
.reveal-d-3 { transition-delay: 270ms; }
.reveal-d-4 { transition-delay: 360ms; }

/* ═══════════════════════════════════════════════════════════════════════════
   Top masthead — tiny, refined, never floats over content
   ═════════════════════════════════════════════════════════════════════════ */

/* Watford kit-tape — pinned to the very top of every page, above the masthead.
   Three stacked bands (yellow, black, red) to evoke the trim on the 1990s
   home strip without resorting to literal hornet/club crests. */
.kit-stripe {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
.kit-stripe-yellow { height: 5px; background: var(--gold); }
.kit-stripe-black  { height: 2px; background: var(--ink); }
.kit-stripe-red    { height: 2px; background: var(--inkstamp); }

/* Skip link — first focusable element on the page; visible only on focus */
.skip-link {
  position: fixed;
  top: 9px;
  left: 50%;
  transform: translate(-50%, -300%);
  z-index: 70;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--gold);
  padding: 0.7rem 1.2rem;
  transition: transform var(--t-quick);
}
.skip-link:focus,
.skip-link:focus-visible { transform: translate(-50%, 0.6rem); }

.masthead {
  position: fixed;
  top: 9px; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 2rem;
  background: rgba(241, 235, 223, 0.94);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
}
.masthead-logo {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.masthead-logo::before {
  content: '◆';
  color: var(--inkstamp);
  font-family: var(--font-serif);
  font-size: 0.7em;
}
.masthead-nav {
  display: flex;
  list-style: none;
  gap: 2.2rem;
}
.masthead-nav a {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mid);
  position: relative;
  padding: 0.25rem 0;
  transition: color var(--t-quick);
}
.masthead-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--ink);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform var(--t-base);
}
.masthead-nav a:hover { color: var(--ink); }
.masthead-nav a:hover::after { transform: scaleX(1); }
.masthead-issue {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faded);
}
@media (max-width: 760px) {
  .masthead { padding: 0.75rem 1rem; }
  .masthead-issue { display: none; }
  .masthead-nav { gap: 1rem; }
  .masthead-nav a { font-size: 0.66rem; letter-spacing: 0.12em; }
  .masthead-logo { font-size: 1.05rem; white-space: nowrap; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hero — front-cover broadsheet
   ═════════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  padding: 7.5rem 2rem 4rem;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1100px);
  justify-content: center;
  overflow: hidden;
}
.hero-grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px);
  background-size: 8.333% 100%;
  mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 80%, transparent 100%);
}
.hero-halftone-tl {
  position: absolute;
  top: 6rem; left: -4rem;
  width: 28vw; max-width: 360px;
  aspect-ratio: 1;
  background-image: radial-gradient(var(--ink) 1.4px, transparent 1.6px);
  background-size: 14px 14px;
  opacity: 0.16;
  mask-image: radial-gradient(circle, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, black 0%, transparent 70%);
  pointer-events: none;
}
.hero-halftone-br {
  position: absolute;
  bottom: 4rem; right: -3rem;
  width: 22vw; max-width: 320px;
  aspect-ratio: 1;
  background-image: radial-gradient(var(--inkstamp) 1.6px, transparent 1.8px);
  background-size: 12px 12px;
  opacity: 0.18;
  mask-image: radial-gradient(circle, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, black 0%, transparent 70%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}

.hero-cover-meta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faded);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.hero-cover-meta .rule-dot { color: var(--inkstamp); font-size: 1.1em; }
.hero-cover-meta .right { text-align: right; }

.hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(6rem, 17vw, 15.5rem); /* capped so the lead + listen column crest the fold on desktop */
  line-height: 0.82;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}
.hero-title .l1 { display: block; }
.hero-title .l2 { display: block; padding-left: 0.3em; }

.hero-strap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.4rem;
}
.hero-strap .strap-rule {
  height: 1px;
  background: var(--ink);
}
.hero-strap .strap-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.hero-spread {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 4rem;
  margin-top: 1rem;
  align-items: start;
}
@media (max-width: 900px) {
  .hero-spread { grid-template-columns: 1fr; gap: 2.5rem; }
}

.hero-lead {
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.5;
  font-variation-settings: 'opsz' 22;
  color: var(--ink-soft);
  max-width: 36ch;
}
.hero-lead .drop-cap {
  float: left;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 5.4rem;
  line-height: 0.82;
  margin: 0.32em 0.16em -0.05em 0;
  color: var(--inkstamp);
}
.hero-lead em { color: var(--ink); font-style: italic; }

.hero-side {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.hero-byline {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faded);
}
.hero-byline strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin-top: 0.35rem;
  line-height: 1.1;
}
.hero-byline strong .amp { color: var(--inkstamp); margin: 0 0.15em; font-style: italic; }

/* Ticket-stub stat block */
.ticket {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--paper-dim);
  border: 1px solid var(--ink);
  position: relative;
}
.ticket::before, .ticket::after {
  content: ''; position: absolute; left: 0; right: 0;
  height: 6px;
  background-image: radial-gradient(circle, var(--paper) 2.5px, transparent 3px);
  background-size: 12px 6px;
  background-repeat: repeat-x;
  background-position: 0 50%;
}
.ticket::before { top: -1px; transform: translateY(-50%); }
.ticket::after  { bottom: -1px; transform: translateY(50%); }
.ticket-cell {
  padding: 1.4rem 1rem 1.2rem;
  text-align: center;
  position: relative;
}
.ticket-cell + .ticket-cell { border-left: 1px dashed var(--rule-dark); }
.ticket-cell .num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.8rem, 6vw, 4.2rem);
  line-height: 0.9;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.ticket-cell .num small {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.45em;
  vertical-align: 0.6em;
  margin-left: 0.05em;
  color: var(--inkstamp);
}
.ticket-cell .lab {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-top: 0.6rem;
}

/* Listen-on hero block */
.hero-listen {
  border-top: 2px solid var(--ink);
  padding-top: 1.2rem;
}
.hero-listen-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin-bottom: 0.7rem;
}
.hero-platform-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.hero-platform-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.85rem 0.55rem 0.7rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  transition: transform var(--t-quick), background var(--t-quick), color var(--t-quick);
}
.hero-platform-btn:hover {
  transform: translate(-2px, -2px);
  background: var(--gold);
  box-shadow: 4px 4px 0 var(--ink);
}
.hero-platform-ico {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.hero-platform-ico svg { width: 14px; height: 14px; display: block; }

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: 0.4rem;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1rem 1.6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  position: relative;
  transition: transform var(--t-quick), background var(--t-quick);
}
.hero-cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  z-index: -1;
  transform: translate(6px, 6px);
  transition: transform var(--t-quick);
}
.hero-cta:hover { transform: translate(-2px, -2px); }
.hero-cta:hover::after { transform: translate(8px, 8px); }
.hero-cta svg { width: 16px; height: 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Section header — broadsheet section break
   ═════════════════════════════════════════════════════════════════════════ */

section.spread {
  position: relative;
  padding: 8rem 2rem;
  max-width: 1280px;
  margin: 0 auto;
}
section.spread + section.spread { padding-top: 0; }
@media (max-width: 760px) { section.spread { padding: 5rem 1.5rem; } }

.section-head {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: 1.4rem;
  align-items: start;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid var(--ink);
  position: relative;
}
.section-head::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: var(--ink);
}
.section-mark {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--inkstamp);
  padding-top: 0.4rem;
}
.section-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.4rem, 8vw, 6rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.section-kicker {
  grid-column: 2;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-style: italic;
  font-variation-settings: 'opsz' 20;
  color: var(--ink-mid);
  margin-top: 1rem;
  max-width: 50ch;
}
@media (max-width: 760px) {
  .section-head { grid-template-columns: 1fr; gap: 0.5rem; }
  .section-mark { padding-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Filter tabs — newspaper section dividers
   ═════════════════════════════════════════════════════════════════════════ */

.filter-bar {
  display: inline-flex;
  gap: 0;
  margin-bottom: 2.5rem;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.filter-btn {
  padding: 0.7rem 1.2rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  position: relative;
  transition: background var(--t-quick), color var(--t-quick);
}
.filter-btn + .filter-btn { border-left: 1px solid var(--ink); }
.filter-btn:hover { background: var(--paper-dim); }
.filter-btn.active { background: var(--ink); color: var(--paper); }
.filter-btn .count {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.7em;
  margin-left: 0.4em;
  color: var(--ink-faded);
}
.filter-btn.active .count { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════════════════
   Episode cards — matchday programmes
   ═════════════════════════════════════════════════════════════════════════ */

.episodes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.5rem;
}

.ep-card {
  position: relative;
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  padding: 1.4rem 1.4rem 1.2rem;
  cursor: pointer;
  transition: transform var(--t-base), box-shadow var(--t-base);
  display: flex;
  flex-direction: column;
  min-height: 360px;
  outline: none;
  animation: cardIn 700ms cubic-bezier(.16,.7,.2,1) both;
  animation-delay: var(--d, 0ms);
  color: inherit;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(20px) rotate(-0.5deg); } to { opacity: 1; transform: none; } }
.ep-card.hidden { display: none; }
/* Single-column mobile: the grid no longer needs equalised card heights,
   and 360px leaves a void between title and footer */
@media (max-width: 600px) {
  .ep-card { min-height: 0; }
}
.ep-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--ink);
  transform: translate(7px, 7px);
  z-index: -1;
  background: var(--gold);
  opacity: 0;
  transition: opacity var(--t-base);
}
.ep-card:hover, .ep-card:focus-visible {
  transform: translate(-3px, -3px);
}
.ep-card:hover::after, .ep-card:focus-visible::after { opacity: 1; }
.ep-card.special {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.ep-card.special::after { background: var(--inkstamp); }

.ep-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faded);
  padding-bottom: 0.7rem;
  border-bottom: 1px dashed var(--rule);
  margin-bottom: 1rem;
}
.ep-card.special .ep-card-head { color: var(--gold); border-bottom-color: rgba(255,255,255,0.18); }

/* Kit-number block — the giant episode number now sits in a yellow square with
   black border + red drop-shadow, mimicking the number printed on the back of
   a 1990s Watford shirt. Used on both season and special cards (the dark card
   variant just gets a paper-coloured border for contrast). */
.ep-num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(4.4rem, 8.5vw, 5.8rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  background: var(--gold);
  border: 2px solid var(--ink);
  padding: 0.05em 0.28em 0.02em;
  display: inline-block;
  margin: 0.4rem 0 0.8rem;
  position: relative;
  box-shadow: 5px 5px 0 var(--inkstamp);
  transform: rotate(-1deg);
  transition: transform var(--t-quick), box-shadow var(--t-quick);
}
.ep-card:hover .ep-num,
.ep-card:focus-visible .ep-num {
  transform: rotate(-1deg) translate(-1px, -1px);
  box-shadow: 6px 6px 0 var(--inkstamp);
}
.ep-card.special .ep-num {
  color: var(--ink);
  background: var(--gold);
  border-color: var(--paper);
  box-shadow: 5px 5px 0 var(--inkstamp);
}

.ep-season {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--inkstamp);
  margin-bottom: 0.4rem;
}
.ep-card.special .ep-season { color: var(--gold); }

.ep-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 0.95;
  letter-spacing: -0.005em;
  color: inherit;
  margin-bottom: 0.5rem;
  text-wrap: balance;
}

.ep-part {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--ink-mid);
  margin-bottom: 0.5rem;
}
.ep-card.special .ep-part { color: rgba(255,255,255,0.6); }

.ep-card-foot {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ep-card.special .ep-card-foot { border-top-color: rgba(255,255,255,0.18); }
.ep-duration {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--ink-mid);
}
.ep-card.special .ep-duration { color: rgba(255,255,255,0.7); }
.ep-arrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--inkstamp);
  transition: transform var(--t-quick);
}
.ep-card.special .ep-arrow { color: var(--gold); }
.ep-card:hover .ep-arrow { transform: translateX(4px); }

/* ═══════════════════════════════════════════════════════════════════════════
   About — editorial spread
   ═════════════════════════════════════════════════════════════════════════ */

.about-spread {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: start;
}
@media (max-width: 900px) {
  .about-spread { grid-template-columns: 1fr; gap: 3rem; }
}

.about-prose p {
  font-size: 1.1rem;
  line-height: 1.65;
  font-variation-settings: 'opsz' 18;
  color: var(--ink-soft);
  max-width: 38ch;
}
.about-prose p + p { margin-top: 1.2rem; }
.about-prose p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 5.4rem;
  line-height: 0.82;
  float: left;
  margin: 0.2em 0.18em -0.05em 0;
  color: var(--inkstamp);
}
.about-prose em { font-style: italic; color: var(--ink); }

.host-stack {
  display: grid;
  gap: 1.5rem;
}

.host-card {
  position: relative;
  border: 1px solid var(--ink);
  background: var(--paper-warm);
  padding: 1.6rem 1.6rem 1.4rem;
}
.host-card.b { background: var(--ink); color: var(--paper); }
.host-card .stamp {
  position: absolute;
  top: -10px; right: 1rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--inkstamp);
  padding: 0.3rem 0.7rem;
  transform: rotate(2deg);
  border: 1px solid var(--ink);
}
.host-card.b .stamp { background: var(--gold); color: var(--ink); }
.host-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.3rem;
  line-height: 0.92;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.host-role {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin-bottom: 0.9rem;
}
.host-card.b .host-role { color: var(--gold); }
.host-bio {
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.host-card.b .host-bio { color: rgba(241,235,223,0.86); }
.host-social {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--inkstamp);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-quick);
}
.host-social:hover { border-color: currentColor; }
.host-card.b .host-social { color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════════════════
   Footer
   ═════════════════════════════════════════════════════════════════════════ */

footer {
  position: relative;
  padding: 4rem 2rem 3rem;
  border-top: 6px double var(--ink);
  background: var(--paper-warm);
}
.footer-row {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
}
@media (max-width: 700px) { .footer-row { grid-template-columns: 1fr; } }
.footer-mast {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.footer-tag {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-mid);
  margin-top: 0.4rem;
}
.footer-social {
  display: inline-block;
  margin-top: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--inkstamp);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-quick);
}
.footer-social:hover { border-color: currentColor; }
.footer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  margin-top: 0.7rem;
}
.footer-links .footer-social { margin-top: 0; }
.footer-meta {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faded);
  text-align: right;
  line-height: 1.7;
}
@media (max-width: 700px) { .footer-meta { text-align: left; } }
.footer-meta a {
  color: inherit;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-quick);
}
.footer-meta a:hover { border-color: currentColor; }

/* ═══════════════════════════════════════════════════════════════════════════
   Episode detail page — hero + transcript spread
   ═════════════════════════════════════════════════════════════════════════ */

.episode-page main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 7rem 2rem 4rem;
}
@media (max-width: 760px) {
  .episode-page main { padding: 6rem 1.25rem 3rem; }
}

/* Prev/next pager strip */
.ep-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 2.5rem;
}
.ep-pager-bottom {
  margin-top: 4rem;
  margin-bottom: 0;
}
.ep-pager a {
  padding: 0.35rem 0;
  transition: color var(--t-quick);
}
.ep-pager a:hover { color: var(--inkstamp); }
.ep-pager .pager-prev { text-align: left; }
.ep-pager .pager-next { text-align: right; }
.ep-pager .pager-home {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.ep-pager .pager-disabled {
  color: var(--ink-faded);
  opacity: 0.45;
  cursor: default;
}
@media (max-width: 600px) {
  .ep-pager { font-size: 0.66rem; letter-spacing: 0.12em; }
}

/* Hero block — title, eyebrow, big ghost number, description */
.episode-hero {
  padding: 2.4rem 0 2rem;
  position: relative;
  border-bottom: 6px double var(--ink);
  margin-bottom: 2.5rem;
}
.episode-hero.special { background: var(--paper-warm); padding-left: 1.4rem; padding-right: 1.4rem; }
.episode-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--ink) 1px, transparent 1.4px);
  background-size: 12px 12px;
  opacity: 0.05;
  pointer-events: none;
}
.episode-ep-number {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(7rem, 18vw, 13rem);
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--ink);
  position: absolute;
  right: 1rem;
  top: -0.5rem;
  opacity: 0.08;
  pointer-events: none;
  user-select: none;
}
.episode-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--inkstamp);
  margin-bottom: 0.6rem;
  position: relative;
}
.episode-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  text-wrap: balance;
  position: relative;
}
.episode-title small {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.4em;
  color: var(--ink-mid);
  text-transform: none;
  margin-top: 0.4rem;
  letter-spacing: 0;
}
.episode-duration-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  padding: 0.4rem 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  border: 1px solid var(--ink);
  position: relative;
}
.episode-broadcast {
  display: inline-flex;
  align-items: center;
  margin: 1rem 0 0 0.75rem;
  padding: 0.4rem 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faded);
  position: relative;
}
.episode-description {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.6;
  font-variation-settings: 'opsz' 20;
  color: var(--ink-soft);
  max-width: 60ch;
  margin-top: 1.6rem;
  position: relative;
}
.episode-description::first-letter {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 3rem;
  line-height: 0.85;
  float: left;
  margin: 0.15em 0.18em -0.05em 0;
  color: var(--inkstamp);
}

.episode-section-label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin: 3rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ink);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.episode-section-label::before {
  content: '◆';
  color: var(--inkstamp);
  font-family: var(--font-serif);
  font-size: 0.85em;
}

/* Listen-on ticket buttons (used on episode pages) */
.listen-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.7rem;
}
.listen-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  transition: transform var(--t-quick), box-shadow var(--t-quick);
}
.listen-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
}
.listen-btn-icon {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  flex-shrink: 0;
}

/* Native audio player (episode pages). Transcript timestamps seek it via
   player.js; while playing it docks to the bottom of the viewport. */
.audio-player {
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  border-left: 6px solid var(--gold);
  padding: 0.9rem 1rem 0.8rem;
  margin-bottom: 1.6rem;
}
.audio-player audio { width: 100%; display: block; }
.audio-hint {
  margin: 0.55rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faded);
}
.audio-player.is-docked {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 900;
  width: min(480px, calc(100vw - 2rem));
  margin-bottom: 0;
  box-shadow: 4px 4px 0 var(--ink);
}
.audio-player.is-docked .audio-hint { display: none; }
/* Both the dock and the consent banner are pinned to the bottom edge; while a
 * consent choice is pending, sit the dock above the banner so neither the
 * player controls nor Accept/Decline end up unreachable. --consent-h is set by
 * consent.js and cleared once the visitor chooses. */
.consent-open .audio-player.is-docked {
  bottom: calc(var(--consent-h, 0px) + 1.5rem);
}
@media (max-width: 520px) {
  .audio-player.is-docked { left: 0; right: 0; bottom: 0; width: auto; box-shadow: none; }
  .consent-open .audio-player.is-docked {
    bottom: calc(var(--consent-h, 0px) + 1.5rem);
  }
}

/* Transcript — script-style layout, full-page (no scroll trap) */
.transcript-area {
  background: var(--paper-warm);
  border: 1px solid var(--ink);
  position: relative;
}
.transcript-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px dashed var(--rule-dark);
  background: var(--paper);
}
.transcript-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.transcript-status {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  background: var(--gold);
  color: var(--ink);
  border: 1px solid var(--ink);
}
.transcript-body {
  padding: 1.4rem 1.2rem 0.5rem;
}

.transcript-line {
  display: grid;
  grid-template-columns: minmax(8rem, 9rem) 1fr;
  column-gap: 1.6rem;
  row-gap: 0.2rem;
  padding: 1.1rem 0;
  border-bottom: 1px dotted var(--rule);
  scroll-margin-top: 6rem;
}
.transcript-line:last-child { border-bottom: none; }
.transcript-line:first-child .transcript-text::first-letter {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 0.85;
  float: left;
  margin: 0.16em 0.16em -0.05em 0;
  color: var(--inkstamp);
}
.transcript-line .transcript-timestamp {
  grid-column: 1; grid-row: 1;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--ink-faded);
  text-align: right;
  padding-top: 0.3rem;
  display: inline-block;
  transition: color var(--t-quick);
}
.transcript-line .transcript-timestamp:hover { color: var(--inkstamp); }
.transcript-line .transcript-speaker {
  grid-column: 1; grid-row: 2;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--inkstamp);
  text-align: right;
  text-transform: uppercase;
}
.transcript-line .transcript-text {
  grid-column: 2; grid-row: 1 / span 2;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.65;
  font-variation-settings: 'opsz' 16;
  color: var(--ink-soft);
}
.transcript-line:target {
  background: rgba(200,154,54,0.16);
  border-radius: 2px;
}
@media (max-width: 600px) {
  .transcript-line { grid-template-columns: 1fr; column-gap: 0; row-gap: 0.4rem; }
  .transcript-line .transcript-timestamp { text-align: left; padding-top: 0; }
  .transcript-line .transcript-speaker { text-align: left; }
  .transcript-line .transcript-text { grid-column: 1; grid-row: 3; }
  .transcript-line:first-child .transcript-text::first-letter { float: none; font-size: inherit; margin: 0; color: inherit; }
}

.transcript-coming-soon {
  padding: 1rem 0 1.6rem;
  text-align: center;
}
.transcript-coming-soon h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.transcript-coming-soon p {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink-mid);
  font-size: 1rem;
}

/* Decorative divider used between content blocks */
.divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0;
  color: var(--ink-faded);
}
.divider::before, .divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.divider-mark {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Keyboard focus — branded, consistent across every interactive element
   ═════════════════════════════════════════════════════════════════════════ */

a:focus-visible,
button:focus-visible,
.ep-card:focus-visible {
  outline: 2px solid var(--inkstamp);
  outline-offset: 3px;
}
/* Red has poor contrast on the dark special cards — switch to gold there */
.ep-card.special:focus-visible { outline-color: var(--gold); }

/* ═══════════════════════════════════════════════════════════════════════════
   Reduced motion — honour the OS setting; also a safety net that guarantees
   .reveal / card-in content is always shown even if their animation never runs
   ═════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .ep-card { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Print-optimised — for whoever wants to print a transcript */
@media print {
  .masthead, .filter-bar, .ep-pager { display: none; }
  body { background: white; color: black; }
  body::before, body::after { display: none; }
  .episode-page main { padding: 0; max-width: none; }
  .transcript-area { border: none; background: white; }
  .transcript-header { background: white; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Cookie consent banner (self-hosted, GTM Consent Mode v2)
   ═══════════════════════════════════════════════════════════════════════════ */
.consent-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1000;
  max-width: 640px;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  padding: 1.1rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-top: 4px solid var(--gold);
  box-shadow: 4px 4px 0 var(--ink);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-base), transform var(--t-base);
}
.consent-banner.is-visible { opacity: 1; transform: translateY(0); }
.consent-text {
  flex: 1 1 16rem;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.consent-actions { display: flex; gap: 0.6rem; flex: 0 0 auto; }
.consent-btn {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--t-quick), color var(--t-quick);
}
.consent-btn:hover { background: var(--ink); color: var(--paper); }
.consent-accept { background: var(--gold); border-color: var(--gold-deep); }
.consent-accept:hover { background: var(--gold-deep); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .consent-banner { transition: opacity var(--t-quick); transform: none; }
}
@media (max-width: 520px) {
  .consent-banner { left: 0; right: 0; bottom: 0; }
  .consent-actions { width: 100%; }
  .consent-btn { flex: 1; }
}