/* ==========================================================================
   PODCAST: index and episode pages
   Same tokens as everything else.
   ========================================================================== */

/* ==========================================================================
   EPISODE PAGE
   Order is deliberate: title, banner, then the written summary, and only then
   the video. Leading with the player means nobody reads the page.
   ========================================================================== */
.ep-head { padding-block: var(--s-6) var(--s-7); }
.ep-head h1 { max-width: 26ch; margin-top: var(--s-4); }

/* Title on the left, still on the right. Side by side the artwork costs no
   vertical space, so the first section is readable without scrolling. */
.ep-head__grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--s-8);
  align-items: center;
}

.ep-guest {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-5);
  font-size: var(--fs-sm);
  color: var(--c-ink-3);
}
.ep-guest__name { color: var(--c-ink); font-weight: 600; }
.ep-guest__brand { color: var(--c-ink-2); }

/* ---- Banner: the still, with nothing covering it ------------------------ */
.ep-banner {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--border);
  background: var(--c-surface-2);
}
.ep-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-banner__pending {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-ink-2);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* ==========================================================================
   TWO COLUMN: sticky contents on the left, article on the right
   ========================================================================== */
.ep-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: var(--s-8);
  align-items: start;
  padding-bottom: var(--s-8);
}

.ep-toc {
  position: sticky;
  top: calc(var(--header-h) + var(--s-5));
}
.ep-toc__title {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
  padding-bottom: var(--s-3);
  border-bottom: var(--border);
  margin-bottom: var(--s-2);
}
.ep-toc ul { list-style: none; margin: 0; padding: 0; }
.ep-toc a {
  display: block;
  padding: var(--s-2) 0 var(--s-2) var(--s-3);
  border-left: 2px solid transparent;
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--c-ink-3);
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ep-toc a:hover { color: var(--c-ink); }

/* The section currently in view. Weight and a rule, not a colour wash, so it
   reads as position rather than as a selected control. */
.ep-toc a.is-current {
  color: var(--c-ink);
  font-weight: 600;
  border-left-color: var(--c-accent);
}

/* ---- Article ------------------------------------------------------------ */
.ep-body { max-width: var(--w-read); }
.ep-section { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.ep-section + .ep-section { margin-top: var(--s-8); }
.ep-section > h2 {
  font-size: 1.3rem;
  margin-bottom: var(--s-4);
  letter-spacing: var(--tracking-display);
}
.ep-body p { margin-bottom: var(--s-5); color: var(--c-ink-2); line-height: 1.7; }
.ep-body p:last-child { margin-bottom: 0; }

/* ---- Video, click to play ----------------------------------------------
   A live iframe pulls roughly a megabyte before anyone presses play, which is
   a real cost on a page people reach from search. The still is ours; the
   iframe is created on click.
   -------------------------------------------------------------------------- */
.ep-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--border);
  background: var(--c-surface-2);
}
.ep-video img, .ep-video iframe {
  width: 100%; height: 100%; display: block; border: 0; object-fit: cover;
}
.ep-video__btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: rgb(0 0 0 / 0.3);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
.ep-video__btn:hover { background: rgb(0 0 0 / 0.16); }
.ep-video__play {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius);
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
}
.ep-video__play .icon { width: 1.1rem; height: 1.1rem; }
.ep-video__note { margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--c-ink-3); }

/* ---- Takeaways: the guest's own points ---------------------------------- */
.ep-takeaways {
  padding: var(--s-6);
  background: var(--c-accent-tint);
  border-radius: var(--radius);
}
.ep-takeaways ul { margin: 0; padding-left: var(--s-5); }
.ep-takeaways li {
  margin-bottom: var(--s-4);
  color: var(--c-ink);
  line-height: 1.6;
  font-size: var(--fs-sm);
}
.ep-takeaways li:last-child { margin-bottom: 0; }
.ep-takeaways li::marker { color: var(--c-accent); }

/* ---- About the guest ---------------------------------------------------- */
.ep-about {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--s-6);
  align-items: start;
}
.ep-about__photo {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--border);
  background: var(--c-surface-2);
}
.ep-about__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ep-about__slot {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3);
  text-align: center;
  color: var(--c-ink-2);
  font-size: 0.68rem;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1.4;
}
.ep-about__name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; }
.ep-about__role { margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--c-ink-3); }
.ep-about p { margin-top: var(--s-4); }

.ep-end { margin-top: var(--s-8); padding-top: var(--s-6); border-top: var(--border); display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ==========================================================================
   INDEX
   The still stays clean. The watch cue lives in the card body underneath it,
   where it cannot cover the artwork.
   ========================================================================== */
.ep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }

