/* The /episodes/ archive: a vellum page header, then the episode lists in
   two columns, Audio | Video. The episode-row mechanics (tap-to-unfold
   summaries, the gold finial) are carried over from the sibling site. */

.episodes {
  max-width: 72.5rem;
  margin: 0 auto;
  padding: 4.5rem 1.5rem 6rem;
}
.episodes-head {
  text-align: center;
  margin-bottom: 3.5rem;
}
.episodes-head .rubric-label { margin-bottom: .875rem; }
.episodes-head h1 {
  font-family: 'Cardo', serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
}
.episodes-note {
  margin-top: 1.25rem;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

/* Listen-on row: platform links separated by small gold fleurons. On the
   vellum header these use the deeper gold-ink so the small caps clear
   4.5:1 against the page. */
.podcast-platforms {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem 0;
  margin-top: 1.75rem;
  font-size: .95rem;
}
.podcast-platforms a {
  color: var(--gold-ink);
  letter-spacing: .16em;
  padding: .55rem .35rem;
  border-bottom: 1px solid transparent;
  transition: border-color .25s, color .25s;
}
.podcast-platforms a:hover { color: var(--lapis); border-bottom-color: var(--gold); }
.podcast-platforms li + li::before {
  content: "";
  display: inline-block;
  width: .6em;
  height: .6em;
  margin: 0 1.125rem;
  background: var(--gold);
  -webkit-mask: var(--fleur-mask) center / contain no-repeat;
  mask: var(--fleur-mask) center / contain no-repeat;
}

/* ---------- Episode columns ---------- */
.episodes-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
}
@media (max-width: 720px) { .episodes-cols { grid-template-columns: 1fr; } }

.episodes-col h2 {
  font-family: 'Cardo', serif;
  font-weight: 400;
  font-size: 1.55rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--gold);
  margin-bottom: .5rem;
}
.episode-list { list-style: none; }
.episode-list li { border-bottom: 1px solid var(--line); }

/* The row itself: either a plain div or, when the episode has a summary,
   the <summary> of a tap-to-unfold disclosure. */
.episode-row {
  display: flex;
  align-items: baseline;
  gap: .875rem;
  padding: 1rem 2px;
}
summary.episode-row {
  cursor: pointer;
  list-style: none;
}
summary.episode-row::-webkit-details-marker { display: none; }
summary.episode-row:hover { background: rgba(168, 129, 47, .07); }
/* A gold finial at the row's end, turning when unfolded: the cue that a
   row opens. Plain (non-summary) rows carry an invisible one so the dates
   stay aligned. It is set a touch larger and brighter than the muted text
   so the openable rows read as openable at a glance. */
.episode-row::after {
  content: "\25B8";
  color: var(--gold-ink);
  font-size: .95em;
  flex-shrink: 0;
  visibility: hidden;
  transition: color .2s;
}
summary.episode-row::after { visibility: visible; }
summary.episode-row:hover::after,
summary.episode-row:focus-visible::after { color: var(--lapis); }
details[open] > summary.episode-row::after { content: "\25BE"; color: var(--lapis); }
/* The unfolded panel, set like a manuscript argument: a brief italic
   notice of the episode's matter and a link out to it, indented to the
   title. The link lives here, not in the summary, so the disclosure
   toggle holds no nested focusable control. */
.episode-panel {
  margin: -.25rem 0 0;
  padding: 0 1.5rem 1.125rem calc(1.4em + .875rem + 2px);
}
.episode-summary {
  font-style: italic;
  color: var(--ink-soft);
  font-size: .98rem;
  line-height: 1.6;
}
.episode-link {
  display: inline-block;
  margin-top: .625rem;
  color: var(--lapis);
  font-variant: small-caps;
  letter-spacing: .12em;
  font-size: .9rem;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.episode-link:hover { color: var(--gold-ink); }
@media (prefers-reduced-motion: no-preference) {
  details[open] > .episode-panel { animation: episode-unfold .3s ease; }
  @keyframes episode-unfold {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}
.episode-no {
  font-family: 'Cardo', serif;
  color: var(--lapis);
  min-width: 1.4em;
  text-align: right;
}
/* The title carries the row: full-strength ink so it outreads the lapis
   episode number beside it. (Linked titles on summary-less rows stay
   lapis, the standard link colour.) */
.episode-title { color: var(--ink); }
.episode-title a {
  color: var(--lapis);
  border-bottom: 1px solid var(--gold);
}
.episode-date {
  margin-left: auto;
  padding-left: .875rem;
  font-size: .95rem;
  color: var(--ink-soft);
  /* Dates never break across lines; long titles wrap instead. */
  white-space: nowrap;
  flex-shrink: 0;
}