/* =====================================================
   warpas.pl — podcast episode page (production)

   Promoted from the sandbox on 2026-08-15. Self-contained
   on purpose: the base layer (fonts, reset, tokens, side
   nav, footer) is inlined here rather than shared with
   homepage.css, because that file is scoped to
   [data-layout="home"] and the two pages must be able to
   diverge without breaking each other.

   EVERY rule below is scoped to the exact value
   [data-layout="podcast-episode"]. Never widen this to a
   prefix match: stylesheet_link_tag :app serves every file
   in app/assets/stylesheets on EVERY page, so the scope is
   the only thing keeping these rules off the rest of the
   site. See drafts/2604141907_podcast_pages_visual_upgrade/
   05_sandbox_violation.md.
   ===================================================== */

/* =====================================================
   warpas.pl — homepage
   "The Workshop" layout · desktop-first
   ===================================================== */

/* Instrument Serif shipped as .ttf only — no woff2 available */
@font-face {
  font-family: 'Instrument Serif';
  src: url("/assets/InstrumentSerif-Regular.ttf") format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url("/assets/InstrumentSerif-Italic.ttf") format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url("/assets/Geist-Regular.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url("/assets/Geist-Medium.woff2") format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist';
  src: url("/assets/Geist-SemiBold.woff2") format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url("/assets/JetBrainsMono-Regular.woff2") format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url("/assets/JetBrainsMono-Medium.woff2") format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- TOKENS ---------- */
[data-layout="podcast-episode"] {
  /* Warm paper palette — "Workshop" aesthetic */
  --paper:       #f7f3ea;
  --paper-2:     #efe8db;
  --ink:         #1a1816;
  --ink-2:       #4a4640;
  --ink-3:       #8a8578;
  --rule:        #d8d0bf;
  --rule-soft:   #e8e1d1;

  /* Accents (sub-brand colors used sparingly) */
  --accent:      #f600ac;
  --accent-dim:  rgba(246, 0, 172, 0.13);
  --wba:         #5b3eb8;
  --wba-ink:     #efe8df;
  --pnp-bg:      #172647;
  --pnp-1:       #f600ac;
  --pnp-2:       #efe8df;
  --pnp-3:       #01acf4;

  /* Type */
  --serif:  'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
  --sans:   'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* Layout */
  --rail-w:    260px;
  --page-pad:  clamp(24px, 4vw, 56px);
  --content-max: 780px;

  /* Motion */
  --ease: cubic-bezier(.2, .6, .2, 1);
}

/* Dark palette. The same seven values as homepage.css and podcast_show.css —
   all three must move together, or the theme visibly shifts when navigating
   between pages. Without this block the toggle only recoloured the rail and the
   accents, leaving the page itself on light paper under both themes. */
[data-theme="dark"] [data-layout="podcast-episode"] {
  --paper:       #141311;
  --paper-2:     #1c1a17;
  --ink:         #ede6d6;
  --ink-2:       #b8b0a0;
  --ink-3:       #77716a;
  --rule:        #2a2724;
  --rule-soft:   #232120;
}

/* ---------- RESET / BASE ---------- */
[data-layout="podcast-episode"] *, [data-layout="podcast-episode"] *::before, [data-layout="podcast-episode"] *::after { box-sizing: border-box; }

/* base_site.css:36 styles a bare `header` for the old site — `margin: 2rem 0 3rem`,
   unscoped, so it lands on .mobile-header here too. Zeroed so the rail's violet
   band runs continuously instead of being broken by page-coloured strips. */
[data-layout="podcast-episode"] header { margin: 0; }
[data-layout="podcast-episode"] {
  display: block;
  padding: 0;
  text-align: left;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
[data-layout="podcast-episode"] img, [data-layout="podcast-episode"] svg { display: block; max-width: 100%; }
[data-layout="podcast-episode"] a { color: inherit; text-decoration: none; }
[data-layout="podcast-episode"] button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
[data-layout="podcast-episode"] ul { margin: 0; padding: 0; }

[data-layout="podcast-episode"] .visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
[data-layout="podcast-episode"] .skip-link {
  position: absolute; top: -100px; left: 8px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 4px;
  font-family: var(--mono); font-size: 12px;
}
[data-layout="podcast-episode"] .skip-link:focus { top: 8px; }

/* ---------- SIDE NAV (desktop) ---------- */
[data-layout="podcast-episode"] .side-nav {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--rail-w);
  padding: 32px 24px 24px;
  border-right: 1px solid var(--rule);
  background: var(--paper);
  display: flex; flex-direction: column;
  z-index: 20;
}

[data-layout="podcast-episode"] .brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-size: 20px; line-height: 1;
  color: var(--ink);
  padding: 6px 4px; margin: -6px -4px 24px;
  border-radius: 4px;
  transition: background-color .15s var(--ease);
}
[data-layout="podcast-episode"] .brand:focus-visible,
[data-layout="podcast-episode"] .brand:hover { background: var(--paper-2); outline: none; }
[data-layout="podcast-episode"] .brand-mark { display: grid; place-items: center; width: 28px; height: 28px; }
[data-layout="podcast-episode"] .brand-name { letter-spacing: -0.01em; }

[data-layout="podcast-episode"] .side-nav__controls {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 2px 14px;
  margin: -4px 0 14px;
  border-bottom: 1px solid var(--rule-soft);
}

[data-layout="podcast-episode"] .side-nav__list {
  list-style: none;
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 8px;
}
[data-layout="podcast-episode"] .side-nav__list a {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  align-items: baseline;
  padding: 7px 8px; border-radius: 4px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.01em;
  color: var(--ink-2);
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
[data-layout="podcast-episode"] .side-nav__list a:hover,
[data-layout="podcast-episode"] .side-nav__list a:focus-visible { color: var(--ink); background: var(--paper-2); outline: none; }
[data-layout="podcast-episode"] .side-nav__list a.is-active { color: var(--ink); }
[data-layout="podcast-episode"] .side-nav__list a.is-active .num { color: var(--ink); }
[data-layout="podcast-episode"] .side-nav__list .num { color: var(--ink-3); font-weight: 500; min-width: 24px; flex-shrink: 0; }

[data-layout="podcast-episode"] .side-nav__status {
  margin-top: auto;
  padding-top: 16px; border-top: 1px solid var(--rule-soft);
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--ink-3);
}
[data-layout="podcast-episode"] .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: #43a047;
  box-shadow: 0 0 0 0 rgba(67, 160, 71, 0.6);
  animation: hp-pulse 2.4s var(--ease) infinite;
}
@keyframes hp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(67, 160, 71, 0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(67, 160, 71, 0); }
  100% { box-shadow: 0 0 0 0 rgba(67, 160, 71, 0); }
}

