/* ==========================================================================
   Miss Pepper AI — Hot Bytes (podcast)
   Loaded only on the hub page and on episode pages (inc/podcast.php).

   Layout follows the podcast-landing reference (split hero, action-card row
   straddling the hero edge, checklist section, episode card grid, dark engage
   band, host cards) rendered in Miss Pepper's palette and type: navy field,
   orange as the single accent, Poppins display over DM Sans body.

   Three jobs:
   1. The theme's own podcast furniture.
   2. The brand art motif that stands in for studio photography.
   3. Re-skinning Seriously Simple Podcasting's Castos player, which ships a
      light-mode stylesheet that would otherwise sit as a white slab on the navy
      field. SSP's markup is fixed (its templates are not theme-overridable), so
      every override here is scoped under .mp-pod-player and targets SSP's own
      class names. Keep that scope: unscoped .castos-player rules would also hit
      any player an editor drops into an unrelated page.
   ========================================================================== */

/* ======================================================================
   0. BRAND ART — the waveform panel (template-parts/podcast/wave.php)
   ====================================================================== */
.mp-pod-art {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--mp-panel-border);
  border-radius: var(--mp-radius-panel);
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(0, 111, 190, 0.28), transparent 62%),
    linear-gradient(180deg, #08192a, #05111b);
  box-shadow: var(--mp-shadow-panel);
}
.mp-pod-art--panel { aspect-ratio: 4 / 3; }
.mp-pod-art--band { aspect-ratio: 16 / 9; }

.mp-pod-art__glow {
  position: absolute;
  inset: auto -20% -60% -20%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 107, 0, 0.28), transparent 72%);
  filter: blur(28px);
}
.mp-pod-art__wave {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.2rem, 0.7vw, 0.45rem);
  width: 82%;
  height: 46%;
}
.mp-pod-art__wave span {
  flex: 1 1 0;
  min-width: 0;
  height: var(--h);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--mp-blue-active), rgba(0, 111, 190, 0.45));
}
/* Every fourth bar in the accent, so the motif reads as branded, not generic. */
.mp-pod-art__wave span:nth-child(4n + 3) {
  background: linear-gradient(180deg, var(--mp-orange-hot), rgba(255, 107, 0, 0.5));
}

/* ======================================================================
   1. HERO — copy left, cover art + live player right
   ====================================================================== */
.mp-pod-hero {
  position: relative;
  overflow: hidden;
  /* Bottom padding leaves room for the action row to straddle the edge. */
  padding-block: clamp(3rem, 7vw, 6rem) clamp(7rem, 12vw, 11rem);
  background: var(--mp-surface);
}
.mp-pod-hero__field {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(85% 70% at 12% 8%, rgba(0, 111, 190, 0.26), transparent 60%),
    radial-gradient(70% 60% at 88% 92%, rgba(255, 107, 0, 0.14), transparent 62%),
    linear-gradient(180deg, #061725, var(--mp-navy));
}
/* Concentric sweep, echoing the reference's arc field — pure CSS, no asset. */
.mp-pod-hero__field::after {
  content: "";
  position: absolute;
  right: -22%;
  bottom: -58%;
  width: 92rem;
  height: 92rem;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at center,
      rgba(162, 207, 231, 0.055) 0 1px,
      transparent 1px 5.5rem);
  mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
}
.mp-pod-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
}

.mp-pod-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  font-family: var(--mp-body);
  font-size: clamp(0.72rem, 0.82vw, 0.86rem);
  text-transform: uppercase;
  letter-spacing: var(--mp-tracking-copy);
  color: var(--mp-muted);
}
.mp-pod-hero__dot {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--mp-orange);
  box-shadow: 0 0 0.6rem var(--mp-orange);
}
.mp-pod-hero__title {
  margin: 1rem 0 0;
  font-family: var(--mp-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.4vw, 4.6rem);
  line-height: var(--mp-lh-headline);
  text-transform: uppercase;
  color: #fff;
}
.mp-pod-hero__title span { display: block; }
.mp-pod-hero__desc {
  margin: 1.4rem 0 0;
  max-width: 34rem;
  color: var(--mp-muted);
  font-size: clamp(1rem, 1.15vw, 1.16rem);
  line-height: 1.65;
}
.mp-pod-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 2rem 0 0;
}
.mp-pod-hero__host {
  margin: 1.25rem 0 0;
  color: var(--mp-muted);
  font-size: 0.9rem;
}

