/* =============================================================
   Where The Edge Is — main stylesheet
   One file. Plain CSS. No build step.

   Edit the :root variables below to change colors site-wide.
   Edit class rules to change how a specific component looks.
   ============================================================= */

/* ---------- Design tokens ---------- */

:root {
  /* Palette — LIF Media derived, shifted dark */
  --bg: #0e0f0c;
  --surface: #1a1a1a;
  --fg: #efefef;
  --fg-muted: #a8a89e;
  --accent: #758e63;       /* muted sage — links, play button, focus */
  --accent-warm: #c67155;  /* terracotta clay — hover, warm emphasis */
  --accent-deep: #42682e;  /* deep olive — only on light surfaces */
  --rule: #2a2a26;         /* hairline / borders */

  /* Type stacks */
  --font-serif: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --max-page: 72rem;       /* 1152 px */
  --max-prose: 38rem;      /* ~68ch */
  --max-measure: 44rem;    /* ~76ch */
  --gutter: clamp(1.5rem, 5vw, 4rem);  /* responsive side breathing room */

  /* Spacing rhythm */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-12: 6rem;
  --space-16: 8rem;

  /* Type scale — body copy */
  --text-xxs: 0.72rem;
  --text-xs:  0.8rem;
  --text-sm:  0.9rem;
  --text-base: 1rem;
  --text-md:  1.05rem;
  --text-lg:  1.15rem;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   22px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-sm:     0 1px 2px rgba(0,0,0,0.25);
  --shadow-md:     0 10px 35px rgba(0,0,0,0.4);
  --shadow-lg:     0 25px 70px rgba(0,0,0,0.6);
  --shadow-accent: 0 0 0 3px rgba(117,142,99,0.25);

  /* Light-surface palette (cream sections + hero card) */
  --surface-cream:       #f4f1ea;
  --fg-on-cream:         #1a1a1a;
  --fg-muted-on-cream:   #4a4a44;
  --fg-dim-on-cream:     #6c6c5e;
  --rule-on-cream:       rgba(26,26,26,0.18);

  /* Tinted blacks used in dark variants */
  --bg-deep:    #0a0b08;
  --bg-warm:    #14150f;
  --bg-warm-2:  #16170f;
  --bg-warm-3:  #11120e;

  /* Token aliases for repeating rgba opacities */
  --fg-muted-strong: rgba(168,168,158,0.7);
  --fg-muted-mid:    rgba(168,168,158,0.6);
  --fg-muted-weak:   rgba(168,168,158,0.5);

  /* Button shape tokens (centralised) */
  --btn-pill-pad:    0.75rem 1.4rem;
  --btn-pill-pad-sm: 0.6rem 1.2rem;
  --btn-rect-pad:    0.85rem 1.5rem;
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, picture, svg { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { padding: 0; }

/* ---------- Base ---------- */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 150ms ease;
}
a:hover { color: var(--accent-warm); }

::selection {
  background: var(--accent);
  color: var(--bg);
}

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

/* Hide visually but keep for screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Typography ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.15;
  margin: 0;
}

p { margin: 0 0 var(--space-2) 0; }
p:last-child { margin-bottom: 0; }

.headline-hero {
  font-size: clamp(2.5rem, 6vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.headline-episode {
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  font-style: italic;
  line-height: 1.1;
}

.headline-section {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.eyebrow--accent { color: var(--accent); }

.lead {
  font-size: var(--text-lg);
  line-height: 1.55;
}

.muted { color: var(--fg-muted); }
.dim   { color: var(--fg-muted-strong); }
.fg    { color: var(--fg); }
.accent { color: var(--accent); }
.serif { font-family: var(--font-serif); }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- LIF brand-dot graphic ---------- */
/* The signature green dot. Used as a real circle, not a period. */
.brand-dot {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  background: var(--accent);
  border-radius: 50%;
  margin-left: 0.08em;
  vertical-align: baseline;
  transform: translateY(-0.05em);
}

/* ---------- Wordmark ----------
   The brand lockup: "where the EDGE is" — sans regular for the framing
   words, DM Serif Display italic for the emphasised word "edge". The
   serif italic is intrinsically display-weight, so it reads "cursive
   and bold" against the regular sans. Used at every scale: nav logo,
   hero headline, footer mark. */

.wordmark {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  display: inline;
}
.wordmark__edge {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;        /* DM Serif Display ships at 400 only */
  letter-spacing: -0.01em;
  margin: 0 0.06em 0 0.08em;
  color: inherit;
}
.wordmark__dot {
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  background: var(--accent);
  border-radius: 50%;
  margin-left: 0.18em;
  vertical-align: baseline;
  transform: translateY(-0.05em);
}

/* DM Serif Display Italic for one-word emphasis inside any headline or lead.
   LIF brand pattern: "Stories that inspire". */
.headline-hero em,
.headline-episode em,
.headline-section em,
.lead em,
.eyebrow + p em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--fg);
}

/* On body copy too — italicizes inside .muted paragraphs */
p em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--fg);
}

/* ---------- Layout helpers ---------- */

.page {
  max-width: var(--max-page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.narrow {
  max-width: var(--max-prose);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.measure { max-width: var(--max-measure); }
.prose   { max-width: var(--max-prose); }

.stack > * + * { margin-top: var(--space-4); }
.stack-tight > * + * { margin-top: var(--space-2); }
.stack-loose > * + * { margin-top: var(--space-6); }

.divider {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-8) 0;
}

/* ---------- Header (unified, sticky, mobile-friendly) ----------
   Same header on every page. Logo left, nav centre/right, CTA pill,
   hamburger on mobile. Sticky so it follows scroll. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(14,15,12,0.85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  max-width: var(--max-page);
  margin: 0 auto;
  padding: 0.9rem var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-logo {
  font-size: 1.05rem;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  margin-right: auto;
}
.site-logo:hover { color: var(--accent); }
.site-logo .wordmark__edge { color: var(--accent); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.92rem;
}
.site-nav a {
  color: var(--fg-muted);
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease;
}
.site-nav a:hover {
  color: var(--fg);
  background: rgba(255,255,255,0.05);
}
.site-nav a.is-current { color: var(--fg); }

.site-cta {
  /* Nav-context compact pill — intentionally smaller than .btn-pill so it
     doesn't dominate the header. Shape (pill) and font match .btn-pill. */
  margin-left: var(--space-2);
  padding: 0.6rem 1.2rem;
  background: var(--fg);
  color: var(--bg);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
  white-space: nowrap;
}
.site-cta:hover { background: var(--accent); color: var(--bg); }

/* Hamburger button, hidden on desktop */
.site-nav-toggle {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.site-nav-toggle span {
  position: absolute;
  left: 25%;
  right: 25%;
  height: 1.5px;
  background: var(--fg);
  border-radius: 1px;
  transition: transform 200ms ease, opacity 200ms ease, top 200ms ease;
}
.site-nav-toggle span:nth-child(1) { top: 35%; }
.site-nav-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.site-nav-toggle span:nth-child(3) { top: 65%; }
.site-header.is-open .site-nav-toggle span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.site-header.is-open .site-nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.is-open .site-nav-toggle span:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); }

