/* ==========================================================================
   Single podcast episode. Layers on top of single-longform.css — that
   stylesheet handles the hero, body grid, prose, and keep-going. This file
   adds the podcast-specific bits: player, listen-on chips, chapters,
   key moments, references list, pull quote.
   ========================================================================== */

/* ========= PLAYER (Buzzsprout iframe) ========= */
.ep-player {
  margin: 8px 0 24px;
}
.ep-player iframe {
  display: block;
  width: 100%;
  height: 240px;     /* Buzzsprout small player needs ~200px, give breathing room for varying cuts */
  border: 0;
  background: transparent;
}
/* Native <audio> fallback */
.ep-player audio { display: block; width: 100%; }

/* ========= LISTEN ON chips ========= */
.ep-listen-on {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 40px;
}
article.prose .ep-listen-on a {
  display: inline-block;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.15s, color 0.15s;
}
article.prose .ep-listen-on a:hover { background: var(--accent); color: var(--ink); text-decoration: none; }
.ep-listen-on a svg { flex-shrink: 0; width: 22px; height: 22px; }

/* ========= CHAPTERS (in the left rail) ========= */
.ep-chapters {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.3;
}
.ep-chapters li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.ep-chapters li .tc {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}

/* ========= KEY MOMENTS (body section, number + heading + gloss) ========= */
.ep-moments {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  max-width: var(--prose-max);
}
.ep-moments li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.ep-moments li:first-child { border-top: 1px solid var(--rule); }
.ep-moments .tc {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
}
.ep-moments .body {
  font-family: var(--serif);
}
.ep-moments .body b {
  display: block;
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 6px;
}
.ep-moments .body p {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}

/* ========= PULL QUOTE ========= */
.ep-pull {
  margin: 40px 0;
  padding: 24px 0 24px 40px;
  border-left: 4px solid var(--ink);
  max-width: var(--prose-max);
}
.ep-pull blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.375rem, 1vw + 1rem, 1.875rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.ep-pull blockquote b { font-style: normal; font-weight: 700; }
.ep-pull cite {
  display: block;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--ink-mute);
}

/* ========= REFERENCES (same shape as video sources) ========= */
.ep-refs {
  list-style: none; padding: 0; margin: 0 0 16px;
  max-width: var(--prose-max);
}
.ep-refs li {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 18px;
  align-items: baseline;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.ep-refs li:first-child { border-top: 1px solid var(--rule); }
.ep-refs .sn {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.12em;
  color: var(--ink-mute);
}
.ep-refs .sc b { color: var(--ink); font-weight: 600; }
.ep-refs .sc em { font-style: italic; }
.ep-refs .sc .jr {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-mute);
  margin-top: 4px;
}
.ep-refs .go {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.ep-refs .go:hover { opacity: 0.7; }

/* Body section heading shared across ep-moments / ep-refs / ep-pull */
.ep-section-h {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  margin: 48px 0 16px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  max-width: var(--prose-max);
}

/* ========= EPISODE LEDE — no dropcap =========
   The giant first-letter is an article gesture. Episode show notes open
   with short scene-setting lines where a dropcap reads as noise (and the
   Buzzsprout-imported bodies occasionally start with metadata). Keep the
   larger italic lede sizing from single-longform, kill the initial. */
article.prose > p:first-of-type::first-letter {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  float: none;
  margin: 0;
  color: inherit;
  font-style: inherit;
}