.mp-pod-hero__stage { display: grid; gap: 1rem; }
.mp-pod-hero__art {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--mp-panel-border);
  border-radius: clamp(1rem, 1.6vw, 1.5rem);
  background: linear-gradient(180deg, #0a1d2f, #061422);
  box-shadow: var(--mp-shadow-panel);
}
.mp-pod-hero__art img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: clamp(1.5rem, 3vw, 3rem);
}
/* Photographic panel (the studio scene) fills its frame — the padded, contained
   treatment above is for square cover art on a dark plate. */
.mp-pod-hero__art--photo img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  padding: 0;
}

/* Shared photo panel used in the "what's cooking" and engage columns. */
.mp-pod-figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--mp-panel-border);
  border-radius: clamp(1rem, 1.6vw, 1.5rem);
  background: #061422;
  box-shadow: var(--mp-shadow-panel);
}
.mp-pod-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.mp-pod-hero__nowplaying {
  padding: clamp(0.9rem, 1.4vw, 1.2rem);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-panel);
  background: rgba(3, 12, 20, 0.6);
  backdrop-filter: blur(var(--mp-panel-blur));
}
.mp-pod-hero__nplabel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin: 0 0 0.7rem;
  color: var(--mp-muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mp-pod-hero__nplabel a { color: var(--mp-orange); font-weight: 700; }
.mp-pod-hero__nplabel a:hover { color: var(--mp-orange-hot); }
.mp-pod-player--hero { margin-top: 0; }

/* ======================================================================
   2. ACTION ROW — three cards straddling the hero edge
   ====================================================================== */
.mp-pod-actions {
  position: relative;
  z-index: 2;
  margin-top: clamp(-6rem, -8vw, -4.5rem);
  padding-bottom: clamp(2rem, 4vw, 3.5rem);
  background: linear-gradient(180deg, transparent 0 50%, var(--mp-navy) 50%);
}
.mp-pod-actions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mp-pod-action {
  display: grid;
  gap: 0.35rem;
  height: 100%;
  padding: clamp(1.2rem, 1.8vw, 1.6rem);
  border: 1px solid var(--mp-panel-border);
  border-radius: var(--mp-radius-panel);
  background: linear-gradient(180deg, rgba(10, 30, 48, 0.92), rgba(5, 20, 34, 0.92));
  box-shadow: var(--mp-shadow-panel);
  backdrop-filter: blur(var(--mp-panel-blur));
  transition: border-color .22s var(--mp-ease), transform .22s var(--mp-ease);
}
.mp-pod-action:hover { border-color: var(--mp-cta-border); transform: translateY(-3px); }
.mp-pod-action__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.mp-pod-action__title {
  font-family: var(--mp-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.15;
  color: #fff;
}
.mp-pod-action__arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border: 1px solid var(--mp-line);
  border-radius: 50%;
  color: var(--mp-muted);
  font-size: 0.95rem;
  transition: background .22s var(--mp-ease), color .22s var(--mp-ease), border-color .22s var(--mp-ease);
}
.mp-pod-action:hover .mp-pod-action__arrow {
  border-color: transparent;
  background: var(--mp-cta-grad);
  color: #fff;
}
.mp-pod-action__lead {
  color: var(--mp-orange);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mp-pod-action__body {
  margin-top: 0.5rem;
  color: var(--mp-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}
.mp-pod-action__icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.9rem;
}
.mp-pod-action__icon {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border: 1px solid var(--mp-border-subtle);
  border-radius: 50%;
  background: rgba(3, 12, 20, 0.6);
  color: var(--mp-ink);
}

/* ======================================================================
   3. WHAT'S COOKING — checklist left, art right
   ====================================================================== */
.mp-pod-about__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
}
/* Section intro. Deliberately not .mp-lead — see page-hot-bytes.php. */
.mp-pod-lead {
  margin: 1.15rem 0 0;
  max-width: 40rem;
  color: var(--mp-muted);
  font-family: var(--mp-body);
  font-size: clamp(1.02rem, 1.18vw, 1.18rem);
  line-height: 1.6;
}
.mp-pod-lead strong { color: var(--mp-ink); font-weight: 700; }

/* "You Can Expect:" */
.mp-pod-about__sub {
  margin: clamp(1.6rem, 2.6vw, 2.2rem) 0 0;
  font-family: var(--mp-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: #fff;
}

.mp-pod-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1rem, 1.8vw, 1.5rem);
  margin: clamp(1.8rem, 3vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
}
/* Full-sentence items read better stacked than in two columns. */
.mp-pod-checks--stack {
  grid-template-columns: 1fr;
  gap: 0.9rem;
  margin-top: 1.1rem;
}
.mp-pod-checks--stack li { color: var(--mp-muted); line-height: 1.6; }
.mp-pod-checks li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}
.mp-pod-checks strong {
  display: block;
  font-family: var(--mp-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: #fff;
}
.mp-pod-checks__body {
  display: block;
  margin-top: 0.25rem;
  color: var(--mp-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}
.mp-pod-checks__mark {
  position: relative;
  flex: 0 0 auto;
  width: 1.35rem; height: 1.35rem;
  margin-top: 0.12rem;
  border-radius: 50%;
  background: var(--mp-cta-grad);
  box-shadow: 0 0 0 1px var(--mp-cta-border);
}
.mp-pod-checks__mark::after {
  content: "";
  position: absolute;
  left: 0.44rem; top: 0.28rem;
  width: 0.32rem; height: 0.6rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mp-pod-about__who {
  margin: clamp(1.6rem, 2.6vw, 2.2rem) 0 0;
  padding-left: 1rem;
  border-left: 2px solid var(--mp-orange);
  color: var(--mp-muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

/* ======================================================================
   3b. TOPICS — "The Hottest Topics in Marketing"
   ====================================================================== */
.mp-pod-topicgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1rem, 1.8vw, 1.6rem);
  margin: clamp(2rem, 3.5vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
.mp-pod-topic {
  position: relative;
  padding: clamp(1.4rem, 2.2vw, 2rem);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-panel);
  background: var(--mp-card);
  box-shadow: var(--mp-shadow-panel);
}
.mp-pod-topic__num {
  display: block;
  font-family: var(--mp-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--mp-orange);
}
.mp-pod-topic__title {
  margin: 0.7rem 0 0;
  font-family: var(--mp-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.3;
  color: #fff;
}
.mp-pod-topic__body {
  margin: 0.6rem 0 0;
  color: var(--mp-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ======================================================================
   4. EPISODES — section header with a trailing link, then the card grid
   ====================================================================== */
.mp-pod-archive__all { margin: clamp(1.6rem, 2.6vw, 2.2rem) 0 0; }
.mp-pod-archive__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.mp-pod-seeall {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--mp-muted);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mp-pod-seeall:hover { color: var(--mp-orange-hot); }

.mp-pod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: clamp(1.15rem, 2vw, 1.8rem);
  margin-top: clamp(2rem, 3.5vw, 3rem);
}

.mp-pod-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-panel);
  background: var(--mp-card);
  box-shadow: var(--mp-shadow-panel);
  transition: border-color .22s var(--mp-ease), transform .22s var(--mp-ease);
}
.mp-pod-card:hover { border-color: var(--mp-panel-border); transform: translateY(-3px); }

.mp-pod-card__art {
  position: relative;
  display: block;
  overflow: hidden;
  background: #071726;
}
.mp-pod-card__art img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
/* The waveform stand-in already carries its own border/radius — drop both here
   so it sits flush in the card's cropped corner. */
.mp-pod-card__art .mp-pod-art { border: 0; border-radius: 0; box-shadow: none; }

.mp-pod-card__badge {
  position: absolute;
  top: 0.7rem; right: 0.7rem;
  padding: 0.25rem 0.65rem;
  border-radius: 2rem;
  background: var(--mp-cta-grad);
  border: 1px solid var(--mp-cta-border);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mp-pod-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(1rem, 1.5vw, 1.35rem);
}
.mp-pod-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--mp-muted);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mp-pod-card__num {
  padding: 0.16rem 0.55rem;
  border: 1px solid var(--mp-cta-border);
  border-radius: 2rem;
  color: var(--mp-orange);
  font-weight: 700;
  font-size: 0.72rem;
}
.mp-pod-card__sep { opacity: 0.6; }

.mp-pod-card__title {
  margin: 0.6rem 0 0;
  font-family: var(--mp-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.3vw, 1.24rem);
  line-height: 1.25;
  color: #fff;
}
.mp-pod-card__title a:hover { color: var(--mp-orange-hot); }
.mp-pod-card__excerpt {
  margin: 0.65rem 0 0;
  color: var(--mp-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}
.mp-pod-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: auto 0 0;
  padding-top: 1.1rem;
}

/* Secondary action button — quieter than .mp-cta, which is reserved for the
   page's one real ask. */
.mp-pod-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--mp-panel-border);
  border-radius: 2rem;
  background: rgba(7, 27, 43, 0.5);
  color: var(--mp-ink);
  font-family: var(--mp-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: border-color .2s var(--mp-ease), color .2s var(--mp-ease), background .2s var(--mp-ease);
}
.mp-pod-btn:hover { border-color: var(--mp-cta-border); color: #fff; }
.mp-pod-btn svg { flex: 0 0 auto; }
.mp-pod-btn--icon { padding: 0.6rem; border-radius: 50%; }
.mp-pod-btn--yt:hover { border-color: #ff0033; background: rgba(255, 0, 51, 0.12); }

.mp-pod-btn--play {
  border-color: transparent;
  background: var(--mp-cta-grad);
  box-shadow: var(--mp-cta-glow);
  color: #fff;
}
.mp-pod-btn--play:hover { border-color: transparent; filter: brightness(1.06); }
.mp-pod-btn__play {
  width: 0; height: 0;
  border-style: solid;
  border-width: 0.36rem 0 0.36rem 0.6rem;
  border-color: transparent transparent transparent #fff;
}

/* Empty state — before the first episode ships. */
.mp-pod-empty {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  border: 1px dashed var(--mp-panel-border);
  border-radius: var(--mp-radius-panel);
  text-align: center;
}
.mp-pod-empty__head {
  margin: 0;
  font-family: var(--mp-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  color: #fff;
}
.mp-pod-empty__body {
  margin: 0.7rem auto 1.5rem;
  max-width: 38rem;
  color: var(--mp-muted);
}

/* Pagination */
.mp-pod-pager { margin-top: clamp(2rem, 3.5vw, 3rem); }
.mp-pod-pager ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mp-pod-pager a,
.mp-pod-pager span {
  display: inline-block;
  min-width: 2.6rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--mp-border-subtle);
  border-radius: 0.55rem;
  color: var(--mp-muted);
  font-size: 0.9rem;
  text-align: center;
}
.mp-pod-pager a:hover { border-color: var(--mp-cta-border); color: #fff; }
.mp-pod-pager .current { border-color: var(--mp-cta-border); background: var(--mp-cta-grad); color: #fff; font-weight: 700; }

/* ======================================================================
   5. ENGAGE BAND — dark, full-bleed, copy left / art right
   ====================================================================== */
.mp-pod-engage {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 6.5vw, 5.5rem);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(0, 111, 190, 0.24), transparent 60%),
    linear-gradient(180deg, #071b2c, #04101b);
  border-top: 1px solid var(--mp-border-subtle);
}
.mp-pod-engage__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.mp-pod-engage__title {
  margin: 0.6rem 0 0;
  font-family: var(--mp-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
}
.mp-pod-engage__title .mp-accent { display: block; }
.mp-pod-engage__lead {
  margin: 1.1rem 0 0;
  max-width: 38rem;
  color: var(--mp-muted);
  line-height: 1.65;
}
.mp-pod-engage__sub {
  margin: clamp(1.6rem, 2.6vw, 2.2rem) 0 0;
  font-family: var(--mp-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  color: #fff;
}
.mp-pod-engage__listen {
  margin: 0.5rem 0 0;
  color: var(--mp-muted);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mp-pod-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: clamp(1.6rem, 2.6vw, 2.2rem) 0 0;
  padding: 0;
  list-style: none;
}
.mp-pod-sub__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1.2rem;
  border: 1px solid var(--mp-panel-border);
  border-radius: var(--mp-radius-cta);
  background: rgba(7, 27, 43, 0.55);
  color: var(--mp-ink);
  font-weight: 700;
  font-size: 0.9rem;
  transition: border-color .2s var(--mp-ease), transform .2s var(--mp-ease);
}
.mp-pod-sub__link:hover { border-color: var(--mp-cta-border); transform: translateY(-2px); }
.mp-pod-sub__svg { flex: 0 0 auto; }

.mp-pod-feedurl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin: 1.4rem 0 0;
  color: var(--mp-muted);
  font-size: 0.85rem;
}
.mp-pod-feedurl__label { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; }
.mp-pod-feedurl code {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--mp-border-subtle);
  border-radius: 0.45rem;
  background: rgba(3, 12, 20, 0.6);
  color: var(--mp-ink);
  font-size: 0.82rem;
  word-break: break-all;
}

/* ======================================================================
   6. HOSTS
   ====================================================================== */
.mp-pod-hostgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 30rem), 1fr));
  gap: clamp(1.15rem, 2vw, 1.8rem);
  margin-top: clamp(2rem, 3.5vw, 3rem);
}
.mp-pod-host {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  overflow: hidden;
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-panel);
  background: var(--mp-card);
  box-shadow: var(--mp-shadow-panel);
}
.mp-pod-host--lead { border-color: var(--mp-panel-border); }
.mp-pod-host__body { padding: clamp(1.3rem, 2.2vw, 2rem); }
.mp-pod-host__portrait {
  margin: 0;
  background: linear-gradient(180deg, #0a1d2f, #061422);
}
.mp-pod-host__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 15rem;
  object-fit: cover;
  object-position: 50% 25%;
}
/* The Miss Pepper illustration is a transparent PNG on a plate, not a photo —
   contain it so the figure is never cropped through the face. */