@media (max-width: 720px) {
  .site-header__inner { padding: 0.75rem var(--space-3); }
  .site-nav,
  .site-cta { display: none; }
  .site-nav-toggle { display: inline-block; }

  /* When open, expand into a vertical mobile panel below the bar */
  .site-header.is-open {
    background: var(--bg);
  }
  .site-header.is-open .site-header__inner {
    flex-wrap: wrap;
  }
  .site-header.is-open .site-nav,
  .site-header.is-open .site-cta {
    display: flex;
    flex-basis: 100%;
    margin: var(--space-2) 0 0;
  }
  .site-header.is-open .site-nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-top: 1px solid var(--rule);
    padding-top: var(--space-2);
  }
  .site-header.is-open .site-nav a {
    padding: 0.85rem 0;
    border-radius: 0;
    text-align: left;
    font-size: 1rem;
  }
  .site-header.is-open .site-cta {
    margin-left: 0;
    text-align: center;
    margin-top: var(--space-2);
  }
}

/* ---------- Footer (rich, multi-column) ---------- */

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: var(--space-12);
  background: #0a0b08;
}

.site-footer__inner {
  max-width: var(--max-page);
  margin: 0 auto;
  padding: var(--space-8) var(--gutter) var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 720px) {
  .site-footer__inner {
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: var(--space-8);
  }
}

.site-footer p { color: var(--fg-muted); font-size: 0.9rem; margin: 0; }
.site-footer a { color: var(--fg-muted); text-decoration: none; transition: color 150ms ease; }
.site-footer a:hover { color: var(--accent); }

.site-footer__brand { display: flex; flex-direction: column; gap: var(--space-2); max-width: 22rem; }
.site-footer .footer-title { font-size: 1.05rem; color: var(--fg); margin: 0; }
.site-footer .footer-title .wordmark__edge { color: var(--accent); }
.site-footer__tagline { line-height: 1.5; }
.site-footer__contact a { color: var(--fg); border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.site-footer__contact a:hover { border-color: var(--accent); color: var(--accent); }

.site-footer__heading {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0 0 var(--space-3);
}

.site-footer__links {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.92rem;
}

.site-footer__socials {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.site-footer__socials a {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--fg-muted);
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}
.site-footer__socials a:hover {
  border-color: var(--accent);
  background: rgba(117,142,99,0.12);
  color: var(--accent);
}
.site-footer__socials svg { width: 1.05rem; height: 1.05rem; }

.site-footer__produced {
  font-size: 0.82rem;
  color: rgba(168,168,158,0.7);
  margin: 0;
}
.site-footer__produced a { color: var(--fg-muted); border-bottom: 1px solid var(--rule); }
.site-footer__produced a:hover { color: var(--accent); border-color: var(--accent); }

.site-footer__bottom {
  border-top: 1px solid var(--rule);
  max-width: var(--max-page);
  margin: 0 auto;
  padding: var(--space-3) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.8rem;
}
@media (min-width: 640px) {
  .site-footer__bottom { flex-direction: row; justify-content: space-between; }
}
.site-footer__bottom p { font-size: 0.8rem; color: rgba(168,168,158,0.55); }

/* ---------- Sections ---------- */

.section {
  padding-block: var(--space-12);
}
.section + .section {
  border-top: 1px solid var(--rule);
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.section-header__meta { font-size: var(--text-sm); color: var(--fg-muted); }

/* Centered intro block (eyebrow + heading + short lede) used at the top
   of "From the guests" and similar sections. */
.section-intro {
  text-align: center;
}
.section-intro > p:last-child {
  max-width: 32rem;
  margin: var(--space-2) auto 0;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  padding: var(--space-16) 0 var(--space-8);
  isolation: isolate;
}

@media (max-width: 640px) {
  .hero { padding: var(--space-8) 0; }
}

/* Two circular LIF-brand motifs behind the wordmark.
   Bottom-right: large muted-sage. Top-right: small terracotta.
   Both very low opacity so they don't compete with the typography. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}
.hero::before {
  width: clamp(20rem, 50vw, 44rem);
  height: clamp(20rem, 50vw, 44rem);
  right: clamp(-20rem, -15vw, -8rem);
  bottom: clamp(-22rem, -18vw, -12rem);
  background: var(--accent);
  opacity: 0.08;
}
.hero::after {
  width: clamp(4rem, 10vw, 9rem);
  height: clamp(4rem, 10vw, 9rem);
  right: clamp(2rem, 10vw, 10rem);
  top: clamp(0.5rem, 6vw, 4.5rem);
  background: var(--accent-warm);
  opacity: 0.18;
}

.hero p.lead {
  margin-top: var(--space-3);
  font-size: 1.15rem;
  color: var(--fg-muted);
  max-width: var(--max-prose);
}

/* Episode-page header gets the same circle treatment, but smaller and more
   restrained — the audio player is the centerpiece here, not the wordmark. */
.ep-page-hero {
  position: relative;
  isolation: isolate;
}
.ep-page-hero::before {
  content: "";
  position: absolute;
  width: clamp(15rem, 35vw, 28rem);
  height: clamp(15rem, 35vw, 28rem);
  right: clamp(-12rem, -10vw, -6rem);
  top: clamp(-8rem, -8vw, -4rem);
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.06;
  pointer-events: none;
  z-index: -1;
}

/* ---------- Listen On ---------- */

.listen-on {
  margin-top: var(--space-4);
}
.listen-on ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  margin: var(--space-2) 0 0 0;
  font-size: 0.9rem;
}
.listen-on .disabled {
  color: rgba(168, 168, 158, 0.5);
  cursor: not-allowed;
}

/* ---------- Episode card ---------- */

.ep-grid {
  list-style: none;
  margin: 0;
  display: grid;
  gap: var(--space-6) var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .ep-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
  .ep-grid { grid-template-columns: 1fr 1fr 1fr; }
  .ep-grid--two { grid-template-columns: 1fr 1fr; }
}

.ep-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.ep-card__art {
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(circle at 30% 35%, rgba(117,142,99,0.18), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(198,113,85,0.10), transparent 55%),
    var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-2);
  position: relative;
}
/* Subtle brand dot in the empty-artwork placeholder so the box reads as
   intentional rather than a missing-image bug. */
.ep-card__art:empty::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 0.85rem; height: 0.85rem;
  border-radius: var(--radius-circle);
  background: var(--accent);
  transform: translate(-50%, -50%);
  opacity: 0.7;
}
.ep-card__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.ep-card:hover .ep-card__art img {
  transform: scale(1.02);
}

.ep-card__title {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--fg);
  margin: var(--space-1) 0 var(--space-1) 0;
  line-height: 1.3;
}
.ep-card:hover .ep-card__title { color: var(--accent); }

.ep-card__meta {
  font-size: 0.85rem;
  color: var(--fg-muted);
}

/* Featured episode card (larger) */
.ep-featured {
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 14px;
  padding: var(--space-4);
  display: grid;
  gap: var(--space-4);
  transition: border-color 200ms ease;
}
.ep-featured:hover { border-color: rgba(117, 142, 99, 0.45); }
@media (min-width: 640px) {
  .ep-featured {
    grid-template-columns: 14rem 1fr;
    padding: var(--space-6);
    align-items: start;
  }
}
.ep-featured .ep-card__art { margin-bottom: 0; }
.ep-featured h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 400;
  color: var(--fg);
  margin: var(--space-2) 0;
  line-height: 1.15;
}
.ep-featured h3 a { color: inherit; }
.ep-featured h3 a:hover { color: var(--accent); }
.ep-featured .summary {
  margin-top: var(--space-3);
  color: var(--fg-muted);
  max-width: var(--max-prose);
}

/* ---------- Topic grid (homepage) ---------- */

.topic-grid {
  list-style: none;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}
