/* ==========================================================================
   LearnOn Podcast — design system

   Palette and type carry over from the original Weebly theme; the layout
   language (cards, accent rules, stat strip, pill filters) is the revamp.
     display  Josefin Slab   headings, nav, buttons, numerals
     body     Questrial      running copy
     label    Montserrat     eyebrows, stat captions, pills
   ========================================================================== */

/* ==========================================================================
   Self-hosted webfonts

   These were on the Google Fonts CDN, which meant three round trips before
   any text could paint correctly (HTML -> Google stylesheet -> font files),
   and a visible flash of fallback type on every navigation. Serving the
   woff2 files from the same origin as this stylesheet removes the external
   lookup entirely, so the fonts are usually already in cache by the time
   the second page renders. font-display:swap is kept as the safety net for
   a genuinely cold first load.
   ========================================================================== */

@font-face {
  font-family: 'Josefin Slab';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/josefin-slab-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Josefin Slab';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/josefin-slab-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Josefin Slab';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/josefin-slab-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Questrial';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/questrial-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/montserrat-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-latin-700-normal.woff2') format('woff2');
}

/* --------------------------------------------------- fallback metrics

   Only two of the seven webfonts used to be preloaded, so Montserrat and the
   lighter Josefin weights arrived after first paint and text visibly shifted
   as they swapped in. All seven are preloaded now, and these fallback faces
   cover the remaining gap: each one re-scales the system font the browser
   would otherwise use so its x-height, ascent and descent match the real
   face. If a swap does happen it changes letterforms, not layout.
   size-adjust values are derived from the actual font metrics.
   -------------------------------------------------------------------- */

@font-face {
  font-family: 'Josefin Slab Fallback';
  src: local('Georgia'), local('Times New Roman'), local('serif');
  size-adjust: 76.3%;
  ascent-override: 98.2%;
  descent-override: 32.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Questrial Fallback';
  src: local('Arial'), local('Helvetica'), local('sans-serif');
  size-adjust: 96.4%;
  ascent-override: 85.1%;
  descent-override: 21.8%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Montserrat Fallback';
  src: local('Arial'), local('Helvetica'), local('sans-serif');
  size-adjust: 101.2%;
  ascent-override: 95.6%;
  descent-override: 24.8%;
  line-gap-override: 0%;
}

:root {
  /* ink */
  --ink: #3e3e3e;
  --ink-strong: #1a1a1a;
  --muted: #6f6f6f;
  --nav-idle: #b9b9b9;

  /* accents */
  --plum: #5040ae;
  --plum-soft: #f2f0fa;
  --teal: #24678d;
  --teal-soft: #eef5f9;

  /* section bands, in the order the home page uses them */
  --band-1: #f1eff8;
  --band-2: #c3eff2;
  --band-3: #bfe8fb;
  --band-4: #cbc4ee;

  /* surfaces */
  --bg: #fff;
  --card: #fff;
  --rule: #e0deea;

  --radius: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(32, 24, 72, .06), 0 4px 14px -8px rgba(32, 24, 72, .16);
  --shadow-lift: 0 10px 30px -12px rgba(32, 24, 72, .34), 0 2px 6px rgba(32, 24, 72, .08);
  --shadow-deep: 0 18px 48px -20px rgba(32, 24, 72, .42);

  --container: 1280px;
  --pad: 32px;
  --header-h: 61px;

  --font-display: 'Josefin Slab', 'Josefin Slab Fallback', Georgia, serif;
  --font-body: 'Questrial', 'Questrial Fallback', 'Quattrocento Sans', sans-serif;
  --font-label: 'Montserrat', 'Montserrat Fallback', sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 130px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* episode resources are bare URLs; without this they push past the viewport */
  overflow-wrap: break-word;
}

img { max-width: 100%; height: auto; border: 0; }

a { color: var(--teal); }
a:hover { color: var(--plum); }

:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 2px;
  border-radius: 2px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--plum);
}
.skip-link:focus { left: 16px; top: 16px; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--rule);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--ink-strong);
  text-decoration: none;
  transition: color 200ms ease;
}
.wordmark span { color: var(--plum); transition: color 200ms ease; }
/* "Podcast" stays black while "On" keeps the plum accent */
.wordmark .wordmark__suffix { color: var(--ink-strong); }