.mp-pod-host__portrait--art img {
  object-fit: contain;
  object-position: 50% 100%;
  padding: 1rem 0.5rem 0;
}
.mp-pod-host__face,
.mp-pod-host__mark img {
  width: 4.5rem; height: 4.5rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--mp-panel-border);
}
.mp-pod-host__mark img { object-fit: contain; padding: 0.5rem; background: rgba(3, 12, 20, 0.6); }
.mp-pod-host__name {
  margin: 0;
  font-family: var(--mp-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  color: #fff;
}
.mp-pod-host__role {
  margin: 0.3rem 0 0;
  color: var(--mp-orange);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mp-pod-host__bio { margin: 0.9rem 0 0; color: var(--mp-muted); line-height: 1.65; }
.mp-pod-host__listenlabel {
  margin: 1.4rem 0 0.6rem;
  color: var(--mp-muted);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.mp-pod-host__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mp-pod-host__chips a {
  display: inline-block;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--mp-border-subtle);
  border-radius: 0.5rem;
  color: var(--mp-muted);
  font-size: 0.8rem;
}
.mp-pod-host__chips a:hover { border-color: var(--mp-cta-border); color: #fff; }

/* ======================================================================
   6b. CLOSER — "Because Boring Marketing Deserves to Be Burned"
   ====================================================================== */
.mp-pod-closer {
  padding: clamp(3rem, 6vw, 5.5rem) 0;
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(255, 107, 0, 0.18), transparent 65%),
    linear-gradient(180deg, #071b2c, #04101b);
  border-top: 1px solid var(--mp-border-subtle);
  text-align: center;
}
.mp-pod-closer__title {
  margin: 0;
  font-family: var(--mp-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  color: #fff;
}
.mp-pod-closer__flame { margin-left: 0.35rem; }
.mp-pod-closer__body {
  margin: 1.1rem auto 0;
  max-width: 46rem;
  color: var(--mp-muted);
  line-height: 1.7;
}
.mp-pod-closer__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: clamp(1.6rem, 2.6vw, 2.2rem) 0 0;
}
.mp-pod-closer__tail { color: var(--mp-muted); }

/* ======================================================================
   7. SINGLE EPISODE
   ====================================================================== */
.mp-pod-single__art img { width: 100%; border-radius: var(--mp-radius-panel); }

/* --- Episode hero: pill, title, meta line, artwork stage ---------------- */
.mp-pod-ep {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.4rem, 5vw, 4.5rem) clamp(2.4rem, 5vw, 4rem);
  background: var(--mp-surface);
}
.mp-pod-ep__inner { position: relative; }

.mp-pod-ep__crumb { margin: 0 0 1.4rem; font-size: 0.85rem; }
.mp-pod-ep__crumb a { color: var(--mp-muted); }
.mp-pod-ep__crumb a:hover { color: var(--mp-orange); }

.mp-pod-ep__badge {
  display: inline-block;
  margin: 0;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--mp-panel-border);
  border-radius: 999px;
  background: rgba(3, 12, 20, 0.55);
  color: #fff;
  font-family: var(--mp-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mp-pod-ep__title {
  margin: 1.1rem 0 0;
  max-width: 26ch;
  font-family: var(--mp-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 3.4rem);
  line-height: var(--mp-lh-headline);
  color: #fff;
}

.mp-pod-ep__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem clamp(1.2rem, 2.4vw, 2.4rem);
  margin: clamp(1.2rem, 2.2vw, 1.8rem) 0 0;
  padding: 0;
  list-style: none;
  color: var(--mp-ink);
  font-size: 0.92rem;
}
.mp-pod-ep__meta li { display: flex; gap: 0.4rem; align-items: baseline; }
.mp-pod-ep__metalabel { color: var(--mp-muted); }
.mp-pod-ep__metalabel::after { content: ":"; }
.mp-pod-ep__meta a { color: var(--mp-orange); font-weight: 600; }
.mp-pod-ep__meta a:hover { color: var(--mp-orange-hot); }

.mp-pod-ep__stage {
  position: relative;
  margin: clamp(1.8rem, 3.2vw, 2.6rem) 0 0;
  overflow: hidden;
  border: 1px solid var(--mp-panel-border);
  border-radius: clamp(1rem, 1.6vw, 1.5rem);
  background: linear-gradient(180deg, #0a1d2f, #061422);
  box-shadow: var(--mp-shadow-panel);
}
.mp-pod-ep__stage img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.mp-pod-ep__stage .mp-pod-art { border: 0; border-radius: 0; }
.mp-pod-ep__stage figcaption {
  position: absolute;
  left: clamp(1rem, 2vw, 1.8rem);
  bottom: clamp(1rem, 2vw, 1.8rem);
}

/* The floating "Play right now" control from the reference. */
.mp-pod-playnow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.7rem 1.3rem 0.7rem 0.7rem;
  border: 1px solid var(--mp-panel-border);
  border-radius: 999px;
  background: rgba(6, 20, 34, 0.82);
  backdrop-filter: blur(var(--mp-panel-blur));
  color: #fff;
  font-family: var(--mp-display);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s var(--mp-ease), border-color .2s var(--mp-ease);
}
.mp-pod-playnow:hover { background: rgba(6, 20, 34, 0.95); border-color: var(--mp-cta-border); }
.mp-pod-playnow__icon {
  position: relative;
  flex: 0 0 auto;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: var(--mp-cta-grad);
}
.mp-pod-playnow__icon::after {
  content: "";
  position: absolute;
  left: 55%; top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.36rem 0 0.36rem 0.6rem;
  border-color: transparent transparent transparent #fff;
}

/* --- Player band -------------------------------------------------------- */
.mp-pod-ep__playerband {
  padding-block: clamp(1.4rem, 2.6vw, 2.2rem);
  background: var(--mp-navy);
  border-block: 1px solid var(--mp-border-subtle);
}


/* --- About / listen-on / guests -----------------------------------------
   Every band uses the plain .mp-shell so all the section headings share one
   left edge; the show notes keep their own reading measure via .mp-content. */
.mp-pod-ep__about .mp-pod-notes { margin-top: 1.2rem; }
.mp-pod-ep__listen .mp-pod-sub { margin-top: 1.4rem; }

.mp-pod-guestgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
  margin: clamp(1.6rem, 2.6vw, 2.2rem) 0 0;
  padding: 0;
  list-style: none;
}
.mp-pod-guest {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "mark name" "mark role";
  align-items: center;
  gap: 0 0.9rem;
  padding: clamp(1rem, 1.8vw, 1.4rem);
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-panel);
  background: var(--mp-card);
}
.mp-pod-guest__mark {
  grid-area: mark;
  display: grid;
  place-items: center;
  width: 2.8rem; height: 2.8rem;
  border-radius: 50%;
  background: var(--mp-cta-grad);
  color: #fff;
  font-family: var(--mp-display);
  font-weight: 700;
  text-transform: uppercase;
}
.mp-pod-guest__name {
  grid-area: name;
  font-family: var(--mp-display);
  font-weight: 600;
  color: #fff;
}
.mp-pod-guest__role {
  grid-area: role;
  color: var(--mp-muted);
  font-size: 0.85rem;
  line-height: 1.45;
}
/* A guest with no role given: the name centres against the mark instead of
   sitting on the first of two rows. */
