/* ===========================================================================
   Mirit Moon, the show
   Light editorial theme. Warm white ground, DM Serif Display for headings,
   IBM Plex Sans for reading text, brass and wine carried over from the Moon
   Media Affairs palette so the show still reads as part of the same house.

   Note this diverges from web/site/, which runs Bodoni Moda + Newsreader.
   Connor picked DM Serif on 2026-08-12.

   The brass is darkened to #8A6529 wherever it carries text. The brand gold
   (#C9A66B) fails contrast on white, so it is decorative only: rules, marks,
   hairlines. Never set it as body or link colour.
   =========================================================================== */

:root {
  --paper:      #FFFFFF;
  --paper-2:    #FBF8F3;   /* warm cream panel */
  --paper-3:    #F5F0E7;   /* deeper cream */
  --ink:        #15151A;
  --ink-soft:   #3C3C46;
  --muted:      #5E5E68;   /* 6.4:1 on white */
  --faint:      #6F6F78;   /* 5.0:1 on white, still reads as recessive */
  --rule:       #EAE5DB;
  --rule-dark:  #D8D1C3;
  --spot:       #8A6529;   /* brass, 5.3:1 on white, safe for 11px text */
  --spot-bright:#C9A66B;   /* brand gold, decorative only, fails text contrast */
  --cta:        #5A1F2B;   /* wine */
  --cta-hover:  #742836;
  --on-cta:     #FDFBF7;

  /* DM Serif Display ships one weight (400) in roman and italic. Every display
     rule below sits at 400 for that reason. Do not add a bold display weight,
     it will synthesise and smear. */
  --display: 'DM Serif Display', Georgia, serif;
  --body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  --measure: 1280px;
  --gutter: clamp(20px, 4.5vw, 64px);

  --shadow-s: 0 2px 10px rgba(35, 28, 15, 0.05);
  --shadow-m: 0 14px 38px rgba(35, 28, 15, 0.10);
  --shadow-l: 0 26px 70px rgba(35, 28, 15, 0.15);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 18px; line-height: 1.7; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--spot-bright); color: #15151A; }

/* The paper grain was a fixed full-viewport mix-blend-mode layer, which makes
   the compositor re-blend the entire screen on every scroll frame. At 3%
   opacity it was invisible and expensive. Removed. */
.grain { display: none; }
main, .nameplate, .colophon { position: relative; z-index: 3; }

.kicker {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); font-weight: 400;
}
.kicker--spot { color: var(--spot); }
.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }

/* ── scroll reveal ─────────────────────────────────────────────────────────
   Only arms when JS is present, so the content is never hidden from a crawler
   or from a reader whose JS failed. */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.js .reveal.d1.is-in { transition-delay: 45ms; }
.js .reveal.d2.is-in { transition-delay: 90ms; }
.js .reveal.d3.is-in { transition-delay: 135ms; }
.js .reveal.d4.is-in { transition-delay: 180ms; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ── nameplate ─────────────────────────────────────────────────────────── */
.nameplate {
  border-bottom: 1px solid var(--rule);
  padding: 14px var(--gutter) 12px;
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  /* No backdrop-filter. Blurring a sticky region forces a repaint of everything
     behind it on every scroll frame, which is most of the scroll jank. */
  transition: padding 260ms var(--ease), box-shadow 260ms var(--ease);
  will-change: padding;
}
.nameplate.is-stuck { padding-top: 8px; padding-bottom: 8px; box-shadow: var(--shadow-s); }
.nameplate__strap {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); padding-bottom: 12px;
  transition: opacity 300ms var(--ease), max-height 400ms var(--ease);
  max-height: 40px; overflow: hidden;
}
.nameplate.is-stuck .nameplate__strap { opacity: 0; max-height: 0; padding-bottom: 0; }
.nameplate__logo, .nameplate.is-stuck .nameplate__logo { will-change: height; }
.nameplate__strap .dot { color: var(--spot-bright); }
.nameplate__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nameplate__title { display: inline-flex; align-items: center; line-height: 0; }
.nameplate__logo {
  height: clamp(46px, 6vw, 70px); width: auto; display: block;
  transition: height 400ms var(--ease), transform 400ms var(--ease);
}
.nameplate__title:hover .nameplate__logo { transform: rotate(-4deg) scale(1.04); }
.nameplate.is-stuck .nameplate__logo { height: 40px; }

