
:root{
  --bg:#030503; --bg2:#070a07; --panel:#0b100b; --panel2:#0e140e;
  --line:#1d2b1d; --line2:#2a3d2a;
  --green:#50F000; --green-dim:#3ec400; --green-soft:rgba(80,240,0,.12);
  --ink:#f2f5f0; --muted:#aeb8ab; --faint:#7d8a7c;
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Archivo",system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
.display{font-family:"Rubik Spray Paint",cursive;font-weight:400;letter-spacing:.01em}
.cond{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.h-g{color:var(--green);text-shadow:0 0 8px rgba(80,240,0,.5),0 0 26px rgba(80,240,0,.26),0 0 64px rgba(80,240,0,.13)}
.h-w{color:#fff}
.sign-line{display:block}
/* thin black outline inside the letters, big display headlines only: section heads, episode-page title, footer sign-off. Kept deliberately fine (.02em, roughly 1 to 2px at headline sizes) so it only edges the letterforms: white letters stay crisp over artwork with no glow, green letters keep their soft halo behind it, and the spray paint texture and fill stay fully legible. Small titles, prices, labels and buttons stay flat with no stroke. The hero headline carries NO black outline at all: the thick ring there read as heavy and dirty against the artwork, so the hero letters are pure fill, white flat and green with its soft halo. */
.sec-head h2.display,.demo-body h2.display,footer .signoff.display{-webkit-text-stroke:.02em #000;-webkit-text-stroke-width:.02em;-webkit-text-stroke-color:#000}
.hero h1 .h-w{text-shadow:none}
.hero h1 .h-g{text-shadow:0 0 5px rgba(80,240,0,.42),0 0 16px rgba(80,240,0,.2),0 0 36px rgba(80,240,0,.08)}
.glow-tight{color:var(--green);text-shadow:0 0 6px rgba(80,240,0,.35)}
.review .who{color:var(--faint);font-size:.85rem;font-family:"Barlow Condensed",sans-serif;letter-spacing:.06em;text-transform:uppercase}
/* film grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}
/* scroll reveals: hidden state only applies when JS runs, so content is never stuck invisible */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
/* ---------- announcement + nav ---------- */
header.site{position:sticky;top:0;z-index:50;background:rgba(3,5,3,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:1rem;padding:.7rem 0}
.nav .brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.nav .brand img{width:44px;height:44px;border-radius:9px;object-fit:cover;border:1px solid var(--line2)}
.nav .brand span{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:1.35rem;color:var(--green);line-height:1}
.nav nav{display:flex;gap:1.1rem;flex-wrap:wrap}
.nav nav a{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:1.08rem;letter-spacing:.09em;text-transform:uppercase;color:var(--green);text-decoration:none;padding:.3rem 0;border-bottom:2px solid transparent}
.nav nav a:hover{border-bottom-color:var(--green)}
.socials{display:flex;align-items:center;gap:.15rem}
.socials a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;color:var(--green);text-decoration:none}
.socials a:hover{background:var(--green-soft)}
.socials svg{width:19px;height:19px;fill:currentColor;display:block}
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:42px;height:42px;padding:0;background:transparent;border:1px solid var(--line2);border-radius:9px;cursor:pointer;flex:none}
.burger span{display:block;width:20px;height:2px;background:var(--green);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;border-top:1px solid var(--line);padding:.6rem 0 1.1rem}
.mobile-menu.open{display:block}
.mobile-menu nav{display:flex;flex-direction:column}
.mobile-menu nav a{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:1.25rem;letter-spacing:.09em;text-transform:uppercase;color:var(--green);text-decoration:none;padding:.65rem .2rem;border-bottom:1px solid var(--line)}
.mobile-menu .mm-label{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:1rem 0 .35rem}
.mobile-menu .socials{gap:.35rem}
.mobile-menu .socials a{width:42px;height:42px;border:1px solid var(--line2)}
.mobile-menu .socials svg{width:21px;height:21px}
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:.5rem;font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.07em;text-transform:uppercase;font-size:1.05rem;text-decoration:none;border-radius:999px;padding:.68rem 1.5rem;border:1px solid var(--green);cursor:pointer;transition:transform .15s ease, background .15s ease}
/* Brandon's rule, site-wide: button text is ALWAYS centered, horizontally and vertically, on every button. Multi-line labels are the trap: a wrapped label fills the button's full content width, so justify-content alone leaves its lines reading left-aligned (the Screening Room watch buttons did exactly this). text-align:center on the button itself centers every wrapped line. This covers every button style on the page: .btn CTAs, filter chips, contact tabs, and player speed controls. The .ep episode rows are the one deliberate exception: they are list rows with artwork, title, and a play control laid out in columns, so their text stays left by design and .ep already declares text-align:left. */
button,.chip,.ctab,.speed{text-align:center}
.chip,.ctab,.speed{display:inline-flex;align-items:center;justify-content:center}
.btn-solid{background:var(--green);color:#06130a}
.btn-solid:hover{background:#68ff1f}
.btn-ghost{background:transparent;color:var(--green)}
.btn-ghost:hover{background:var(--green-soft)}
.btn:active{transform:scale(.97)}
@media(max-width:1240px){.nav nav{display:none}.nav .socials{display:none}.nav{gap:.8rem}.burger{display:inline-flex}}
/* ---------- hero : full-bleed title screen ---------- */
.hero{position:relative;overflow:hidden;border-bottom:3px solid var(--green);min-height:92svh;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;background:url("/assets/artwork.jpg") center 68%/cover no-repeat;filter:saturate(.92)}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(3,5,3,.95) 0%,rgba(3,5,3,.84) 42%,rgba(3,5,3,.44) 72%,rgba(3,5,3,.66) 100%),linear-gradient(0deg,var(--bg) 0%,transparent 20%)}
.hero-in{position:relative;padding:4.5rem 0;max-width:780px}
.hero h1{font-size:clamp(2.9rem,7.4vw,5.4rem);line-height:1.04;margin:0 0 1.2rem;color:#fff}
.lede{font-size:1.15rem;color:#dfe7dc;max-width:54ch;margin:0 0 1.1rem}
.bugonia{display:flex;gap:.9rem;align-items:center;margin:0 0 1.7rem;max-width:56ch}
.bugonia img{width:52px;height:78px;object-fit:cover;border-radius:6px;border:1px solid var(--line2);flex:none}
.bugonia p{margin:0;font-size:.95rem;color:var(--muted)}
.bugonia strong{color:var(--ink)}
.listen-row{display:flex;flex-wrap:wrap;gap:.65rem}
.listen-row .btn{min-width:158px}
.host-chip{display:flex;align-items:center;gap:.85rem;margin-top:1.8rem}
.host-chip img{width:58px;height:58px;border-radius:50%;object-fit:cover;object-position:center center;border:2px solid var(--green)}
.host-chip p{margin:0;font-size:.95rem;color:var(--muted)}
.host-chip strong{color:var(--ink);display:block;font-size:1rem}
@media(max-width:640px){
  .hero{min-height:0}
  .listen-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
  .listen-row .btn{min-width:0;width:100%}
  .listen-row .btn:last-child{grid-column:1/-1}
}
/* ---------- sections ---------- */
section.block{padding:3.6rem 0}
section.block + section.block{border-top:3px solid rgba(80,240,0,.55)}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.sec-head h2{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.05;margin:0;color:#fff}
.sec-head p{margin:.4rem 0 0;color:var(--muted);max-width:62ch}
.sec-head a.more{font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green);text-decoration:none;font-size:1.05rem}
/* ---------- episodes / player ---------- */
.feed-status{font-family:"Barlow Condensed",sans-serif;letter-spacing:.08em;text-transform:uppercase;font-size:.95rem;color:var(--faint);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.feed-status .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(80,240,0,.8)}
.now-playing{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line2);border-radius:var(--radius);padding:1.2rem;display:grid;grid-template-columns:96px 1fr;gap:1.1rem;align-items:center;margin-bottom:1.2rem}
.now-playing img{width:96px;height:96px;border-radius:10px;object-fit:cover}
.now-playing h3{margin:.1rem 0 .25rem;font-size:1.12rem;line-height:1.3}
.now-playing .meta{color:var(--faint);font-size:.88rem;font-family:"Barlow Condensed",sans-serif;letter-spacing:.06em;text-transform:uppercase}
.wave{display:flex;align-items:flex-end;gap:2px;height:38px;margin:.7rem 0 .4rem;cursor:pointer}
.wave i{flex:1;background:#33502c;border-radius:2px;min-height:4px;transition:background .2s;transform-origin:bottom center}
.wave i.played{background:var(--green)}
.wave.playing i{animation:dance 1.5s ease-in-out infinite}
@keyframes dance{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(1)}}
.transport{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.playbtn{width:52px;height:52px;border-radius:50%;border:none;background:var(--green);color:#06130a;font-size:1.25rem;cursor:pointer;display:grid;place-items:center;flex:none}
.playbtn:hover{background:#68ff1f}
.time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.92rem}
.speed{background:none;border:1px solid var(--line2);color:var(--ink);border-radius:8px;padding:.3rem .6rem;font-family:"Barlow Condensed",sans-serif;font-weight:700;cursor:pointer}
.ep-list{display:grid;gap:.7rem}
.ep{display:grid;grid-template-columns:64px 1fr auto;gap:1rem;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:.75rem .9rem;text-align:left;width:100%;color:var(--ink);cursor:pointer;font:inherit}
.ep:hover{border-color:var(--line2);background:var(--panel2)}
.ep img{width:64px;height:64px;border-radius:8px;object-fit:cover}
.ep h4{margin:0 0 .15rem;font-size:1rem;line-height:1.3}
.ep p{margin:0;color:var(--muted);font-size:.9rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ep .ep-play{width:42px;height:42px;border-radius:50%;border:1px solid var(--green);color:var(--green);display:grid;place-items:center;font-size:.95rem;flex:none;background:transparent}
.ep.active{border-color:var(--green)}
.ep.active .ep-play{background:var(--green);color:#06130a;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(80,240,0,.45)}50%{box-shadow:0 0 0 7px rgba(80,240,0,0)}}
.ep .date{color:var(--faint);font-size:.82rem;font-family:"Barlow Condensed",sans-serif;letter-spacing:.06em;text-transform:uppercase}
.archive-tools{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.4rem 0 1rem}
.archive-tools input{flex:1 1 240px;background:var(--panel);border:1px solid var(--line2);border-radius:999px;color:var(--ink);padding:.65rem 1.1rem;font:inherit;font-size:.98rem}
.chip{border:1px solid var(--line2);background:var(--panel);color:var(--muted);border-radius:999px;padding:.5rem 1rem;font-family:"Barlow Condensed",sans-serif;font-weight:600;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;font-size:.98rem}
.chip.on{border-color:var(--green);color:var(--green);background:var(--green-soft)}
@media(max-width:640px){.now-playing{grid-template-columns:72px 1fr}.now-playing img{width:72px;height:72px}.ep{grid-template-columns:52px 1fr auto}.ep img{width:52px;height:52px}}
/* ---------- case files : the evidence board ---------- */
.board{background:#090c09;border:1px solid var(--line2);border-radius:var(--radius);padding:1.5rem 1.5rem 1.7rem;position:relative;box-shadow:inset 0 0 60px rgba(0,0,0,.55)}
.board-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem;padding-bottom:.9rem;border-bottom:1px dashed var(--line2)}
.board-head .label{font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--green);font-size:1rem}
.board-head .files{font-family:"Barlow Condensed",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-size:.92rem}
.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:1.1rem}
.case{position:relative;border-radius:6px;overflow:hidden;border:1px solid var(--line2);text-decoration:none;background:var(--panel);display:flex;flex-direction:column;transition:transform .25s ease,border-color .25s ease}
.case:nth-child(odd){transform:rotate(-.7deg)}
.case:nth-child(even){transform:rotate(.7deg)}
.case:hover{transform:rotate(0) translateY(-4px);border-color:var(--green)}
.case .pin{position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#9dff6a,#2fae00);box-shadow:0 2px 5px rgba(0,0,0,.65);z-index:3}
.case .tape{position:absolute;width:66px;height:20px;background:rgba(80,240,0,.14);border-left:1px dashed rgba(80,240,0,.3);border-right:1px dashed rgba(80,240,0,.3);top:6px;z-index:3;pointer-events:none}
.case .tape.t1{left:6px;transform:rotate(-40deg)}
.case .tape.t2{right:6px;transform:rotate(40deg)}
.case .thumb{aspect-ratio:4/3;overflow:hidden;position:relative}
.case .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.case:hover .thumb img{transform:scale(1.05)}
.case .stamp{position:absolute;top:10px;right:10px;background:rgba(3,5,3,.88);border:1.5px solid var(--green);color:var(--green);font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.14em;font-size:.82rem;padding:.22rem .6rem;border-radius:4px;transform:rotate(3deg);text-transform:uppercase}
.case .body{padding:1rem 1.05rem 1.15rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.case h3{margin:0;font-size:1.28rem;line-height:1.1}
.case .count{font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green);font-size:.98rem}
.case p{margin:0;color:var(--muted);font-size:.93rem;flex:1}
.etags{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.15rem}
.etag{border:1px solid var(--line2);border-radius:999px;padding:.24rem .75rem;font-family:"Barlow Condensed",sans-serif;font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--green);background:rgba(80,240,0,.05)}
.case .go{font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green);font-size:1rem}
.board-note{margin:1.1rem 0 0;color:var(--faint);font-size:.9rem}
/* ---------- episode page concept ---------- */
.demo-frame{border:1px solid var(--line2);border-radius:var(--radius);background:linear-gradient(180deg,#0c110c,#080b08);overflow:hidden}
.demo-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding:.65rem 1.2rem;border-bottom:1px solid var(--line);font-family:"Barlow Condensed",sans-serif;letter-spacing:.12em;text-transform:uppercase;font-size:.85rem;color:var(--faint)}
.demo-body{padding:0 1.6rem 1.6rem}
.folder-tab{display:inline-block;background:var(--green);color:#06130a;font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.95rem;padding:.5rem 1.2rem;border-radius:8px 8px 0 0;margin-top:1.2rem}
.crumbs{font-family:"Barlow Condensed",sans-serif;letter-spacing:.08em;text-transform:uppercase;font-size:.9rem;color:var(--faint);margin:1rem 0 .6rem}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--green)}
.demo-body h2{font-size:clamp(1.8rem,4vw,2.9rem);line-height:1.08;margin:0 0 .5rem;color:#fff}
.demo-meta{font-family:"Barlow Condensed",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-size:.95rem;margin-bottom:1.2rem}
.demo-grid{display:grid;grid-template-columns:230px 1fr;gap:1.6rem;align-items:start}
.demo-art img{border-radius:10px;border:1px solid var(--line2)}
.demo-desc{color:#d5ddd3;max-width:60ch;margin:0 0 1rem}
.demo-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.2rem 0 0}
.demo-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.demo-count{font-family:"Barlow Condensed",sans-serif;letter-spacing:.14em;color:var(--faint);font-size:.9rem;text-transform:uppercase}
@media(max-width:700px){.demo-grid{grid-template-columns:1fr}.demo-art{max-width:220px}}
/* ---------- film ---------- */
.film{background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(80,240,0,.07),transparent),var(--bg2)}
.film-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2rem;align-items:center}
.film-frame{border:1px solid var(--line2);border-radius:var(--radius);overflow:hidden;background:#000}
.film-frame .ph{aspect-ratio:16/9;background:url("/assets/film-poster.jpg") center/cover;display:grid;place-items:center;position:relative}
.film-frame .ph::after{content:"";position:absolute;inset:0;background:rgba(3,5,3,.45)}
.film-frame a.ph{text-decoration:none;cursor:pointer}
.film-frame a.ph:hover .play-ic{background:var(--green);color:#06130a}
.film-frame .ph .play-ic{position:relative;z-index:1;width:76px;height:76px;border-radius:50%;border:2px solid var(--green);background:rgba(3,5,3,.8);color:var(--green);font-size:1.6rem;display:grid;place-items:center;transition:background .15s ease,color .15s ease}
.film h3{font-size:1.9rem;margin:.2rem 0 .5rem}
.film p{color:var(--muted)}
.watch-row{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-top:1.1rem}
.watch-row .btn{width:100%;min-width:0}
.kicker{font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-size:1rem;margin:0}
@media(max-width:820px){.film-grid{grid-template-columns:1fr}}
/* ---------- about ---------- */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:2.2rem;align-items:center}
.about-grid img.portrait{border-radius:var(--radius);border:1px solid var(--line2);width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center center}
.about-grid p{color:#d5ddd3}
.about-grid p strong{color:var(--ink)}
@media(max-width:820px){.about-grid{grid-template-columns:1fr}.about-grid img.portrait{max-width:340px}}
/* ---------- patreon / merch / reviews ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:820px){.two{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem}
.panel h3{margin:.2rem 0 .6rem;font-size:1.45rem}
.panel p{color:var(--muted)}
.price-big{font-family:"Rubik Spray Paint",cursive;font-size:2.6rem;color:var(--green);line-height:1;margin:.4rem 0;text-shadow:0 0 8px rgba(80,240,0,.5),0 0 26px rgba(80,240,0,.26)}
.panel ul{margin:.8rem 0 1.2rem;padding-left:1.15rem;color:#d5ddd3}
.panel li{margin:.3rem 0}
.merch{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.item{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.item img{width:100%;aspect-ratio:1;object-fit:cover}
.item .body{padding:.8rem .9rem 1rem}
.item h4{margin:0 0 .15rem;font-size:1.02rem}
.item .pr{color:var(--green);font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.1rem;letter-spacing:.05em}
.item p{margin:.2rem 0 0;color:var(--faint);font-size:.86rem}
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem}
.review{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem}
.review .stars{color:#ffd83d;letter-spacing:.2em;font-size:1rem}
.review h4{margin:.5rem 0 .4rem;font-size:1.05rem;color:var(--ink)}
.review p{margin:0;color:var(--muted);font-size:.95rem}
.sample-note{color:var(--faint);font-size:.9rem;margin:0 0 1rem}
/* ---------- contact ---------- */
#contact{scroll-margin-top:90px}
.contact-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem}
.ctabs{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.4rem}
.ctab{border:1px solid var(--line2);background:var(--panel2);color:var(--muted);border-radius:999px;padding:.6rem 1.3rem;font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.07em;text-transform:uppercase;font-size:1.05rem;cursor:pointer}
.ctab:hover{border-color:var(--green);color:var(--green)}
.ctab.on{border-color:var(--green);color:#06130a;background:var(--green)}
.ctab.on:hover{color:#06130a}
.c-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media(max-width:640px){.c-grid{grid-template-columns:1fr}.contact-panel{padding:1.15rem}}
.c-field{margin-bottom:1rem}
.c-field label{display:block;font-family:"Barlow Condensed",sans-serif;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--green);font-size:.95rem;margin-bottom:.4rem}
.c-field input,.c-field select,.c-field textarea{width:100%;background:var(--bg2);border:1px solid var(--line2);border-radius:10px;color:var(--ink);padding:.7rem .9rem;font:inherit;font-size:1rem}
.c-field textarea{resize:vertical;min-height:130px}
.c-field input:focus,.c-field select:focus,.c-field textarea:focus{border-color:var(--green);outline:2px solid rgba(80,240,0,.25);outline-offset:1px}
.c-note{color:var(--muted);font-size:.92rem;margin:.9rem 0 0}
.c-note a{color:var(--green)}
.c-confirm{margin-top:1.1rem;border:1px solid var(--green);background:var(--green-soft);border-radius:10px;padding:1rem 1.1rem;color:#dfe7dc}
.c-confirm strong{color:var(--ink);display:block;margin-bottom:.25rem}
.c-lede{color:#d5ddd3;margin:0 0 1.2rem;max-width:62ch}
.rec-row{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.rec-btn{width:78px;height:78px;border-radius:50%;border:2px solid var(--green);background:transparent;cursor:pointer;display:grid;place-items:center;flex:none;padding:0}
.rec-btn:hover{background:var(--green-soft)}
.rec-btn:disabled{opacity:.45;cursor:not-allowed}
.rec-dot{width:26px;height:26px;border-radius:50%;background:var(--green);display:block}
.rec-btn.recording .rec-dot{background:#ff5252;border-radius:7px;animation:pulse 1.4s ease-in-out infinite}
.rec-status{margin:0;color:var(--ink);font-size:1.05rem;max-width:46ch}
.rec-time{margin:.15rem 0 0;color:var(--faint);font-variant-numeric:tabular-nums;font-size:1rem}
#recResult{margin-top:1.3rem}
#recAudio{width:100%}
/* ---------- llc ---------- */
.llc{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:760px){.llc{grid-template-columns:1fr}}
.llc .panel{display:flex;gap:1.1rem;align-items:center}
.llc img{width:92px;height:92px;border-radius:12px;object-fit:cover;flex:none}
/* ---------- footer ---------- */
footer{border-top:3px solid var(--green);background:#020302;padding:3rem 0 7.5rem}
footer .signoff{font-size:clamp(1.7rem,4vw,2.6rem);color:#fff;line-height:1.15;margin:0 0 1.4rem;max-width:38ch}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.6rem}
footer h5{font-family:"Barlow Condensed",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin:0 0 .7rem;font-size:1.05rem}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:.35rem 0}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--green)}
footer .fine{color:var(--faint);font-size:.88rem;margin-top:2rem}
/* ---------- sticky player ---------- */
.sticky-player{position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(5,8,5,.96);border-top:2px solid var(--green);backdrop-filter:blur(10px);transform:translateY(110%);transition:transform .3s ease}
.sticky-player.show{transform:translateY(0)}
.sticky-in{display:flex;align-items:center;gap:.9rem;padding:.6rem 0}
.sticky-in img{width:46px;height:46px;border-radius:8px;object-fit:cover}
.sticky-in .t{flex:1;min-width:0}
.sticky-in .t strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.95rem}
.sticky-in .t span{color:var(--faint);font-size:.82rem;font-variant-numeric:tabular-nums}
.sticky-in .bar{height:4px;background:#22331f;border-radius:2px;margin-top:.3rem;overflow:hidden}
.sticky-in .bar i{display:block;height:100%;background:var(--green);width:0%}
.sticky-in button.playbtn{width:44px;height:44px;font-size:1rem}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;scroll-behavior:auto!important;animation:none!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- coded site additions: subpages, episode pages, archive ---------- */
.page-head{padding:3.2rem 0 0}
.page-head h1{font-size:clamp(2.4rem,5.4vw,3.8rem);line-height:1.05;margin:0;color:#fff}
.page-head .lede{margin-top:.8rem}
.ep-page h1.display,.page-head h1.display{-webkit-text-stroke:.02em #000}
.ep-audio{width:100%;margin:1rem 0 .4rem}
.ep-art img{width:100%;border-radius:10px;border:1px solid var(--line2)}
a.ep{text-decoration:none}
.ep .tt{display:block}
.ep .topics{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.45rem}
.ep .topics .etag{font-size:.75rem;padding:.16rem .6rem}
.badge{display:inline-block;border:1px solid var(--green);color:var(--green);border-radius:4px;font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.75rem;padding:.1rem .5rem;vertical-align:middle}
.start-panel{display:flex;gap:1.1rem;align-items:center;background:var(--panel);border:1px solid var(--line2);border-radius:var(--radius);padding:1.1rem 1.2rem;margin-bottom:1.6rem;flex-wrap:wrap}
.start-panel img{width:74px;height:74px;border-radius:10px;object-fit:cover}
.start-panel p{margin:0;color:#d5ddd3;flex:1;min-width:230px}
.group-head{font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);font-size:1.05rem;margin:1.8rem 0 .8rem}
.transcript{margin-top:2.2rem;border-top:1px solid var(--line);padding-top:1.6rem}
.transcript h3{font-size:1.5rem;margin:0 0 1rem}
.transcript .t-body{color:#d5ddd3;max-width:72ch}
.transcript .t-body p{margin:0 0 1rem}
.transcript .t-body p strong{color:var(--ink)}
.pn-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line);flex-wrap:wrap}
.pn-nav a{color:var(--green);text-decoration:none;font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.07em;text-transform:uppercase;max-width:46%}
.pn-nav a span{display:block;color:var(--muted);text-transform:none;letter-spacing:0;font-family:"Archivo",sans-serif;font-weight:500;font-size:.92rem;margin-top:.25rem}
.pn-nav a.next{margin-left:auto;text-align:right}
.desc-body{color:#d5ddd3;max-width:68ch}
.desc-body a{color:var(--green)}
.desc-body p{margin:0 0 1rem}
.coll-hero{display:grid;grid-template-columns:300px 1fr;gap:2rem;align-items:center}
.coll-hero img{width:100%;aspect-ratio:1;border-radius:var(--radius);border:1px solid var(--line2);object-fit:cover}
@media(max-width:760px){.coll-hero{grid-template-columns:1fr}.coll-hero img{max-width:260px}}
.player-latest{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line2);border-radius:var(--radius);padding:1.2rem;margin-bottom:1.2rem}
.player-latest h3{margin:.2rem 0 .8rem;font-size:1.15rem;line-height:1.35}
.skip-link{position:absolute;left:-9999px}