.mp-pod-guest:not(:has(.mp-pod-guest__role)) { grid-template-areas: "mark name"; }

.mp-pod-ep__nav { padding-top: 0; }

.mp-pod-video { margin-top: clamp(2rem, 3.5vw, 3rem); }
.mp-pod-video__title,
.mp-pod-notes__title {
  margin: 0 0 1rem;
  font-family: var(--mp-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  color: #fff;
}
.mp-pod-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--mp-panel-border);
  border-radius: var(--mp-radius-panel);
  background: #000;
}
.mp-pod-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mp-pod-video__link { margin: 1rem 0 0; }

.mp-pod-notes { margin-top: clamp(2rem, 3.5vw, 3rem); }
/* article.css centres .mp-content at its reading measure, which on this column
   leaves the notes floating away from the headings that introduce them. Keep the
   measure, drop the centring, so notes and headings share one left edge. */
.mp-pod-notes .mp-content { margin-inline: 0; }

.mp-pod-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
  margin-top: clamp(2.4rem, 4vw, 3.4rem);
}
.mp-pod-nav__link {
  display: block;
  padding: 1.05rem 1.25rem;
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-panel);
  background: var(--mp-card);
  transition: border-color .2s var(--mp-ease);
}
.mp-pod-nav__link:hover { border-color: var(--mp-cta-border); }
.mp-pod-nav__link--next { text-align: right; }
.mp-pod-nav__label {
  display: block;
  color: var(--mp-muted);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mp-pod-nav__title {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--mp-display);
  font-weight: 600;
  color: #fff;
}
.mp-pod-single__back { margin-top: clamp(1.6rem, 3vw, 2.4rem); }