/* hover only applies to the header wordmark, which is the linked one */
a.wordmark:hover,
a.wordmark:focus-visible { color: var(--teal); }
a.wordmark:hover span,
a.wordmark:focus-visible span { color: var(--teal); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--ink);
  cursor: pointer;
}
@media (min-width: 861px) { .nav-toggle { display: none; } }

.nav-toggle svg { width: 24px; height: 24px; }

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* nav links get a plum underline that wipes in from the left */
.site-nav a {
  position: relative;
  display: block;
  padding: 8px 12px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--nav-idle);
  text-decoration: none;
  transition: color 200ms ease;
}
.site-nav a::after {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 2px;
  height: 2px;
  background: var(--plum);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms cubic-bezier(.22, 1, .36, 1);
  content: '';
}
.site-nav a:hover,
.site-nav a:focus-visible { color: var(--ink-strong); }
.site-nav a:hover::after,
.site-nav a:focus-visible::after { transform: scaleX(1); }
.site-nav [aria-current='page'] { color: var(--ink-strong); }
.site-nav [aria-current='page']::after { transform: scaleX(1); }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 340px;
  padding: 88px 0;
  border-bottom: 1px solid var(--rule);
  background-color: var(--band-3);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
/* soft plum veil keeps headline contrast steady over any hero art */
.hero::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(241,239,248,.12) 46%, rgba(80,64,174,.10) 100%);
  pointer-events: none;
  content: '';
}
.hero > * { position: relative; z-index: 1; }
.hero--home {
  min-height: 520px;
  padding: 120px 0;
  background-image: url('../img/hero-home.png');
}
.hero--band { background-image: url('../img/hero-band.png'); }

.hero__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
}
.hero__row--center { justify-content: center; text-align: center; }

.hero__inner { max-width: 42rem; margin-left: auto; }
.hero__row--center .hero__inner { max-width: 48rem; margin: 0; }

.hero__badge { flex: 0 0 auto; width: 150px; }

.hero h1 { font-size: clamp(34px, 6vw, 60px); line-height: 1.04; letter-spacing: -.015em; }

.hero__tagline {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: clamp(21px, 3vw, 28px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-strong);
}

.hero__lede {
  margin: 12px auto 0;
  max-width: 36rem;
  font-size: 17px;
  color: var(--ink);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* -------------------------------------------------------------- headings */

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-strong);
  text-wrap: balance;
}

h1 { font-size: clamp(34px, 6vw, 56px); letter-spacing: -.015em; }
h2 { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -.01em; }
h3 { font-size: 25px; }
h4 { font-size: 19px; }

.eyebrow {
  margin: 0;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* the signature: a short plum rule under every section heading */
.section-head { margin-bottom: 44px; }
.section-head--right { text-align: right; }
.section-head h2 { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -.01em; }
.section-head::after {
  display: block;
  width: 88px;
  height: 5px;
  margin-top: 20px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--plum) 0%, var(--plum) 46%, var(--teal) 46%, var(--teal) 100%);
  content: '';
}
.section-head--right::after { margin-left: auto; }

/* ------------------------------------------------------------- sections */

.band { padding: 104px 0; }
@media (max-width: 860px) { .band { padding: 72px 0; } }

.band--1 { background: var(--band-1); }
.band--2 { background: var(--band-2); }
.band--3 { background: var(--band-3); }
.band--4 { background: var(--band-4); }
.band--white { background: var(--bg); }
.band--plum-soft { background: var(--plum-soft); }

/* ---------------------------------------------------------------- prose */

.rich {
  max-width: 100%;
  font-size: 17px;
  line-height: 1.75;
}
@media (min-width: 861px) { .rich { font-size: 18px; } }

.rich > * + * { margin-top: 26px; }
.rich p { margin: 0; }
.rich a { text-decoration: underline; text-underline-offset: 3px; }
.rich strong { color: var(--ink-strong); font-weight: 700; }
.rich--right { margin-left: auto; text-align: right; }

/* jump link with a nudging arrow */
.jump {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-strong);
  text-decoration: underline;
  text-decoration-color: var(--plum);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.jump:hover { color: var(--plum); }
.jump svg { width: 18px; height: 18px; transition: transform 220ms ease; }
.jump:hover svg { transform: translateX(4px); }