@media (min-width: 640px) { .topic-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .topic-grid { grid-template-columns: 1fr 1fr 1fr; } }

.topic-grid li { background: var(--bg); }
.topic-grid a {
  display: block;
  height: 100%;
  padding: var(--space-3);
  color: inherit;
  text-decoration: none;
  transition: background-color 150ms ease;
}
.topic-grid a:hover { background: var(--surface); }
.topic-grid h3 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--fg);
  margin: 0;
}
.topic-grid a:hover h3 { color: var(--accent); }
.topic-grid p {
  margin: var(--space-2) 0 0 0;
  color: var(--fg-muted);
  font-size: 0.9rem;
}

/* ---------- Topic list (topics index) ---------- */

.topic-list {
  list-style: none;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6) var(--space-4);
}
@media (min-width: 640px) { .topic-list { grid-template-columns: 1fr 1fr; } }

.topic-list a {
  display: block;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
  transition: border-color 150ms ease;
}
.topic-list a:hover { border-color: var(--accent); }
.topic-list h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--fg);
  margin: var(--space-1) 0;
}
.topic-list a:hover h2 { color: var(--accent); }
.topic-list p { color: var(--fg-muted); margin: var(--space-2) 0 0 0; }

/* ---------- Topic filter chips ---------- */

.chips {
  list-style: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  font-size: 0.85rem;
}
.chips a {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--rule);
  color: var(--fg-muted);
  border-radius: 999px;
  text-decoration: none;
  transition: all 150ms ease;
}
.chips a:hover {
  border-color: var(--accent);
  color: var(--fg);
}
.chips a.active {
  border-color: var(--accent);
  background: rgba(117, 142, 99, 0.1);
  color: var(--accent);
}

/* ---------- Forms ---------- */

.field {
  display: block;
  margin-bottom: var(--space-3);
}
.field label {
  display: block;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--fg);
  margin-bottom: 0.4rem;
}
.field .help {
  font-size: 0.85rem;
  color: var(--fg-muted);
  margin-top: 0.25rem;
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: var(--font-sans);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(117, 142, 99, 0.25);
}
.field input::placeholder,
.field textarea::placeholder {
  color: rgba(168, 168, 158, 0.5);
}

.btn {
  display: inline-block;
  padding: var(--btn-rect-pad);
  background: var(--accent);
  color: var(--bg);
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-sans);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 150ms ease;
}
.btn:hover {
  background: var(--accent-warm);
  color: var(--bg);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-status {
  font-size: 0.9rem;
  color: var(--fg-muted);
  margin-top: var(--space-2);
}
.form-status.error { color: var(--accent-warm); }

/* Submit row at the bottom of a form: button left, status right. */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  justify-content: space-between;
}

/* Inline newsletter (one row) */
.newsletter-inline {
  display: flex;
  gap: var(--space-2);
  flex-direction: column;
}
@media (min-width: 480px) {
  .newsletter-inline { flex-direction: row; align-items: stretch; }
  .newsletter-inline input { flex: 1; }
}

/* ---------- Audio player ---------- */

.player {
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4);
}

.player__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.player__playpause {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  background: var(--accent);
  color: var(--bg);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 150ms ease;
}
.player__playpause:hover { background: var(--accent-warm); }
.player__playpause svg { fill: currentColor; }

.player__progress-wrap { flex: 1; }

.player__scrub {
  position: relative;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--rule);
  cursor: pointer;
}
.player__scrub-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 150ms linear;
}

.player__times {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--fg-muted);
  margin-top: 0.4rem;
  font-variant-numeric: tabular-nums;
}

.player__controls {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--fg-muted);
}

.player__controls button {
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: inherit;
  border-radius: 6px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: border-color 150ms ease, color 150ms ease;
}
.player__controls button:hover {
  border-color: var(--accent);
  color: var(--fg);
}

.player__hint {
  margin-left: auto;
  font-size: 0.75rem;
  color: rgba(168, 168, 158, 0.6);
}
@media (max-width: 720px) { .player__hint { display: none; } }

.player__chapters {
  margin-top: var(--space-3);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-2);
}
.player__chapters summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--fg-muted);
  list-style: none;
}
.player__chapters summary::-webkit-details-marker { display: none; }
.player__chapters summary::after { content: " ▾"; }
.player__chapters[open] summary::after { content: " ▴"; }

.player__chapters ul {
  list-style: none;
  margin: var(--space-2) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.player__chapters button {
  display: flex;
  width: 100%;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.4rem 0.5rem;
  background: transparent;
  color: var(--fg-muted);
  border: 0;
  border-radius: 4px;
  text-align: left;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}
.player__chapters button:hover { background: var(--bg); color: var(--fg); }
.player__chapters button.is-current { color: var(--accent); }
.player__chapters button .time {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.75rem;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Inline timestamp jump button (inside transcript prose) */
.ts-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
  padding: 0.35rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--accent);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.ts-jump:hover {
  border-color: var(--accent);
  background: var(--bg);
}
.ts-jump .time {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.75rem;
  color: var(--fg-muted);
}

/* ---------- Episode page ---------- */

.ep-page { padding: var(--space-12) 0; }

/* Guest byline shown beneath the episode title. */
.ep-byline {
  font-size: var(--text-md);
  color: var(--fg-muted);
  margin-top: var(--space-3);
}
.ep-byline strong { color: var(--fg); font-weight: 500; }

/* Generic "bordered" section divider (used at the bottom of episode and
   topic pages to separate a "Other ..." block from the main content). */
.section--bordered {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}

.crumbs {
  font-size: 0.85rem;
  color: var(--fg-muted);
  margin-bottom: var(--space-4);
}
.crumbs a { color: var(--fg-muted); }
.crumbs a:hover { color: var(--fg); }
.crumbs .sep { padding: 0 0.5rem; color: var(--rule); }

.ep-lesson-summary {
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--fg);
}

.framework {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.framework h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 400;
  color: var(--fg);
  margin: 0 0 var(--space-1) 0;
}
.framework h2 .num { color: var(--accent); }
.framework p { color: var(--fg-muted); max-width: var(--max-measure); }

.cost-action {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-6);
}
@media (min-width: 640px) {
  .cost-action { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}

.transcript summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--rule);
}
.transcript summary::-webkit-details-marker { display: none; }
.transcript summary .show-hide { color: var(--fg-muted); font-size: 0.9rem; }
.transcript[open] summary .show-hide { color: var(--accent); }
.transcript[open] summary .show-hide::after { content: " ▴"; }
.transcript:not([open]) summary .show-hide::after { content: " ▾"; }

.transcript-body {
  margin-top: var(--space-4);
  max-width: var(--max-measure);
  color: var(--fg-muted);
}
.transcript-body p { margin: 0 0 var(--space-2) 0; }
.transcript-body strong { color: var(--fg); font-weight: 600; }

.guest-bio {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-6);
}
.guest-bio h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 400;
  margin: 0;
}
.guest-bio .links {
  list-style: none;
  margin: var(--space-3) 0 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.9rem;
}

/* ---------- Be-a-Guest filter list ---------- */