/* ======================================================================
   8. SSP CASTOS PLAYER — re-skin, scoped
   ====================================================================== */
.mp-pod-player { margin-top: clamp(1.2rem, 2vw, 1.75rem); }

.mp-pod-player .castos-player {
  max-width: none;
  border: 1px solid var(--mp-border-subtle);
  border-radius: var(--mp-radius-panel);
  background: rgba(3, 12, 20, 0.72);
  box-shadow: none;
  color: var(--mp-ink);
  font-family: var(--mp-body);
}
.mp-pod-player .castos-player .player__podcast-title,
.mp-pod-player .castos-player .player__episode-title,
.mp-pod-player .castos-player .playback__timers,
.mp-pod-player .castos-player .playlist__episode-title,
.mp-pod-player .castos-player .playlist__episode-description {
  color: var(--mp-ink);
}
.mp-pod-player .castos-player .player__podcast-title { color: var(--mp-muted); }
.mp-pod-player .castos-player .player__episode-title {
  font-family: var(--mp-display);
  font-weight: 600;
}

/* Controls: SSP's icons are dark-on-light SVG masks; invert them onto navy. */
.mp-pod-player .castos-player .player-btn,
.mp-pod-player .castos-player .play-btn,
.mp-pod-player .castos-player .pause-btn {
  filter: invert(1) brightness(1.7);
}
.mp-pod-player .castos-player .player-btn__speed { filter: none; color: var(--mp-ink); }