.note {
  margin: 0;
  padding: 18px 20px;
  border-left: 3px solid var(--plum);
  border-radius: var(--radius);
  background: var(--plum-soft);
  font-size: 16px;
  line-height: 1.65;
}

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 2px solid var(--plum);
  border-radius: var(--radius);
  background: var(--plum);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 4px 12px -4px rgba(80, 64, 174, .5);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease,
              transform 200ms ease, box-shadow 200ms ease;
}
.btn:hover,
.btn:focus-visible {
  background: #3d3092;
  border-color: #3d3092;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -6px rgba(80, 64, 174, .6);
}

.btn--ghost {
  border-color: var(--ink-strong);
  background: transparent;
  color: var(--ink-strong);
  box-shadow: none;
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: var(--ink-strong);
  border-color: var(--ink-strong);
  color: var(--bg);
  box-shadow: var(--shadow-lift);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.btn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.btn-grid .btn { width: 100%; }

/* ----------------------------------------------------------- stat strip */

.stats {
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  padding: 40px 0;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 16px;
}
@media (min-width: 700px) { .stats__grid { grid-template-columns: repeat(4, 1fr); } }

.stat { text-align: center; }
.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  color: var(--plum);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  display: block;
  margin-top: 8px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------------------------------------------------------------- cards */

.card-grid {
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.card-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  position: relative;
  overflow: hidden;
  padding: 32px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}
.card--link:hover,
.card--link:focus-within {
  transform: translateY(-5px);
  border-color: var(--plum);
  box-shadow: var(--shadow-deep);
}
/* plum edge that wipes down on hover */
.card--edge::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: var(--plum);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 300ms ease;
  content: '';
}
.card--edge:hover::before,
.card--edge:focus-within::before { transform: scaleY(1); }

.card h3 { margin-bottom: 8px; }
.card p { margin: 0 0 12px; line-height: 1.65; }
.card p:last-child { margin-bottom: 0; }
.card__label { margin-bottom: 6px; }

/* team member */
.person {
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-lift);
  transition: transform 260ms ease, box-shadow 260ms ease;
}
.person:hover { transform: translateY(-4px); box-shadow: var(--shadow-deep); }
.person__photo { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.person__body { padding: 34px; }
.person__name { font-size: 30px; }
.person__role {
  margin: 6px 0 0;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--plum);
}
.person__meta {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--band-1);
  font-size: 15px;
  line-height: 1.6;
}
.person__meta b { color: var(--ink-strong); }
.person__fact { margin: 16px 0 0; font-size: 16px; line-height: 1.65; }

/* ------------------------------------------------- sticky filter toolbar */