.ep-card { text-decoration: none; color: inherit; display: block; }
.ep-card__media {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: var(--border);
  background: var(--c-surface-2);
  transition: border-color var(--dur) var(--ease);
}
.ep-card:hover .ep-card__media { border-color: var(--c-accent); }
.ep-card:hover .ep-card__title { color: var(--c-accent); }
.ep-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ep-card__pending {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
  text-align: center;
  color: var(--c-ink-2);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.ep-card__body { padding-top: var(--s-4); }
.ep-card__title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.3;
  transition: color var(--dur) var(--ease);
}
.ep-card__guest { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--c-ink-2); }
.ep-card__brand { margin-top: var(--s-1); font-size: var(--fs-xs); color: var(--c-ink-3); }

.ep-card__cue {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-accent);
}
.ep-card__cue .icon { width: 0.95rem; height: 0.95rem; }
.ep-card__cue--soon { color: var(--c-ink-3); font-weight: 500; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .ep-grid { grid-template-columns: repeat(2, 1fr); }
  /* Stacked, the still goes back above the text and keeps a sane cap. */
  .ep-head__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .ep-banner { max-width: 460px; }
  /* The contents list stops being useful once it is not beside the text. */
  .ep-layout { grid-template-columns: 1fr; gap: var(--s-6); }
  .ep-toc { position: static; }
  .ep-toc ul { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .ep-toc a { border-left: 0; border: var(--border); border-radius: var(--radius); padding: var(--s-2) var(--s-4); }
  .ep-toc a.is-current { border-color: var(--c-accent); }
}

@media (max-width: 600px) {
  .ep-grid { grid-template-columns: 1fr; }
  .ep-about { grid-template-columns: 96px 1fr; gap: var(--s-4); }
  .ep-end .btn { width: 100%; }
}

/* ==========================================================================
   CLOSING PANEL
   Replaces the newsletter box this page used to borrow from the homepage.
   That box went when the join section became a single stripe with one ask.
   ========================================================================== */
.cta-panel {
  margin-top: var(--s-8);
  padding: var(--s-6);
  background: var(--c-accent-tint);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}
.cta-panel h3 { font-size: 1.2rem; }
.cta-panel p {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--c-ink-2);
  line-height: 1.6;
  max-width: 52ch;
}
.cta-panel .btn { flex: none; }

/* ==========================================================================
   THE EPISODE HEADER IS THE INK BAND

   On the homepage the podcast is the one inverted section on the page, and an
   episode page that opened on cream had no relationship to it at all. The
   header carries the band down into the episode: espresso ground, butter for
   the things that would be the accent anywhere else, and the still sitting on
   it instead of on a grey rectangle.

   Everything below the header stays light, because the transcript is the part
   people actually read.
   ========================================================================== */
.ep-head {
  padding-block: var(--s-6) var(--s-7);
  background: var(--c-ground-ink);
  color: var(--c-on-ink);
  margin-inline: var(--slab-inset);
  /* A slab, not a stripe: it closes at the bottom too. With only the top
     corners rounded the band ran straight into the contents rail with nothing
     between them, and the sticky column looked cut off by it. */
  border-radius: var(--r-slab);
  padding-inline: var(--s-6);
}
/* The article starts a clear section below the band. */
.ep-layout { margin-top: var(--s-8); }
.ep-head h1 { color: var(--c-on-ink); }
.ep-head .lead { color: var(--c-on-ink-2); }
.ep-head .breadcrumb,
.ep-head .breadcrumb a { color: var(--c-on-ink-2); }
.ep-head .breadcrumb a:hover { color: var(--c-accent-on-ink); }
.ep-head .breadcrumb [aria-current] { color: var(--c-on-ink); }
.ep-guest { color: var(--c-on-ink-2); }
.ep-guest__name { color: var(--c-accent-on-ink); }
.ep-guest__brand { color: var(--c-on-ink-2); }
.ep-head .btn--primary {
  background: var(--c-statement);
  color: var(--c-on-statement);
  border-color: var(--c-statement);
}
.ep-head .ep-banner {
  border-color: rgb(255 255 255 / 0.18);
  background: rgb(255 255 255 / 0.06);
}
.ep-head .ep-banner__pending { color: var(--c-on-ink-2); }

/* The contents rail and the chapter numbers take butter, which is the episode
   page's one accent. Links stay espresso: the rule does not bend here. */
.ep-toc__title { color: var(--c-statement-ink); }
.ep-toc a.is-current { color: var(--c-accent); }
.ep-section > h2 { border-left: 3px solid var(--c-statement); padding-left: var(--s-4); }
.ep-body li::marker { color: var(--c-statement-ink); }