.mp-pod-player .castos-player .ssp-progress { background: rgba(162, 207, 231, 0.18); }
.mp-pod-player .castos-player .progress__filled { background: var(--mp-orange); }

.mp-pod-player .castos-player .subscribe-btn,
.mp-pod-player .castos-player .share-btn {
  border: 1px solid var(--mp-panel-border);
  border-radius: 2rem;
  background: transparent;
  color: var(--mp-ink);
}
.mp-pod-player .castos-player .subscribe-btn:hover,
.mp-pod-player .castos-player .share-btn:hover { border-color: var(--mp-cta-border); }

.mp-pod-player .castos-player .player-panel {
  background: var(--mp-card);
  color: var(--mp-ink);
  border-top: 1px solid var(--mp-border-subtle);
}
.mp-pod-player .castos-player .player-panel input,
.mp-pod-player .castos-player .player-panel textarea {
  background: rgba(3, 12, 20, 0.7);
  border: 1px solid var(--mp-border-subtle);
  color: var(--mp-ink);
}

/* SSP's dark-mode skin paints `.player` with a purple gradient and the play
   button red. Neither is in the palette, and neither is reachable by styling
   `.castos-player` alone — they sit on inner nodes with their own rules. */
.mp-pod-player .castos-player .player {
  background-image: none;
  background-color: transparent;
}
/* These controls are CSS masks, so `background-color` IS the glyph colour: the
   round plate is .play-pause-controls, the triangle is .play-btn. Orange plate,
   white glyph — the reverse of SSP's white plate and red glyph. */