/* ---------- MOBILE HEADER (hidden on desktop) ---------- */
[data-layout="podcast-episode"] .mobile-header,
[data-layout="podcast-episode"] .mobile-menu { display: none; }

/* ---------- MAIN ---------- */
[data-layout="podcast-episode"] main {
  margin-left: max(var(--rail-w), calc((100vw + var(--rail-w) - var(--content-max) - var(--page-pad) * 2) / 2));
  margin-right: 0;
  padding: 0 var(--page-pad);
  max-width: calc(var(--content-max) + var(--page-pad) * 2);
}

[data-layout="podcast-episode"] .section { padding: 64px 0 24px; }
[data-layout="podcast-episode"] .section--hero { padding-top: 88px; }

[data-layout="podcast-episode"] .section__kicker {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 18px;
}
[data-layout="podcast-episode"] .section__kicker .num { color: var(--ink-2); margin-right: 6px; font-weight: 500; }

/* ---------- HERO ---------- */
[data-layout="podcast-episode"] .hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5.2vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 16ch;
  text-wrap: pretty;
}
[data-layout="podcast-episode"] .hero__title em {
  font-style: italic;
  color: var(--ink);
  background: linear-gradient(transparent 60%, rgba(246, 0, 172, 0.14) 60%);
}
[data-layout="podcast-episode"] .hero__lede {
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 52ch;
  text-wrap: pretty;
}
[data-layout="podcast-episode"] .hero__cta {
  margin-top: 32px;
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
[data-layout="podcast-episode"] .hero__cta-note {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

/* ---------- BUTTON ---------- */
[data-layout="podcast-episode"] .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  border: 1px solid var(--ink); border-radius: 999px;
  transition: transform .15s var(--ease), background-color .15s var(--ease), color .15s var(--ease);
}
[data-layout="podcast-episode"] .btn:hover { transform: translateY(-1px); }
[data-layout="podcast-episode"] .btn:focus-visible { outline: 2px solid var(--pnp-1); outline-offset: 3px; }
[data-layout="podcast-episode"] .btn--solid { background: var(--ink); color: var(--paper); }
[data-layout="podcast-episode"] .btn--solid:hover { background: var(--ink-2); }
[data-layout="podcast-episode"] .btn--sm { padding: 8px 14px; font-size: 13px; }
[data-layout="podcast-episode"] .btn--lg { padding: 14px 22px; font-size: 15px; }

/* ---------- DESK GRID ---------- */
[data-layout="podcast-episode"] .desk-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 14px;
}
[data-layout="podcast-episode"] .card {
  position: relative;
  padding: 22px;
  background: var(--paper-2);
  border: 1px solid var(--rule-soft);
  border-radius: 6px;
  transition: transform .18s var(--ease), border-color .18s var(--ease);
  display: flex; flex-direction: column; gap: 10px;
}
[data-layout="podcast-episode"] .card:hover { transform: translateY(-2px); border-color: var(--rule); }