.filter-list {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.filter-list li {
  display: flex;
  gap: 1rem;
}
.filter-list .num {
  font-family: var(--font-serif);
  color: var(--accent);
}

/* ---------- 404 ---------- */

.not-found { padding: var(--space-12) 0; }

/* ---------- Article wrapper ----------
   Standard top-and-bottom padded narrow column used on long-form pages
   (Be a guest, single episode pages) when they sit beneath a .page-hero. */
.page-article {
  padding-top: var(--space-8);
  padding-bottom: var(--space-12);
}

/* ---------- Topic page body ----------
   Container for the episodes list + "Other topics" footer that sits
   beneath a .page-hero on every /topics/*.html page. */
.topic-page {
  padding-top: var(--space-8);
  padding-bottom: var(--space-12);
}

.topic-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  font-size: var(--text-sm);
}
@media (min-width: 640px) {
  .topic-nav { grid-template-columns: 1fr 1fr; gap: var(--space-1) var(--space-3); }
}

/* Generic vertical link list (used on 404 etc.) */
.link-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* ---------- Utilities ---------- */

.text-right { text-align: right; }
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.gap-2 { gap: var(--space-2); }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }

/* =============================================================
   HOMEPAGE — section-specific treatments
   Each section gets a distinct visual container so the page
   reads as a sequence of cleanly separated "moments" instead of
   a flat scroll. All other pages keep the existing styles.
   ============================================================= */

/* ---------- 1. Home chrome ---------- */
/* The unified sticky header is shown on every page including home.
   Remove the hard section borders so bespoke section treatments read
   as their own moments. Hero adjusts its min-height to fit the
   remaining viewport under the header. */

body.home .section + .section { border-top: 0; }
body.home .section { padding-block: var(--space-8); }

/* ---------- Hero (full-bleed photo) ----------
   Edge-to-edge image with a left-to-right dark gradient so the
   headline reads cleanly over the left third while the subject on
   the right stays visible. Inspired by the "elevate" hero pattern:
   nav floats on top, big serif headline, lead, two CTA pills. */

.hero-full {
  position: relative;
  min-height: calc(100vh - 4rem); /* viewport minus sticky header */
  background-image: url('https://res.cloudinary.com/dsqbqhqvf/image/upload/v1779153540/ChatGPT_Image_18_may_2026_10_18_36_p.m._oftyke.png');
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
  background-color: #0e0f0c;
  display: flex;
  align-items: center;
  isolation: isolate;
}
.hero-full::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(14,15,12,0.92) 0%,
    rgba(14,15,12,0.80) 32%,
    rgba(14,15,12,0.55) 60%,
    rgba(14,15,12,0.30) 85%,
    rgba(14,15,12,0.20) 100%
  );
  z-index: 0;
}
/* Soft top-down shade so the floating nav has constant contrast */
.hero-full::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 8rem;
  background: linear-gradient(to bottom, rgba(14,15,12,0.55), transparent);
  z-index: 0;
  pointer-events: none;
}
.hero-full > .page {
  position: relative;
  z-index: 1;
  width: 100%;
}
.hero-full__copy {
  max-width: 34rem;
  padding-top: clamp(4rem, 14vh, 9rem);
  padding-bottom: var(--space-8);
}
.hero-full__copy .eyebrow {
  color: var(--accent);
  letter-spacing: 0.18em;
  font-size: 0.72rem;
}
.hero-full__headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 3.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: var(--space-3) 0 0;
  max-width: 24ch;
}
.hero-full__headline em {
  font-style: italic;
  color: var(--accent);
}
.hero-full__lead {
  margin-top: var(--space-3);
  font-size: clamp(0.92rem, 1vw, 1rem);
  line-height: 1.65;
  color: rgba(239,239,239,0.78);
  max-width: 28rem;
  font-weight: 400;
}
.hero-full__lead em { color: var(--fg); font-style: italic; }

.hero-full__ctas {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
/* Hero-over-photo CTAs invert: solid uses --fg (white), ghost has a soft outline
   so both read against the dark gradient. Padding/radius come from .btn-pill. */
.hero-full__ctas .btn-pill--solid {
  background: var(--fg);
  color: var(--bg);
}
.hero-full__ctas .btn-pill--solid:hover { background: var(--accent); color: var(--bg); }
.hero-full__ctas .btn-pill--ghost {
  background: transparent;
  color: var(--fg);
  border-color: rgba(239,239,239,0.45);
}
.hero-full__ctas .btn-pill--ghost:hover {
  border-color: var(--fg);
  background: rgba(255,255,255,0.06);
}

@media (max-width: 720px) {
  .hero-full {
    background-position: 70% center;
    min-height: 32rem;
  }
  .hero-full::before {
    background: linear-gradient(
      to right,
      rgba(14,15,12,0.92) 0%,
      rgba(14,15,12,0.78) 60%,
      rgba(14,15,12,0.55) 100%
    );
  }
}

/* ---------- 2. Hero card — composed cream surface ----------
   Faithful translation of the Creatix hero pattern:
   - dark pill nav INSIDE the cream card at the top
   - two-column body: headline (left) + small badge (right)
   - large circular "record" graphic centered below
   - two CTA pills overlapping the bottom edge of the card
   - decorative sage sparkle top-left, terracotta dot top-right
   Container reserves bottom padding so the overlapping CTAs have
   room before the stats-pill band below. */

.hero-card {
  position: relative;
  background: var(--surface-cream);
  color: var(--fg-on-cream);
  border-radius: clamp(var(--radius-xl), 3vw, 36px);
  padding:
    clamp(0.6rem, 1.2vw, 0.85rem)
    clamp(0.6rem, 1.2vw, 0.85rem)
    clamp(3rem, 6vw, 4.5rem);
  overflow: hidden;
  isolation: isolate;
}

/* Decorative sparkle in the top-left corner (sage). */
.hero-card__sparkle {
  position: absolute;
  top: clamp(3.5rem, 6vw, 5rem);
  left: clamp(1rem, 4vw, 3rem);
  width: clamp(2rem, 5vw, 3.5rem);
  height: clamp(2rem, 5vw, 3.5rem);
  background: var(--accent);
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 19%, #000 21%, transparent 22%),
        conic-gradient(from 0deg,
          #000 0 5%, transparent 5% 7.5%,
          #000 7.5% 12.5%, transparent 12.5% 15%,
          #000 15% 20%, transparent 20% 22.5%,
          #000 22.5% 27.5%, transparent 27.5% 30%,
          #000 30% 35%, transparent 35% 37.5%,
          #000 37.5% 42.5%, transparent 42.5% 45%,
          #000 45% 50%, transparent 50% 52.5%,
          #000 52.5% 57.5%, transparent 57.5% 60%,
          #000 60% 65%, transparent 65% 67.5%,
          #000 67.5% 72.5%, transparent 72.5% 75%,
          #000 75% 80%, transparent 80% 82.5%,
          #000 82.5% 87.5%, transparent 87.5% 90%,
          #000 90% 95%, transparent 95% 97.5%,
          #000 97.5% 100%);
  mask: radial-gradient(circle, transparent 18%, #000 19%, #000 21%, transparent 22%),
        conic-gradient(from 0deg,
          #000 0 5%, transparent 5% 7.5%,
          #000 7.5% 12.5%, transparent 12.5% 15%,
          #000 15% 20%, transparent 20% 22.5%,
          #000 22.5% 27.5%, transparent 27.5% 30%,
          #000 30% 35%, transparent 35% 37.5%,
          #000 37.5% 42.5%, transparent 42.5% 45%,
          #000 45% 50%, transparent 50% 52.5%,
          #000 52.5% 57.5%, transparent 57.5% 60%,
          #000 60% 65%, transparent 65% 67.5%,
          #000 67.5% 72.5%, transparent 72.5% 75%,
          #000 75% 80%, transparent 80% 82.5%,
          #000 82.5% 87.5%, transparent 87.5% 90%,
          #000 90% 95%, transparent 95% 97.5%,
          #000 97.5% 100%);
  -webkit-mask-composite: source-over;
  pointer-events: none;
}

/* Pill nav inside the hero card */
.hero-card__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  color: var(--surface-cream);
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.55rem 0.45rem 1.4rem;
  gap: var(--space-2);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.hero-card__logo {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  color: var(--surface-cream);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.hero-card__logo:hover { color: var(--accent); }
.hero-card__logo-mark {
  display: inline-block;
  width: 0.95rem;
  height: 0.95rem;
  background: var(--accent);
  border-radius: var(--radius-circle);
}
.hero-card__nav nav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  font-size: var(--text-sm);
}
.hero-card__nav nav a {
  color: rgba(244,241,234,0.7);
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.hero-card__nav nav a:hover {
  background: rgba(255,255,255,0.07);
  color: var(--surface-cream);
}
@media (max-width: 640px) {
  .hero-card__nav { padding: 0.4rem 0.5rem 0.4rem 1rem; }
  .hero-card__nav nav { gap: 0; }
  .hero-card__nav nav a { padding: 0.4rem 0.65rem; font-size: 0.85rem; }
}

/* Body: two-column layout. Headline left, small badge right. */
.hero-card__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: 0 clamp(0.5rem, 3vw, 2rem);
}
@media (min-width: 720px) {
  .hero-card__body {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-4);
  }
}

.hero-card__copy .eyebrow { color: var(--fg-dim-on-cream); }
.hero-card__headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--fg-on-cream);
  margin: 0.4rem 0 0;
  max-width: 18ch;
}
.hero-card__headline em {
  font-style: italic;
  color: var(--fg-on-cream);
}
.hero-card__headline .brand-dot {
  background: var(--accent);
  width: 0.45em;
  height: 0.45em;
  margin-left: 0.1em;
  vertical-align: baseline;
  transform: translateY(-0.05em);
}
.hero-card__lead {
  margin-top: var(--space-3);
  color: var(--fg-muted-on-cream);
  font-size: var(--text-md);
  max-width: 32ch;
}
.hero-card__lead em { color: var(--fg-on-cream); }
.hero-card__copy .btn-ghost {
  display: inline-block;
  margin-top: var(--space-3);
  padding: var(--btn-pill-pad);
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule-on-cream);
  background: transparent;
  color: var(--fg-on-cream);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}
