/* Out of the Truck — v8 "Colour Block". Built from references/RESEARCH-PODCAST-SITES.md (Acquired + Masters of Scale grammar).
   Band rhythm (Shoaib's rule): paper hero → green About → paper Episodes → ink Host → paper Guest → green FAQ → paper Newsletter + footer */
:root{
  --green:#209D50; --green-deep:#0F4028; --bright:#01C54C; --g0:#08210F; --g1:#0C341B; --g2:#165D30;
  --paper:#F6F4EC; --paper-2:#ECE9DF; --paper-3:#DCD8CA; --paper-ink:#1C1E1A;
  --ink:#101010; --ink-2:#4A5048; --ink-3:#7B8078;
  --amber:#FFB100; --amber-2:#E9A100; --amber-deep:#8A5B00;
  --yt:#FF0033; --spotify:#1ED760; --apple-1:#D56DFB; --apple-2:#832BC1; --rss:#F78422;
  --hair-l:1px solid rgba(16,16,16,.12); --hair-d:1px solid rgba(255,255,255,.12);
  --display:"Anton","Impact","Arial Narrow",sans-serif; --body:"Barlow","Helvetica Neue",Arial,sans-serif;
  --wrap:1240px; --gutter:24px; --r:24px; --r-s:14px; --pill:999px;
  --sec:136px; --sec-m:80px;
  --ease:cubic-bezier(.2,.7,.2,1); --spring:cubic-bezier(.34,1.56,.64,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; background:var(--paper)}
body{margin:0; overflow-x:clip; background:var(--paper); color:var(--paper-ink); font:400 17.5px/1.65 var(--body); -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%; height:auto}
a{color:var(--green-deep); text-decoration-color:rgba(32,157,80,.5); text-decoration-thickness:1.5px; text-underline-offset:3px}
a:hover{text-decoration-color:var(--green)}
:focus-visible{outline:3px solid var(--bright); outline-offset:3px; border-radius:4px}
h1,h2,h3{margin:0; line-height:1.02; text-wrap:balance}
p{margin:0 0 1em} p:last-child{margin-bottom:0}
ul{margin:0; padding:0; list-style:none}
button{font:inherit}
.wrap{width:min(var(--wrap),100% - 2*var(--gutter)); margin-inline:auto}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.on-dark{color:#fff} .on-dark a{color:#fff}

/* ---------- type roles ---------- */
.h2{font:400 clamp(40px,4.2vw,62px)/.96 var(--display); letter-spacing:-.012em; color:var(--paper-ink)}
.on-dark .h2{color:#fff}
.eyebrow{font:600 11.5px/1 var(--body); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); margin:0 0 20px}
.on-dark .eyebrow{color:rgba(255,255,255,.6)}
.lines{width:38px; height:19px; display:block; color:var(--green); margin-bottom:16px}
.on-dark .lines{color:var(--bright)}
.wave{display:block; width:100%; height:100%; color:currentColor} .wave rect{transform-origin:center; transform-box:fill-box}

/* ---------- buttons, chips, badges ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; font:600 15px/1 var(--body); color:#fff; background:var(--green-deep); padding:16px 24px; border-radius:var(--pill); text-decoration:none; border:1.5px solid transparent; cursor:pointer; white-space:nowrap; transition:transform .22s var(--spring), background .2s}
.btn svg{width:18px; height:18px; flex:none}
.btn:hover{background:#0B3020; transform:translateY(-1px)} .btn:active{transform:scale(.97)}
.btn--amber,.on-dark .btn--amber{background:var(--amber); color:var(--ink)} .btn--amber:hover,.on-dark .btn--amber:hover{background:var(--amber-2)}
.btn--paper,.on-dark .btn--paper{background:var(--paper); color:var(--ink)} .btn--paper:hover,.on-dark .btn--paper:hover{background:#fff}
.btn--ghost{background:transparent; border-color:rgba(16,16,16,.25); color:var(--paper-ink)} .btn--ghost:hover{background:rgba(16,16,16,.05)}
.on-dark .btn--ghost{border-color:rgba(255,255,255,.35); color:#fff} .on-dark .btn--ghost:hover{background:rgba(255,255,255,.08)}
.btn--sm{padding:11px 18px; font-size:14px}
.arrow{display:inline-block; font-weight:600; text-decoration:none; color:var(--green-deep); padding:9px 0; background:linear-gradient(rgba(32,157,80,.5),rgba(32,157,80,.5)) left calc(100% - 7px)/100% 1.5px no-repeat}
.arrow:hover{background-image:linear-gradient(var(--green),var(--green))}
.on-dark .arrow{color:#fff; background-image:linear-gradient(rgba(1,197,76,.6),rgba(1,197,76,.6))} .on-dark .arrow:hover{background-image:linear-gradient(var(--bright),var(--bright))}
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chip{display:inline-flex; align-items:center; font:500 14px/1 var(--body); color:var(--green-deep); border:1px solid rgba(15,64,40,.5); padding:10px 15px; border-radius:var(--pill); text-decoration:none; transition:background .15s, color .15s, border-color .15s}
a.chip:hover{background:var(--green-deep); border-color:var(--green-deep); color:#fff}
.chip.is-active{background:var(--paper-ink); border-color:var(--paper-ink); color:#fff}
.chip[aria-disabled="true"]{opacity:.45; cursor:not-allowed; border-style:dashed}
.on-dark .chip{color:rgba(255,255,255,.9); border-color:rgba(255,255,255,.3)} .on-dark a.chip:hover{background:#fff; border-color:#fff; color:var(--green-deep)} .on-dark .chip.is-active{background:var(--paper); border-color:var(--paper); color:var(--green-deep)}
.chip--sm{padding:7px 12px; font-size:12.5px; letter-spacing:.02em}
.badges{display:flex; gap:10px; align-items:center}
.badge{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:#fff; text-decoration:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px -12px rgba(16,16,16,.5); transition:transform .22s var(--spring)}
.badge svg{width:20px; height:20px}
.badge--yt{background:var(--yt)} .badge--spotify{background:var(--spotify); color:var(--ink)} .badge--apple{background:linear-gradient(180deg,var(--apple-1),var(--apple-2))} .badge--rss{background:var(--rss)}
a.badge:hover{transform:translateY(-3px) scale(1.05)}
.badge.is-off{filter:grayscale(1); opacity:.35; cursor:default; box-shadow:none}
.badge--lg{width:54px; height:54px} .badge--lg svg{width:25px; height:25px}

/* ---------- header ---------- */
.hdr{position:fixed; top:0; left:0; right:0; z-index:50; background:rgba(246,244,236,.7); backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2); border-bottom:1px solid transparent; transition:background .25s, border-color .25s}
.hdr.is-condensed{background:rgba(246,244,236,.9); border-color:rgba(16,16,16,.1)}
.hdr__in{display:flex; align-items:center; justify-content:space-between; height:78px; transition:height .25s var(--ease)}
.hdr.is-condensed .hdr__in{height:64px}
.brand{display:flex; align-items:center; text-decoration:none}
.brand img{height:48px; width:auto; transition:height .25s var(--ease)}
.hdr.is-condensed .brand img{height:40px}
.nav{display:flex; align-items:center; gap:30px}
.nav__links{display:flex; gap:28px}
.nav__links a{font:500 15px/1 var(--body); color:var(--paper-ink); text-decoration:none; padding:8px 0; border-bottom:1px solid transparent; transition:border-color .2s}
.nav__links a:hover{border-color:var(--green-deep)}
.burger{display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer; padding:10px; color:var(--paper-ink)} .burger svg{width:24px; height:24px}
.drawer{display:none}

/* ---------- hero: paper + fanned colour cards ---------- */
.hero{padding:160px 0 0; position:relative; overflow:hidden; background:var(--paper)}
.hero__grid{display:grid; grid-template-columns:6.5fr 5.5fr; gap:48px; align-items:center}
.hero h1{font:400 clamp(50px,5.9vw,84px)/.92 var(--display); letter-spacing:-.022em; text-transform:uppercase; color:var(--paper-ink)}
.hero h1 em{display:block; font-style:normal; color:var(--green)}
.kinetic .w{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.1em; margin-bottom:-.1em}
.kinetic .w > span{display:inline-block; will-change:transform}
html.js.motion .kinetic .w > span{transform:translateY(110%)}
html.no-motion .kinetic .w > span,html:not(.js) .kinetic .w > span{transform:none}
.hero__lead{font-size:18px; line-height:1.65; color:var(--ink-2); max-width:50ch; margin:30px 0 32px}
.hero__cta{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.hero__cta .btn{padding:17px 26px; font-size:15.5px}

/* the fan */
.fan{position:relative; height:560px; perspective:1400px}
.card{position:absolute; width:min(400px,86%); aspect-ratio:1; border-radius:var(--r); overflow:hidden; background:var(--block,var(--green)); isolation:isolate; box-shadow:0 40px 80px -40px rgba(16,16,16,.55), inset 0 1px 0 rgba(255,255,255,.25); transform-style:preserve-3d; will-change:transform}
.card--1{--block:var(--amber); left:0; top:20px; --rot:-4deg; z-index:1}
.card--2{--block:var(--green); right:0; bottom:0; --rot:4deg; z-index:2}
html:not(.motion) .card--1{transform:rotate(-4deg)} html:not(.motion) .card--2{transform:rotate(4deg)}
.card__img{position:absolute; right:-6%; bottom:0; height:96%; width:auto; max-width:none; filter:grayscale(1) contrast(1.08); mix-blend-mode:multiply; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%); mask-image:linear-gradient(90deg,transparent 0,#000 22%); z-index:0; transition:filter .45s var(--ease)}
.card:hover .card__img{filter:none; mix-blend-mode:normal}
.card__wave{position:absolute; left:6%; right:40%; top:50%; height:20%; transform:translateY(-50%); color:rgba(16,16,16,.22); z-index:1}
.card--2 .card__wave{color:rgba(255,255,255,.3)}
.card__mark{position:absolute; left:22px; top:20px; height:34px; width:auto; z-index:2}
.card__ep{position:absolute; left:24px; bottom:29%; font:600 11.5px/1 var(--body); letter-spacing:.22em; text-transform:uppercase; z-index:2; color:rgba(16,16,16,.7)}
.card--2 .card__ep{color:rgba(255,255,255,.75)}
.card__num{position:absolute; left:16px; bottom:6px; font:400 clamp(80px,7.2vw,112px)/1 var(--display); letter-spacing:-.05em; z-index:2; color:var(--ink)}
.card--2 .card__num{color:#fff}
.card__play{position:absolute; right:22px; bottom:22px; width:64px; height:64px; border-radius:50%; border:0; background:var(--ink); color:#fff; display:grid; place-items:center; cursor:pointer; z-index:3; box-shadow:0 16px 40px -16px rgba(0,0,0,.7); transition:transform .25s var(--spring)}
.card__play svg{width:26px; height:26px; margin-left:3px}
.card__play:hover{transform:scale(1.08)}
.card iframe{position:absolute; inset:0; width:100%; height:100%; border:0; z-index:5; background:#000}
/* guest tag sits top-right so it never collides with the wordmark (top-left) or the numeral (bottom-left) */
.card__tag{position:absolute; right:20px; top:20px; z-index:3; font:600 12.5px/1.3 var(--body); color:rgba(16,16,16,.85); background:rgba(255,255,255,.72); border-radius:var(--pill); padding:8px 12px; backdrop-filter:blur(6px); max-width:52%}
.card--2 .card__tag{background:rgba(8,33,15,.55); color:#fff}

/* strip under the hero (facts only) */
.strip{margin:64px 0 0; border-top:var(--hair-l); border-bottom:var(--hair-l); display:grid; grid-template-columns:1fr 1fr 1fr; gap:0}
.strip > div{padding:26px 28px 26px 0; border-left:var(--hair-l); padding-left:28px}
.strip > div:first-child{border-left:0; padding-left:0}
.strip small{display:block; font:600 11.5px/1 var(--body); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
.strip b{font:400 19px/1.15 var(--display); letter-spacing:-.005em; color:var(--paper-ink); display:block}
.strip .row{display:flex; align-items:center; gap:12px; flex-wrap:wrap} .strip .row .badges{gap:8px} .strip .row .badge{width:36px; height:36px} .strip .row .badge svg{width:17px; height:17px}
.hero__bleed{height:100px}

/* ---------- bands ---------- */
.band{padding:var(--sec) 0; position:relative}
.band--paper{background:var(--paper)}
.band--green{background:linear-gradient(135deg,var(--g0) 0%,var(--g2) 100%); color:#fff; overflow:hidden}
.band--green::after{content:""; position:absolute; right:-10%; top:-10%; width:55%; height:70%; background:radial-gradient(closest-side,rgba(32,157,80,.32),transparent 70%); pointer-events:none}
.band--green .wrap{position:relative; z-index:1}
.band--ink{background:var(--ink); color:#fff; overflow:hidden}
.split{display:grid; grid-template-columns:4fr 8fr; gap:56px; align-items:start}
.split > .sticky{position:sticky; top:110px}

/* road + truck at the top of the About band */
.road{position:absolute; left:0; right:0; top:0; height:60px; z-index:2; pointer-events:none}
.road::before{content:""; position:absolute; left:0; right:0; top:34px; border-top:2px dashed rgba(255,255,255,.25)}
.truck{position:absolute; left:0; top:6px; width:72px; height:36px; color:var(--bright); will-change:transform; filter:drop-shadow(0 8px 14px rgba(0,0,0,.4))}
.truck__wheel{transform-box:fill-box; transform-origin:center}
.truck.is-driving .truck__wheel{animation:roll .5s linear infinite}
@keyframes roll{to{transform:rotate(360deg)}}

/* about */
.about .lead{font:400 clamp(28px,2.7vw,40px)/1.02 var(--display); letter-spacing:-.008em; max-width:24ch; margin-bottom:26px; color:#fff}
.about p{font-size:19px; line-height:1.6; max-width:60ch; color:rgba(255,255,255,.86)}
.about p a{text-decoration-color:rgba(1,197,76,.6)}

/* featured episodes: colour-blocked cards */
.feat__head{display:flex; align-items:end; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:30px; border-bottom:var(--hair-l); padding-bottom:28px}
.feat .chips{margin-bottom:48px}
.eps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:start}
.ep .card{position:relative; width:100%; transform:none !important; box-shadow:0 30px 60px -36px rgba(16,16,16,.45), inset 0 1px 0 rgba(255,255,255,.25)}
.ep .card__num{font-size:clamp(64px,5.4vw,84px)}
.ep .card__play{width:56px; height:56px} .ep .card__play svg{width:22px; height:22px}
.ep__body{padding:24px 6px 0; display:flex; flex-direction:column; gap:10px}
.ep__meta{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.ep__num{font:600 12px/1 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3)}
.ep__title{font:400 clamp(24px,2vw,30px)/1.02 var(--display); letter-spacing:-.008em}
.ep__title a{color:var(--paper-ink); text-decoration:none} .ep__title a:hover{text-decoration:underline; text-decoration-color:var(--green)}
.ep__guest{font:500 14px/1.4 var(--body); color:var(--ink-3); margin:-2px 0 0}
.ep__body .desc{font-size:15.5px; line-height:1.6; color:var(--ink-2)}
.ep__links{display:flex; gap:18px; flex-wrap:wrap; padding-top:4px} .ep__links .arrow{font-size:14.5px}
.card--cta{--block:var(--g1); background:linear-gradient(160deg,var(--g2),var(--g0)); display:flex; flex-direction:column; justify-content:space-between; padding:30px 30px 30px; color:#fff; aspect-ratio:1}
.card--cta .lines{color:var(--bright)}
.card--cta .big{font:400 clamp(26px,2.1vw,34px)/1.02 var(--display); letter-spacing:-.008em; color:#fff; margin:0 0 26px}
.card--cta .truckmark{position:absolute; right:22px; top:24px; width:78px; height:39px; color:var(--bright); opacity:.9}
.card--cta .wave{position:absolute; left:8%; right:8%; bottom:12%; height:14%; color:rgba(255,255,255,.12)}

/* host */
.host{display:grid; grid-template-columns:5fr 7fr; gap:72px; align-items:center}
.host__block{position:relative; border-radius:var(--r); background:var(--paper); aspect-ratio:4/5; overflow:hidden; box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.host__block img{width:100%; height:100%; object-fit:cover; object-position:50% 15%}
.host__block .tag{position:absolute; left:18px; bottom:18px; z-index:2; background:var(--paper-ink); color:#fff; font:500 13px/1 var(--body); padding:10px 14px; border-radius:var(--pill)} .host__block .tag span{color:rgba(255,255,255,.65); margin-left:6px}
.host__block::after{content:""; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:var(--bright); z-index:1; mix-blend-mode:multiply; opacity:.9}
.host p{color:rgba(255,255,255,.82); max-width:60ch}
.quote{margin:38px 0 0; padding:0 0 0 28px; border-left:1px solid rgba(255,255,255,.25)}
.quote p{font:400 clamp(28px,2.6vw,40px)/1.02 var(--display); color:var(--amber); max-width:none; margin:0 0 16px; letter-spacing:-.008em}
.quote cite{font:500 13px/1 var(--body); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); font-style:normal}
.quote cite a{color:#fff; text-decoration:none; border-bottom:1.5px solid rgba(1,197,76,.6)}

/* come on the show: van in a card with a green offset block */
.guest{display:grid; grid-template-columns:5fr 7fr; gap:72px; align-items:center}
.guest p{color:var(--ink-2); max-width:56ch}
.guest .big{font:400 clamp(28px,2.6vw,38px)/1.02 var(--display); color:var(--paper-ink); margin:34px 0 28px; max-width:20ch; letter-spacing:-.008em}
.guest__media{position:relative; padding:0 0 26px 26px}
.guest__media::before{content:""; position:absolute; left:0; bottom:0; width:70%; height:70%; background:var(--green); border-radius:var(--r); z-index:0}
.guest__media .ph{position:relative; z-index:1; border-radius:var(--r); overflow:hidden; aspect-ratio:16/11; background:var(--ink); box-shadow:0 40px 80px -40px rgba(16,16,16,.6)}
.guest__media .ph img{width:100%; height:100%; object-fit:cover; object-position:70% 50%}
.guest__media .ph::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(16,16,16,.35) 100%); pointer-events:none}
.guest__media .stamp{position:absolute; right:-14px; top:-14px; z-index:3; width:84px; height:84px; border-radius:50%; background:var(--amber); color:var(--ink); display:grid; place-items:center; box-shadow:0 20px 40px -20px rgba(0,0,0,.5); transform:rotate(-8deg)}
.guest__media .stamp svg{width:48px; height:24px}

/* faq on green */
.faq details{border-top:1px solid rgba(255,255,255,.14); padding:6px 0}
.faq details:last-of-type{border-bottom:1px solid rgba(255,255,255,.14)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:20px 0; font:400 clamp(20px,1.5vw,24px)/1.1 var(--display); letter-spacing:-.005em; color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none; width:32px; height:32px; border-radius:50%; border:1px solid rgba(255,255,255,.4); display:grid; place-items:center; color:#fff; transition:transform .2s var(--ease), background .2s}
.faq summary .pm svg{width:14px; height:14px}
.faq details[open] summary .pm{background:var(--bright); border-color:var(--bright); color:var(--ink); transform:rotate(45deg)}
.faq details p{color:rgba(255,255,255,.82); max-width:64ch; padding:0 56px 22px 0; margin:0}

/* newsletter card + footer on paper */
.news-band{padding:var(--sec) 0 0}
.news{position:relative; overflow:hidden; background:linear-gradient(135deg,var(--g0),var(--g2)); color:#fff; border-radius:var(--r); padding:60px; display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; box-shadow:0 40px 80px -50px rgba(16,16,16,.5)}
.news::after{content:""; position:absolute; right:-10%; top:-30%; width:50%; height:130%; background:radial-gradient(closest-side,rgba(32,157,80,.42),transparent 70%); pointer-events:none}
.news > *{position:relative; z-index:1}
.news .h2{color:#fff}
.news p{font-size:19px; color:rgba(255,255,255,.88); max-width:44ch} .news p em{font-style:italic}
.form{display:flex; gap:10px; background:rgba(16,16,16,.25); border:1px solid rgba(255,255,255,.16); padding:8px; border-radius:var(--pill)}
.form input{flex:1; min-width:0; background:transparent; border:0; color:#fff; font:400 16px/1 var(--body); padding:12px 18px}
.form input::placeholder{color:rgba(255,255,255,.55)} .form input:focus{outline:none}
.form .btn{padding:13px 20px}
.form__note{font:400 13.5px/1.4 var(--body); color:rgba(255,255,255,.6); margin:12px 0 0 18px}
.ftr{background:var(--paper); color:var(--paper-ink); padding:80px 0 34px}
.ftr__top{display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; padding-bottom:56px; border-bottom:var(--hair-l); margin-bottom:56px}
.ftr__top img{height:104px; width:auto}
.ftr__grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr 1fr; gap:40px}
.ftr__brand p{color:var(--ink-2); font-size:15.5px; max-width:26ch; margin:0}
.ftr h4{font:600 11.5px/1 var(--body); letter-spacing:.22em; text-transform:uppercase; color:var(--ink-3); margin:6px 0 20px}
.ftr ul{display:grid; gap:2px} .ftr li{font-size:15.5px; padding:5px 0}
.ftr a{color:var(--paper-ink); text-decoration:none; display:inline-block; padding:9px 0; margin:-9px 0} .ftr a:hover{text-decoration:underline; text-decoration-color:var(--green)}
.ftr li[aria-disabled="true"]{color:var(--ink-3)}
.ftr .badges{display:flex} .ftr .badges li{padding:0} .ftr .badges a{padding:0; margin:0; display:grid}
.ftr__bar{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-top:64px; padding-top:26px; border-top:var(--hair-l); font-size:13.5px; color:var(--ink-3)}
.ftr__truck{width:52px; height:26px; color:var(--green)}

/* docked player (paper glass) */
.dock{position:fixed; left:50%; bottom:18px; transform:translate(-50%,120%); z-index:45; width:min(760px,100% - 2*var(--gutter)); display:grid; grid-template-columns:52px 1fr auto auto; align-items:center; gap:16px; padding:10px; background:rgba(246,244,236,.82); border:var(--hair-l); border-radius:var(--pill); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:0 30px 60px -30px rgba(16,16,16,.5); color:var(--paper-ink); opacity:0; visibility:hidden; transition:transform .45s var(--spring), opacity .3s, visibility 0s .45s}
.dock.is-on{transform:translate(-50%,0); opacity:1; visibility:visible; transition:transform .45s var(--spring), opacity .3s}
.dock__art{width:52px; height:52px; border-radius:50%; overflow:hidden; background:var(--amber)} .dock__art img{width:100%; height:100%; object-fit:cover; object-position:50% 25%; filter:grayscale(1); mix-blend-mode:multiply}
.dock__t{min-width:0} .dock__t small{display:block; font:600 11px/1 var(--body); letter-spacing:.2em; text-transform:uppercase; color:var(--green-deep); margin-bottom:5px}
.dock__t b{display:block; font:600 15px/1.25 var(--body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dock__play{width:46px; height:46px; border-radius:50%; border:0; background:var(--paper-ink); color:#fff; display:grid; place-items:center; cursor:pointer; transition:transform .25s var(--spring)} .dock__play svg{width:18px; height:18px; margin-left:2px} .dock__play:hover{transform:scale(1.08)}
.dock__x{width:40px; height:40px; border-radius:50%; border:0; background:transparent; color:var(--ink-3); display:grid; place-items:center; cursor:pointer} .dock__x svg{width:16px; height:16px} .dock__x:hover{color:var(--paper-ink); background:rgba(16,16,16,.06)}
body.drawer-open .dock{visibility:hidden}

/* reveal */
@media (prefers-reduced-motion:no-preference){ .reveal{opacity:0; transform:translateY(14px); transition:opacity .55s var(--ease), transform .55s var(--ease)} .reveal.is-in{opacity:1; transform:none} }
html.motion .reveal{transition:none}
html.motion .ep{opacity:0} html.motion .ep.is-in{opacity:1}
.eq{display:inline-flex; align-items:center; gap:2.5px; height:14px; vertical-align:middle} .eq i{display:block; width:2.5px; height:100%; background:currentColor; border-radius:2px; transform:scaleY(.3)}
@media (prefers-reduced-motion:no-preference){ .eq i{animation:eq 1.1s ease-in-out infinite alternate} .eq i:nth-child(1){animation-delay:-.2s; animation-duration:.9s} .eq i:nth-child(2){animation-delay:-.6s; animation-duration:1.3s} .eq i:nth-child(3){animation-delay:-.1s} .eq i:nth-child(4){animation-delay:-.8s; animation-duration:.8s} .eq i:nth-child(5){animation-delay:-.4s; animation-duration:1.2s} @keyframes eq{from{transform:scaleY(.18)} to{transform:scaleY(1)}} }

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .hero h1{font-size:clamp(46px,5.4vw,70px)}
  .fan{height:500px}
  .eps{grid-template-columns:1fr 1fr} .ep--cta{grid-column:1/-1} .ep--cta .card--cta{aspect-ratio:auto; min-height:300px}
  .ftr__grid{grid-template-columns:1fr 1fr 1fr; gap:36px} .ftr__brand{grid-column:1/-1}
}
@media (max-width:960px){
  :root{--sec:var(--sec-m)}
  .hero{padding-top:120px}
  .hero__grid{grid-template-columns:1fr; gap:44px}
  .fan{height:auto; display:grid; grid-template-columns:1fr 1fr; gap:16px; perspective:none}
  .card{position:relative; width:100%; inset:auto; transform:none !important}
  .strip{grid-template-columns:1fr} .strip > div{border-left:0; padding-left:0; border-top:var(--hair-l)} .strip > div:first-child{border-top:0}
  .split,.host,.guest,.news{grid-template-columns:1fr; gap:36px}
  .split > .sticky{position:static}
  .eps{grid-template-columns:1fr}
  .host__block{max-width:440px}
  .guest__media{padding:0 0 20px 20px}
  .news{padding:40px 32px}
  .nav__links{display:none} .burger{display:inline-grid; place-items:center} .nav .btn{display:none}
  .drawer{display:block; position:fixed; inset:0; z-index:60; background:var(--paper); color:var(--paper-ink); padding:22px var(--gutter) 28px; transform:translateX(100%); transition:transform .3s var(--ease); visibility:hidden; overflow:auto}
  body.drawer-open .drawer{transform:none; visibility:visible} body.drawer-open{overflow:hidden}
  .drawer__top{display:flex; justify-content:space-between; align-items:center; height:52px} .drawer__top img{height:44px}
  .drawer__close{width:44px; height:44px; border:0; background:transparent; color:var(--paper-ink); cursor:pointer; padding:10px} .drawer__close svg{width:24px; height:24px}
  .drawer ul.links{margin:40px 0 0; display:grid; gap:8px} .drawer ul.links a{display:block; font:400 44px/1 var(--display); text-transform:uppercase; letter-spacing:-.01em; color:var(--paper-ink); text-decoration:none; padding:10px 0}
  .drawer .btn{margin-top:28px; width:100%; justify-content:center; font-size:18px; padding:18px}
  .drawer .badges{margin-top:36px}
  .dock{grid-template-columns:44px 1fr auto auto; gap:12px; bottom:12px} .dock__art{width:44px; height:44px} .dock__t b{white-space:normal; font-size:14px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .chip{padding:12px 16px} .chip--sm{padding:9px 13px}
  .strip .row .badge{width:40px; height:40px}
}
@media (max-width:640px){
  :root{--gutter:16px}
  body{font-size:17px}
  .hdr__in{height:64px} .brand img{height:42px}
  .hero{padding-top:100px}
  .hero h1{font-size:clamp(40px,11vw,54px)}
  .hero__lead{font-size:17px}
  .fan{grid-template-columns:1fr; gap:14px}
  .card__num{font-size:clamp(64px,18vw,84px)}
  .ep__body{padding-top:18px}
  .card--cta{padding:24px}
  .news{padding:28px 20px} .form{flex-direction:column; border-radius:16px; padding:10px} .form .btn{justify-content:center} .form__note{margin-left:8px}
  .ftr__grid{grid-template-columns:1fr 1fr} .ftr__top img{height:72px}
  .faq details p{padding-right:0}
  .about .lead,.quote p,.guest .big{font-size:30px}
  .dock__t small{display:none}
  .guest__media .stamp{width:64px; height:64px} .guest__media .stamp svg{width:36px; height:18px}
}