.mp-pod-player .castos-player .play-pause-controls { background-color: var(--mp-orange); }
/* The glyph itself is one of SSP's own coloured SVGs, not a mask, so it cannot
   be recoloured with a background rule — brightness(0) flattens it to black and
   invert(1) lifts it to white, leaving the transparency alone. */
.mp-pod-player .castos-player .play-btn,
.mp-pod-player .castos-player .pause-btn {
  background-color: transparent;
  filter: brightness(0) invert(1);
}
.mp-pod-player .castos-player .player-panel,
.mp-pod-player .castos-player .share.player-panel,
.mp-pod-player .castos-player .subscribe.player-panel {
  background-color: var(--mp-card);
}

/* In the hero panel the cover art is already the hero image directly above, so
   the player's own thumb is redundant and eats the width. */
.mp-pod-player--hero .castos-player .player__artwork { display: none; }
.mp-pod-player--hero .castos-player { background: transparent; border: 0; }

/* ======================================================================
   9. RESPONSIVE — mobile-first check at 375 / 390 / 768
   ====================================================================== */
@media (max-width: 1024px) {
  .mp-pod-hero__inner,
  .mp-pod-about__inner,
  .mp-pod-engage__inner { grid-template-columns: 1fr; }
  /* The headline leads on a single column — the art follows it, and only the
     cover image is capped. The stage itself keeps the full width so the player
     inside it has room; SSP's own layout breaks below roughly 20rem. */
  .mp-pod-hero__art { max-width: 22rem; }
  .mp-pod-hero__art--photo { max-width: 34rem; }
  .mp-pod-about__art { max-width: 34rem; }
  .mp-pod-engage__art { max-width: 34rem; }
}