.nameplate__nav { display: flex; gap: 30px; align-items: baseline; padding-bottom: 6px; flex-wrap: wrap; }
.nameplate__nav a {
  position: relative;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft); padding-bottom: 5px;
  transition: color 200ms ease;
}
.nameplate__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--spot); transform: scaleX(0); transform-origin: right;
  transition: transform 340ms var(--ease);
}
.nameplate__nav a:hover { color: var(--ink); }
.nameplate__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nameplate__nav a.is-current { color: var(--spot); }
.nameplate__nav a.is-current::after { transform: scaleX(1); }
@media (max-width: 900px) {
  .nameplate { position: static; backdrop-filter: none; background: var(--paper); }
  .nameplate__row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .nameplate__nav { gap: 18px; }
  .nameplate__nav a { font-size: 11px; }
}

/* ── listen row ────────────────────────────────────────────────────────── */
.listen { border-bottom: 1px solid var(--rule); background: var(--paper-2); }
.listen__inner {
  max-width: var(--measure); margin: 0 auto; padding: 15px var(--gutter);
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.listen__links { display: flex; gap: 10px; flex-wrap: wrap; }
.listen__item {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft); background: var(--paper);
  border: 1px solid var(--rule-dark); padding: 9px 16px;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease),
              border-color 260ms ease, color 260ms ease;
}
.listen__item:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-s);
  border-color: var(--spot); color: var(--spot);
}

/* ── cover ─────────────────────────────────────────────────────────────── */
.cover {
  padding: clamp(56px, 9vw, 116px) 0 clamp(46px, 6vw, 82px);
  background:
    radial-gradient(1100px 460px at 82% 8%, rgba(201, 166, 107, 0.16), transparent 62%),
    radial-gradient(760px 420px at 4% 96%, rgba(90, 31, 43, 0.07), transparent 60%);
}
.cover__grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 76px); align-items: center;
}
.cover__show {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(52px, 7.6vw, 116px); line-height: 0.9;
  letter-spacing: -0.012em; margin: 14px 0 0;
}
.cover__show em {
  font-style: italic;
  background: linear-gradient(96deg, #B98D3F 0%, #C9A66B 42%, #8A6528 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cover__line {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: clamp(22px, 2.7vw, 36px); line-height: 1.3;
  color: var(--ink-soft); max-width: 010ch; margin: 26px 0 0;
}
.cover__line { max-width: 21ch; }
.cover__sub { color: var(--muted); max-width: 50ch; margin: 20px 0 0; font-size: 18px; }
.cover__acts { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 34px 0 0; }

/* featured artwork beside the title */
.cover__feature { position: relative; }
.cover__feature::before {
  content: ""; position: absolute; inset: 18px -18px -18px 18px;
  border: 1px solid var(--spot-bright); opacity: 0.5; z-index: 0;
  transition: inset 500ms var(--ease);
}
.cover__feature:hover::before { inset: 10px -10px -10px 10px; }
.cover__feature { align-self: center; }
.cover__feature a { position: relative; display: block; z-index: 1; overflow: hidden; box-shadow: var(--shadow-m); aspect-ratio: 16 / 9; }
.cover__feature img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 520ms var(--ease);
}
.cover__feature:hover img { transform: scale(1.05); }
.cover__badge {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--paper); padding: 13px 18px; border-top: 2px solid var(--spot);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink); box-shadow: var(--shadow-s);
}
@media (max-width: 940px) {
  .cover__grid { grid-template-columns: 1fr; }
  .cover__feature { order: -1; }
  .cover__feature::before { display: none; }
}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  position: relative; overflow: hidden;
  display: inline-block; background: var(--cta); color: var(--on-cta);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.13em;
  text-transform: uppercase; padding: 16px 28px; border: 1px solid var(--cta);
  cursor: pointer;
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease),
              background 260ms ease, border-color 260ms ease, color 260ms ease;
}
.btn:hover { background: var(--cta-hover); border-color: var(--cta-hover); transform: translateY(-2px); box-shadow: var(--shadow-m); }
.btn--ghost { background: transparent; border-color: var(--rule-dark); color: var(--ink); }
.btn--ghost:hover { background: var(--paper-2); border-color: var(--spot); color: var(--spot); }