[data-layout="podcast-episode"] .card__meta {
  margin: 0;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-3);
}
[data-layout="podcast-episode"] .card__title {
  margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: 24px; line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
[data-layout="podcast-episode"] .card__body {
  margin: 0;
  font-size: 14px; line-height: 1.55;
  color: var(--ink-2);
  max-width: 38ch;
}
[data-layout="podcast-episode"] .card__footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
[data-layout="podcast-episode"] .card__cta {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 12.5px;
  padding: 6px 0;
}
[data-layout="podcast-episode"] .card__cta-label {
  display: block;
  font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
  opacity: 0.65; margin-bottom: 2px;
}
[data-layout="podcast-episode"] .play {
  width: 32px; height: 32px; border-radius: 50%;
  background: currentColor; color: var(--wba);
  display: grid; place-items: center;
  font-size: 11px;
  flex-shrink: 0;
}
[data-layout="podcast-episode"] .play::before { content: '▶'; color: var(--wba-ink); position: absolute; }
[data-layout="podcast-episode"] .card--wba .play { background: var(--wba-ink); color: var(--wba); }
[data-layout="podcast-episode"] .card--wba .play::before { content: '▶'; color: var(--wba); position: static; }

[data-layout="podcast-episode"] .card__list {
  list-style: none;
  display: flex; flex-direction: column; gap: 1px;
  margin-top: 4px;
}
[data-layout="podcast-episode"] .card__list li a {
  display: grid; grid-template-columns: auto 1fr; gap: 10px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-size: 13px;
  transition: transform .15s var(--ease);
}
[data-layout="podcast-episode"] .card__list li:first-child a { border-top: 0; }
[data-layout="podcast-episode"] .card__list li a:hover { transform: translateX(3px); }
[data-layout="podcast-episode"] .ep-num, [data-layout="podcast-episode"] .post-date {
  font-family: var(--mono); font-size: 11px;
  opacity: 0.7; letter-spacing: 0.05em;
}
[data-layout="podcast-episode"] .ep-title, [data-layout="podcast-episode"] .post-title { font-weight: 400; }

[data-layout="podcast-episode"] .card__list--plain li a { border-top: none; padding: 6px 0; }

[data-layout="podcast-episode"] .card__link {
  margin-top: auto;
  font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  padding-top: 4px;
}
[data-layout="podcast-episode"] .card__link:hover { color: var(--ink); }

[data-layout="podcast-episode"] .card__quote {
  margin: 0;
  font-family: var(--serif); font-style: italic;
  font-size: 16px; line-height: 1.4;
  color: var(--ink-2);
  max-width: 32ch;
}

/* --- WBA hero card (deep purple) --- */
[data-layout="podcast-episode"] .card--wba {
  background: var(--wba);
  color: var(--wba-ink);
  border: 1px solid var(--wba);
}
[data-layout="podcast-episode"] .card--wba .card__meta,
[data-layout="podcast-episode"] .card--wba .card__body { color: rgba(239, 232, 223, 0.82); }
[data-layout="podcast-episode"] .card--wba .card__title {
  color: var(--wba-ink);
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(32px, 3.5vw, 44px); line-height: 0.96;
  letter-spacing: -0.025em;
}
[data-layout="podcast-episode"] .card--wba .card__title s {
  text-decoration-thickness: 3px;
  text-decoration-color: var(--wba-ink);
}
[data-layout="podcast-episode"] .card--wba .card__footer { border-top-color: rgba(239, 232, 223, 0.25); }

/* --- PNP card --- */
[data-layout="podcast-episode"] .card--pnp {
  grid-row: 1 / span 2;
  background: var(--pnp-bg);
  border: 1px solid var(--pnp-bg);
  color: var(--pnp-2);
  overflow: hidden;
  min-height: 340px;
}
[data-layout="podcast-episode"] .card--pnp::after {
  content: '';
  position: absolute; right: -30px; bottom: -30px;
  width: 90px; height: 90px; border-radius: 50%;
  border: 1.5px solid var(--pnp-1);
  opacity: 0.35;
  pointer-events: none;
}
[data-layout="podcast-episode"] .card--pnp .card__meta { color: rgba(207, 218, 240, 0.7); }
[data-layout="podcast-episode"] .card--pnp .card__body { color: rgba(207, 218, 240, 0.85); }
[data-layout="podcast-episode"] .card--pnp .card__title {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 22px; line-height: 1.05;
  letter-spacing: -0.015em;
}
[data-layout="podcast-episode"] .card--pnp .pnp-1 { color: var(--pnp-1); }
[data-layout="podcast-episode"] .card--pnp .pnp-2 { color: var(--pnp-2); font-weight: 400; font-family: var(--serif); font-style: italic; margin: 0 2px; }
[data-layout="podcast-episode"] .card--pnp .pnp-3 { color: var(--pnp-3); }
[data-layout="podcast-episode"] .card--pnp .card__list li a { border-top-color: rgba(255,255,255,0.12); color: var(--pnp-2); }
[data-layout="podcast-episode"] .card--pnp .ep-num { color: var(--pnp-3); opacity: 0.9; }

/* --- Coaching card (stands out) --- */
[data-layout="podcast-episode"] .card--coaching {
  background: var(--paper);
  border: 1px solid var(--ink);
}
[data-theme="dark"] [data-layout="podcast-episode"] .card--coaching { background: var(--paper-2); }
[data-layout="podcast-episode"] .card--coaching .card__title { font-weight: 500; font-size: 22px; }

/* --- Writing / About cards --- */
[data-layout="podcast-episode"] .card--writing,
[data-layout="podcast-episode"] .card--about {
  background: var(--paper);
  border: 1px solid var(--rule);
}
[data-layout="podcast-episode"] .card--writing .card__title,
[data-layout="podcast-episode"] .card--about .card__title { font-size: 20px; }

/* ---------- CTA BAND ---------- */
[data-layout="podcast-episode"] .section--cta { padding: 48px 0 72px; }
[data-layout="podcast-episode"] .cta-band {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: center;
  padding: 36px 40px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 8px;
}
[data-layout="podcast-episode"] .cta-band__title {
  margin: 0 0 10px;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.05; letter-spacing: -0.02em;
}
[data-layout="podcast-episode"] .cta-band__body {
  margin: 0;
  font-size: 15px; line-height: 1.55;
  color: rgba(247, 243, 234, 0.78);
  max-width: 50ch;
}
[data-layout="podcast-episode"] .cta-band__action { text-align: right; }
[data-layout="podcast-episode"] .cta-band .btn--solid {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
[data-layout="podcast-episode"] .cta-band .btn--solid:hover { background: var(--paper-2); }
[data-layout="podcast-episode"] .cta-band__note {
  margin: 10px 0 0;
  font-family: var(--mono); font-size: 11px;
  color: rgba(247, 243, 234, 0.55);
  letter-spacing: 0.05em;
}

/* ---------- FOOTER ---------- */
[data-layout="podcast-episode"] .site-footer {
  margin-left: max(var(--rail-w), calc((100vw + var(--rail-w) - var(--content-max) - var(--page-pad) * 2) / 2));
  margin-right: 0;
  padding: 32px var(--page-pad) 40px;
  border-top: 1px solid var(--rule);
  max-width: calc(var(--content-max) + var(--page-pad) * 2);
}
[data-layout="podcast-episode"] .site-footer__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; flex-wrap: wrap;
  padding: 8px 0;
}
[data-layout="podcast-episode"] .site-footer__row--meta {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
}
[data-layout="podcast-episode"] .site-footer__copy {
  margin: 0;
  font-size: 13px; color: var(--ink-2);
}
[data-layout="podcast-episode"] .site-footer__links a {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-2);
  border-bottom: 1px dotted var(--ink-3);
  padding-bottom: 1px;
}
[data-layout="podcast-episode"] .site-footer__links a:hover { color: var(--ink); border-bottom-color: var(--ink); }
[data-layout="podcast-episode"] .site-footer__tagline {
  margin: 0;
  font-family: var(--serif); font-style: italic;
  font-size: 13px;
  color: var(--ink-3);
  max-width: 52ch;
}