@media (max-width: 960px) {
  /* Host cards give up their split layout before the text column gets too
     narrow to read; the portrait becomes a banner above the copy. */
  .mp-pod-host { grid-template-columns: 1fr; }
  .mp-pod-host__portrait img { min-height: 0; aspect-ratio: 16 / 9; }
  .mp-pod-host__portrait--art img { aspect-ratio: 1 / 1; max-height: 22rem; }
}

@media (max-width: 900px) {
  /* Below the two-column hero the action row no longer has an edge to straddle:
     let it sit as its own band instead of pulling up into the copy. */
  .mp-pod-actions { margin-top: 0; padding-top: clamp(1.5rem, 4vw, 2.5rem); background: var(--mp-navy); }
  .mp-pod-hero { padding-bottom: clamp(3rem, 7vw, 5rem); }
}

@media (max-width: 768px) {
  .mp-pod-nav__link--next { text-align: left; }
  .mp-pod-hero__actions .mp-cta { min-width: 0; width: 100%; }
  .mp-pod-archive__head { align-items: flex-start; }
  /* SSP's player stacks its own way below 600px; make sure nothing pushes the
     page wider than the viewport (standing rule: no horizontal scroll ≤768).
     min-width:0 lets the flex/grid children actually shrink instead of holding
     their content width and spilling. */
  .mp-pod-player .castos-player,
  .mp-pod-player .castos-player .player,
  .mp-pod-player .castos-player .player__body,
  .mp-pod-player .castos-player .play-progress { max-width: 100%; min-width: 0; }
  .mp-pod-player .castos-player { overflow: hidden; }
}

@media (max-width: 600px) {
  /* Episode meta reads as a stacked list rather than a wrapping row, and the
     floating play control shrinks so it never covers half the artwork. */
  .mp-pod-ep__meta { flex-direction: column; gap: 0.45rem; }
  .mp-pod-playnow { padding: 0.5rem 0.95rem 0.5rem 0.5rem; font-size: 0.85rem; }
  .mp-pod-playnow__icon { width: 1.8rem; height: 1.8rem; }
  .mp-pod-ep__stage img { aspect-ratio: 4 / 3; }
}

@media (max-width: 480px) {
  .mp-pod-hero__nowplaying { padding: 0.75rem; }
  .mp-pod-card__actions { flex-wrap: nowrap; }
  .mp-pod-btn--play { flex: 1 1 auto; justify-content: center; }
  .mp-pod-sub__link { width: 100%; justify-content: center; }
}