@font-face{font-family:"Fraunces";src:url(../fonts/fraunces.ttf) format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(../fonts/instrument-sans.ttf) format("truetype");font-weight:400 700;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-serif-italic.ttf) format("truetype");font-style:italic;font-display:swap}
:root{--ink:#0c0a09;--ink2:#161210;--ink3:#211b18;--paper:#f4eee6;--mute:#a59a8f;--dim:#6f655c;
--pg:#e46a3a;--pg2:#7a2f17;--ph:#cfe6ee;--ph2:#5f8796;--va:#c8a15b;--va2:#5a4520;--r:6px}
*{box-sizing:border-box}html{background:var(--ink);color:var(--paper)}
body{margin:0;font:400 16px/1.5 "Instrument Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}
.top{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;gap:28px;padding:18px clamp(18px,4vw,56px);background:linear-gradient(#0c0a09e6,#0c0a0900);transition:background .3s}
.top.solid{background:#0c0a09f2;backdrop-filter:blur(8px)}
.brand{font:500 22px/1 "Fraunces";letter-spacing:-.01em}.brand i{font-family:"Instrument Serif";font-weight:400;color:var(--mute)}
.top nav{display:flex;gap:22px;font-size:14px;color:var(--mute)}.top nav a:hover{color:var(--paper)}
.hero{position:relative;min-height:min(92vh,880px);display:flex;align-items:flex-end;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:drift 24s ease-out forwards}
@keyframes drift{to{transform:scale(1)}}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0c0a09f0 0%,#0c0a09a0 38%,#0c0a0900 70%),linear-gradient(0deg,var(--ink) 0%,#0c0a0900 40%)}
.hero .copy{position:relative;z-index:2;max-width:640px;padding:0 clamp(18px,4vw,56px) clamp(48px,9vh,110px)}
.kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--pg)}
.hero h1{font:300 clamp(44px,7vw,96px)/.95 "Fraunces";letter-spacing:-.03em;margin:14px 0 18px;font-variation-settings:"SOFT" 50,"opsz" 144}
.hero h1 em{font-family:"Instrument Serif";font-weight:400}
.hero p{color:#d8cfc5;font-size:clamp(15px,1.4vw,18px);max-width:52ch;margin:0 0 28px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:999px;padding:13px 24px;font-weight:600;font-size:15px;transition:transform .15s,background .2s}
.btn:active{transform:scale(.97)}.btn.play{background:var(--paper);color:var(--ink)}.btn.play:hover{background:#fff}
.btn.ghost{background:#f4eee61f;backdrop-filter:blur(6px)}.btn.ghost:hover{background:#f4eee633}
.btn svg{width:16px;height:16px}
.credit{position:absolute;right:clamp(18px,4vw,56px);bottom:22px;z-index:2;font-size:11px;color:var(--dim)}
main{padding-bottom:80px}
.row{margin:44px 0 0}.row h2{font:400 clamp(20px,2vw,26px)/1.1 "Fraunces";margin:0 clamp(18px,4vw,56px) 14px;display:flex;align-items:baseline;gap:12px}
.row h2 small{font:400 13px "Instrument Sans";color:var(--mute)}
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px clamp(18px,4vw,56px) 14px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.card{flex:0 0 clamp(240px,24vw,340px);scroll-snap-align:start;position:relative;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.card:hover{transform:translateY(-4px)}
.thumb{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--ink3)}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.card:hover .thumb img{transform:scale(1.05)}
.thumb .prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffff26}.thumb .prog i{display:block;height:100%;background:var(--pg)}
.meta{padding:10px 2px 0}.meta b{display:block;font-weight:500;font-size:15px;line-height:1.3}.meta span{font-size:12.5px;color:var(--mute)}
.tag{position:absolute;bottom:10px;right:10px;z-index:3;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;background:#0c0a09b3;padding:4px 8px;border-radius:3px}
/* typographic title cards — explicitly not thumbnails */
.tc{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:14px 16px}
.tc .code{font:300 44px/1 "Fraunces";letter-spacing:-.03em}.tc .t{font:400 17px/1.15 "Instrument Serif";font-style:italic;max-width:90%}
.tc .lbl{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.tc.pg{background:radial-gradient(120% 90% at 100% 0%,#7a2f17 0%,#2a140c 55%,#140b07 100%);color:#f6d9c8}
.tc.pg:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff07 0 1px,transparent 1px 9px)}
.tc.ph{background:linear-gradient(160deg,#f3f7f8,#d6e4e9);color:#24414b}
.tc.ph:after{content:"";position:absolute;inset:0;background-image:linear-gradient(#24414b12 1px,transparent 1px),linear-gradient(90deg,#24414b12 1px,transparent 1px);background-size:22px 22px}
.tc.va{background:#1c1914;color:#ead8b4}
.tc.va:after{content:"";position:absolute;right:-30%;top:-40%;width:90%;aspect-ratio:1;border-radius:50%;border:1px solid #c8a15b55;box-shadow:0 0 0 18px #1c1914,0 0 0 19px #c8a15b33,0 0 0 40px #1c1914,0 0 0 41px #c8a15b22}
.tc>*{position:relative;z-index:1}
.soon{opacity:.72}.soon:hover{opacity:1}
.empty{margin:0 clamp(18px,4vw,56px);color:var(--dim);font-size:14px;font-style:italic}
.acads{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 clamp(18px,4vw,56px)}
.acad{position:relative;min-height:260px;border-radius:var(--r);overflow:hidden;display:flex;align-items:flex-end;padding:22px}
.acad img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}.acad:hover img{transform:scale(1.04)}
.acad:before{content:"";position:absolute;inset:0;z-index:1}
.acad.pg:before{background:linear-gradient(0deg,#1a0c06f2,#1a0c0640)}.acad.ph:before{background:linear-gradient(0deg,#0d1d23e6,#0d1d2320)}.acad.va:before{background:linear-gradient(0deg,#15120ce6,#15120c30)}
.acad div{position:relative;z-index:2}.acad h3{font:300 30px/1 "Fraunces";margin:0 0 6px}.acad p{margin:0;font-size:13px;color:#d6ccc1}
.acad.pg h3{color:#ffd2bd}.acad.ph h3{color:#e9f6fa}.acad.va h3{color:#ecd29f}
.foot{margin:70px clamp(18px,4vw,56px) 0;padding-top:20px;border-top:1px solid #ffffff14;font-size:12px;color:var(--dim)}
/* episode page */
.ep{padding-top:72px}.stage{max-width:1280px;margin:0 auto;padding:0 clamp(14px,3vw,40px)}
.switch{display:inline-flex;background:var(--ink3);border-radius:999px;padding:4px;margin:18px 0}
.switch button{border:0;background:none;padding:9px 20px;border-radius:999px;font-size:14px;color:var(--mute)}
.switch button[aria-pressed=true]{background:var(--paper);color:var(--ink);font-weight:600}
.screen{background:#000;border-radius:var(--r);overflow:hidden;aspect-ratio:16/9;box-shadow:0 30px 80px #000a}
.screen video{width:100%;height:100%;display:block}
.listen{display:grid;grid-template-columns:minmax(200px,340px) 1fr;gap:clamp(18px,3vw,40px);align-items:center;background:linear-gradient(120deg,#2a140c,#120c09 60%);border-radius:var(--r);padding:clamp(18px,3vw,36px)}
.listen img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:4px;box-shadow:0 20px 50px #0009}
.listen h3{font:300 clamp(26px,3vw,40px)/1.05 "Fraunces";margin:0 0 6px}.listen .sub{color:var(--mute);font-size:14px;margin-bottom:26px}
.ctrl{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pp{width:64px;height:64px;border-radius:50%;border:0;background:var(--paper);color:var(--ink);display:grid;place-items:center;transition:transform .15s}.pp:active{transform:scale(.94)}.pp svg{width:24px;height:24px}
.skip{border:1px solid #ffffff2b;background:none;border-radius:999px;padding:8px 13px;font-size:13px}
.speeds{display:flex;gap:4px;margin-left:auto}.speeds button{border:0;background:#ffffff12;border-radius:4px;padding:6px 9px;font-size:12.5px;color:var(--mute)}
.speeds button[aria-pressed=true]{background:var(--pg);color:#160a05;font-weight:700}
.bar{margin:22px 0 6px;height:6px;border-radius:3px;background:#ffffff1f;position:relative;cursor:pointer}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--pg);border-radius:3px}.bar b{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--paper)}
.times{display:flex;justify-content:space-between;font-size:12px;color:var(--mute);font-variant-numeric:tabular-nums}
.resume{font-size:13px;color:var(--mute);margin-top:10px;min-height:20px}.resume button{background:none;border:0;color:var(--paper);text-decoration:underline;padding:0}
.ehead{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(20px,4vw,60px);margin:36px 0}
.ehead h1{font:300 clamp(34px,4.6vw,62px)/1 "Fraunces";letter-spacing:-.02em;margin:8px 0 16px}
.ehead .lede{color:#d8cfc5;font-size:17px;max-width:60ch}
.obj h4,.side h4{font:500 12px "Instrument Sans";letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin:0 0 12px}
.obj ol{margin:0;padding:0;list-style:none;counter-reset:o}.obj li{counter-increment:o;padding:12px 0 12px 44px;position:relative;border-top:1px solid #ffffff12}
.obj li:before{content:counter(o,decimal-leading-zero);position:absolute;left:0;font:300 22px/1 "Fraunces";color:var(--pg)}
details.doc{border-top:1px solid #ffffff14;padding:6px 0}details.doc summary{list-style:none;cursor:pointer;padding:18px 0;font:400 22px "Fraunces";display:flex;justify-content:space-between}
details.doc summary:after{content:"+";color:var(--mute);transition:transform .2s}details.doc[open] summary:after{transform:rotate(45deg)}
.prose{max-width:72ch;color:#d9d0c6;font-size:16px;line-height:1.7;padding-bottom:30px}.prose h1,.prose h2,.prose h3{font-family:"Fraunces";font-weight:400;color:var(--paper)}
.prose table{border-collapse:collapse;font-size:14px}.prose td,.prose th{border-bottom:1px solid #ffffff1a;padding:6px 10px;text-align:left}.prose code{font-size:.9em}
@media (max-width:900px){.acads{grid-template-columns:1fr}.acad{min-height:180px}.ehead{grid-template-columns:1fr}.listen{grid-template-columns:1fr}.listen img{max-width:220px}.speeds{margin-left:0;width:100%}}
@media (max-width:560px){.top nav{display:none}.hero{min-height:78vh}.hero h1{font-size:46px}.card{flex-basis:72vw}.pp{width:56px;height:56px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ---- v2 integration ---- */
.feature{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(18px,3vw,40px);align-items:center;margin:0 clamp(18px,4vw,56px);padding:clamp(16px,2.4vw,28px);border-radius:10px;background:linear-gradient(120deg,#2a140c,#120c09 70%)}
.feature .thumb{box-shadow:0 20px 50px #0009}.feature h3{font:300 clamp(26px,3vw,42px)/1.05 "Fraunces";margin:8px 0 10px}.feature p{color:#d8cfc5;margin:0 0 20px;max-width:52ch}
.vbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 clamp(18px,4vw,56px) 10px}.tabs a{padding:8px 16px;border-radius:999px;background:var(--ink3);font-size:14px;color:var(--mute)}
.tabs a[aria-current=true]{background:var(--paper);color:var(--ink);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px 14px;padding:0 clamp(18px,4vw,56px)}.grid .card{flex:none}
.browse{padding-top:84px}.browse h1{font:300 clamp(34px,5vw,64px)/1 "Fraunces";margin:10px clamp(18px,4vw,56px) 18px}
.filt{margin:0 clamp(18px,4vw,56px) 6px;font-size:13px;color:var(--mute)}.filt label{cursor:pointer}
.pp,.skip,.speeds button{min-height:44px;min-width:44px;touch-action:manipulation}
.secondary{margin-top:30px;opacity:.95}.secondary h4{font:500 12px "Instrument Sans";letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin:0}
.prod{font-size:13px;color:var(--mute)}.prod div{padding:4px 0;border-bottom:1px solid #ffffff0d}
@media (max-width:900px){.feature{grid-template-columns:1fr}}
@media (max-width:560px){.speeds{margin-left:0;width:100%;justify-content:space-between}.listen{padding:18px!important}.grid{grid-template-columns:1fr 1fr;gap:14px 10px}.grid .meta b{font-size:13.5px}.tc .code{font-size:30px}.tc .t{font-size:14px}}
@media (max-width:560px){.listen>img,.listen>.thumb{max-width:200px;margin:0 auto;width:100%}}