/* ---------- THEME TOGGLE ---------- */
[data-layout="podcast-episode"] .theme-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--mono); font-size: 13px;
  color: var(--ink-2);
  transition: border-color .15s var(--ease);
}
[data-layout="podcast-episode"] .theme-toggle:hover { border-color: var(--ink-3); color: var(--ink); }
[data-layout="podcast-episode"] .theme-toggle:focus-visible { outline: 2px solid var(--pnp-1); outline-offset: 2px; }
[data-layout="podcast-episode"] .theme-toggle__icon { width: 18px; display: grid; place-items: center; font-size: 14px; }
[data-theme="light"] [data-layout="podcast-episode"] .theme-toggle__icon--sun { color: var(--ink); }
[data-theme="light"] [data-layout="podcast-episode"] .theme-toggle__icon--moon { color: var(--ink-3); }
[data-theme="dark"]  [data-layout="podcast-episode"] .theme-toggle__icon--sun { color: var(--ink-3); }
[data-theme="dark"]  [data-layout="podcast-episode"] .theme-toggle__icon--moon { color: var(--ink); }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  [data-layout="podcast-episode"] .side-nav { display: none; }
  [data-layout="podcast-episode"] main,
  [data-layout="podcast-episode"] .site-footer { margin-left: 0; max-width: 100%; }

  [data-layout="podcast-episode"] .mobile-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px var(--page-pad);
    border-bottom: 1px solid var(--rule);
    background: var(--paper);
    position: sticky; top: 0; z-index: 10;
  }
  [data-layout="podcast-episode"] .brand--mobile { font-family: var(--serif); font-size: 22px; }
  [data-layout="podcast-episode"] .menu-toggle {
    width: 40px; height: 40px;
    display: grid; grid-template-rows: repeat(3, 2px);
    align-content: center; justify-content: center; gap: 5px;
  }
  [data-layout="podcast-episode"] .menu-toggle span { display: block; width: 22px; background: var(--ink); }
  [data-layout="podcast-episode"] .mobile-menu {
    display: block;
    padding: 12px var(--page-pad) 20px;
    border-bottom: 1px solid var(--rule);
  }
  [data-layout="podcast-episode"] .mobile-menu[hidden] { display: none; }
  [data-layout="podcast-episode"] .mobile-menu ul {
    list-style: none;
    display: flex; flex-direction: column; gap: 2px;
  }
  [data-layout="podcast-episode"] .mobile-menu a {
    display: block; padding: 10px 4px;
    font-family: var(--mono); font-size: 14px;
    color: var(--ink-2);
    border-bottom: 1px solid var(--rule-soft);
  }

  [data-layout="podcast-episode"] .desk-grid { grid-template-columns: 1fr 1fr; }
  [data-layout="podcast-episode"] .card--pnp { grid-row: auto; grid-column: 1 / -1; min-height: auto; }
}
@media (max-width: 640px) {
  [data-layout="podcast-episode"] .section--hero { padding-top: 40px; }
  [data-layout="podcast-episode"] .desk-grid { grid-template-columns: 1fr; }
  [data-layout="podcast-episode"] .cta-band { grid-template-columns: 1fr; padding: 28px; }
  [data-layout="podcast-episode"] .cta-band__action { text-align: left; }
  [data-layout="podcast-episode"] .site-footer__row { flex-direction: column; align-items: flex-start; }
}

/* ---------- PRINT ---------- */
@media print {
  [data-layout="podcast-episode"] .side-nav,
  [data-layout="podcast-episode"] .mobile-header,
  [data-layout="podcast-episode"] .mobile-menu,
  [data-layout="podcast-episode"] .section--cta { display: none; }
  [data-layout="podcast-episode"] main, [data-layout="podcast-episode"] .site-footer { margin-left: 0; }
}

/* ---------- DARK MODE FIXES ---------- */
/* CTA band has background: var(--ink) which becomes light in dark mode;
   body text must darken accordingly */
[data-theme="dark"] [data-layout="podcast-episode"] .cta-band__body {
  color: rgba(26, 24, 22, 0.78);
}
[data-theme="dark"] [data-layout="podcast-episode"] .cta-band__note {
  color: rgba(26, 24, 22, 0.55);
}