/* ── sections ──────────────────────────────────────────────────────────── */
.sec { padding: clamp(54px, 7vw, 100px) 0; border-top: 1px solid var(--rule); }
.sec:first-of-type { border-top: none; }
.sec--tint { background: var(--paper-2); }
.sec__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(32px, 4.6vw, 60px); line-height: 1.04;
  letter-spacing: -0.008em; margin: 14px 0 0;
}
.sec__note { color: var(--muted); max-width: 58ch; margin: 18px 0 0; font-size: 17px; }
.sec__more { display: inline-block; margin-top: 36px; }

/* ── guests ────────────────────────────────────────────────────────────── */
.guests {
  list-style: none; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 44px;
}
.guest {
  background: var(--paper); padding: 30px 26px;
  transition: background 320ms var(--ease), transform 320ms var(--ease);
}
.guest:hover { background: var(--paper-2); transform: translateY(-3px); }
.guest__name { font-family: var(--display); font-size: 24px; line-height: 1.18; hyphens: none; }
.guest__role { color: var(--muted); font-size: 16px; margin-top: 9px; }
.guest__tape { margin-top: 18px; color: var(--faint); }

/* ── clips ─────────────────────────────────────────────────────────────── */
.clips { list-style: none; margin-top: 40px; border-top: 1px solid var(--rule); }
.clip { border-bottom: 1px solid var(--rule); }
.clip__link {
  display: grid; grid-template-columns: 212px 1fr auto; gap: 24px;
  align-items: baseline; padding: 18px 6px;
  transition: background 280ms var(--ease), padding 280ms var(--ease);
}
.clip__link:hover { background: var(--paper-2); padding-left: 16px; padding-right: 16px; }
.clip__meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--spot); }
.clip__title { font-size: 18px; color: var(--ink-soft); transition: color 240ms ease; }
.clip__link:hover .clip__title { color: var(--ink); }
.clip__len { font-family: var(--mono); font-size: 12px; color: var(--faint); }
@media (max-width: 760px) {
  .clip__link { grid-template-columns: 1fr auto; }
  .clip__meta { grid-column: 1 / -1; }
}

/* ── episode page ──────────────────────────────────────────────────────── */
.crumbs { padding: 22px var(--gutter) 0; max-width: var(--measure); margin: 0 auto; }
.crumbs a, .crumbs span {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.crumbs a:hover { color: var(--spot); }
.crumbs span { color: var(--faint); }

.ephead { padding-top: 30px; }
.ephead__title {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(32px, 5vw, 68px); line-height: 1.03;
  letter-spacing: -0.01em; margin: 14px 0 0; max-width: 20ch;
}
.ephead__meta { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 24px; }
.player {
  margin-top: 38px; background: #000; aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-l); border: 1px solid var(--rule-dark);
}
.player iframe { width: 100%; height: 100%; border: 0; display: block; }

.eplayout { display: grid; grid-template-columns: 1fr 306px; gap: clamp(30px, 4vw, 64px); margin-top: 56px; align-items: start; }
@media (max-width: 940px) { .eplayout { grid-template-columns: 1fr; } }

.epbody h2 {
  font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.16; margin: 52px 0 16px; letter-spacing: -0.005em;
  scroll-margin-top: 110px;
}
.epbody h2:first-child { margin-top: 0; }
.epbody p { color: var(--ink-soft); margin-top: 14px; }
.epbody .stamp {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  color: var(--spot); display: block; margin-bottom: 7px;
}
.epnote {
  background: var(--paper-2); border-left: 2px solid var(--spot-bright);
  padding: 16px 20px; color: var(--muted); font-size: 15px; margin-top: 40px;
}

.rail { position: sticky; top: 118px; }
@media (max-width: 940px) { .rail { position: static; } }
.rail__box { border: 1px solid var(--rule); padding: 24px; background: var(--paper); }
.rail__box + .rail__box { margin-top: 20px; }
.rail__list { list-style: none; margin-top: 16px; max-height: 460px; overflow-y: auto; }
.rail__list li + li { margin-top: 12px; }
.rail__list a { display: flex; gap: 12px; font-size: 16px; color: var(--ink-soft); transition: color 220ms ease; }
.rail__list a:hover { color: var(--spot); }
.rail__list .t { font-family: var(--mono); font-size: 11px; color: var(--spot); flex: 0 0 56px; padding-top: 4px; }
.rail__guest { font-family: var(--display); font-size: 23px; margin-top: 12px; }
.rail__role { color: var(--muted); font-size: 15px; margin-top: 7px; }
.rail__share { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.rail__share a {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--rule-dark); padding: 8px 13px; color: var(--ink-soft);
  transition: transform 240ms var(--ease), border-color 240ms ease, color 240ms ease;
}
.rail__share a:hover { transform: translateY(-2px); border-color: var(--spot); color: var(--spot); }

/* ── about ─────────────────────────────────────────────────────────────── */
.about__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(30px, 4.5vw, 66px); align-items: center; margin-top: 44px; }
.about__figure { position: relative; }
.about__figure::before {
  content: ""; position: absolute; inset: -16px 16px 16px -16px;
  border: 1px solid var(--spot-bright); opacity: 0.55; z-index: 0;
}
.about__img {
  position: relative; z-index: 1; width: 100%; max-height: 580px;
  object-fit: cover; object-position: center 22%; box-shadow: var(--shadow-m);
}
.about p { color: var(--ink-soft); }
.about p + p { margin-top: 18px; }
@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__figure::before { display: none; }
}