.hero-card__copy .btn-ghost:hover {
  border-color: var(--fg-on-cream);
  background: rgba(26,26,26,0.04);
}

/* Right-side stacked badge (replaces Creatix's stars + years). */
.hero-card__badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  margin: 0;
  text-align: right;
  font-family: var(--font-sans);
}
.hero-card__badge .stars {
  color: var(--accent);
  letter-spacing: 0.25em;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}
.hero-card__badge strong {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  color: var(--fg-on-cream);
  line-height: 1;
}
.hero-card__badge span {
  font-size: var(--text-xxs);
  color: var(--fg-dim-on-cream);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Centered "record" graphic — sage disc / dark inner / terracotta dot.
   Plays the role of the Creatix portrait but stays brand-graphic. */
.hero-card__art {
  position: relative;
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
  width: clamp(11rem, 26vw, 17rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  display: grid;
  place-items: center;
  isolation: isolate;
}
.hero-card__art::before {
  content: "";
  width: 60%;
  aspect-ratio: 1;
  border-radius: var(--radius-circle);
  background: var(--bg);
  position: absolute;
}
.hero-card__art::after {
  content: "";
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent-warm);
  position: relative;
  z-index: 1;
}

/* Two CTA pills sit at the bottom-center, overlapping the card's edge
   so they bridge the cream hero and the dark stats-pill band below. */
.hero-card__ctas {
  position: absolute;
  bottom: -1.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.45rem;
  z-index: 2;
  white-space: nowrap;
}
.btn-pill {
  display: inline-block;
  padding: var(--btn-pill-pad);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  white-space: nowrap;
  cursor: pointer;
}
.btn-pill--solid {
  background: var(--accent);
  color: var(--bg);
}
.btn-pill--solid:hover { background: var(--accent-warm); color: var(--bg); }
.btn-pill--ghost {
  background: var(--bg);
  color: var(--fg);
  border-color: var(--rule);
}
.btn-pill--ghost:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 480px) {
  .btn-pill { padding: var(--btn-pill-pad-sm); font-size: var(--text-xs); }
}

/* ---------- 2b. Stats pill — vital signs band ----------
   Rounded dark pill that sits right under the hero card with no
   visual gap (the CTAs overlap between them). Four columns of
   serif numerals with small uppercase labels. */

.stats-pill {
  margin: var(--space-6) 0 0;
  background: #16170f;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: var(--space-3) var(--space-3);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
}
@media (min-width: 640px) {
  .stats-pill { grid-template-columns: repeat(4, 1fr); }
}
.stats-pill > div {
  text-align: center;
  padding: 0.3rem 0.5rem;
  position: relative;
}
.stats-pill > div + div::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--rule);
}
@media (max-width: 639px) {
  .stats-pill > div:nth-child(3)::before { display: none; }
}
.stats-pill dt {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--fg);
  line-height: 1;
}
.stats-pill dt .plus { color: var(--accent); }
.stats-pill dd {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ---------- 3. Upcoming episodes (horizontal list) ----------
   Inspired by the Diary of a CEO "MOST POPULAR EPISODES" layout:
   each row is a 16:9 thumbnail with a sage play button + status
   badge, a big uppercase title, a short description, a CTA, and a
   row of platform icons. Stacks to single column on mobile. */

.popular-episodes {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.popular-episode {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: center;
}
@media (min-width: 720px) {
  .popular-episode {
    grid-template-columns: 22rem minmax(0, 1fr);
    gap: var(--space-6);
  }
}

.popular-episode__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 40%, rgba(117,142,99,0.18), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(198,113,85,0.10), transparent 50%),
    #14150f;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.popular-episode--alt .popular-episode__thumb {
  background:
    radial-gradient(circle at 70% 30%, rgba(117,142,99,0.20), transparent 55%),
    radial-gradient(circle at 25% 80%, rgba(198,113,85,0.10), transparent 50%),
    #14150f;
}
.popular-episode__thumb::after {
  /* faint film-grain / vignette so the empty thumb has texture */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.55) 100%);
  z-index: 0;
}

.popular-episode__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.popular-episode__thumb--video { cursor: pointer; }

.popular-episode__badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  background: rgba(0,0,0,0.55);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
}

.popular-episode__guest {
  position: absolute;
  bottom: 0.9rem;
  left: 1rem;
  right: 1rem;
  z-index: 2;
  font-family: var(--font-serif);
  font-style: italic;
  color: rgba(239,239,239,0.85);
  font-size: 1rem;
}

.popular-episode__play {
  position: relative;
  z-index: 1;
  width: clamp(3.5rem, 6vw, 4.5rem);
  height: clamp(3.5rem, 6vw, 4.5rem);
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 200ms ease, background-color 150ms ease;
}
.popular-episode__play:hover { transform: scale(1.06); background: var(--accent-warm); }
.popular-episode__play svg {
  width: 1.4rem;
  height: 1.4rem;
  fill: #0e0f0c;
  margin-left: 0.2rem;
}