/* ---------- LOCALE SWITCH ---------- */
[data-layout="podcast-episode"] .locale-switch {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
[data-layout="podcast-episode"] .locale-switch__item {
  padding: 2px 4px;
  color: var(--ink-3);
  border-radius: 3px;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
[data-layout="podcast-episode"] .locale-switch__item:hover,
[data-layout="podcast-episode"] .locale-switch__item:focus-visible {
  color: var(--ink);
  background: var(--paper-2);
  outline: none;
}
[data-layout="podcast-episode"] .locale-switch__item.is-active {
  color: var(--ink);
  font-weight: 500;
}
[data-layout="podcast-episode"] .locale-switch__sep {
  color: var(--ink-3);
  opacity: 0.6;
  font-size: 10px;
}
[data-layout="podcast-episode"] .locale-switch--mobile {
  margin: 0; padding: 0; border-bottom: 0;
}
[data-layout="podcast-episode"] .mobile-header__right {
  display: flex; align-items: center; gap: 14px;
}
[data-layout="podcast-episode"] .mobile-header__prefs {
  display: flex; align-items: center; gap: 12px;
}

/* ---------- NEUTRALISE FADE.JS ---------- */
/* fade.js sets header/section/footer to opacity:0 and animates in via .visible.
   On this page that causes a flash when clicking in-page anchors. */
[data-layout="podcast-episode"] header,
[data-layout="podcast-episode"] section,
[data-layout="podcast-episode"] footer {
  opacity: 1 !important;
  transform: none !important;
  transition: background-color .25s var(--ease), color .25s var(--ease) !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
}
@media (max-width: 640px) {
}



/* =====================================================
   SIDEBAR COLOUR  (D12)
   The sidebar has no colours of its own upstream — it
   reads --paper / --ink / --rule directly, so recolouring
   it there would repaint the whole page. These tokens sit
   in between, and only this page defines them.

   Everything in this file is scoped to the exact value
   [data-layout="podcast-episode"], never the family prefix
   [data-layout="podcast-episode"]. The prefix was leaking these
   rules onto every other page — the home page renders
   .ep-title as an episode link, and this file styles it as
   a 38px serif <h1>. A page-specific sheet gets a
   page-specific scope.
   ===================================================== */

/* #5c3699 is the WBA logo violet sampled straight from the artwork
   (rgb 92, 54, 153) — the rail matches the show's own colour, and keeps it in
   dark mode too: the earlier #1e1452 made the rail and the artwork two
   different violets. The ink opacities still soften for dark, so both blocks
   stay written out. */
[data-layout="podcast-episode"] {
  --rail-bg:     #5c3699;
  --rail-ink:    #efe8df;
  --rail-ink-2:  rgba(239, 232, 223, 0.78);
  --rail-ink-3:  rgba(239, 232, 223, 0.45);
  --rail-rule:   rgba(239, 232, 223, 0.14);
  --rail-hover:  rgba(239, 232, 223, 0.08);
}
/* Dark mode takes #5c3699 down to a night value of the same hue rather than
   reusing the light one, which sat at 2.16:1 against #141311 paper and read as
   a lit slab on a dark page. Cream on #2f1b5c is 12.1:1. --rail-ink-3 is lifted
   from 0.40 so the status line stays legible. */
[data-theme="dark"] [data-layout="podcast-episode"] {
  --rail-bg:     #2f1b5c;
  --rail-ink:    #efe8df;
  --rail-ink-2:  rgba(239, 232, 223, 0.76);
  --rail-ink-3:  rgba(239, 232, 223, 0.52);
  --rail-rule:   rgba(239, 232, 223, 0.12);
  --rail-hover:  rgba(239, 232, 223, 0.07);
}

/* --- Sidebar, repointed at the tokens ------------------------------- */
[data-layout="podcast-episode"] .side-nav {
  background: var(--rail-bg);
  border-right: 1px solid var(--rail-rule);
}
[data-layout="podcast-episode"] .brand { color: var(--rail-ink); }
[data-layout="podcast-episode"] .brand:hover,
[data-layout="podcast-episode"] .brand:focus-visible { background: var(--rail-hover); }

[data-layout="podcast-episode"] .side-nav__controls { border-bottom-color: var(--rail-rule); }

[data-layout="podcast-episode"] .side-nav__list a { color: var(--rail-ink-2); }
[data-layout="podcast-episode"] .side-nav__list a:hover,
[data-layout="podcast-episode"] .side-nav__list a:focus-visible {
  color: var(--rail-ink);
  background: var(--rail-hover);
}
[data-layout="podcast-episode"] .side-nav__list a.is-active,
[data-layout="podcast-episode"] .side-nav__list a.is-active .num { color: var(--rail-ink); }
[data-layout="podcast-episode"] .side-nav__list .num { color: var(--rail-ink-3); }

[data-layout="podcast-episode"] .side-nav__status {
  border-top-color: var(--rail-rule);
  color: var(--rail-ink-3);
}

/* Locale switch + theme toggle live inside the sidebar */
[data-layout="podcast-episode"] .side-nav .locale-switch__item,
[data-layout="podcast-episode"] .side-nav .locale-switch__sep { color: var(--rail-ink-3); }
[data-layout="podcast-episode"] .side-nav .locale-switch__item:hover,
[data-layout="podcast-episode"] .side-nav .locale-switch__item:focus-visible {
  color: var(--rail-ink);
  background: var(--rail-hover);
}
[data-layout="podcast-episode"] .side-nav .locale-switch__item.is-active { color: var(--rail-ink); }

[data-layout="podcast-episode"] .side-nav .theme-toggle {
  border-color: var(--rail-rule);
  color: var(--rail-ink-2);
}
[data-layout="podcast-episode"] .side-nav .theme-toggle:hover {
  border-color: var(--rail-ink-3);
  color: var(--rail-ink);
}
[data-theme="light"] [data-layout="podcast-episode"] .side-nav .theme-toggle__icon--sun,
[data-theme="dark"]  [data-layout="podcast-episode"] .side-nav .theme-toggle__icon--moon { color: var(--rail-ink); }
[data-theme="light"] [data-layout="podcast-episode"] .side-nav .theme-toggle__icon--moon,
[data-theme="dark"]  [data-layout="podcast-episode"] .side-nav .theme-toggle__icon--sun { color: var(--rail-ink-3); }

/* --- Mobile header + menu replace the sidebar under 1024px ----------
   Without this the colour would simply vanish on phones. */
@media (max-width: 1024px) {
  [data-layout="podcast-episode"] .mobile-header,
  [data-layout="podcast-episode"] .mobile-menu {
    background: var(--rail-bg);
    border-bottom-color: var(--rail-rule);
  }
  [data-layout="podcast-episode"] .brand--mobile { color: var(--rail-ink); }
  [data-layout="podcast-episode"] .menu-toggle span { background: var(--rail-ink); }
  [data-layout="podcast-episode"] .mobile-menu a {
    color: var(--rail-ink-2);
    border-bottom-color: var(--rail-rule);
  }
  [data-layout="podcast-episode"] .mobile-menu a[aria-current="page"] { color: var(--rail-ink); }
  [data-layout="podcast-episode"] .mobile-header .locale-switch__item,
  [data-layout="podcast-episode"] .mobile-header .locale-switch__sep { color: var(--rail-ink-3); }
  [data-layout="podcast-episode"] .mobile-header .locale-switch__item.is-active { color: var(--rail-ink); }
  [data-layout="podcast-episode"] .mobile-header .theme-toggle {
    border-color: var(--rail-rule);
    color: var(--rail-ink-2);
  }
}

/* =====================================================
   PAGE COMPONENTS
   ===================================================== */

[data-layout="podcast-episode"] {
  --wba-dim:    rgba(91, 62, 184, 0.10);
  --icon-hover: #2a1d7e;
  --icon-glow:  rgba(42, 29, 126, 0.45);
}
[data-theme="dark"] [data-layout="podcast-episode"] {
  --wba-dim:    rgba(139, 112, 232, 0.16);
  --wba-on-dark: #a88ef0;
  --icon-hover: #a084e8;
  --icon-glow:  rgba(160, 132, 232, 0.55);
}

/* WBA violet is too dark to read on the dark paper — lighten it there. */
[data-layout="podcast-episode"] .episode-page { --wba-accent: var(--wba); }
[data-theme="dark"] [data-layout="podcast-episode"] .episode-page { --wba-accent: var(--wba-on-dark); }

[data-layout="podcast-episode"] .episode-page {
  padding: 40px 0 0;
  display: flex;
  flex-direction: column;
}

/* ---------- BREADCRUMB ---------- */
[data-layout="podcast-episode"] .breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}
[data-layout="podcast-episode"] .breadcrumb-section { color: var(--ink-2); }
[data-layout="podcast-episode"] a.breadcrumb-section { margin-left: 5px; transition: color .15s var(--ease); }
[data-layout="podcast-episode"] a.breadcrumb-section:hover { color: var(--wba-accent); }
[data-layout="podcast-episode"] .breadcrumb-sep { margin: 0 7px; opacity: 0.35; font-size: 12px; letter-spacing: 0; }
[data-layout="podcast-episode"] .breadcrumb-current { color: var(--wba-accent); }

/* ---------- MINI EPISODE NAV (top) ---------- */
[data-layout="podcast-episode"] .ep-nav-mini {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 0 9px;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  margin-bottom: 26px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.04em; color: var(--ink-3);
}
[data-layout="podcast-episode"] .mini-link {
  color: var(--ink-3); white-space: nowrap;
  transition: color .15s var(--ease);
}
[data-layout="podcast-episode"] a.mini-link:hover { color: var(--wba-accent); }
[data-layout="podcast-episode"] .mini-prev,
[data-layout="podcast-episode"] .mini-next {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
[data-layout="podcast-episode"] .mini-next { text-align: right; }
[data-layout="podcast-episode"] .mini-off { opacity: 0.4; cursor: default; }
[data-layout="podcast-episode"] .mini-all {
  color: var(--wba-accent); white-space: nowrap;
  letter-spacing: 0.10em; text-transform: uppercase;
  font-size: 9px; padding: 0 2px;
}
[data-layout="podcast-episode"] .mini-sep { opacity: 0.3; }

/* ---------- EPISODE HEADER ----------
   Logo left, code+date and title stacked to its right — but as GRID COLUMNS,
   not floats. That distinction is the whole fix: a float only shortens the
   line boxes beside it, so a long title spilled its last line back underneath
   the logo. A grid column is a hard edge the text cannot cross, so every line
   of every title keeps the same left edge no matter how long it runs.

   Below that, the actions sit at the page's own left edge with each label
   directly above the row it names. */
[data-layout="podcast-episode"] .ep-header {
  --splash-size: 116px;
  margin-bottom: 12px;
}

[data-layout="podcast-episode"] .ep-identity {
  display: grid;
  grid-template-columns: var(--splash-size) 1fr;
  column-gap: 24px;
  align-items: start;
}
[data-layout="podcast-episode"] .ep-splash {
  width: var(--splash-size); height: var(--splash-size);
  border-radius: 12px;
  object-fit: cover;
}
/* No logo (fallback missing) — the text takes the whole row rather than
   sitting in an empty indent. */
[data-layout="podcast-episode"] .ep-identity:not(:has(.ep-splash)) { grid-template-columns: 1fr; }
[data-layout="podcast-episode"] .ep-identity-text { min-width: 0; }

/* Code + date sit tight above the title — they read as one unit. */
[data-layout="podcast-episode"] .ep-top-row {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px;
  margin-bottom: 6px;
}
[data-layout="podcast-episode"] .ep-number {
  font-family: var(--mono); font-size: 15px; font-weight: 500;
  color: var(--wba-accent); letter-spacing: 0.04em;
}
[data-layout="podcast-episode"] .ep-date {
  font-family: var(--mono); font-size: 13px;
  color: var(--ink-3); letter-spacing: 0.02em;
}
/* No play count — D4: listens are hand-imported and go stale, so they order
   the list page but are never displayed. */

/* `margin: 0` is load-bearing: the reset above zeroes `ul` but never the
   headings, so the browser's own `h1 { margin-block-start: 0.67em }` was
   adding ~25px above the title — which is why tuning .ep-top-row's 6px
   bottom margin appeared to do nothing. The 6px below is now the whole gap. */
[data-layout="podcast-episode"] .ep-title {
  margin: 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.1; letter-spacing: -0.02em;
  color: var(--ink); text-wrap: pretty;
}

/* Actions — labels stack above their own row, all flush left with the page. */
[data-layout="podcast-episode"] .ep-actions { margin-top: 32px; }
[data-layout="podcast-episode"] .ep-action-label {
  display: block;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 10px;
}
[data-layout="podcast-episode"] .ep-action-row {
  display: flex; align-items: center; gap: 10px;
}
/* Listening is what the page is for — double-size buttons. */
[data-layout="podcast-episode"] .ep-action-row--listen { gap: 14px; }
[data-layout="podcast-episode"] .ep-action-row--listen .icon-btn { --icon-btn-size: 68px; }
[data-layout="podcast-episode"] .ep-action-row--listen .icon-btn svg { width: 32px; height: 32px; }
/* Breathing room between the two groups, plus the positioning context the
   "copied!" feedback needs. */
[data-layout="podcast-episode"] .ep-action-row--listen + .ep-action-label { margin-top: 26px; }
[data-layout="podcast-episode"] .ep-action-row--share { position: relative; }

/* No .play-btn — the mockup's ▶ button is dropped (D8): there is no audio to
   play, only platform links. */

[data-layout="podcast-episode"] .icon-btn {
  --icon-btn-size: 34px;
  width: var(--icon-btn-size); height: var(--icon-btn-size);
  border-radius: 50%;
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
[data-layout="podcast-episode"] .icon-btn svg {
  width: 16px; height: 16px;
  fill: var(--ink-3);
  transition: fill .3s, filter .3s;
}
/* Hover behaviour copied from podcasts.css (fill swap + glow), retinted from
   its production blue to the mockup's purple, per mode (D10). */
[data-layout="podcast-episode"] .icon-btn:hover { border-color: var(--wba-accent); background: var(--wba-dim); }
[data-layout="podcast-episode"] .icon-btn:hover svg {
  fill: var(--icon-hover);
  filter: drop-shadow(0 0 6px var(--icon-glow));
}
/* The copy button is stroked, not filled */
[data-layout="podcast-episode"] .icon-btn svg[stroke],
[data-layout="podcast-episode"] .icon-btn use { color: var(--ink-3); }
[data-layout="podcast-episode"] .icon-btn:hover use { color: var(--icon-hover); }

/* Copy-link confirmation (blog.css styles this elsewhere; those rules are
   not scoped to this layout, so the component is restated here) */
[data-layout="podcast-episode"] .clipboard-feedback {
  position: absolute; top: calc(100% + 6px); left: 0;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em;
  white-space: nowrap; pointer-events: none;
  color: var(--wba-accent);
  opacity: 0; transition: opacity .2s var(--ease);
}
[data-layout="podcast-episode"] .clipboard-feedback--visible { opacity: 1; }

/* ---------- DIVIDER + SECTION LABEL ---------- */
[data-layout="podcast-episode"] .ep-divider {
  height: 1px; background: var(--rule-soft);
  margin: 26px 0 28px; border: 0;
}
[data-layout="podcast-episode"] .section-label {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 12px;
}

/* ---------- ABOUT ---------- */
[data-layout="podcast-episode"] .ep-about { margin-bottom: 34px; }
[data-layout="podcast-episode"] .ep-about p {
  font-size: 16.5px; line-height: 1.75; color: var(--ink-2);
  max-width: 74ch; text-wrap: pretty;
}
[data-layout="podcast-episode"] .ep-about p + p { margin-top: 14px; }
[data-layout="podcast-episode"] .ep-about a {
  color: var(--wba-accent);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--wba-accent) 45%, transparent);
  transition: text-decoration-color .15s;
}
[data-layout="podcast-episode"] .ep-about a:hover { text-decoration-color: var(--wba-accent); }

/* Description lists. The base reset zeroes ul padding, so bullets need their
   own marker: an accent dash in the mono face, a quieter cousin of the
   references' `↳`. Numbered lists swap the dash for a zero-padded mono
   number, echoing the sidebar's "00. intro" menu; the markers are split by
   list type so an <ol> never shows both. */
[data-layout="podcast-episode"] .ep-about ul,
[data-layout="podcast-episode"] .ep-about ol { list-style: none; margin: 8px 0 0; padding: 0; max-width: 74ch; }
[data-layout="podcast-episode"] .ep-about ul + p,
[data-layout="podcast-episode"] .ep-about ol + p { margin-top: 14px; }
[data-layout="podcast-episode"] .ep-about li {
  position: relative;
  padding: 4px 0 4px 24px;
  font-size: 16.5px; line-height: 1.65; color: var(--ink-2);
  text-wrap: pretty;
}
[data-layout="podcast-episode"] .ep-about ul > li::before {
  content: "–";
  position: absolute; left: 4px; top: 4px;
  font-family: var(--mono);
  color: var(--wba-accent);
}
/* Emoji bullets (see PodcastsHelper#emoji_lines_to_list): the item's own
   emoji replaces the dash. */
[data-layout="podcast-episode"] .ep-about ul > li[data-marker] { padding-left: 30px; }
[data-layout="podcast-episode"] .ep-about ul > li[data-marker]::before {
  content: attr(data-marker);
  left: 0; font-family: inherit;
}
[data-layout="podcast-episode"] .ep-about ol { counter-reset: wba-item; }
[data-layout="podcast-episode"] .ep-about ol > li { counter-increment: wba-item; padding-left: 36px; }
[data-layout="podcast-episode"] .ep-about ol > li::before {
  content: counter(wba-item, decimal-leading-zero) ".";
  position: absolute; left: 0; top: 4px;
  font-family: var(--mono); font-size: 13px; line-height: calc(1.65 * 16.5px);
  color: var(--wba-accent);
}
[data-layout="podcast-episode"] .ep-about li ul,
[data-layout="podcast-episode"] .ep-about li ol { margin-top: 2px; }

/* ---------- CTA ----------
   The "napisz do mnie" + coaching paragraphs between the `---` rule and the
   references heading. The mockup dropped this block; we keep it (D2+D3). */
[data-layout="podcast-episode"] .ep-cta {
  margin-bottom: 34px;
  padding: 18px 20px;
  border: 1px solid var(--rule-soft);
  border-left: 2px solid var(--wba-accent);
  border-radius: 4px;
  background: var(--paper-2);
}
[data-layout="podcast-episode"] .ep-cta p {
  font-size: 15.5px; line-height: 1.7; color: var(--ink-2);
  max-width: 70ch; text-wrap: pretty;
}
[data-layout="podcast-episode"] .ep-cta p + p { margin-top: 12px; }
[data-layout="podcast-episode"] .ep-cta a {
  color: var(--wba-accent);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--wba-accent) 45%, transparent);
  transition: text-decoration-color .15s;
}
[data-layout="podcast-episode"] .ep-cta a:hover { text-decoration-color: var(--wba-accent); }

