/* Layout "Canva Remix" v4 (version D), minimal and premium: the team's Canva page measured and rebuilt in code, then put on
   one system by a seven-lens critique (typography, layout, art direction, motion, craft, benchmarks, responsive) + judge.
   Measured Canva base: paper #EFF1EE, ink #111, green #209D50, deep green #164328, grey #3D3D3D; Anton caps (-.02em) +
   Poppins. v4 rules: one H2 token, 18/1.6 reading copy, one 12px tracked caps label, one 52px button, one expo-out curve
   with no overshoot, two-tier section rhythm (170 around floating objects, 128 at band edges), one column line at x=760.
   --green-ui (#1C7940) is a 60/40 mix of the two palette greens, used where white text needs AA on green.
   Loads AFTER ot.css and overrides its tokens. Archived versions: outputs/site/_archive/ot-canva-{a,c}.css */
@font-face{font-family:"Anton Fallback"; src:local("Impact"); size-adjust:92.88%; ascent-override:126.65%; descent-override:35.43%; line-gap-override:0%}
:root{--display:"Anton","Anton Fallback","Arial Narrow",sans-serif; --paper:#EFF1EE; --paper-ink:#111111; --ink:#111111; --ink-2:#3D3D3D; --ink-3:#616160; --green:#209D50; --green-ui:#1C7940; --green-deep:#164328; --bright:#209D50;
  --g0:#164328; --g1:#1B8A46; --g2:#209D50; --amber:#209D50; --amber-2:#164328;
  --body:"Poppins","Helvetica Neue",Arial,sans-serif; --r:16px; --sec:170px; --sec-band:128px; --hair-l:1px solid rgba(17,17,17,.22); --hair-d:1px solid rgba(255,255,255,.16);
  --fs-h2:clamp(40px,3.9vw,56px); --spring:cubic-bezier(.22,1,.36,1); --out-expo:cubic-bezier(.16,1,.3,1)}
body{background:var(--paper); color:var(--ink); font-family:var(--body)}
p{line-height:1.6; text-wrap:pretty}
.lines{display:none !important}
.h2{font:400 var(--fs-h2)/1 var(--display); text-transform:uppercase; letter-spacing:-.02em; color:var(--paper-ink); text-wrap:balance}