.popular-episode__body {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}
.popular-episode__title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
}
.popular-episode__title .with {
  color: var(--fg);
}
.popular-episode__desc {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--fg-muted);
}
.popular-episode__desc .read-more {
  color: var(--accent);
  margin-left: 0.25rem;
}
.popular-episode__desc .read-more:hover { color: var(--accent-warm); }

.popular-episode__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: 0.3rem;
}

.popular-episode__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.82rem;
  color: var(--fg);
  text-decoration: none;
  transition: color 150ms ease;
}
.popular-episode__cta:hover { color: var(--accent); }
.popular-episode__cta--accent { color: var(--accent); }

.popular-episode__platforms {
  list-style: none;
  display: flex;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
}
.popular-episode__platforms li {
  width: 1.85rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
  color: rgba(239,239,239,0.45);
}
.popular-episode__platforms a {
  display: grid;
  place-items: center;
  color: inherit;
  transition: color 150ms ease;
}
.popular-episode__platforms a:hover { color: var(--accent); }
.popular-episode__platforms svg { width: 1.6rem; height: 1.6rem; }

/* ---------- 3b. Featured episode (legacy tape-label card) ---------- */
/* Dark card with an off-axis sage "tape label" overlapping the corner.
   Reuses .ep-featured layout but reskins it with the tape motif. */

.ep-featured--tape {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--rule);
  background:
    radial-gradient(circle at 100% 0%, rgba(117,142,99,0.10), transparent 55%),
    var(--surface);
  margin-top: var(--space-2);
}
.ep-featured--tape .ep-card__art {
  position: relative;
  background: #11120e;
  border-radius: 14px;
  display: grid;
  place-items: center;
}
.ep-featured--tape .ep-card__art::after {
  content: "";
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.18;
}
.tape-label {
  display: inline-block;
  background: var(--accent);
  color: #0e0f0c;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.45rem 0.85rem;
  border-radius: 3px;
  transform: rotate(-2deg);
  margin-bottom: var(--space-2);
  box-shadow: 0 1px 0 rgba(0,0,0,0.25);
}

/* ---------- 4. Topics — numbered pill list ---------- */
/* Numbered rows that read like a contents page. Each row is a full-width
   pill that nudges right on hover, with an arrow chip on the far right. */

.services-list {
  list-style: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.services-list a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.85rem 1rem 0.85rem 1.25rem;
  background: #16170f;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--fg);
  text-decoration: none;
  transition: border-color 200ms ease, transform 200ms ease, background-color 200ms ease;
}
.services-list a:hover {
  border-color: var(--accent);
  background: #1b1d14;
  transform: translateX(4px);
}
.services-list .num {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--accent);
  min-width: 2rem;
  font-variant-numeric: tabular-nums;
}
.services-list h3 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  color: var(--fg);
  margin: 0;
  flex: 1;
  line-height: 1.3;
}
.services-list .sub {
  display: none;
  color: var(--fg-muted);
  font-size: 0.85rem;
  font-weight: 400;
  margin-left: 0.5rem;
}
@media (min-width: 720px) { .services-list .sub { display: inline; } }
.services-list .arrow {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--fg-muted);
  flex-shrink: 0;
  transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease;
}
.services-list a:hover .arrow {
  border-color: var(--accent);
  color: var(--bg);
  background: var(--accent);
}

/* ---------- 5. Brand lockup — typographic banner ---------- */
/* Centered serif lockup: "One guest · One lesson · Sixty minutes".
   Sage brand-dots act as separators. Italic emphasis on the key noun. */

.brand-lockup {
  text-align: center;
  padding: var(--space-8) 0 var(--space-6);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 4rem);
  line-height: 1.1;
  color: var(--fg);
}
.brand-lockup em { font-style: italic; color: var(--fg); }
.brand-lockup .sep {
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  background: var(--accent);
  border-radius: 50%;
  margin: 0 0.55em;
  vertical-align: middle;
  transform: translateY(-0.08em);
}
.brand-lockup .more {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--fg-muted);
}
.brand-lockup .more a { color: var(--accent); }
.brand-lockup .more a:hover { color: var(--accent-warm); }

/* ---------- 6. Newsletter — sage panel card ---------- */
/* The full panel is filled with the sage accent on dark text. The
   input and button invert against it so the form reads as a single
   bright block at the bottom of the page. */