/* ---------- REFERENCES ----------
   Rendered from the markdown list as-is; the `↳` marker and the link-on-its-
   own-line treatment are pure CSS, so the files keep plain `-` bullets. */
[data-layout="podcast-episode"] .ep-notes { margin-bottom: 36px; }
[data-layout="podcast-episode"] .ep-notes p {
  font-size: 15.5px; line-height: 1.7; color: var(--ink-2);
  max-width: 70ch; margin-bottom: 16px; text-wrap: pretty;
}
[data-layout="podcast-episode"] .ep-notes strong { color: var(--ink); font-weight: 600; }
[data-layout="podcast-episode"] .ep-notes hr {
  border: 0; border-top: 1px solid var(--rule-soft); margin: 22px 0;
}
[data-layout="podcast-episode"] .ep-notes ul { list-style: none; margin: 0; padding: 0; }
[data-layout="podcast-episode"] .ep-notes li {
  position: relative;
  padding: 10px 0 10px 26px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 14.5px; line-height: 1.5; color: var(--ink-2);
}
[data-layout="podcast-episode"] .ep-notes li::before {
  content: "↳";
  position: absolute; left: 4px; top: 9px;
  font-family: var(--mono); font-size: 11px;
  color: var(--wba-accent);
}
/* Links drop onto their own line beneath the text they belong to. ~42 of the
   50 WBA reference bullets end with their link, so this reads as the mockup's
   two-line row; the handful with a trailing note simply run to three lines. */