/* ---------- one button, one arrow, one platform circle ---------- */
.btn,.on-dark .btn{font:600 16px/1 var(--body); color:#fff; background:var(--green-ui); border:0; height:52px; padding:0 26px; gap:10px; transition:background-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease)}
.btn:hover,.on-dark .btn:hover{background:var(--green-deep); color:#fff; transform:none}
.btn:active,.on-dark .btn:active{transform:scale(.98)}
.btn--amber,.on-dark .btn--amber{background:var(--green-ui); color:#fff} .btn--amber:hover,.on-dark .btn--amber:hover{background:var(--green-deep); color:#fff}
.btn svg{width:20px; height:20px} .btn .i-arr{width:18px; height:18px}
.arrow,.on-dark .arrow{font:400 16px/1 var(--body); color:var(--green); padding:0; border-bottom:0; background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat !important; transition:background-size .5s var(--spring), color .25s ease}
.arrow:hover,.arrow:focus-visible{background-size:100% 1px !important}
.i-arr{width:18px; height:18px; flex:none; transition:transform .2s var(--ease)}
.arrow .i-arr{width:16px; height:16px; margin-left:.35em; vertical-align:-.2em}
a:hover > .i-arr{transform:translateX(3px)}
.badges .badge{width:40px; height:40px; background:var(--ink); color:#fff; box-shadow:none; transition:background-color .2s var(--ease)} .badges .badge svg{width:18px; height:18px}
.badges .badge--spotify svg{width:21px; height:21px}
.badges .badge.is-off{opacity:1; filter:none; background:transparent; color:rgba(17,17,17,.4); box-shadow:inset 0 0 0 1px rgba(17,17,17,.22)}
a.badge:hover{transform:none; background:var(--green-ui)}

/* ---------- header: tall, paper, a hairline, dots before the links, the links on the centre axis, a green pill with a user icon ---------- */
.hdr{background:var(--paper); border-bottom:var(--hair-l); backdrop-filter:none; -webkit-backdrop-filter:none}
.hdr.is-condensed{background:var(--paper); border-color:rgba(17,17,17,.22)}
.hdr__in{height:140px; justify-content:flex-start} .hdr.is-condensed .hdr__in{height:76px}
.brand img{height:84px} .hdr.is-condensed .brand img{height:46px}
.nav{flex:1; justify-content:space-between; margin-left:clamp(40px,8vw,120px); gap:24px} .nav__links{gap:36px}
.nav__links a{font:400 16px/1 var(--body); color:var(--paper-ink); border:0; padding:6px 0; transition:color .25s ease}
.nav__links a::before{content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green); margin-right:10px; vertical-align:2px}
.nav__links a:hover{color:var(--green-deep)}
.nav .btn--sm{height:56px; padding:0 24px 0 10px; font-size:16px; font-weight:600; gap:12px; transform-origin:100% 50%; transition:transform .25s var(--ease), background-color .2s var(--ease)}
.nav .btn--sm::before{content:""; flex:none; width:34px; height:34px; border-radius:50%; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C7940' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E") center/19px no-repeat}
.hdr.is-condensed .nav .btn--sm{transform:scale(.84)} .hdr.is-condensed .nav .btn--sm:active{transform:scale(.82)}
.burger{color:var(--ink)}
.drawer .btn{height:56px; padding:0 18px}
@media (min-width:1024px){
  .hdr__in{position:relative}
  .nav{justify-content:flex-end}
  .nav__links{position:absolute; left:50%; top:50%; translate:-50% -50%}
}

/* ---------- hero: centred and calm; the colour is the green headline line and the green pill ---------- */
.hero--canva{padding:250px 0 0; text-align:center; background:var(--paper)}
.hero--canva .wrap{position:relative; z-index:3}
.hero__copy--c{max-width:920px; margin:0 auto; position:relative; z-index:3}
.powered{display:flex; justify-content:center; align-items:center; gap:12px; font:400 21px/1 var(--body); color:var(--ink); margin:0 0 34px}
.powered img{height:26px; width:auto}
.hero--canva h1{font:400 clamp(54px,5.95vw,86px)/1 var(--display); letter-spacing:-.02em; text-transform:uppercase; color:var(--ink); max-width:15ch; margin:0 auto}
.hero--canva h1 em{display:block; font-style:normal; color:var(--green)}
.hero--canva .hero__lead{font:400 18px/1.55 var(--body); color:var(--ink-2); max-width:760px; margin:30px auto 36px; text-wrap:pretty}
@media (min-width:961px){ .hero--canva .hero__lead{max-width:640px} }
.hero--canva .hero__cta{justify-content:center; gap:clamp(24px,13vw,200px)}
.hero--canva .hero__cta .btn{padding:0 26px 0 20px; font-size:16px}
/* facts strip: one micro-label, a quiet spec row */
.hero--canva .strip{position:relative; z-index:3; margin-top:240px; background:var(--paper); text-align:left; border-top:var(--hair-l); border-bottom:var(--hair-l)}
.strip small{font:500 12px/1 var(--body); letter-spacing:.14em; color:var(--ink-3); margin-bottom:12px}
.strip b{font:500 16px/1.45 var(--body); text-transform:none; letter-spacing:0; color:var(--ink)}
.strip > div{border-left:var(--hair-l)} .strip > div:first-child{border-left:0}
@media (min-width:961px){ .strip .row{flex-direction:column; align-items:flex-start; gap:12px} }
/* sound rings: grey strokes fading outward, half-discs on the viewport edge, one composited breathe */
.rings{position:absolute; top:560px; width:min(62vw,920px); aspect-ratio:1; translate:0 -50%; pointer-events:none; color:#A6AAA5; z-index:0}
.rings--l{left:-29vw} .rings--r{right:-29vw}
.rings circle{fill:none; stroke:currentColor; stroke-width:.2; opacity:.6; transform-origin:50px 50px}
.rings circle:nth-child(2){opacity:.46} .rings circle:nth-child(3){opacity:.34} .rings circle:nth-child(4){opacity:.22} .rings circle:nth-child(5){opacity:.12}
.rings .dot{fill:currentColor; stroke:none; opacity:.5}
@media (min-width:961px){ .rings--l{left:calc(min(62vw,920px) / -2)} .rings--r{right:calc(min(62vw,920px) / -2)} }
/* the intro runs in CSS from the first paint: words rise once (expo, no tilt, no overshoot); the lead and the mic never move */
@media (prefers-reduced-motion:no-preference){
  html.js .hero--canva[data-intro] .kinetic .w > span{animation:ot-rise 1.1s var(--out-expo) backwards; animation-delay:calc(140ms + var(--i,0) * 45ms)}
  html.js .hero--canva[data-intro] .powered{animation:ot-up .9s var(--out-expo) 40ms backwards}
  html.js .hero--canva[data-intro] .hero__cta{animation:ot-up 1s var(--out-expo) 650ms backwards}
  html.js .hero--canva .rings{animation:ot-fade 1.8s ease-out backwards, ot-breathe 8s ease-in-out infinite alternate; will-change:transform}
}
html.js .hero--canva[data-intro] .kinetic .w > span{transform:none} /* (0,5,2) beats ot.css html.js.motion .kinetic .w > span */
@keyframes ot-rise{from{transform:translateY(118%)}}
@keyframes ot-up{from{opacity:0; transform:translateY(12px)}}
@keyframes ot-fade{from{opacity:0}}
@keyframes ot-breathe{from{transform:scale(.985)} to{transform:scale(1.015)}}
/* the mic: a real microphone on a thin grey cable; 220px of cable is parked above the clipped hero top and the rig lowers by
   transform only (ot-canva.js), so the mic rests at 708px and ends the hero scroll at 928px, as before */
.mic-rig{position:absolute; left:50%; top:-220px; translate:-50% 0; z-index:2; pointer-events:none; transform-origin:50% 0; --cable:928px; --payout:220px}
.mic-rig .mic-swing{display:flex; flex-direction:column; align-items:center; transform-origin:50% 0}
.mic-rig .cable{display:block; width:3px; height:var(--cable); background:#3D3D3D; border-radius:0 0 1.5px 1.5px}
.mic-rig .mic{display:block; width:132px; height:auto; margin-top:-1px; transform-origin:50% 0; filter:drop-shadow(0 16px 16px rgba(17,17,17,.16))}

/* ---------- about: pill heading, a balanced statement, the Episode 1 video on the x=760 line, the latest-episode hinge ---------- */
.about--canva{padding:var(--sec) 0 var(--sec-band)}
.about--canva .grid{display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start}
/* the eyebrow (picked 30 Sep, replaces the outlined pill): the Latest Episode bar's live equaliser in green, then a 12px tracked caps label.
   Markup: <span class="eq eq--eb" aria-hidden="true"> + five <i>, first thing inside the label. Also used by the Sarah page's .sg2-eb */
.about--canva .h2.pillh{display:flex; align-items:center; gap:12px; font:600 12px/1.3 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--ink); margin:0 0 26px}
.eq--eb{flex:none; height:16px; color:var(--green)} .eq--eb i{width:3px}
.eq--eb i:nth-child(1){transform:scaleY(.45)} .eq--eb i:nth-child(2){transform:scaleY(.9)} .eq--eb i:nth-child(3){transform:scaleY(.6)} .eq--eb i:nth-child(4){transform:scaleY(1)} .eq--eb i:nth-child(5){transform:scaleY(.5)}   /* resting heights: bars, not dots, when motion is off */
.about--canva .lead{font:400 clamp(30px,3vw,43px)/1.05 var(--display); text-transform:uppercase; letter-spacing:-.012em; color:var(--ink); margin:0 0 28px; max-width:26ch; text-wrap:balance}
.about--canva p{font-size:18px; line-height:1.6; color:var(--ink-2); max-width:58ch} .about--canva a{color:var(--green-deep)} .about--canva .btn{color:#fff}   /* the link colour is for text links, not a filled button */
.about__video.fan{position:relative; height:auto; perspective:none; border-radius:16px; overflow:hidden; background:#111}
.about__video .card{position:relative; inset:auto; width:100%; aspect-ratio:16/9; border-radius:16px; background:#111; box-shadow:none; transform:none !important; isolation:auto}
.about__video .card__img{position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:cover; object-position:50% 0; filter:none; mix-blend-mode:normal; -webkit-mask-image:none; mask-image:none; opacity:1; transition:transform 1.2s var(--out-expo)}
.about__video .card:hover .card__img{transform:scale(1.03)}
.about__video .card__play{right:auto; bottom:auto; left:50%; top:50%; translate:-50% -50%; width:76px; height:76px; background:#fff; color:#111}
.about__video .card__play:hover{transform:none}
.about__video .card__video{object-position:50% 50%; background:#111}
.about__video .card.is-video .card__img{transform:none} .about__video .card.is-video .card__play{display:none}   /* the intro is playing on its own controls */
.about__video .card__tag{left:18px; top:auto; bottom:18px; right:auto; max-width:calc(100% - 36px); white-space:nowrap; background:rgba(17,17,17,.6); color:#fff; font:500 13px/1.3 var(--body); border-radius:var(--pill); padding:9px 14px}
.latest{display:flex; align-items:center; gap:14px; max-width:660px; margin:72px auto 0; padding:8px 8px 8px 24px; border:1px solid var(--green); border-radius:var(--pill); background:var(--paper); text-align:left}
.latest .eq{color:var(--green-deep); height:22px; flex:none} .latest .eq i{width:3px}
.latest small{display:block; font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep); margin-bottom:7px}
.latest b{display:block; font:500 15px/1.35 var(--body); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.latest__play{margin-left:auto; flex:none; width:48px; height:48px; border-radius:50%; border:0; background:var(--green-deep); color:#fff; display:grid; place-items:center; cursor:pointer; transition:background-color .2s var(--ease)}
.latest__play svg{width:20px; height:20px; margin-left:3px} .latest__play:hover{transform:none; background:var(--ink)}
@media (min-width:961px){ .about__video.fan{align-self:center} .latest{margin-top:96px} }   /* video sits on the vertical centre of the text column */

/* ---------- featured episodes on #111: bordered cards, head-and-shoulders guests rising out of nested rounded art panels ---------- */
.feat--ink{background:#111; color:#fff; padding:var(--sec-band) 0}
.feat--ink .feat__head{border:0; padding:0; margin-bottom:44px; align-items:center}
.feat--ink .h2{color:#fff} .feat--ink .arrow{color:var(--green)}
.feat--ink .chips{margin-bottom:34px}
.feat--ink .chip{font:400 14px/1 var(--body); color:rgba(255,255,255,.82); border-color:rgba(255,255,255,.2); background:transparent; transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease)}
.feat--ink .chip[aria-disabled="true"]{opacity:1; border-style:solid; border-color:rgba(255,255,255,.08); color:rgba(255,255,255,.34); cursor:default}
.feat--ink .chip.is-active{background:#EFF1EE; color:#111; border-color:#EFF1EE} .feat--ink a.chip:hover{border-color:rgba(255,255,255,.6); color:#fff; background:rgba(255,255,255,.04)}
.feat--ink .eps{display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; align-items:stretch}
.epc{position:relative; display:flex; flex-direction:column; gap:12px; padding:24px 20px 0; border:1px solid rgba(255,255,255,.14); border-radius:16px; background:#111; overflow:visible; transition:border-color .5s ease}
.epc:hover,.epc:focus-within{border-color:rgba(255,255,255,.34)}
.epc .ep__num{font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; font-variant-numeric:tabular-nums; color:var(--green)}
.epc .ep__title{font:400 clamp(26px,2.2vw,32px)/1.04 var(--display); text-transform:uppercase; letter-spacing:-.01em; color:#fff; margin:0; text-wrap:balance} .epc .ep__title a{color:#fff}
.epc .ep__guest{font:400 17px/1.2 var(--display); text-transform:uppercase; letter-spacing:.01em; color:rgba(239,241,238,.55); margin:2px 0 4px; text-wrap:balance}
.epc .desc{font:400 15px/1.6 var(--body); color:rgba(239,241,238,.74); max-width:62ch; margin-top:8px}
.epc .ep__links{margin-top:4px; margin-bottom:48px; gap:10px; flex-direction:column; align-items:flex-start} .epc .ep__links .arrow{color:#fff; font-size:15px; font-weight:500; display:inline-flex; align-items:center}
.epc .ep__links .yt{width:24px; height:24px; border-radius:50%; background:#FF0033; color:#fff; padding:6px; box-sizing:border-box; margin-right:8px; flex:none}
.epc:not(:has(.ep__links)) .epc__art{margin-top:84px}
@media (min-width:961px){ .epc:not(:has(.ep__links)) .epc__art{margin-top:auto} .epc:not(:has(.ep__links)) .desc{margin-bottom:99px} }
.epc__art{position:relative; margin:auto -21px -1px; height:200px; background:#111; border:1px solid rgba(255,255,255,.14); border-radius:16px; overflow:visible; clip-path:inset(-160px 0 0 0 round 0 0 16px 16px)}
.epc__art .cut{position:absolute; right:-6%; bottom:0; width:min(320px,78%); height:260px; object-fit:cover; object-position:50% 0; scale:-1 1; filter:grayscale(1) contrast(1.06) brightness(.96); z-index:1}
/* 30 Sep: the guest is mirrored and set on the card's right side, facing in toward the logo and the waveform. The cutout's flat edge
   (where the original photo was split) now sits on or past the panel's right edge, which the clip-path hides, so the left-edge fade that
   used to hide it is gone. `scale` (not transform) so the GSAP rise-in, which writes transform, keeps the mirror. */
.epc__art .logo{position:absolute; left:18px; top:22px; height:64px; width:auto; opacity:.9}
.epc__art .logo[src*="a4t"]{height:52px; top:28px}
.epc__art .bars{position:absolute; left:16px; bottom:0; width:44%; height:76px; color:rgba(255,255,255,.3)}
.feat--ink .ep--cta{display:flex}
.feat--ink .card--cta{aspect-ratio:auto; height:100%; width:100%; border-radius:16px; background:linear-gradient(180deg,var(--green) 0%,var(--green-deep) 100%); padding:26px 22px 22px; display:flex; flex-direction:column; justify-content:flex-start; box-shadow:none}
.feat--ink .card--cta .cta__logo{height:46px; width:auto; margin:0 0 44px; align-self:flex-start}
.feat--ink .card--cta .big{font:400 clamp(36px,3.5vw,54px)/1 var(--display); text-transform:uppercase; letter-spacing:-.02em; color:#fff; margin:0 0 34px; max-width:9ch}
.feat--ink .card--cta .btn{background:#fff; color:#111; align-self:flex-start} .feat--ink .card--cta .btn:hover{background:#EFF1EE; color:#111}
.feat--ink .card--cta .wave,.feat--ink .card--cta .truckmark{display:none}
@media (min-width:1101px){
  .feat--ink .card--cta{padding:26px 22px}
  .feat--ink .card--cta .big{margin-top:auto}
}

/* ---------- who hosts it: three beats on a green timeline, a 24px quote, Sarah cropped at the chest and bleeding off the edge ---------- */
.host--line{background:var(--paper); padding:var(--sec-band) 0; overflow:hidden}
.host--line .grid{display:grid; grid-template-columns:1fr 440px; gap:80px; align-items:start; justify-content:space-between}
.host--line .grid > div:first-child{padding-bottom:0}
.host--line .h2{margin-bottom:28px}
.tl{position:relative; padding-left:56px}
.tl ol{list-style:none; margin:0; padding:0}
.tl__line{position:absolute; left:11px; top:14px; bottom:14px; width:1px; background:var(--green); transform-origin:top}
.tl li{position:relative; margin:0 0 18px} .tl li p{margin:0; font-size:17px; line-height:1.55; color:var(--ink); max-width:50ch}
.tl li::before{content:""; position:absolute; left:-56px; top:3px; width:22px; height:22px; border-radius:50%; border:1px solid var(--green); background:var(--paper)}
.tl li::after{content:""; position:absolute; left:-49px; top:10px; width:8px; height:8px; border-radius:50%; background:var(--green)}
.host--line .quote{border:0; padding:6px 0 0 56px; margin:28px 0 0; position:relative}
.host--line .quote::before{content:"\201C"; position:absolute; left:-2px; top:-14px; font:400 84px/1 var(--display); color:#C6C9C5}
.host--line .quote p{font:italic 400 24px/1.4 var(--body); color:var(--green); max-width:34ch; margin:0 0 12px; letter-spacing:0} /* keep at 24px or larger at every width: below that #209D50 fails AA */
.host--line .quote cite{font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)} .host--line .quote cite a{color:var(--ink); border-bottom-color:var(--green)}
.host__cut{margin:0; align-self:start; display:block; width:440px; max-width:100%; aspect-ratio:4/5; border-radius:16px; overflow:hidden; background:#E4E7E2}
.host__cut img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 20%}
@media (min-width:961px) and (max-width:1100px){ .host--line .grid{grid-template-columns:1fr 360px; gap:48px} .host__cut{width:360px} }

/* ---------- come on the show: the studio at full strength under a scrim, copy top-left, the invitation bar on the rug ---------- */
.guest--studio{position:relative; background:#111; color:#fff; padding:var(--sec) 0; min-height:810px; overflow:hidden; display:flex; align-items:stretch}
.guest--studio .bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 62%; opacity:1; filter:brightness(.82) contrast(1.08)}
.guest--studio::before{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(17,17,17,.86) 0%,rgba(17,17,17,.5) 40%,rgba(17,17,17,0) 68%); z-index:1; pointer-events:none}
.guest--studio .wrap{position:relative; z-index:2; display:flex; flex-direction:column}
.guest--studio .h2{color:#fff; margin-bottom:26px}
.guest--studio p{font-size:18px; line-height:1.6; color:#EFF1EE; max-width:40ch}
.guest__bar{display:flex; align-items:center; gap:14px; margin:auto 0 0 auto; padding:6px 6px 6px 26px; border:1px solid var(--green); border-radius:var(--pill); background:rgba(17,17,17,.55); backdrop-filter:blur(8px); max-width:100%}
.guest__bar .big{font:400 16px/1.45 var(--body); color:#fff; margin:0; max-width:40ch; text-wrap:balance; text-transform:none; letter-spacing:0}
.guest__bar .btn{flex:none}
@media (min-width:961px){
  .guest--studio{padding:var(--sec-band) 0 64px; min-height:clamp(760px,62.5vw,900px)}
  .guest--studio .wrap{gap:56px}
  .guest--studio p{max-width:44ch}
}

/* ---------- newsletter: one flat green card, a 24px lead, a paper field, a caption note ---------- */
.news-band{padding:var(--sec) 0 0}
.news{background:var(--green); border-radius:24px; padding:62px 60px; gap:80px; align-items:center; box-shadow:none}
.news::after{display:none}
.news .h2{color:#fff} .news p{font:400 24px/1.4 var(--body); color:#fff; max-width:30ch} .news p em{font-style:italic}
.news .form{display:flex; align-items:center; gap:10px; background:var(--paper); border-radius:12px; padding:8px 8px 8px 20px; border:0}
.news .form input{flex:1; min-width:0; border:0; background:transparent; font:400 16px/1 var(--body); color:var(--ink); padding:14px 0; caret-color:var(--green-ui)}
.news .form input::placeholder{color:#616160; opacity:1}
.news .btn,.news .btn--pap,.news .on-dark .btn{background:#111; color:#fff; border-radius:10px; height:48px; padding:0 22px; font-size:16px} .news .btn:hover{background:#000; color:#fff}
.news .note,.news small,.news p.small{color:rgba(255,255,255,.85)}
.news .form__note{font:400 14px/1.5 var(--body); color:#111; max-width:none; margin:14px 0 0 20px}

/* ---------- common questions: on the page grid, answers tucked under their questions, a quiet unfold ---------- */
.faq--canva{padding:var(--sec) 0}
.faq--canva .faq__head{text-align:center; margin-bottom:56px}
.faq--canva details{border-top:1px solid rgba(17,17,17,.3); padding:6px 0; max-width:1150px; margin:0 auto} .faq--canva details:last-of-type{border-bottom:1px solid rgba(17,17,17,.3)}
.faq--canva summary{font:700 clamp(20px,1.8vw,26px)/1.3 var(--body); color:var(--ink); padding:34px 0; letter-spacing:-.01em; text-transform:none; transition:color .25s ease}
.faq--canva summary:hover{color:var(--green-deep)}
.faq--canva details[open] summary{padding-bottom:14px}
.faq--canva summary .pm{width:40px; height:40px; border:0; color:var(--ink); background:transparent; transition:transform .5s var(--spring)} .faq--canva summary .pm svg{width:28px; height:28px}
.faq--canva details[open] summary .pm{background:transparent; border:0; color:var(--ink); transform:rotate(45deg)}
.faq--canva details p{font:400 18px/1.6 var(--body); color:var(--ink-2); padding:0 0 36px; max-width:62ch}
@media (prefers-reduced-motion:no-preference){ .faq--canva details[open] > p{animation:ot-unfold .6s var(--out-expo) backwards} }
@keyframes ot-unfold{from{opacity:0; transform:translateY(-8px)}}
@media (min-width:961px){
  .faq--canva details{max-width:none; margin:0}
  .faq--canva summary{padding:34px 60px}
  .faq--canva details p{margin-left:60px}
}

/* ---------- footer and dock on #111 ---------- */
.ftr{background:#111; color:#fff; padding:100px 0 34px}
.ftr a{color:#fff} .ftr p,.ftr small,.ftr li{color:rgba(255,255,255,.72)} .ftr a:hover{color:var(--green)}
.ftr [class*="__top"],.ftr [class*="__bar"]{border-color:rgba(255,255,255,.14)}
.ftr h4{font-size:12px; font-weight:500; letter-spacing:.14em; color:rgba(255,255,255,.6)}
.ftr li[aria-disabled="true"]{color:rgba(255,255,255,.5)}
.ftr .badges .badge{width:48px; height:48px; background:rgba(255,255,255,.06); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} .ftr .badges .badge svg{width:20px; height:20px}
.ftr .badges .badge.is-off{opacity:1; background:transparent; color:rgba(255,255,255,.36); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ftr a.badge:hover{background:var(--green-ui); color:#fff}
.ftr__bar{color:rgba(255,255,255,.6); display:grid; grid-template-columns:1fr auto 1fr} /* ot.css uses --ink-3 here; keeps the (c) line legible on #111 */
.ftr__bar > :last-child{justify-self:end}
.dock{background:#111; color:#fff; border-color:rgba(255,255,255,.16); box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.dock b{color:#fff} .dock small{font-size:12px; font-weight:500; letter-spacing:.14em; color:rgba(255,255,255,.6)}
.dock__play{background:var(--green); color:#fff; transition:background-color .2s var(--ease)} .dock__play:hover{transform:none; background:var(--green-deep)}
.dock__x{color:#fff}
.dock__art{background:#1F1F1F; outline:1px solid rgba(255,255,255,.12); outline-offset:-1px} /* outline, not an inset shadow: the img would cover a shadow */
.dock__art img{filter:grayscale(1) contrast(1.05) brightness(.96); mix-blend-mode:normal; object-position:50% 70%}
/* held until the latest-episode bar has scrolled past, tucked away over the footer (ot-canva.js); same specificity as .dock.is-on, later file */
.dock.is-held{transform:translate(-50%,120%); opacity:0; visibility:hidden; transition:transform .5s cubic-bezier(.7,0,.84,0), opacity .3s ease, visibility 0s .5s}

/* ---------- focus, selection, scrollbar ---------- */
:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.on-dark :focus-visible,.ftr :focus-visible,.dock :focus-visible{outline-color:#fff}
.news :focus-visible{outline-color:var(--ink)}
.news .form:focus-within{outline:2px solid var(--ink); outline-offset:3px}
::selection{background:var(--green-ui); color:#fff}
html{scrollbar-color:rgba(17,17,17,.32) var(--paper); -webkit-tap-highlight-color:transparent}

/* ---------- responsive ---------- */
@media (max-width:1180px){ .hero--canva h1{font-size:clamp(48px,6.4vw,76px)} }
@media (max-width:1100px){
  .feat--ink .eps{grid-template-columns:1fr 1fr}
  .feat--ink .ep--cta{grid-column:1/-1}
  .feat--ink .card--cta{flex-direction:row; align-items:center; gap:28px; padding:28px 30px; min-height:0}
  .feat--ink .card--cta .cta__logo{margin:0; height:40px}
  .feat--ink .card--cta .big{margin:0; max-width:none; flex:1; font-size:clamp(28px,3.4vw,40px)}
  .feat--ink .card--cta .btn{align-self:center}
}
@media (max-width:960px){
  :root{--sec:120px; --sec-band:96px}
  .hdr__in{height:84px} .brand img{height:52px} .nav{margin-left:auto; flex:0 0 auto}
  .hero--canva{padding-top:150px}
  .hero--canva .strip{margin-top:220px}
  .hero--canva .strip > div{border-left:0; padding-left:0}
  .rings{width:90vw} .rings--l{left:-60vw} .rings--r{right:-60vw}
  .mic-rig{top:-430px; --cable:900px; --payout:430px} .mic-rig .cable{width:2px} .mic-rig .mic{width:88px} /* rest stays at 470px */
  .about--canva .grid{grid-template-columns:1fr; gap:36px}
  .about--canva .lead{font-size:clamp(30px,5.2vw,42px); max-width:24ch}
  .about__video.fan{display:block} .about__video .card{display:block}
  .latest{max-width:none; margin:48px 0 0}
  .badges .badge,.strip .row .badge{width:44px; height:44px} .badges .badge svg{width:18px; height:18px}
  .arrow,.ep__links .arrow{padding:12px 0}
  .arrow,.on-dark .arrow{background-position:0 calc(100% - 10px) !important}
  .feat--ink .feat__head .arrow{padding:12px 0}
  .feat--ink .eps{grid-template-columns:1fr}
  .feat--ink .card--cta{flex-direction:column; align-items:flex-start; gap:24px; padding:28px 24px}
  .feat--ink .card--cta .big{font-size:clamp(30px,5vw,44px)}
  .feat--ink .card--cta .btn{align-self:flex-start}
  .epc__art{height:200px; overflow:hidden}
  .epc__art .cut{height:200px; width:min(230px,62%); right:0}
  .epc .ep__links{margin-bottom:20px}
  .epc:not(:has(.ep__links)) .epc__art{margin-top:24px}
  .epc .ep__title{font-size:clamp(26px,3.6vw,30px)}
  .host--line .grid{grid-template-columns:1fr; gap:24px} .host--line .grid > div:first-child{padding-bottom:0}
  .host__cut{width:min(420px,100%); margin:8px auto 0}
  .host--line .quote cite a{display:inline-block; padding:11px 0}
  .guest--studio{min-height:0}
  .guest--studio::before{background:rgba(17,17,17,.66)}
  .guest__bar{flex-direction:column; align-items:stretch; border-radius:28px; padding:20px; margin-top:44px} .guest__bar .big{max-width:none}
  .guest__bar .btn{justify-content:center}
  .news{padding:44px 28px; gap:28px}
  .faq--canva summary{padding:28px 0} .faq--canva details p{padding-right:0}
}
@media (min-width:701px) and (max-width:960px){
  .hero--canva .hero__cta{gap:150px}
  .feat--ink .eps{grid-template-columns:1fr 1fr; gap:16px}
  .feat--ink .ep--cta{grid-column:1/-1}
  .epc__art{height:240px}
  .epc__art .cut{height:240px; width:min(280px,74%)}
  .epc:not(:has(.ep__links)) .epc__art{margin-top:auto}
  .epc:not(:has(.ep__links)) .desc{margin-bottom:24px}
}
@media (max-width:700px){
  :root{--sec:110px; --sec-band:80px}
  .hdr__in{height:64px} .brand img{height:40px}
  .hdr.is-condensed .hdr__in{height:58px} .hdr.is-condensed .brand img{height:36px}
  .hero--canva{padding-top:244px}
  .mic-rig{display:block; top:0; --cable:112px; --payout:0px}
  .mic-rig .mic{width:50px; filter:drop-shadow(0 12px 12px rgba(17,17,17,.16))}
  .powered{font-size:17px; margin-bottom:22px} .powered img{height:22px}
  .hero--canva .hero__lead{font-size:16.5px; line-height:1.6; margin:22px auto 28px}
  .hero--canva .hero__cta{flex-direction:column; gap:18px}
  .hero--canva .strip{margin-top:72px}
  .about--canva .lead{font-size:clamp(28px,8.4vw,34px)}
  .about__video .card__tag{white-space:normal; left:12px; bottom:12px; max-width:calc(100% - 24px); font-size:12px; padding:8px 12px}
  .about__video .card__play{width:60px; height:60px}
  .latest{border-radius:24px; display:grid; grid-template-columns:auto 1fr auto; gap:12px; padding:12px 12px 12px 18px}
  .latest b{white-space:normal; font-size:14px} .latest__play{width:44px; height:44px}
  .feat--ink .card--cta .big{font-size:clamp(28px,8vw,36px)}
  .feat--ink .card--cta .btn{align-self:stretch; justify-content:center}
  .host--line .h2{margin-bottom:28px}
  .tl{padding-left:36px} .tl__line{left:8.5px}
  .tl li{margin-bottom:22px} .tl li p{font-size:17px; line-height:1.55}
  .tl li::before{left:-36px; top:4px; width:18px; height:18px}
  .tl li::after{left:-30px; top:10px; width:6px; height:6px}
  .host--line .quote{padding-left:36px; margin-top:32px}
  .news .form{flex-direction:column; align-items:stretch; padding:8px; border-radius:14px}
  .news .form input{text-align:left; padding:14px 12px}
  .news .btn{width:100%; justify-content:center}
  /* Android Chrome sizes an auto-width input from the font's bounding box (about 340px for Google's Poppins), which
     stretched this one column past the card on phones and clipped its right side. Let the column and the input shrink. */
  .news{grid-template-columns:minmax(0,1fr)}
  .news .form input{width:100%}
  .ftr__bar{grid-template-columns:1fr; justify-items:start; gap:12px} .ftr__bar > :last-child{justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  a:hover > .i-arr{transform:none}
  .btn:active,.on-dark .btn:active{transform:none}
  .about__video .card:hover .card__img{transform:none}
  .dock,.dock.is-on,.dock.is-held{transition:opacity .2s ease, visibility 0s}
}

/* ============================================================ version E: light and material (premium, not funky, not empty)
   One light source from above on every paper section, a fine paper grain, tonal depth on the dark surfaces, tactile buttons,
   glass on the dock, soft shadows that lift the video, the portrait and the newsletter card off the page. Three quiet
   moments (ot-canva.js): section titles unmask, the studio light breathes, a hairline scroll progress in the header. */
/* paper grain: one fixed layer, grey noise blended so it never tints; 5 percent, felt more than seen */
body::after{content:""; position:fixed; inset:0; z-index:70; pointer-events:none; opacity:.055; mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/200px 200px}
/* light from above on paper */
.about--canva,.host--line,.faq--canva{background:radial-gradient(90% 70% at 50% 0, #F5F7F3 0, var(--paper) 62%)}
.hero--canva::before{content:""; position:absolute; left:50%; top:520px; width:min(980px,90vw); aspect-ratio:1; translate:-50% -50%; border-radius:50%; background:radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0)); z-index:0; pointer-events:none}
.hdr.is-condensed{box-shadow:0 12px 32px -26px rgba(17,17,17,.4)}
.hdr__progress{position:absolute; left:0; bottom:-1px; height:1px; width:100%; background:var(--green); transform:scaleX(0); transform-origin:0 50%; pointer-events:none}
.hdr{position:fixed} /* already fixed in ot.css; restated so the progress line has its containing block */
/* the facts strip as a quiet tonal panel */
.hero--canva .strip{background:#E9ECE7; border:0; border-radius:16px; padding:0 32px}
.strip > div{padding-top:28px; padding-bottom:28px}
/* tactile buttons and circles */
.btn,.on-dark .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.btn:hover,.on-dark .btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 14px 28px -16px rgba(22,67,40,.6)}
.feat--ink .card--cta .btn,.news .btn{box-shadow:none} .feat--ink .card--cta .btn:hover{box-shadow:0 14px 28px -16px rgba(0,0,0,.5)}
.badges .badge{box-shadow:inset 0 1px 0 rgba(255,255,255,.14)} .badges .badge.is-off{box-shadow:inset 0 0 0 1px rgba(17,17,17,.22)}
.latest{background:rgba(255,255,255,.55); box-shadow:0 24px 48px -32px rgba(17,17,17,.35)}
.latest__play,.about__video .card__play{box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px -12px rgba(17,17,17,.5)}
/* the objects lift off the page */
.about__video.fan{box-shadow:0 36px 72px -40px rgba(17,17,17,.5)}
.host__cut{box-shadow:0 36px 72px -44px rgba(17,17,17,.4); outline:1px solid rgba(17,17,17,.06); outline-offset:-1px}
.news{position:relative; box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 48px 96px -56px rgba(28,121,64,.6)}
.news::after{display:block; content:""; position:absolute; inset:0; border-radius:24px; background:radial-gradient(90% 90% at 6% 0, rgba(255,255,255,.16), transparent 58%); pointer-events:none}
/* depth on the dark surfaces */
.feat--ink{background:radial-gradient(80% 60% at 50% 0, #1B1B1B 0, #111 68%)}
.epc{background:#151515; box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.epc::before{content:""; position:absolute; inset:0; border-radius:16px; background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 42%); opacity:0; transition:opacity .6s var(--ease); pointer-events:none}
.epc:hover::before,.epc:focus-within::before{opacity:1}
.epc__art{background:#111; box-shadow:inset 0 2px 10px rgba(0,0,0,.45)}
.feat--ink .card--cta{box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 40px 80px -48px rgba(32,157,80,.55)}
.guest--studio::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.55; background:radial-gradient(58% 52% at 63% 58%, rgba(255,255,255,.12), transparent 70%)}
html.motion .guest--studio::after{animation:ot-breath 9s ease-in-out infinite alternate}
@keyframes ot-breath{from{opacity:.3} to{opacity:.9}}
.faq--canva details{transition:background-color .35s var(--ease)} .faq--canva details:hover{background:rgba(17,17,17,.03)}
.ftr{background:linear-gradient(180deg,#171717 0,#111 240px)}
.dock{background:rgba(17,17,17,.82); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); box-shadow:0 24px 56px -22px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08)}
@media (max-width:960px){ .hero--canva .strip{padding:0 20px} .strip > div{padding-top:20px; padding-bottom:20px} .hero--canva::before{top:440px} }
@media (prefers-reduced-motion:reduce){ .guest--studio::after{animation:none} .epc::before{transition:none} }

/* ============================================================ version F: header, hero and section openers
   Header: transparent over the hero at the top of the page; once scrolled it condenses into a floating glass bar inset
   from the edges. Nav links draw an underline. Hero: bigger headline, softer edges. Every section title carries a short
   green rule (the recurring mark). About statement steps up. */
.hdr{background:transparent; border-bottom-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; transition:top .35s var(--ease), left .35s var(--ease), right .35s var(--ease), background-color .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), border-radius .35s var(--ease)}
.hdr.is-condensed{top:12px; left:16px; right:16px; border-radius:999px; background:rgba(239,241,238,.8); border:1px solid rgba(17,17,17,.08); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); box-shadow:0 18px 44px -24px rgba(17,17,17,.45), inset 0 1px 0 rgba(255,255,255,.5)}
.hdr.is-condensed .hdr__in{height:68px; padding:0 8px 0 22px; width:auto}
.hdr.is-condensed .brand img{height:42px}
.hdr.is-condensed .nav .btn--sm{transform:none; height:52px}
.hdr.is-condensed .nav .btn--sm:active{transform:scale(.98)}
.nav__links a{position:relative; padding:10px 0 12px}
.nav__links a::after{content:""; position:absolute; left:17px; right:0; bottom:4px; height:1px; background:var(--green-deep); transform:scaleX(0); transform-origin:0 50%; transition:transform .45s var(--ease)}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1)}
.hdr__progress{position:fixed; top:0; left:0; bottom:auto; height:2px; width:100%; z-index:60}
/* hero */
.hero--canva{min-height:100svh; padding-top:236px}
.hero--canva h1{font-size:clamp(56px,6.5vw,96px); letter-spacing:-.025em; max-width:14ch}
.hero--canva .hero__lead{margin-top:34px}
.hero--canva::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(120% 80% at 50% 40%, transparent 55%, rgba(17,17,17,.045) 100%)}
.rings{color:#9EA39D}
/* section openers: a short green rule above every section title (none on the newsletter card) */
main .h2:not(.pillh)::before{content:""; display:block; width:44px; height:3px; border-radius:2px; background:var(--green); margin:0 0 20px}
.faq--canva .h2::before{margin-left:auto; margin-right:auto}
main .news .h2::before{display:none}
.about--canva .lead{font-size:clamp(34px,3.5vw,48px); max-width:22ch}
@media (min-width:961px){ .about--canva .lead{max-width:none} }   /* full column width: the balanced wrap sets it in 3 lines, not 4 */
.feat--ink .feat__head .arrow{border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:12px 18px; background:none !important; color:#fff; transition:border-color .3s var(--ease), background-color .3s var(--ease)}
.feat--ink .feat__head .arrow:hover{border-color:#fff; background:rgba(255,255,255,.06) !important}
@media (max-width:960px){
  .hdr.is-condensed{top:8px; left:10px; right:10px} .hdr.is-condensed .hdr__in{height:60px; padding:0 4px 0 14px}
  .hero--canva{min-height:0}
}
@media (max-width:700px){ .hero--canva{padding-top:244px} .hero--canva h1{font-size:clamp(44px,12vw,56px)} main .h2:not(.pillh)::before{width:36px; margin-bottom:16px} }
/* F.1: keep the approved three-line headline and the CTA above the fold; the floating bar sits on the content column */
.hero--canva{min-height:0}
.hero--canva h1{font-size:clamp(54px,6.3vw,92px); max-width:16ch}
.hdr.is-condensed{left:max(16px, calc((100% - var(--wrap) - 60px) / 2)); right:max(16px, calc((100% - var(--wrap) - 60px) / 2)); background:rgba(239,241,238,.9)}
@media (max-width:960px){ .hdr.is-condensed{left:10px; right:10px} }
@media (max-width:700px){ .hero--canva h1{font-size:clamp(44px,12vw,56px); max-width:none} }
.faq--canva .faq__head .h2::before{margin:0 auto 20px}

/* ============================================================ version G: the header as an object
   Logo · a capsule nav (hairline pill, each link gets a white pill on hover; no bullet dots) · a play-latest circle with a
   slow green pulse · the Be a Guest pill. Same structure top and condensed. */
.nav{gap:12px}
.nav__links{gap:2px; padding:4px; border-radius:999px; background:rgba(17,17,17,.04); border:1px solid rgba(17,17,17,.08)}
.nav__links a{font:500 15px/1 var(--body); letter-spacing:.005em; color:var(--ink); padding:11px 16px; border-radius:999px; transition:background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease)}
.nav__links a::before,.nav__links a::after{content:none}
.nav__links a:hover,.nav__links a:focus-visible{background:#fff; color:var(--ink); box-shadow:0 6px 16px -10px rgba(17,17,17,.35)}
.nav__links a[aria-current="page"]{background:var(--ink); color:#fff}
.hdr.is-condensed .nav__links{background:rgba(17,17,17,.05); border-color:rgba(17,17,17,.06)}
.hdr__play{position:relative; flex:none; width:48px; height:48px; border-radius:50%; border:0; background:var(--ink); color:#fff; display:grid; place-items:center; cursor:pointer; transition:background-color .25s var(--ease), transform .15s var(--ease); box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.hdr__play svg{width:16px; height:16px; margin-left:2px}
.hdr__play::after{content:""; position:absolute; inset:-1px; border-radius:50%; border:1.5px solid var(--green); opacity:0; pointer-events:none}
html.motion .hdr__play::after{animation:ot-pulse 3.4s ease-out infinite}
@keyframes ot-pulse{0%{transform:scale(1); opacity:.75} 65%{transform:scale(1.6); opacity:0} 100%{transform:scale(1.6); opacity:0}}
.hdr__play:hover{background:var(--green-ui)} .hdr__play:active{transform:scale(.96)}
.nav .btn--sm{height:52px; padding:0 22px 0 8px; gap:12px} .hdr.is-condensed .nav .btn--sm{height:48px}
.nav .btn--sm::before{width:36px; height:36px}
.hdr.is-condensed .hdr__play{width:44px; height:44px}
.burger{width:46px; height:46px; border:1px solid rgba(17,17,17,.14); border-radius:50%; padding:11px; background:rgba(239,241,238,.7)}
@media (max-width:1180px){ .nav__links a{padding:11px 13px} }
@media (max-width:960px){ .hdr__play{display:none} }
@media (prefers-reduced-motion:reduce){ .hdr__play::after{animation:none} }
/* G.1: the capsule is opaque paper at the top of the page, so the mic cable passes behind it instead of through the links */
.hdr:not(.is-condensed) .nav__links{background:#EFF1EE; box-shadow:0 10px 30px -22px rgba(17,17,17,.4)}

/* ============================================================ version H: the hero gets people and colour
   A faint green sky at the top, a green glow under the mic, and the two guests as quiet chips flanking the mic between
   the CTA row and the facts strip (real photos, real names, linking to their episodes). */
.hero--canva{background:linear-gradient(180deg,#E7EEE8 0,var(--paper) 44%)}
.hero--canva::before{background:radial-gradient(closest-side, rgba(255,255,255,.92), rgba(255,255,255,0))}
.mic-rig .mic{filter:drop-shadow(0 16px 16px rgba(17,17,17,.16)) drop-shadow(0 44px 54px rgba(28,121,64,.28))}
.hero__guests{position:relative; z-index:3; display:flex; justify-content:space-between; align-items:center; gap:24px; margin:56px 0 0; text-align:left}
.gchip{display:flex; align-items:center; gap:14px; padding:8px 20px 8px 8px; border-radius:999px; background:rgba(255,255,255,.62); border:1px solid rgba(17,17,17,.08); text-decoration:none; color:var(--ink); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 18px 40px -28px rgba(17,17,17,.45); transition:transform .45s var(--ease), background-color .3s var(--ease), box-shadow .45s var(--ease)}
.gchip:hover{background:#fff; transform:translateY(-2px); box-shadow:0 22px 44px -26px rgba(17,17,17,.5)}
.gchip img{flex:none; width:56px; height:56px; border-radius:50%; object-fit:cover; object-position:50% 10%; filter:grayscale(1) contrast(1.05); background:#161616; box-shadow:inset 0 0 0 1px rgba(17,17,17,.1)}
.gchip small{display:block; font:500 11px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--green-deep); margin-bottom:5px}
.gchip b{display:block; font:600 14px/1.2 var(--body); color:var(--ink)}
.gchip i{display:block; font:400 12.5px/1.3 var(--body); font-style:normal; color:var(--ink-3); margin-top:2px; max-width:24ch}
.hero--canva .strip{margin-top:120px}
@media (prefers-reduced-motion:no-preference){ html.js .hero--canva[data-intro] .hero__guests{animation:ot-up 1s var(--out-expo) 900ms backwards} }
@media (max-width:960px){ .hero__guests{margin-top:40px} .gchip{padding:6px 14px 6px 6px} .gchip img{width:48px; height:48px} .gchip i{display:none} .hero--canva .strip{margin-top:120px} }
@media (max-width:700px){ .hero__guests{display:none} .hero--canva .strip{margin-top:72px} }

/* ============================================================ version H.1: the condensed header bar is green
   Once scrolled, the floating bar is deep green glass with a white logo, white links, a white play circle and a white
   Be a Guest pill (green icon), so the bar reads as one branded object over any section. */
.hdr.is-condensed{background:rgba(22,67,40,.92); border-color:rgba(255,255,255,.12); box-shadow:0 22px 48px -24px rgba(22,67,40,.7), inset 0 1px 0 rgba(255,255,255,.14)}
.hdr.is-condensed .brand img{filter:brightness(0) invert(1)}
.hdr.is-condensed .nav__links{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14)}
.hdr.is-condensed .nav__links a{color:rgba(255,255,255,.92)}
.hdr.is-condensed .nav__links a:hover,.hdr.is-condensed .nav__links a:focus-visible{background:#fff; color:var(--green-deep); box-shadow:none}
.hdr.is-condensed .nav__links a[aria-current="page"]{background:#fff; color:var(--green-deep)}
.hdr.is-condensed .hdr__play{background:#fff; color:var(--green-deep); box-shadow:none}
.hdr.is-condensed .hdr__play:hover{background:#EFF1EE}
.hdr.is-condensed .hdr__play::after{border-color:rgba(255,255,255,.7)}
.hdr.is-condensed .nav .btn--sm{background:#fff; color:var(--green-deep); box-shadow:none}
.hdr.is-condensed .nav .btn--sm:hover{background:#EFF1EE; color:var(--green-deep)}
.hdr.is-condensed .nav .btn--sm::before{background-color:var(--green-ui); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E")}
.hdr.is-condensed .burger{color:#fff; border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.08)}
.hdr.is-condensed :focus-visible{outline-color:#fff}
/* H.2: on wide screens the guest chips sit on the CTA row itself (outer columns), so the whole row reads as one control bar above the fold */
@media (min-width:1200px){ .hero__guests{margin-top:-63px} .hero--canva .strip{margin-top:230px} }
/* H.3: the nav capsule is deep green at the top of the page too (white links, white pill on hover); in the green bar it stays a lighter capsule */
.hdr:not(.is-condensed) .nav__links{background:var(--green-deep); border-color:rgba(255,255,255,.12); box-shadow:0 14px 34px -20px rgba(22,67,40,.7), inset 0 1px 0 rgba(255,255,255,.12)}
.hdr:not(.is-condensed) .nav__links a{color:rgba(255,255,255,.92)}
.hdr:not(.is-condensed) .nav__links a:hover,.hdr:not(.is-condensed) .nav__links a:focus-visible{background:#fff; color:var(--green-deep); box-shadow:none}
.hdr:not(.is-condensed) .nav__links a[aria-current="page"]{background:#fff; color:var(--green-deep)}
.hdr:not(.is-condensed) .nav__links a:focus-visible{outline-color:#fff}

/* ============================================================ version I: the hero gets a stage
   The facts strip becomes a deep-green panel at the foot of the hero; the mic hangs IN FRONT of it and descends onto it as
   the cable pays out. A soft sound ripple leaves the mic capsule. Listen Now carries an icon circle like Be a Guest. */
.hero--canva .strip{background:linear-gradient(180deg,#1B4F31 0,#164328 100%); color:#fff; border:1px solid rgba(255,255,255,.08); border-radius:22px; padding:0 36px; box-shadow:0 40px 80px -48px rgba(22,67,40,.7), inset 0 1px 0 rgba(255,255,255,.1)}
.hero--canva .strip > div{border-left:1px solid rgba(255,255,255,.12)} .hero--canva .strip > div:first-child{border-left:0}
.hero--canva .strip small{color:rgba(255,255,255,.6)} .hero--canva .strip b{color:#fff}
.hero--canva .strip .badge{background:#fff; color:#111; box-shadow:none} .hero--canva .strip a.badge:hover{background:var(--green); color:#fff}
.hero--canva .strip .badge.is-off{background:transparent; color:rgba(255,255,255,.5); box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.mic-rig{z-index:4}
.mic-rig .mic{filter:drop-shadow(0 18px 18px rgba(17,17,17,.28)) drop-shadow(0 44px 54px rgba(28,121,64,.3))}
.mic-rig .mic-swing{position:relative}
.mic-rig .mic-swing::after{content:""; position:absolute; left:50%; top:calc(var(--cable) + 205px); width:150px; height:150px; translate:-50% -50%; border-radius:50%; border:1.5px solid var(--green); opacity:0; pointer-events:none; z-index:-1}
html.motion .mic-rig .mic-swing::after{animation:ot-ripple 7s cubic-bezier(.16,1,.3,1) 1.4s infinite}
@keyframes ot-ripple{0%{transform:scale(.6); opacity:.45} 30%{transform:scale(3.2); opacity:0} 100%{transform:scale(3.2); opacity:0}}
.hero--canva .hero__cta .btn{height:56px; padding:0 26px 0 8px; gap:12px}
.hero--canva .hero__cta .btn svg{width:40px; height:40px; padding:10px; border-radius:50%; background:#fff; color:var(--green-ui); box-sizing:border-box}
@media (min-width:1200px){ .hero--canva .strip{margin-top:130px} }
@media (min-width:961px) and (max-width:1199px){ .hero--canva .strip{margin-top:110px} }
@media (max-width:960px){ .hero--canva .strip{padding:0 24px} .hero--canva .strip > div{border-left:0; border-top:1px solid rgba(255,255,255,.12)} .hero--canva .strip > div:first-child{border-top:0} }
@media (max-width:700px){ .hero--canva .strip{margin-top:72px} }
@media (prefers-reduced-motion:reduce){ .mic-rig .mic-swing::after{animation:none} }

/* ============================================================ version J: the green bar is the standard header
   The floating deep-green glass bar is the header from the first pixel (a little taller at the top, 64px once scrolled):
   white logo, white links in a light capsule, white play circle, white Be a Guest pill with a green icon. */
.hdr{top:12px; left:max(16px, calc((100% - var(--wrap) - 60px) / 2)); right:max(16px, calc((100% - var(--wrap) - 60px) / 2)); border-radius:999px; background:linear-gradient(180deg,rgba(27,79,49,.94),rgba(22,67,40,.94)); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3); box-shadow:0 22px 48px -24px rgba(22,67,40,.7), inset 0 1px 0 rgba(255,255,255,.14); transition:box-shadow .35s var(--ease)}
.hdr.is-condensed{background:linear-gradient(180deg,rgba(27,79,49,.96),rgba(22,67,40,.96)); box-shadow:0 26px 56px -26px rgba(17,17,17,.6), inset 0 1px 0 rgba(255,255,255,.14)}
.hdr__in{height:72px; padding:0 8px 0 22px; width:auto} .hdr.is-condensed .hdr__in{height:64px}
.brand img{height:46px; filter:brightness(0) invert(1)} .hdr.is-condensed .brand img{height:40px}
.hdr .nav__links,.hdr:not(.is-condensed) .nav__links{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); box-shadow:none}
.hdr .nav__links a,.hdr:not(.is-condensed) .nav__links a{color:rgba(255,255,255,.92)}
.hdr .nav__links a:hover,.hdr .nav__links a:focus-visible,.hdr:not(.is-condensed) .nav__links a:hover,.hdr:not(.is-condensed) .nav__links a:focus-visible{background:#fff; color:var(--green-deep); box-shadow:none}
.hdr .nav__links a[aria-current="page"]{background:#fff; color:var(--green-deep)}
.hdr .hdr__play{background:#fff; color:var(--green-deep); box-shadow:none; width:44px; height:44px} .hdr .hdr__play:hover{background:#EFF1EE} .hdr .hdr__play::after{border-color:rgba(255,255,255,.7)}
.hdr .nav .btn--sm{height:48px; background:#fff; color:var(--green-deep); box-shadow:none; transform:none} .hdr .nav .btn--sm:hover{background:#EFF1EE; color:var(--green-deep)}
.hdr .nav .btn--sm::before{width:34px; height:34px; background-color:var(--green-ui); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'/%3E%3C/svg%3E")}
.hdr .burger{color:#fff; border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.08)}
.hdr :focus-visible{outline-color:#fff}
@media (max-width:960px){ .hdr{top:8px; left:10px; right:10px} .hdr__in{height:60px; padding:0 4px 0 14px} .hdr.is-condensed .hdr__in{height:56px} .brand img{height:36px} .hdr.is-condensed .brand img{height:32px} }
/* I.1: the strip is a stage on desktop: the three facts sit along its foot, the mic hangs into the empty upper centre and
   never covers text (payout shortened to 120px so the grille stays above the fact row at every scroll position) */
@media (min-width:961px){
  .hero--canva .strip > div{padding-top:150px}
  .mic-rig{--payout:120px}
}
/* I.2: the hero ends on the strip's centre line. The hero's paper (sky, bloom, vignette, rings) stops halfway down the strip and
   the next section starts there, so the strip straddles the two. Paint only: no box moves, so the mic, cable and scroll
   geometry stay as measured. The strip draws the next section's top edge full-bleed behind its own lower half (::before,
   clipped by the hero) and its panel moves to ::after to stay above that band; a child can never sit under the strip's own
   background, because the GSAP reveal leaves a transform on the strip. --hero-foot is the next section's background mirrored
   up from the seam: a radial's top row depends only on its horizontal radius, so the two meet without a line. */
.hero--canva{--hero-foot:var(--paper)}   /* .pg and plain bands have no background of their own */
.hero--canva:has(+ .about--canva){--hero-foot:radial-gradient(90% 100vh at 50% 100%, #F5F7F3 0, var(--paper) 62%)}
.hero--canva:has(+ .feat--ink){--hero-foot:radial-gradient(80% 100vh at 50% 100%, #1B1B1B 0, #111 68%)}
.hero--canva .strip{background:none; border-color:transparent; box-shadow:none}
.hero--canva .strip::before,.hero--canva .strip::after{content:""; position:absolute; pointer-events:none}
.hero--canva .strip::before{z-index:-2; top:50%; bottom:-1px; left:calc(50% - 50vw); width:100vw; background:var(--hero-foot)}
.hero--canva .strip::after{z-index:-1; inset:-1px; border-radius:inherit; background:linear-gradient(180deg,#1B4F31 0,#164328 100%); border:1px solid rgba(255,255,255,.08); box-shadow:0 40px 80px -48px rgba(22,67,40,.7), inset 0 1px 0 rgba(255,255,255,.1)}
/* ...at a fractional zoom (110%, 125%) the hero's clipped foot lands mid-pixel and that row blended the hero's own paper in: a pale
   full-width hairline on the ink band (Listen, 2026-09-30). The ink band tucks 1px under the hero, so the row is always ink. */
.hero--canva + .feat--ink{margin-top:-1px}
/* I.3: from 1200px the chip row sits on the CTA row (H.2), and its empty box swallowed clicks on Listen Now and the platform
   circles; only the chips themselves take pointer events now (no visual change) */
.hero--canva .hero__guests{pointer-events:none} .hero--canva .gchip{pointer-events:auto}
/* I.4: a shorter stage. The empty band above the fact row drops from 150px to 72px. The strip rises 3px for every 1px the
   three-line headline (F.1, clamp(54px,6.3vw,92px)) loses below 1460px, so the cable now follows the same curve and the mic
   meets the strip at the same point at every desktop width: 19px in at rest, 24px clear of the fact row at its lowest while
   that row is on screen. Below 1200px the chips sit under the CTA row and push the strip 99px lower, hence the longer base.
   About, Listen and Be a Guest get the same stage from their own rules in ot-pages.css ("The shorter stage"). */
@media (min-width:961px){
  .hero--canva .strip > div{padding-top:72px}
  .mic-rig{--payout:36px; --cable:calc(1027px + (min(6.3vw, 92px) - 92px) * 3)}
}
@media (min-width:1200px){ .mic-rig{--cable:calc(928px + (min(6.3vw, 92px) - 92px) * 3)} }

/* ---------- home hero guests: "The Fly Loft" (hero lab A, picked 30 Sep). The guests' banners are flown on the mic's own rig: a hairline
   cable from the ceiling line 220px above the hero, a graphite rail, and a print in the strip's deep green with the B&W cutout inside it.
   Right = the newest episode, left = the one before (CSS shows the last two items, so the no-JS page is right too). Markup:
   <ul class="hg" data-guests> with one <li class="hg-g" data-guest> per episode, oldest first; the scroll depth is in ot-canva.js. ---------- */
.hero--canva:has(> .hg) .hero__guests{visibility:hidden}   /* home only (About and Be a Guest keep their chips): the banners carry the names; the chips' box stays so the strip and the mic path don't move */
/* the home copy keeps the box this stage was measured on (5 Oct): the new headline and lead are two and four lines where the first
   copy was three and five, which lifted the strip 88-120px into the banners' rails and under the mic. 325.45px + 3 x the F.1
   headline size is that first box (the "A show by" line, five lead lines, the CTA row and the gaps between them); shorter copy is
   centred in it, so the strip, the banners' clearance (ot-canva.js) and the mic's cable formula (I.4) stay as measured. Tablet
   takes the same box, which also keeps the lead below the banners' rails; the phone stacks, so its hero follows the copy. */
@media (min-width:701px){ .hero--canva:has(> .hg) .hero__copy--c{display:flex; flex-direction:column; justify-content:center; min-height:calc(325.45px + 3 * clamp(54px, 6.3vw, 92px))} }

.hg{position:absolute; inset:0; z-index:3; margin:0; padding:0; list-style:none; pointer-events:none;
  --w:clamp(176px,16vw,290px); --cx:max(12.55vw, 25vw - 182px, 50vw - 600px); --top:clamp(160px,22vh,210px);
  --h:min(calc(var(--w) * 2.65), calc(100vh - var(--top) - 40px), 660px); --ceil:220px}
.hg-g{position:absolute; top:var(--top); left:calc(var(--cx) - var(--w) / 2); width:var(--w)}
.hg-g:last-child{left:auto; right:calc(var(--cx) - var(--w) / 2)}
.hg-g:nth-last-child(n+3){display:none}
/* every transform pivots on the cable's anchor on the ceiling line, like the mic */
.hg-rig,.hg-swing,.hg-sway{position:relative; transform-origin:50% calc(-1 * (var(--top) + var(--ceil)))}
.hg-cable{position:absolute; left:50%; bottom:100%; width:2px; height:calc(var(--top) + var(--ceil)); translate:-50% 0; background:#3D3D3D; border-radius:1px}

.hg-banner{display:block; position:relative; pointer-events:auto; color:#fff; text-decoration:none; border-radius:4px}
.hg-banner:focus-visible{outline:2px solid var(--green); outline-offset:5px}
.hg-rail{position:relative; z-index:1; display:block; height:8px; margin:0 -6px; border-radius:4px; background:linear-gradient(180deg,#4a4a4a,#111); box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 2px 4px rgba(17,17,17,.25)}
.hg-rail--b{height:6px; border-radius:3px}
.hg-print{position:relative; display:block; height:var(--h); overflow:hidden; background:linear-gradient(180deg,#1B4F31 0,#164328 100%);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.08), inset -1px 0 0 rgba(255,255,255,.08), 0 34px 60px -34px rgba(22,67,40,.65)}
.hg-print::before{content:""; position:absolute; inset:0; background:radial-gradient(72% 40% at 50% 30%, rgba(32,157,80,.55), transparent 72%)}
.hg-print::after{content:""; position:absolute; inset:0; background:#EFF1EE; opacity:var(--haze,0); pointer-events:none}   /* distance haze */
.hg-photo{position:absolute; inset:0 0 22% 0; overflow:hidden; -webkit-mask-image:linear-gradient(#000 68%,transparent); mask-image:linear-gradient(#000 68%,transparent)}
/* the image's x=0 edge (the flat elbow cut) sits just outside the print's left edge, so the frame crops it */
.hg-photo img{position:absolute; left:var(--img-x,-3%); top:var(--img-y,5%); width:var(--img-w,130%); max-width:none; height:auto; filter:grayscale(1) contrast(1.06)}
.hg-cap{position:absolute; left:18px; right:56px; bottom:18px; text-align:left}
.hg-cap small{display:block; font:500 11px/1 var(--body); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:8px}
.hg-cap b{display:block; font:400 calc(var(--w) * .13)/.94 var(--display); letter-spacing:-.005em; text-transform:uppercase; color:#fff; text-wrap:balance}
.hg-cap i{display:block; font:400 12.5px/1.35 var(--body); font-style:normal; color:rgba(255,255,255,.74); margin-top:8px}
.hg-go{position:absolute; right:16px; bottom:18px; width:30px; height:30px; border-radius:50%; background:#fff; color:var(--green-deep); display:grid; place-items:center; transition:background-color .3s var(--ease), color .3s var(--ease)}
.hg-go svg{width:14px; height:14px; transition:transform .3s var(--ease)}
.hg-banner:hover .hg-go,.hg-banner:focus-visible .hg-go{background:var(--green-ui); color:#fff}
.hg-banner:hover .hg-go svg{transform:translateX(2px)}

/* load-in: lowered out of the loft while the headline rises (CSS, so it plays even without GSAP) */
@media (prefers-reduced-motion:no-preference){
  html.js .hg-g{animation:hg-in 1.7s var(--out-expo) .45s backwards}
  html.js .hg-g:last-child{animation-delay:.58s}
}
@keyframes hg-in{from{opacity:0; transform:translateY(-90px)}}

/* 1024 range: narrow side zones, so a narrower banner tucked toward the edge; the company line goes screen-reader only */
@media (min-width:961px) and (max-width:1199px){
  .hg{--w:clamp(150px,14vw,176px); --cx:min(12.55vw, 50vw - 352px - var(--w) / 2); --h:calc(var(--w) * 2.4)}
  .hg-cap{left:14px; right:14px; bottom:14px}
  .hg-go{display:none}
}
/* tablet: the banners flank the headline only */
@media (min-width:701px) and (max-width:960px){
  .hg{--w:min(128px, 50vw - 269px); --cx:calc((50vw - 213px) / 2); --top:118px; --h:314px}
  .hg-cap{left:12px; right:12px; bottom:12px}
  .hg-cap small{font-size:10px; letter-spacing:.14em; margin-bottom:6px}
  .hg-cap b{font-size:19px}
  .hg-go{display:none}
}
/* phone: a miniature of the same stage, hung from the hero top either side of the small mic */
@media (max-width:700px){
  .hg{--w:min(96px, 24.6vw); --cx:calc(7.2vw + var(--w) / 2); --top:102px; --h:126px; --ceil:0px}
  .hg-cable{width:1px}
  .hg-rail{height:4px; margin:0 -3px} .hg-rail--b{height:3px}
  .hg-photo{inset:0}
  .hg-photo img{top:6%}
  .hg-cap{left:8px; right:8px; bottom:8px}
  .hg-cap b{font-size:14px; line-height:.95}
  .hg-go{display:none}
}
@media (max-width:1199px){
  .hg-cap i{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
}
@media (max-width:700px){
  .hg-cap small{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
}

/* ---------- home "Who Hosts It": "At the mic" (host variation 5, picked 30 Sep). The hero's mic hangs from the top of the section on
   its cable beside Sarah's photo in an arched frame (a studio window with the Sarah page's green inset line), its sound rings spread
   out behind, a glass name chip sits on the arch's foot; the story and the quote are on the right. Home only (.host--mic): About and
   Be a Guest keep the .host--line / .host__cut layout above. On tablets and phones the same figure scales down to the column. ---------- */
.host--mic .grid{grid-template-columns:500px 1fr; gap:80px; align-items:center}
.hm-fig{position:relative; margin:0; height:600px}
.hm-rings{position:absolute; left:118px; top:250px; width:720px; height:720px; translate:-50% -50%; z-index:0; pointer-events:none; color:var(--green)}
.hm-rings circle{fill:none; stroke:currentColor; stroke-width:.2}
.hm-rings circle:nth-child(1){opacity:.6} .hm-rings circle:nth-child(2){opacity:.46} .hm-rings circle:nth-child(3){opacity:.34} .hm-rings circle:nth-child(4){opacity:.22} .hm-rings circle:nth-child(5){opacity:.12}
.hm-arch{position:absolute; z-index:1; right:0; top:40px; width:400px; height:540px; border-radius:200px 200px 28px 28px; overflow:hidden; background:#E4E7E2; box-shadow:0 44px 88px -52px rgba(22,67,40,.55)}
.hm-arch img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%}
.hm-arch::after{content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1.5px rgba(32,157,80,.6); pointer-events:none}
.hm-cable{position:absolute; z-index:2; left:117px; top:-400px; width:3px; height:438px; background:#3D3D3D; border-radius:0 0 2px 2px}   /* long enough to reach the band's top edge wherever the figure sits; the band clips it */
.hm-mic{position:absolute; z-index:2; left:62px; top:36px; width:112px; height:auto; filter:drop-shadow(0 22px 22px rgba(17,17,17,.3))}
.hm-chip{position:absolute; z-index:3; right:24px; bottom:-18px; display:inline-flex; align-items:center; gap:10px; padding:10px 16px 10px 12px; border-radius:999px; white-space:nowrap;
  background:rgba(255,255,255,.72); border:1px solid rgba(17,17,17,.08); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 18px 40px -28px rgba(17,17,17,.45);
  font:500 12px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}
.hm-chip b{font-weight:600} .hm-chip .sep{width:1px; height:12px; background:rgba(17,17,17,.2)}
.host--mic .quote{margin:32px 0 0; padding:4px 0 4px 26px; border-left:4px solid var(--green); max-width:560px}
.host--mic .quote::before{content:none}
.host--mic .quote p{font:italic 400 24px/1.42 var(--body); color:var(--green-ui); margin:0 0 14px; max-width:none}
@media (max-width:1100px){ .host--mic .grid{grid-template-columns:420px 1fr; gap:48px} .hm-arch{width:340px; height:460px} .hm-fig{height:520px} }
@media (max-width:960px){
  .host--mic .grid{grid-template-columns:1fr; gap:56px}
  /* the desktop 500 × 600 figure, scaled: every length is its desktop px value / 5, in cqw of the figure's width */
  .hm-fig{height:auto; width:min(420px,100%); aspect-ratio:5/6; justify-self:center; container-type:inline-size}
  .hm-rings{left:23.6cqw; top:50cqw; width:144cqw; height:144cqw}
  .hm-arch{top:8cqw; width:80cqw; height:108cqw; border-radius:40cqw 40cqw 5.6cqw 5.6cqw; box-shadow:0 8.8cqw 17.6cqw -10.4cqw rgba(22,67,40,.55)}
  .hm-cable{left:calc(23.6cqw - 1px); top:calc(7.6cqw - 600px); width:2px; height:600px}
  .hm-mic{left:12.4cqw; top:7.2cqw; width:22.4cqw; filter:drop-shadow(0 4.4cqw 4.4cqw rgba(17,17,17,.3))}
  .hm-chip{right:4.8cqw}
}
/* ---------- topic chips on phones (marked screenshots, 30 Sep: the Episodes hub, then About's topics, "make it smaller... so it
   takes less space"): every chip row on the site, paper or ink, sets smaller there. The seven topics take four rows instead of
   five and each row is 29px tall instead of 36px. Desktop is unchanged. ---------- */
@media (max-width:700px){
  .chips{gap:6px}
  .chips .chip{padding:7px 11px; font-size:12.5px}
}

/* ============================================================ version K: the header bar's colour and the gliding pill
   (30 Sep, the team's picks: colour B "Brand green to deep" from header-color-variants/, and A "Glide" from
   header-motion-variants/). Same header, same sizes and places. The bar runs from the brand green at its top edge to deep
   green at its foot, solid, with the link capsule in darker glass. One white pill (.nav__glide, added by ot-canva.js) glides
   from link to link after the pointer and squeezes on a click; it rests on the current page's link. The play circle and
   Be a Guest grow a touch on hover and dip on a click; the menu button dips on phones. Until the script has run (it adds
   .has-glide) the links keep their own white pill, so nothing is lost without it. Reduced motion: colour changes only. */
/* (border-box: the gradient spans the whole bar, border included. Sized to the padding box, as by default, it tiled into the
   1px border, which drew its bright top green as a line along the bar's foot and its deep foot green along the top edge.
   The hairline and the top highlight are the old bar's strengths, .12 and .14, so the edge stays a soft rim, not a line.) */
.hdr,.hdr.is-condensed{background:linear-gradient(180deg,#209D50 0%,#1C7940 42%,#164328 100%) border-box; border-color:rgba(255,255,255,.12); box-shadow:0 22px 48px -22px rgba(22,67,40,.8), inset 0 1px 0 rgba(255,255,255,.14)}
.hdr .nav__links,.hdr:not(.is-condensed) .nav__links{background:rgba(15,46,28,.26); border-color:rgba(255,255,255,.18)}
.hdr .nav__links.has-glide a,.hdr .nav__links.has-glide a:is(:hover,:focus-visible,[aria-current="page"]){background:transparent; box-shadow:none}
.hdr .nav__links.has-glide a{transition:color .3s var(--ease)}
/* the words go deep green where the pill is (.is-lit, set by the script), so the current page's link reads white again while
   the pill is on another link */
.hdr .nav__links.has-glide a[aria-current="page"]:not(.is-lit){color:rgba(255,255,255,.92)}
.hdr .nav__links.has-glide a:is(:hover,:focus-visible,.is-lit){color:var(--green-deep)}
.nav__label{display:inline-block; transition:scale .18s var(--ease)}
.hdr .nav__links.has-glide a:active .nav__label{scale:.94; transition-duration:.08s}
/* (placed with `translate`, not `transform`, so the click's `scale` squeezes the pill about its own centre) */
.nav__glide{position:absolute; left:0; top:0; width:0; height:0; border-radius:999px; background:#fff; opacity:0; pointer-events:none;
  translate:var(--gx,0px) var(--gy,0px); box-shadow:0 8px 20px -10px rgba(15,46,28,.6);
  transition:translate .5s cubic-bezier(.3,1.3,.5,1), width .5s cubic-bezier(.3,1.3,.5,1), height .3s var(--ease), opacity .25s var(--ease), scale .45s var(--spring)}
.nav__glide.is-on{opacity:1}
.nav__glide.is-jump{transition:opacity .25s var(--ease), scale .45s var(--spring)}
.nav__glide.is-still{transition:none}
.nav__glide.is-press{scale:.93; transition-duration:.5s,.5s,.3s,.25s,.1s}
@media (max-width:1023px){ .hdr .nav__links.has-glide{position:relative} }
.hdr .hdr__play,.hdr .nav .btn--sm{transition:background-color .25s var(--ease), color .25s var(--ease), box-shadow .3s var(--ease), scale .45s var(--spring)}
.hdr .hdr__play:hover{scale:1.08}
.hdr .nav .btn--sm:hover{scale:1.04}
.hdr .hdr__play:active,.hdr .nav .btn--sm:active{transform:none; transition-duration:.25s,.25s,.3s,.1s}
.hdr .hdr__play:active{scale:.9} .hdr .nav .btn--sm:active{scale:.96}
.hdr .nav .btn--sm::before{transition:transform .5s var(--spring)}
.hdr .nav .btn--sm:hover::before{transform:scale(1.1) rotate(-12deg)}
.hdr .burger{transition:background-color .25s var(--ease), scale .45s var(--spring)}
.hdr .burger:active{scale:.9; transition-duration:.25s,.1s}
@media (prefers-reduced-motion:reduce){
  .nav__glide,.nav__glide.is-jump{transition:opacity .2s var(--ease)}
  .nav__glide,.nav__label,.hdr .hdr__play,.hdr .nav .btn--sm,.hdr .burger{scale:none !important}
  .hdr .nav .btn--sm:hover::before{transform:none}
}

/* ============================================================ version L: the hero mics you can grab
   (1 Oct; reviewed as hero-mic-drag-variants/, then "this change is for every hero section of the page where it does exist
   only for the mic"). The hanging mic in each hero (.mic-rig on home, About, Listen and Be a Guest; .hh-split__rig on the
   Episodes hub and the topic pages; .sg-mic__rig on Sarah) can be grabbed and swung like a pendulum: ot-canva.js marks it
   .mic-grab and does the physics. Only the mic body takes the pointer; the rigs and their cables stay click-through as before.
   On phones a sideways drag swings it, while a vertical swipe or a pinch that starts on the mic still scrolls or zooms the page
   (the first touch-action is the fallback where pinch-zoom is not understood). The mics further down the pages are not
   touched. Nothing changes at rest, and without the script the mic is not grabbable. */
.mic-grab{pointer-events:auto; cursor:grab; touch-action:pan-y; touch-action:pan-y pinch-zoom; transform-origin:50% 0; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent}
.mic-drag{transform-origin:50% 0}   /* the wrapper ot-canva.js slips around .mic-swing on the first grab: the same box, the same pivot */
.is-mic-moving{will-change:transform}
html.is-mic-grab,html.is-mic-grab *{cursor:grabbing !important}
html.is-mic-grab body{user-select:none; -webkit-user-select:none}

/* ============================================================ version M: the show's own profiles in the footer (theme 1.0.8)
   Instagram, Facebook and LinkedIn sit under the footer's brand line as the same badges as the platform row above it. */
.ftr__brand .badges{margin-top:24px}

/* ============================================================ version N: Be a Guest in the home hero (3 Oct, asked for by Sarah)
   Home only (.hero__cta--guest). The site's two-button hero, as on Listen and Be a Guest: the main button left of the
   hanging mic, the second right of it, the gap the mic hangs in still centred. Listen Now keeps the platform circles,
   now hanging under it in the room that was already there, so the hero stays its height and the mic still dips into
   the strip; Be a Guest is a white pill with the header's person icon. Phones (3 Oct, second request): Listen Now and
   Be a Guest side by side, the circles under them. */
.hero--canva .hero__cta--guest{display:grid; grid-template-columns:1fr 1fr; align-items:start; column-gap:clamp(24px,13vw,200px)}
.hero__cta--guest .hero__listen{justify-self:end; position:relative; display:flex}
.hero__cta--guest .hero__listen .badges{position:absolute; top:calc(100% + 16px); left:50%; translate:-50% 0; margin:0}
.hero__cta--guest .btn--guest{justify-self:start}
.hero--canva .hero__cta .btn--guest{background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1.5px rgba(17,17,17,.12)}
.hero--canva .hero__cta .btn--guest svg{background:var(--green-ui); color:#fff; transition:background-color .2s var(--ease), color .2s var(--ease)}
.hero--canva .hero__cta .btn--guest:hover{background:var(--green-deep); color:#fff; box-shadow:none}
.hero--canva .hero__cta .btn--guest:hover svg{background:#fff; color:var(--green-ui)}
@media (min-width:701px) and (max-width:960px){ .hero--canva .hero__cta--guest{column-gap:150px} }
@media (max-width:700px){
  .hero--canva .hero__cta--guest{display:flex; flex-flow:row wrap; justify-content:center; align-items:center; gap:18px 10px; container-type:inline-size}
  .hero__cta--guest .hero__listen{display:contents}
  .hero__cta--guest .btn--guest{order:1}
  .hero__cta--guest .hero__listen .badges{order:2; position:static; translate:none; flex:0 0 100%; justify-content:center}
  /* The pair is full size on a 358px column (390 screens) and scales down with the column to the header pill's
     proportions on a 288px one (320 screens): 48px tall, a 34px disc. --k runs from 0 to 1px across that range.
     A label that still doesn't fit (a large system font) puts Be a Guest under Listen Now instead. */
  .hero--canva .hero__cta--guest .btn{--k:clamp(0px, (100cqw - 288px) / 70, 1px); height:calc(48px + var(--k) * 8); padding:0 calc(10px + var(--k) * 14) 0 calc(7px + var(--k)); gap:calc(8px + var(--k) * 4); font-size:calc(14px + var(--k) * 2)}
  .hero--canva .hero__cta--guest .btn svg{width:calc(34px + var(--k) * 6); height:calc(34px + var(--k) * 6); padding:calc(8px + var(--k) * 2)}
}

/* ============================================================ version O: Home "About the Podcast" paragraph (3 Oct)
   The team's description (1.0.11) ran out to the column's 58ch, well past the headline, and ended on a two-word line.
   At 45ch it wraps where the team marked it (its longest line ends at x 559 on a 1366 screen) into six even lines, as
   many as before, so the section keeps its height. Home only (#about), and only while the video sits beside it. */
@media (min-width:961px){ #about.about--canva .lead + p{max-width:45ch} }

/* ============================================================ version P: "What We Talk About" (5 Oct, Sarah)
   The Featured Episodes band is now "What We Talk About", and its topic chips are the 23 topics the show covers (Sarah's list
   on Notion): the same chips as before, running like the contractor strip on rsgonzales.com (two copies of the list in one
   track, moved -50%, so the loop has no seam). As before, a topic with its own page is a bright link chip (Hiring, Pricing)
   and the rest are the dim "No episodes yet" chips. The row stops while the pointer is on it (the team: no pause button), or
   while a keyboard user is on one of its links; with reduced motion it stands still and wraps, like the old row. The copy's
   links are out of the tab order, and overflow:clip keeps focus from scrolling the row. */
.topics{position:relative; margin:0 0 34px}
.topics__marq{overflow:hidden; overflow:clip; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}
.topics__track{display:flex; width:max-content}
.topics__set{display:flex; align-items:center; flex:none; margin:0; padding:0; list-style:none}
.topics__set li{flex:none; padding:0 5px}   /* the old row's 10px gap, inside each copy so both copies are the same width */
.topics .chip{white-space:nowrap}
@keyframes ot-topics{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:no-preference){
  .topics__track{animation:ot-topics 70s linear infinite}
  .topics__marq:hover .topics__track,.topics__marq:focus-within .topics__track{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .topics__marq{-webkit-mask-image:none; mask-image:none}
  .topics__track{display:block; width:auto} .topics__set{flex-wrap:wrap; row-gap:10px; margin:0 -5px} .topics__set[aria-hidden]{display:none}
}
@media (max-width:700px){   /* the chips' phone size (topic chips on phones, 30 Sep) */
  .topics__set li{padding:0 3px} .topics .chip{padding:7px 11px; font-size:12.5px}
  .topics__track{animation-duration:60s}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){ .topics__set{row-gap:6px; margin:0 -3px} }

/* ============================================================ version Q: client logos (5 Oct, Sarah)
   RS Gonzales' clients between About the Podcast and What We Talk About: the 26 logos rsgonzales.com shows, in its order, as
   that site serves them (assets/img/clients/), under its own line. Variant C of client-logos-variants/ ("Two-way", the team's
   pick): two rows of white pills drifting in opposite directions, each row three copies of its logos in one track moved by
   one copy, so the loop has no seam (three, so a 2560px screen never sees the end of the track). Both rows stop while the pointer is on either (no pause button, as on the topics row); with reduced
   motion they stand still and can be swiped. The logos load with the page, at low priority: a lazy image in a clipped track
   would only start loading as it slid into view. */
.about--canva:has(+ .clients){padding-bottom:88px}
.clients{position:relative; --logo-h:46px; padding:0 0 calc(var(--sec-band) - 20px)}
.clients__label{display:flex; align-items:center; justify-content:center; gap:12px; margin:0; font:600 12px/1.3 var(--body); letter-spacing:.16em; text-transform:uppercase; color:var(--ink); text-align:center; text-wrap:balance}
.clients__marq{overflow:hidden; overflow:clip; padding:8px 0 20px; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}   /* the padding is room for the pills' shadows */
.clients .clients__label{margin-bottom:26px}   /* (0,2,0): p:last-child{margin-bottom:0} in ot.css took the label's gap; 26px + the row's 8px */
.clients__marq + .clients__marq{margin-top:-8px}
.clients__track{display:flex; width:max-content}
.clients__set{display:flex; align-items:center; flex:none; margin:0; padding:0; list-style:none}
.clients__set li{flex:none; padding:0 6px}   /* the gap, inside each copy so both copies are the same width */
.clients__chip{display:grid; place-items:center; height:74px; padding:0 30px; border-radius:var(--pill); background:rgba(255,255,255,.66); border:1px solid rgba(17,17,17,.08); box-shadow:0 18px 40px -28px rgba(17,17,17,.45)}
.clients__chip img{display:block; width:auto; height:var(--logo-h)}
@keyframes ot-clients{to{transform:translateX(calc(-100% / 3))}}
@media (prefers-reduced-motion:no-preference){
  .clients__track{animation:ot-clients 85s linear infinite}
  .clients__marq--rev .clients__track{animation-direction:reverse}
  .clients__band:hover .clients__track{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .clients__marq{overflow-x:auto; scrollbar-width:none} .clients__set[aria-hidden]{display:none}
}
@media (max-width:700px){
  .about--canva:has(+ .clients){padding-bottom:64px}
  .clients{--logo-h:40px}
  .clients__label{font-size:11px; letter-spacing:.14em; gap:10px} .clients__geo{display:none}
  .clients__set li{padding:0 4px} .clients__chip{height:60px; padding:0 18px}
  .clients__track{animation-duration:80s}
}