.newsletter-panel {
  background: var(--accent);
  color: #0e0f0c;
  border-radius: clamp(20px, 3vw, 28px);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-2);
}
@media (min-width: 720px) {
  .newsletter-panel {
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: var(--space-6);
  }
}
.newsletter-panel .eyebrow { color: rgba(14,15,12,0.65); }
.newsletter-panel .headline-section { color: #0e0f0c; margin-top: var(--space-1); }
.newsletter-panel p { color: rgba(14,15,12,0.78); }
.newsletter-panel p em { color: #0e0f0c; }

.newsletter-panel .newsletter-inline input {
  background: rgba(255,255,255,0.96);
  border: 1px solid transparent;
  color: #1a1a1a;
}
.newsletter-panel .newsletter-inline input::placeholder { color: rgba(26,26,26,0.45); }
.newsletter-panel .newsletter-inline input:focus {
  border-color: #0e0f0c;
  box-shadow: 0 0 0 3px rgba(14,15,12,0.18);
}
.newsletter-panel .btn {
  background: #0e0f0c;
  color: var(--accent);
}
.newsletter-panel .btn:hover {
  background: var(--accent-warm);
  color: #0e0f0c;
}
.newsletter-panel .form-status { color: rgba(14,15,12,0.75); }

/* =============================================================
   SECTION BACKGROUNDS — alternating colour bands
   Apply to a section's outer wrapper for visual rhythm.
   Use .section-bleed when you want the colour to span the full
   viewport width (place the .page container inside).
   ============================================================= */

.section-bleed { width: 100%; }
.section-bg-dark    { background: var(--bg); color: var(--fg); }
.section-bg-dark-2  { background: var(--bg-warm); color: var(--fg); }
.section-bg-cream   { background: var(--surface-cream); color: var(--fg-on-cream); }
.section-bg-sage    { background: var(--accent); color: var(--bg); }

/* Type colour overrides inside cream/sage bands */
.section-bg-cream .headline-section,
.section-bg-cream h2,
.section-bg-cream h3 { color: var(--fg-on-cream); }
.section-bg-cream .muted,
.section-bg-cream p { color: var(--fg-muted-on-cream); }
.section-bg-cream em { color: var(--fg-on-cream); }
.section-bg-cream .eyebrow { color: var(--fg-dim-on-cream); }
.section-bg-cream a { color: var(--accent-deep); }
.section-bg-cream .brand-lockup,
.section-bg-cream .brand-lockup em { color: var(--fg-on-cream); }
.section-bg-cream .brand-lockup .more { color: var(--fg-muted-on-cream); }
.section-bg-cream .brand-lockup .more a { color: var(--accent-deep); }
.section-bg-cream .brand-lockup .sep { background: var(--accent-deep); }

.section-bg-sage .headline-section,
.section-bg-sage h2 { color: var(--bg); }
.section-bg-sage .muted,
.section-bg-sage p { color: rgba(14,15,12,0.78); }
.section-bg-sage .eyebrow { color: rgba(14,15,12,0.6); }

/* Section-bg-cream variants for the upcoming-episodes block */
.section-bg-cream .popular-episode__title,
.section-bg-cream .popular-episode__title .with { color: var(--fg-on-cream); }
.section-bg-cream .popular-episode__desc { color: var(--fg-muted-on-cream); }
.section-bg-cream .popular-episode__cta { color: var(--fg-on-cream); }
.section-bg-cream .popular-episode__cta:hover,
.section-bg-cream .popular-episode__cta--accent { color: var(--accent-deep); }
.section-bg-cream .popular-episode__platforms li { color: rgba(26,26,26,0.45); }
.section-bg-cream .section-header h2 { color: var(--fg-on-cream); }
.section-bg-cream .section-header a { color: var(--accent-deep); }

/* =============================================================
   BLOG / GUESTS CAROUSEL — horizontal scroll, edge-to-edge
   Cards laid out in a horizontal flex row that bleeds to the
   viewport edges. Native CSS scroll-snap for smooth swipe on
   touch, arrows scroll by one card width on desktop.
   ============================================================= */

.guests-carousel {
  position: relative;
  margin: var(--space-6) 0 0;
}

.guests-carousel__chips {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.guests-carousel__chips a {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--fg-muted);
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 150ms ease;
}
.guests-carousel__chips a:hover { border-color: var(--accent); color: var(--fg); }
.guests-carousel__chips a.is-active {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

/* Stage is full-viewport-width so cards can spread edge-to-edge.
   Each card is absolutely positioned at the stage centre; JS sets
   data-pos to -3..-2..-1..0..1..2..3 and CSS picks up the right
   transform. The active card sits forward; side cards shrink and
   fade as they recede toward the viewport edges. */
.guests-carousel__stage {
  position: relative;
  width: 100%;
  height: clamp(24rem, 55vw, 34rem);
  overflow: hidden;
  isolation: isolate;
  margin-top: var(--space-4);
}

.guest-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(15rem, 24vw, 21rem);
  aspect-ratio: 4 / 5;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background: #14150f;
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  z-index: 0;
  transition:
    transform 650ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 450ms ease,
    box-shadow 450ms ease;
  box-shadow: 0 10px 35px rgba(0,0,0,0.4);
  pointer-events: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.guest-card[data-pos="0"] {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  z-index: 10;
  box-shadow: 0 25px 70px rgba(0,0,0,0.6);
  pointer-events: auto;
}
.guest-card[data-pos="-1"] {
  transform: translate(calc(-50% - 17rem), -50%) scale(0.86);
  opacity: 0.9;
  z-index: 6;
  pointer-events: auto;
}
.guest-card[data-pos="1"] {
  transform: translate(calc(-50% + 17rem), -50%) scale(0.86);
  opacity: 0.9;
  z-index: 6;
  pointer-events: auto;
}
.guest-card[data-pos="-2"] {
  transform: translate(calc(-50% - 32rem), -50%) scale(0.72);
  opacity: 0.55;
  z-index: 3;
  pointer-events: auto;
}
.guest-card[data-pos="2"] {
  transform: translate(calc(-50% + 32rem), -50%) scale(0.72);
  opacity: 0.55;
  z-index: 3;
  pointer-events: auto;
}
.guest-card[data-pos="-3"] {
  transform: translate(calc(-50% - 46rem), -50%) scale(0.6);
  opacity: 0.25;
  z-index: 1;
}
.guest-card[data-pos="3"] {
  transform: translate(calc(-50% + 46rem), -50%) scale(0.6);
  opacity: 0.25;
  z-index: 1;
}

@media (max-width: 900px) {
  .guests-carousel__stage { height: 28rem; }
  .guest-card { width: 15rem; }
  .guest-card[data-pos="-1"] { transform: translate(calc(-50% - 11rem), -50%) scale(0.78); }
  .guest-card[data-pos="1"]  { transform: translate(calc(-50% + 11rem), -50%) scale(0.78); }
  .guest-card[data-pos="-2"] { transform: translate(calc(-50% - 19rem), -50%) scale(0.62); opacity: 0.4; }
  .guest-card[data-pos="2"]  { transform: translate(calc(-50% + 19rem), -50%) scale(0.62); opacity: 0.4; }
  .guest-card[data-pos="-3"],
  .guest-card[data-pos="3"] { opacity: 0; }
}

/* Card visuals */
.guest-card__cover {
  position: relative;
  flex: 0 0 62%;
  background:
    radial-gradient(circle at 30% 40%, rgba(117,142,99,0.28), transparent 55%),
    radial-gradient(circle at 80% 75%, rgba(198,113,85,0.18), transparent 50%),
    #11120e;
  display: grid;
  place-items: center;
}
.guest-card--alt .guest-card__cover {
  background:
    radial-gradient(circle at 75% 30%, rgba(117,142,99,0.28), transparent 55%),
    radial-gradient(circle at 25% 80%, rgba(198,113,85,0.20), transparent 50%),
    #11120e;
}
.guest-card__cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.guest-card__initials {
  position: relative;
  z-index: 1;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(3rem, 6vw, 4.5rem);
  color: rgba(239,239,239,0.85);
  letter-spacing: -0.02em;
}
.guest-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  display: block;
}
.guest-card__play {
  position: absolute;
  bottom: 0.85rem;
  right: 0.85rem;
  z-index: 2;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  display: grid;
  place-items: center;
  color: #0e0f0c;
}
.guest-card__play svg { width: 0.85rem; height: 0.85rem; margin-left: 0.1rem; fill: currentColor; }

.guest-card__badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  background: rgba(0,0,0,0.55);
  color: var(--fg);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.guest-card__body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: #16170f;
  flex: 1;
  min-height: 0;
}
.guest-card__eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
  font-weight: 500;
}
.guest-card__title {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
  line-height: 1.25;
}
.guest-card__excerpt {
  font-size: 0.82rem;
  color: var(--fg-muted);
  margin: 0;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Arrow nav (centred under stage) */
.guests-carousel__nav {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: var(--space-3);
}
.guests-carousel__btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}
.guests-carousel__btn:hover {
  border-color: var(--accent);
  background: rgba(117,142,99,0.1);
  color: var(--accent);
}
.guests-carousel__btn svg { width: 1.1rem; height: 1.1rem; }

/* ---------- Podcast blurb (cream band, short description) ---------- */
.podcast-blurb {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}
.podcast-blurb .eyebrow {
  color: var(--accent-deep);
  letter-spacing: 0.18em;
  font-size: 0.78rem;
}
.podcast-blurb h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.75rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--fg-on-cream);
  margin: var(--space-2) 0 var(--space-3);
}
.podcast-blurb h2 em {
  font-style: italic;
  color: var(--accent-deep);
}
.podcast-blurb p {
  color: var(--fg-muted-on-cream);
  font-size: var(--text-md);
  line-height: 1.65;
  margin: 0 auto var(--space-4);
  max-width: 38rem;
}
.podcast-blurb p em { color: var(--fg-on-cream); font-style: italic; }
.podcast-blurb .btn-pill--solid {
  background: var(--bg);
  color: var(--surface-cream);
}
.podcast-blurb .btn-pill--solid:hover {
  background: var(--accent-deep);
  color: var(--surface-cream);
}

/* Cream-bg overrides for the carousel chips + arrows */
.section-bg-cream .guests-carousel__chips a {
  border-color: var(--rule-on-cream);
  color: var(--fg-muted-on-cream);
}
.section-bg-cream .guests-carousel__chips a:hover { border-color: var(--accent-deep); color: var(--fg-on-cream); }
.section-bg-cream .guests-carousel__chips a.is-active {
  background: var(--bg);
  color: var(--surface-cream);
  border-color: var(--bg);
}
.section-bg-cream .guests-carousel__btn {
  border-color: var(--rule-on-cream);
  color: var(--fg-on-cream);
}
.section-bg-cream .guests-carousel__btn:hover {
  border-color: var(--accent-deep);
  background: rgba(117,142,99,0.12);
  color: var(--accent-deep);
}