/* ── follow / forms ────────────────────────────────────────────────────── */
.follow {
  border-top: 1px solid var(--rule);
  background:
    radial-gradient(760px 340px at 12% 0%, rgba(201, 166, 107, 0.18), transparent 60%),
    var(--paper-2);
}
.follow__inner { max-width: var(--measure); margin: 0 auto; padding: clamp(52px, 7vw, 92px) var(--gutter); }
.follow__title { font-family: var(--display); font-size: clamp(29px, 3.9vw, 50px); line-height: 1.08; margin: 14px 0 0; letter-spacing: -0.008em; }
.form { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; max-width: 560px; }
.form input, .form textarea {
  flex: 1 1 260px; background: var(--paper); border: 1px solid var(--rule-dark);
  color: var(--ink); font-family: var(--body); font-size: 17px; padding: 15px 17px;
  transition: border-color 240ms ease, box-shadow 240ms ease;
}
.form textarea { flex-basis: 100%; min-height: 156px; resize: vertical; }
.form input:focus, .form textarea:focus {
  outline: none; border-color: var(--spot); box-shadow: 0 0 0 3px rgba(201, 166, 107, 0.20);
}
.form input::placeholder, .form textarea::placeholder { color: var(--faint); }
.form--stack { flex-direction: column; align-items: flex-start; }
.form--stack .btn { align-self: flex-start; }
.follow__note { color: var(--muted); font-size: 15px; margin-top: 18px; }

/* ── colophon ──────────────────────────────────────────────────────────── */
.colophon { border-top: 1px solid var(--rule); background: var(--paper-3); padding: 52px var(--gutter) 58px; }
.colophon__inner {
  max-width: var(--measure); margin: 0 auto; display: flex;
  justify-content: space-between; gap: 46px; flex-wrap: wrap; align-items: flex-start;
}
.colophon__blurb { color: var(--ink-soft); max-width: 34ch; font-size: 17px; }
.colophon__fine { color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 22px; }
.colophon__cols { display: flex; gap: 58px; flex-wrap: wrap; }
.colophon__col { display: flex; flex-direction: column; gap: 12px; }
.colophon__col .kicker { margin-bottom: 5px; }
.colophon a { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); transition: color 220ms ease; }
.colophon a:hover { color: var(--spot); }


/* ── marquee of guest names ────────────────────────────────────────────────
   The fastest way to say who has been in the room. Track is duplicated in the
   markup so the loop is seamless. Transform-only, so it stays on the
   compositor and costs nothing on the main thread. */
.marquee {
  overflow: hidden; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  background: var(--paper); padding: 17px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track {
  display: flex; width: max-content; will-change: transform;
  animation: slide 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; white-space: nowrap;
  font-family: var(--display); font-size: clamp(20px, 2.2vw, 30px);
  color: var(--ink); letter-spacing: -0.005em;
}
.marquee__item i { font-style: normal; color: var(--spot-bright); margin: 0 34px; font-size: 12px; }
@keyframes slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ── guest cards, now with a face ──────────────────────────────────────────
   The image is always a still from something the guest is demonstrably in, so
   it can never end up being the wrong person's face on a named doctor. */
.guest { padding: 0; }
.guest__link { display: flex; flex-direction: column; height: 100%; }
.guest__art { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--paper-3); }
.guest__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  transition: transform 520ms var(--ease), filter 520ms var(--ease); filter: saturate(0.92); }
.guest:hover .guest__art img { transform: scale(1.06); filter: saturate(1); }
.guest__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.guest__tape { margin-top: auto; padding-top: 14px; }
.guest__name { display: block; font-family: var(--display); font-size: 23px; line-height: 1.18; hyphens: none; }
.guest__role { display: block; color: var(--muted); font-size: 15px; margin-top: 8px; }
.guest__tape { display: block; margin-top: 14px; color: var(--faint); }
.guest:hover .guest__name { color: var(--spot); }