[data-layout="podcast-episode"] .ep-notes li a {
  display: block;
  margin-top: 3px;
  font-family: var(--mono); font-size: 12.5px;
  color: var(--wba-accent);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--wba-accent) 45%, transparent);
  overflow-wrap: anywhere;
  transition: text-decoration-color .15s;
}
[data-layout="podcast-episode"] .ep-notes li a:hover { text-decoration-color: var(--wba-accent); }

/* ---------- EPISODE NAV (bottom) ---------- */
[data-layout="podcast-episode"] .ep-nav {
  display: flex; align-items: stretch; gap: 10px;
  border-top: 1px solid var(--rule-soft);
  padding-top: 22px;
}
[data-layout="podcast-episode"] .ep-nav-btn,
[data-layout="podcast-episode"] .ep-nav-jump {
  border: 1px solid var(--rule); border-radius: 6px;
  display: flex; flex-direction: column;
  transition: border-color .15s, background-color .15s;
}
[data-layout="podcast-episode"] .ep-nav-btn {
  flex: 1; min-width: 0;
  padding: 12px 14px; gap: 5px; text-align: left;
}
[data-layout="podcast-episode"] .ep-nav-jump {
  flex: 0 0 auto; width: 92px;
  padding: 12px 10px; gap: 4px; justify-content: center; text-align: left;
}
[data-layout="podcast-episode"] .ep-nav-btn.right,
[data-layout="podcast-episode"] .ep-nav-jump.right { text-align: right; }
[data-layout="podcast-episode"] a.ep-nav-btn:hover,
[data-layout="podcast-episode"] a.ep-nav-jump:hover {
  border-color: var(--wba-accent); background: var(--wba-dim);
}
[data-layout="podcast-episode"] .ep-nav-btn.is-disabled,
[data-layout="podcast-episode"] .ep-nav-jump.is-disabled { opacity: 0.32; cursor: default; }