/* ---------- Hero wordmark (display size) ---------- */
/* Big display version of the wordmark for the homepage hero. The
   sans words wrap to the next line on narrow viewports so the
   italic "edge" can sit on its own visual baseline. */

.hero-wordmark {
  font-size: clamp(3rem, 9vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin: 0;
}
.hero-wordmark .wordmark__edge {
  color: var(--accent);
  margin: 0 0.05em;
}
.hero-wordmark .wordmark__dot {
  width: 0.35em;
  height: 0.35em;
  margin-left: 0.18em;
  background: var(--accent-warm);
}

/* =============================================================
   ABOUT PAGE — Umbra-inspired layout
   1. Wide hero band with the podcast photo + centered title
   2. Full-bleed "meet the host" section: cream card (text) on left,
      portrait photo on right. Reverses to photo-first on mobile.
   3. Remaining show / studio / contact content sits below in the
      standard dark page container.
   ============================================================= */

/* ---------- Page hero (clean, no photo) ----------
   Reusable hero band for inner pages (Episodes, Topics, etc.).
   Dark surface with subtle sage/terracotta radial accents.
   Mirrors the about-hero pattern but without the photo backdrop. */

.page-hero {
  position: relative;
  min-height: clamp(18rem, 38vh, 24rem);
  background: #14150f;
  display: grid;
  place-items: center;
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(117,142,99,0.14), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(198,113,85,0.08), transparent 50%);
  z-index: 0;
  pointer-events: none;
}
.page-hero__content {
  position: relative;
  z-index: 1;
  padding: clamp(5rem, 12vh, 7rem) var(--space-3) var(--space-6);
  max-width: 42rem;
}
.page-hero__eyebrow {
  color: var(--accent);
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0;
}
.page-hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--fg);
  margin: var(--space-2) 0 0;
}
.page-hero__title em { font-style: italic; color: var(--accent); }
.page-hero__lead {
  margin: var(--space-3) auto 0;
  color: var(--fg-muted);
  font-size: 1.05rem;
  max-width: 34rem;
}
.page-hero__lead a { color: var(--accent); }
.page-hero__crumbs {
  margin: var(--space-3) 0 0;
  font-size: 0.82rem;
  color: rgba(239,239,239,0.55);
}
.page-hero__crumbs a { color: rgba(239,239,239,0.8); }
.page-hero__crumbs a:hover { color: var(--accent); }
.page-hero__crumbs .sep { padding: 0 0.5rem; color: var(--accent); }

/* ---------- About hero (image band) ---------- */
.about-hero {
  position: relative;
  min-height: clamp(20rem, 50vh, 28rem);
  background-image: url('https://res.cloudinary.com/dsqbqhqvf/image/upload/v1779153540/ChatGPT_Image_18_may_2026_10_18_36_p.m._oftyke.png');
  background-size: cover;
  background-position: center 32%;
  background-color: #0e0f0c;
  display: grid;
  place-items: center;
  text-align: center;
  isolation: isolate;
}
.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(14,15,12,0.78), rgba(14,15,12,0.85));
  z-index: 0;
}
.about-hero__content {
  position: relative;
  z-index: 1;
  padding: clamp(5rem, 12vh, 8rem) var(--space-3) var(--space-6);
  max-width: 40rem;
}
.about-hero__eyebrow {
  color: var(--accent);
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  text-transform: uppercase;
  font-weight: 500;
  margin: 0 0 var(--space-2);
}
.about-hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--fg);
  margin: 0;
}
.about-hero__title em { font-style: italic; color: var(--accent); }
.about-hero__tagline {
  margin: var(--space-3) auto 0;
  color: rgba(239,239,239,0.82);
  font-size: 1.05rem;
  max-width: 32rem;
}
.about-hero__crumbs {
  margin: var(--space-3) 0 0;
  font-size: 0.82rem;
  color: rgba(239,239,239,0.6);
  letter-spacing: 0.04em;
}
.about-hero__crumbs a { color: rgba(239,239,239,0.85); }
.about-hero__crumbs a:hover { color: var(--accent); }
.about-hero__crumbs .sep { padding: 0 0.5rem; color: var(--accent); }

/* ---------- Meet the host: two equal squares (Umbra reference) ----------
   Cream text-card on the left + portrait photo on the right, both
   forced to a 1:1 aspect ratio so they read as a balanced pair of
   embedded squares. Stacks photo-first on mobile. */

.meet-host {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  max-width: var(--max-page);
  margin: 0 auto;
  padding: var(--space-8) var(--space-3);
}
@media (min-width: 800px) {
  .meet-host {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }
}

.meet-host__text,
.meet-host__photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.meet-host__text {
  color: var(--fg-on-cream);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.meet-host__eyebrow {
  font-size: var(--text-xxs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim-on-cream);
  margin: 0;
  font-weight: 500;
}
.meet-host__heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--fg-on-cream);
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0.5rem 0 var(--space-3);
}
.meet-host__heading em { font-style: italic; color: var(--accent-deep); }

.meet-host__pullquote {
  margin: var(--space-2) 0 var(--space-3);
  padding: 0 0 0 var(--space-2);
  border-left: 3px solid var(--accent);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  line-height: 1.45;
  color: var(--fg-on-cream);
}

.meet-host__body {
  color: var(--fg-muted-on-cream);
  font-size: clamp(0.85rem, 0.95vw, 0.92rem);
  line-height: 1.55;
}
.meet-host__body p { margin-bottom: 0.6rem; }
.meet-host__body p:last-child { margin-bottom: 0; }
.meet-host__body em { color: var(--fg-on-cream); font-style: italic; }
.meet-host__body a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.meet-host__body a:hover { color: var(--accent-warm); }

.meet-host__sig {
  margin-top: auto;
  padding-top: var(--space-3);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--fg-on-cream);
  align-self: flex-end;
}

.meet-host__photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.meet-host__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* On mobile, lead with the photo for visual impact */
@media (max-width: 799px) {
  .meet-host__photo { order: 1; }
  .meet-host__text  { order: 2; aspect-ratio: auto; min-height: 22rem; }
}

/* ---------- Show cards (feature grid) ----------
   3-up (then 2-up on tablet, 1-up on mobile) of square-ish cards
   describing the show's principles. One card is highlighted in
   sage as the accent moment. Mirrors the IT-services reference. */

.show-cards {
  list-style: none;
  margin: var(--space-4) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
@media (min-width: 600px) {
  .show-cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .show-cards { grid-template-columns: repeat(3, 1fr); }
}

.show-card {
  background: #16170f;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 13rem;
}
.show-card__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(117,142,99,0.15);
  display: grid;
  place-items: center;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.show-card__icon svg { width: 1.3rem; height: 1.3rem; }
.show-card h3 {
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
  letter-spacing: -0.005em;
}
.show-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--fg-muted);
}

/* Highlight card (sage) — drop in by adding the modifier class */
.show-card--accent {
  background: var(--accent);
  border-color: var(--accent);
}
.show-card--accent .show-card__icon {
  background: rgba(14,15,12,0.18);
  color: #0e0f0c;
}
.show-card--accent h3 { color: #0e0f0c; }
.show-card--accent p { color: rgba(14,15,12,0.8); }