/* ── pull quote ────────────────────────────────────────────────────────────
   Every quote is re-verified verbatim against the transcript at build time,
   and cites the timestamp so a reader can check it. */
.pull {
  border-top: 1px solid var(--rule);
  background:
    radial-gradient(820px 420px at 78% 12%, rgba(201, 166, 107, 0.20), transparent 64%),
    var(--paper-2);
  padding: clamp(64px, 9vw, 124px) 0;
}
.pull__fig { max-width: min(760px, 62%); margin: 0; text-align: left; position: relative; }
.pull__q {
  position: relative; font-family: var(--display); font-style: italic;
  font-size: clamp(30px, 4.4vw, 62px); line-height: 1.12; letter-spacing: -0.014em;
  text-wrap: balance;
  color: var(--ink);
}
.pull__by { margin-top: 32px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding-top: 22px; border-top: 1px solid var(--rule-dark); max-width: 30ch; }
.pull__name { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--spot); }
.pull__role { color: var(--muted); font-size: 15px; }
.pull__cite {
  margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint);
  border-bottom: 1px solid var(--rule-dark); padding-bottom: 3px;
  transition: color 220ms ease, border-color 220ms ease;
}
.pull__cite:hover { color: var(--spot); border-color: var(--spot); }

/* A guest whose only footage is a Short gives a 9:16 source. Cover-cropping it
   into the 16:10 card keeps the face and drops the empty head and foot room. */
.guest__art--tall img { object-position: center 22%; }


/* ── platform marks ───────────────────────────────────────────────────────
   Inline SVG so the mark inherits currentColor and costs no extra request.
   A platform with no URL never reaches the markup, so there is no dead link. */
.listen__item { display: inline-flex; align-items: center; gap: 9px; }
.listen__mark { display: inline-flex; width: 15px; height: 15px; }
.listen__mark svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.listen__item--big { padding: 14px 22px; font-size: 12px; gap: 11px; }
.listen__item--big .listen__mark { width: 19px; height: 19px; }

/* ── episodes as a contents page ──────────────────────────────────────────
   Hairline rules and a large folio instead of boxed cards. A card grid is the
   most template-looking way to list anything; a contents page reads authored. */
.rows { margin-top: 30px; border-top: 1px solid var(--rule); }
.row { border-bottom: 1px solid var(--rule); }
.row__link {
  display: grid; grid-template-columns: 74px 190px 1fr auto;
  gap: 26px; align-items: center; padding: 22px 8px;
  transition: background 300ms var(--ease), padding 300ms var(--ease);
}
.row__link:hover { background: var(--paper-2); padding-left: 18px; padding-right: 18px; }
.row__num {
  font-family: var(--display); font-size: 40px; line-height: 1;
  color: var(--rule-dark); transition: color 300ms var(--ease);
  font-variant-numeric: lining-nums; letter-spacing: -0.02em;
}
.row:hover .row__num { color: var(--spot-bright); }
.row__art { display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--paper-3); }
.row__art img { width: 100%; height: 100%; object-fit: cover; transition: transform 520ms var(--ease); }
.row:hover .row__art img { transform: scale(1.06); }
.row__body { display: block; min-width: 0; }
.row__title {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(21px, 1.9vw, 28px); line-height: 1.2;
  letter-spacing: -0.008em; margin-top: 7px;
  transition: color 260ms ease;
}
.row:hover .row__title { color: var(--spot); }
.row__sum { display: block; color: var(--muted); font-size: 16px; margin-top: 8px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.row__len { font-family: var(--mono); font-size: 12px; color: var(--faint); white-space: nowrap; }
@media (max-width: 860px) {
  .row__link { grid-template-columns: 46px 1fr; gap: 16px; padding: 18px 6px; }
  .row__num { font-size: 26px; }
  .row__art { display: none; }
  .row__len { display: none; }
}

@media (max-width: 860px) { .pull__fig { max-width: 100%; } }