.toolbar {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  border-bottom: 1px solid var(--rule);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.toolbar__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.pills { margin: 0; }
.pills ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pill {
  padding: 7px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: all 200ms ease;
}
.pill:hover { border-color: var(--plum); color: var(--plum); }
.pill[aria-selected='true'] {
  border-color: var(--plum);
  background: var(--plum);
  color: #fff;
  box-shadow: 0 3px 10px -3px rgba(80, 64, 174, .55);
}

.search { position: relative; width: 100%; }
.search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.search input {
  width: 100%;
  padding: 9px 36px 9px 36px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color 200ms ease;
}
.search input:focus { border-color: var(--plum); }
.search__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  display: none;
  width: 24px;
  height: 24px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.search__clear:hover { color: var(--plum); }
.search.has-value .search__clear { display: block; }

/* ---------------------------------------------------- season + episodes */

.season-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.season-head__text { max-width: 40rem; }
.season-head h2 { margin-top: 8px; }
.season-head p { margin: 14px 0 0; font-size: 18px; line-height: 1.65; }
.season-head__count {
  flex: 0 0 auto;
  padding: 18px 26px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--shadow-card);
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 700;
  line-height: 1;
  color: var(--plum);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.season-head__count span {
  display: block;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

.episode-list { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }

.episode {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.episode:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.episode.is-open { box-shadow: var(--shadow-deep); border-color: var(--plum); }
.episode::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: var(--plum);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 300ms ease;
  content: '';
}
.episode:hover::before,
.episode.is-open::before { transform: scaleY(1); }

.episode__toggle {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 26px 24px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
@media (min-width: 768px) { .episode__toggle { padding: 28px 34px; } }
.episode__toggle { transition: background-color 260ms ease; }
.episode.is-open .episode__toggle { background: var(--plum-soft); }

.episode__num {
  display: none;
  flex: 0 0 auto;
  width: 56px;
  margin-top: 2px;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  color: var(--nav-idle);
  font-variant-numeric: tabular-nums;
  transition: color 260ms ease;
}
@media (min-width: 640px) { .episode__num { display: block; } }
.episode:hover .episode__num,
.episode.is-open .episode__num { color: var(--plum); }

.episode__text { min-width: 0; flex: 1; }
.episode__label {
  display: block;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.episode__title {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-strong);
}
@media (min-width: 768px) { .episode__title { font-size: 23px; } }

.episode__chev {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  color: var(--muted);
  transition: transform 300ms ease, color 300ms ease;
}
.episode.is-open .episode__chev { transform: rotate(180deg); color: var(--plum); }

.episode__body {
  padding: 28px 24px 34px;
  border-top: 1px solid var(--rule);
}
@media (min-width: 768px) { .episode__body { padding: 28px 34px 36px 92px; } }
.episode__body[hidden] { display: none; }

.episode__body .rich { max-width: none; font-size: 16px; }

/* the resource block that closes out an episode */
.resources {
  margin-top: 32px;
  padding: 28px;
  border-radius: var(--radius);
  border-left: 4px solid var(--teal);
  background: var(--teal-soft);
}
.resources + .resources { margin-top: 20px; }
.resources h4 {
  margin: 0;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.resources ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.resources li {
  display: flex;
  gap: 8px;
  font-size: 15px;
  line-height: 1.6;
}
.resources li::before { flex: 0 0 auto; color: var(--plum); content: '\203A'; font-weight: 700; }
.resources a { text-decoration: underline; text-underline-offset: 3px; }

/* Resource lines are bare URLs. Grid and flex children default to
   min-width:auto, which refuses to shrink below the longest unbroken token
   and pushes the whole page sideways — these three rules are what keep the
   catalog inside the viewport on a phone. */
.resources ul,
.guest__links,
.guest-compact ul { grid-template-columns: minmax(0, 1fr); }

.resources li > span,
.guest__links li > span,
.guest-compact li > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.empty {
  padding: 48px 20px;
  border: 1px dashed var(--rule);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--muted);
}
.empty[hidden] { display: none; }

/* --------------------------------------------------------------- guests */

.guest {
  display: grid;
  gap: 20px;
  padding: 36px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
  transition: transform 260ms ease, box-shadow 260ms ease, border-color 260ms ease;
}
.guest:hover {
  transform: translateY(-4px);
  border-color: var(--plum);
  box-shadow: var(--shadow-deep);
}
@media (min-width: 820px) { .guest { grid-template-columns: 15rem 1fr; gap: 32px; } }

.guest__aside { }
.guest__ep {
  display: inline-block;
  margin: 0 0 10px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.guest__ep:hover { color: var(--plum); }
.guest__name { font-size: 27px; }
.guest__topic {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--teal);
}
.guest__bio { margin: 0; font-size: 16px; line-height: 1.75; }

.guest__links { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.guest__links li { display: flex; gap: 8px; font-size: 15px; line-height: 1.6; }
.guest__links li::before { flex: 0 0 auto; color: var(--plum); content: '\203A'; font-weight: 700; }
.guest__links a { text-decoration: underline; text-underline-offset: 3px; }

.guest-compact {
  padding: 20px 22px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.guest-compact:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.guest-compact h4 { font-size: 20px; color: var(--ink-strong); }
.guest-compact__ep {
  display: inline-block;
  margin: 6px 0 0;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.guest-compact__ep:hover { color: var(--plum); }
.guest-compact__role {
  margin: 12px 0 0;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--teal);
}
.guest-compact__bio { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.guest-compact ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.guest-compact li { display: flex; gap: 8px; font-size: 14px; line-height: 1.55; }
.guest-compact li::before { flex: 0 0 auto; color: var(--plum); content: '\203A'; font-weight: 700; }
.guest-compact a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------- newsletters */

.issue-list { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }

.issue {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 26px 28px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.issue:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.issue::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--plum);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 300ms ease;
  content: '';
}
.issue:hover::before { transform: scaleY(1); }
.issue__date {
  margin: 0;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.issue__title {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-strong);
}
.issue__sub { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink); }

/* --------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--band-1);
}
.site-footer__inner {
  display: grid;
  gap: 40px;
  padding: 80px 0 96px;
}
@media (min-width: 861px) {
  .site-footer__inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
    gap: 64px;
    align-items: start;
  }
  /* mirror the brand block: right column reads from the right edge */
  .site-footer__inner > div:last-child { text-align: right; }
  .site-footer__inner > div:last-child .footer-links { justify-content: flex-end; }
}

.site-footer .wordmark { font-size: 24px; }

.social { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background: var(--bg);
  transition: border-color 200ms ease, transform 200ms ease;
}
.social a:hover { border-color: var(--plum); transform: translateY(-2px); }
.social img { width: 20px; height: 20px; object-fit: contain; }

.site-footer p { margin: 0; font-size: 15px; line-height: 1.7; }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.footer-links a {
  font-family: var(--font-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.footer-links a:hover { color: var(--plum); }

.colophon {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-label);
  font-size: 12px;
  color: var(--muted);
}

/* --------------------------------------------------------------- motion */

/* Content is visible by default; `js-anim` is set by an inline snippet in
   <head>, so a blocked script can never leave the page blank. */
.js-anim .reveal { opacity: 0; transform: translateY(10px); }
.reveal { transition: opacity 600ms cubic-bezier(.22, 1, .36, 1), transform 600ms cubic-bezier(.22, 1, .36, 1); }
.js-anim .reveal.is-visible { opacity: 1; transform: none; }

/* Backstop for environments where transitions never advance. */
.reveals-off .reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-anim .reveal { opacity: 1; transform: none; }
  .reveal { transition: none; }
  .episode:hover,
  .issue:hover,
  .card--link:hover,
  .guest-compact:hover,
  .social a:hover { transform: none; }
}

/* ---------------------------------------------------------- breakpoints */

@media (max-width: 860px) {
  .site-header__bar { flex-wrap: wrap; }
  .site-nav {
    display: none;
    width: 100%;
    padding-bottom: 8px;
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a { padding: 12px 0; font-size: 22px; }
  .site-nav a::after { left: 0; right: 0; }

  .hero { min-height: 240px; padding: 48px 0; }
  .hero--home { min-height: 380px; padding: 64px 0; }
  .hero__inner { margin-left: 0; }

  .section-head--right { text-align: left; }
  .section-head--right::after { margin-left: 0; }
  .rich--right { margin-left: 0; text-align: left; }

  .season-head__count { text-align: left; }
}

/* ------------------------------------------------------------ disclaimer */

/* Sits between the intro copy and the first season header, so it needs its
   own edges rather than blending into whichever band follows it. */
.disclaimer {
  max-width: 100%;
  padding: 22px 26px;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--plum);
  border-radius: var(--radius);
  background: var(--plum-soft);
}
.disclaimer p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
}
.disclaimer strong {
  color: var(--ink-strong);
  font-weight: 700;
}

/* ------------------------------------------------- guest block in episode */

/* The guests page used to carry this; it now sits inside each episode body,
   so it needs to read as a distinct panel rather than more episode prose. */
.guest-block {
  margin-top: 32px;
  padding: 28px;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--plum);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-card);
}
.guest-block__eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.guest-block__name {
  margin: 0;
  font-size: 22px;
  color: var(--ink-strong);
}
.guest-block__role {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--teal);
}
.guest-block__bio {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.75;
}
.guest-block__links {
  display: grid;
  gap: 11px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.guest-block__links li {
  display: flex;
  gap: 8px;
  font-size: 15px;
  line-height: 1.6;
}
.guest-block__links li::before {
  color: var(--plum);
  font-weight: 700;
  content: '\2192';
}
.guest-block__links a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------- one-row button strip */

/* Listen Now platform buttons: a single centered row on desktop, each
   button sized to its label so nothing wraps mid-word. Falls back to
   wrapping on narrow screens rather than overflowing. */
.btn-grid--row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.btn-grid--row .btn {
  width: auto;
  min-width: 200px;
  text-align: center;
  white-space: nowrap;
  padding-left: 40px;
  padding-right: 40px;
}