/* Stacey Vanthuyne - R3 podcast page only (podcast.html). Loads after r3.css?v=2.
   Reuses the r3.css components as they are (.hero, .hero-photo, .hero-copy, .kicker, .lead, .row,
   .btn, .sec, .sand, .dark, .offers-head, .meet, .aside, .text-link). Only what this page adds is here.
   No new colours: every value is an r3.css token or an rgba tint of one. Nothing under 16px. */

/* ---------- hero: the show's own logo on the dark ground, a title card (James, 2026-10-06: no photographs
   of Stacey on this page, and tighter, like nutraponics.com). A warm light sits behind the logo. ---------- */
.pod-page{--sec:clamp(56px,7vw,104px)}   /* the whole page runs tighter than the others */
.dark-top .pod-hero.top-dark{min-height:0;padding:calc(var(--hdr) + clamp(48px,6vw,96px)) 0 clamp(56px,6vw,88px);display:block;text-align:center;background:var(--ink-2)}
.pod-hero::before{content:"";position:absolute;left:50%;top:44%;width:min(90vw,980px);aspect-ratio:1.6;translate:-50% -50%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(184,146,74,.16) 0%,rgba(193,127,89,.06) 42%,rgba(20,18,16,0) 70%);pointer-events:none}
.pod-title{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.pod-title .kicker{margin:0 0 1.6rem}
.pod-hero .pod-logo{margin:0 0 clamp(28px,3vw,40px);width:min(540px,80vw);max-width:none}   /* beats .hero h1's max-content width */
.pod-logo img{width:100%;height:auto}
.pod-title .lead{margin:0 auto 2.2rem;max-width:36ch;color:var(--on-dark);text-wrap:balance}
.pod-title .hero-actions{justify-content:center}
.pod-facts{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem 0;margin:clamp(40px,5vw,64px) 0 0;padding:clamp(24px,3vw,32px) 0 0;border-top:1px solid var(--line-dark);width:min(860px,100%)}
.pod-facts li{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:0 clamp(20px,3.6vw,48px)}
.pod-facts li+li{border-left:1px solid var(--line-dark)}
.pod-facts b{font:400 clamp(1.75rem,2.4vw,2.25rem)/1.1 var(--display);color:var(--gold-l);font-variant-numeric:lining-nums}
.pod-facts span{font:500 1rem/1.3 var(--label);color:var(--on-dark-2)}
@media (max-width:640px){
  .pod-facts{flex-direction:column;align-items:center}
  .pod-facts li+li{border-left:0;border-top:1px solid var(--line-dark);padding-top:1.2rem}
  .pod-title .hero-actions .btn{flex:1 1 100%}
}

/* ---------- latest episodes: quiet rows, one rule between each, Listen at the end of the row ---------- */
.eps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ep{position:relative;display:grid;grid-template-columns:8.5rem minmax(0,1fr) auto;align-items:start;column-gap:clamp(24px,4vw,64px);padding:clamp(1.6rem,2.6vw,2.2rem) 0;border-bottom:1px solid var(--line)}
.ep-when{margin:0;font:500 1rem/1.5 var(--label);color:var(--char);max-width:none}
.ep-when span{display:block}
.ep-guest{margin:0 0 .35rem;font:500 1rem/1.5 var(--label);color:var(--char)}
.ep h3{margin:0 0 .45rem}
.ep-desc{margin:0;font-size:1.0625rem}
/* the Listen button stretches over its row: the whole row is one tap target and the button fills on hover anywhere in it */
.ep-btn{justify-self:end;align-self:center}
.ep-btn::after{content:"";position:absolute;inset:0}
.ep-more{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(2.2rem,4vw,3rem)}
/* the whole row is the link (the button's ::after covers it). The button must not lift on hover: a moved
   button becomes the box its ::after fills, the hit area collapses and the row flickers. The row answers instead. */
.ep .ep-btn:hover{translate:none}
.ep:hover .ep-btn{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.ep:hover h3{color:var(--gold-deep)}
.ep h3{transition:color var(--base) var(--ease-io)}
.ep-sub{display:block;margin-top:.35rem;font:500 1.0625rem/1.4 var(--label);letter-spacing:0;color:var(--char)}
/* your host: words only, set tight */

/* ---------- as heard on: the page's one dark band; six boxless columns under hairlines ---------- */
.guests{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,4vw,56px)}
.guests li{display:flex;flex-direction:column;align-items:flex-start;border-top:1px solid var(--line-dark);padding:1.6rem 0 2.6rem}
.g-show{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;margin:0 0 1rem;max-width:none}
.g-name{font:500 1.0625rem/1.5 var(--label);color:var(--gold)}
.g-host{font-size:1.0625rem;line-height:1.5;color:var(--on-dark-2)}
.guests h3{margin:0 0 .6rem}
.g-desc{font-size:1.0625rem;margin:0 0 1.4rem}
.guests .btn{margin-top:auto}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .ep{grid-template-columns:minmax(0,1fr) auto;row-gap:.9rem}
  .ep-when{grid-column:1/-1;display:flex;gap:1.4rem}
  .guests{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .ep{grid-template-columns:minmax(0,1fr);row-gap:1rem}
  .ep-btn{justify-self:start}
  .ep-more .btn{flex:1 1 100%}
  .guests{grid-template-columns:minmax(0,1fr)}
}

/* as heard on, phones: one row you swipe through instead of six cards stacked 2,300px deep.
   contain:paint keeps the row's width out of the phone's page width (without it the page zooms out to 1500px) */
@media (max-width:640px){
  .guests{contain:paint;display:grid;grid-auto-flow:column;grid-auto-columns:84%;grid-template-columns:none;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--gutter));padding:0 var(--gutter) 8px;scroll-padding-inline:var(--gutter);scrollbar-width:thin;scrollbar-color:rgba(184,146,74,.5) transparent}
  .guests li{scroll-snap-align:start;padding-bottom:1.8rem}
}

/* the page now ends on "As heard on" (James, 2026-10-07: the host section repeated the logo, the hero and About).
   Its near-black eases into the footer's brown over its last third, so the two darks never meet in a line (K15). */
#as-heard-on{background:linear-gradient(180deg,var(--ink) 0%,var(--ink) 66%,rgba(45,37,31,.25) 78%,rgba(45,37,31,.6) 89%,rgba(45,37,31,.88) 96%,rgb(45,37,31) 100%),var(--ink)}