[data-layout="podcast-episode"] .ep-nav-direction {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
}
[data-layout="podcast-episode"] .ep-nav-jump .ep-nav-direction {
  font-size: 8.5px; letter-spacing: 0.08em; white-space: nowrap;
}
[data-layout="podcast-episode"] .ep-nav-title {
  font-family: var(--serif); font-size: 15px; line-height: 1.3; color: var(--ink);
}
[data-layout="podcast-episode"] .ep-nav-num {
  font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink);
}
[data-layout="podcast-episode"] .ep-nav-all {
  display: flex; align-items: center; justify-content: center;
  padding: 0 16px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--wba-accent); white-space: nowrap; text-align: center;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--wba-accent) 40%, transparent);
  transition: text-decoration-color .15s;
}
[data-layout="podcast-episode"] .ep-nav-all:hover { text-decoration-color: var(--wba-accent); }

/* ---------- RESPONSIVE ----------
   v2's mockup breakpoints (980 / 860 / 720) are folded into the design
   system's 1024 / 640 so the page has one set of breakpoints, not two. */
@media (max-width: 1024px) {
  [data-layout="podcast-episode"] .episode-page { padding-top: 28px; }
  [data-layout="podcast-episode"] .ep-nav-mini { gap: 10px; }
  [data-layout="podcast-episode"] .ep-nav-mini .mini-sep,
  [data-layout="podcast-episode"] .ep-nav-mini .mini-edge { display: none; }
  [data-layout="podcast-episode"] .ep-nav { flex-wrap: wrap; }
  [data-layout="podcast-episode"] .ep-nav-jump { width: auto; flex: 1 0 40%; }
  [data-layout="podcast-episode"] .ep-nav-all { flex: 1 0 100%; order: 9; padding: 6px 0 0; }
}
@media (max-width: 640px) {
  /* The header stacks the same way at every width — only the numbers change.
     Labels move above their rows so the button column keeps the full width. */
  [data-layout="podcast-episode"] .ep-header { --splash-size: 88px; }
  [data-layout="podcast-episode"] .ep-splash { margin-bottom: 16px; }
  /* Logo above the text instead of beside it — 88px of indent is too much
     to give away on a phone. */
  [data-layout="podcast-episode"] .ep-identity { grid-template-columns: 1fr; row-gap: 16px; }
  [data-layout="podcast-episode"] .ep-action-row { flex-wrap: wrap; }
  [data-layout="podcast-episode"] .ep-action-row--listen .icon-btn { --icon-btn-size: 60px; }
  [data-layout="podcast-episode"] .ep-title { max-width: none; }
  [data-layout="podcast-episode"] .ep-nav-btn { flex: 1 0 100%; }
  [data-layout="podcast-episode"] .ep-nav-btn.right { text-align: left; }
}