:root{--ink:#05080F;--panel:#0A1526;--panel2:#0F1E37;--text:#EEF1F6;--muted:#8CA0BC;--gold:#D4A63C;--col:680px;--ease:cubic-bezier(.2,.7,.1,1)}
*{box-sizing:border-box}
html{background:var(--ink);scroll-behavior:smooth}
body{margin:0;background:transparent;color:var(--text);font:400 18px/1.7 Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}
.muted{color:var(--muted)}
.stripe{display:flex;height:5px}.stripe i{flex:1}.stripe.thin{height:3px}

.top{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px clamp(16px,4vw,40px);background:var(--panel)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:800 12px/1.35 Archivo,sans-serif;letter-spacing:2.5px;text-transform:uppercase}
.brand small{display:block;color:var(--muted);font-weight:700}
.top-link{font:700 11px Archivo,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);text-decoration:none}

.kicker{margin:0 0 12px;font:700 12px/1.3 Archivo,sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--gold)}
h1,h2{font-family:Anton,Oswald,Impact,"Arial Narrow Bold",sans-serif;font-weight:400;text-transform:uppercase;line-height:.95;margin:0}
.col{max-width:var(--col);margin:0 auto;padding:0 clamp(16px,5vw,24px)}
.draft{position:relative;z-index:6;background:var(--gold);color:var(--ink);text-align:center;font-weight:700;padding:8px 16px;font-size:14px}

/* reading progress: the rainbow fills left to right */
.progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:40;pointer-events:none}
.progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));
  background:linear-gradient(90deg,#EB2B29,#F37E21,#F6EA0C,#2CAE4A,#117EC2,#5F4EA1,#E41F91)}

/* chapter rail (desktop): a dot per chapter, lit as you read */
.rail{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:14px;opacity:0;transition:opacity .6s}
.rail.on{opacity:1}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:10px;text-decoration:none;font:700 11px Archivo,sans-serif;letter-spacing:1.5px;text-transform:uppercase}
.rail a b{order:2;width:10px;height:10px;border-radius:50%;border:2px solid var(--c);font-size:0;transition:transform .4s var(--ease),background .4s}
.rail a span{opacity:0;transform:translateX(8px);transition:.35s var(--ease);color:var(--text);white-space:nowrap;background:rgba(5,8,15,.8);padding:2px 8px;border-radius:3px}
.rail a:hover span,.rail a.here span{opacity:1;transform:none}
.rail a.here b{background:var(--c);transform:scale(1.35)}
.rail a.done b{background:var(--c)}
@media (max-width:1100px){.rail{display:none}}

/* the page takes on a faint glow of the chapter you're in */
.glow{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.16;transition:background 1.4s ease;
  background:radial-gradient(60% 50% at 50% 100%,var(--g,transparent),transparent 70%)}

/* ambient: a blurred wash of the nearest photo's colours behind everything, dark in the middle
   so the text column stays readable; two layers so one photo cross-fades into the next */
.ambient{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.ambient i{position:absolute;inset:-12%;background:center/cover no-repeat;filter:blur(70px) saturate(1.35);opacity:0;transition:opacity 1.8s ease}
.ambient i.on{opacity:.85}
.ambient::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 30% 80% at 50% 50%,var(--ink) 52%,rgba(5,8,15,.82) 72%,rgba(5,8,15,.22) 100%)}
@media (max-width:900px){.ambient i.on{opacity:.3}.ambient::after{background:rgba(5,8,15,.6)}}

/* a huge outlined chapter number in the margin on wide screens, drifting with scroll */
.chapter{position:relative}
.ghost-num{display:none}
@media (min-width:1200px){
  .ghost-num{display:block;position:absolute;right:calc(50% + 340px + 3vw);mix-blend-mode:screen;top:clamp(120px,22vh,260px);z-index:-1;pointer-events:none;
    font:400 min(42vh,30vw)/.8 Anton,sans-serif;color:transparent;-webkit-text-stroke:2px var(--c);opacity:.35;
    transform:translate3d(0,var(--gy,0px),0)}
}

/* hero: the cover fills the screen, slowly zooms, and drifts as you scroll */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-1;will-change:transform}
.hero-media .ph,.hero-media .ph-frame{height:100%;margin:0}
.hero-media .ph-frame{aspect-ratio:auto!important}
.hero-media .ph-frame img{animation:kenburns 22s ease-out both}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,8,15,.25) 0%,rgba(5,8,15,0) 30%,rgba(5,8,15,.55) 62%,var(--ink) 100%);opacity:var(--dark,1)}
@keyframes kenburns{from{transform:scale(1.14)}to{transform:scale(1)}}
.hero-text{width:100%;max-width:1100px;margin:0 auto;padding:0 clamp(16px,5vw,48px) clamp(64px,10vh,110px)}
.hero h1{font-size:clamp(56px,12vw,150px);letter-spacing:.5px}
.word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.04em}
.word>span{display:inline-block;transform:translateY(105%);animation:up 1.1s var(--ease) var(--d) both}
.rise{animation:fade-up 1s var(--ease) var(--d) both}
@keyframes up{to{transform:none}}
@keyframes fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.result{margin:22px 0 0;font:800 clamp(13px,1.6vw,15px)/1.5 Archivo,sans-serif;letter-spacing:2.5px;text-transform:uppercase}
.when{margin:4px 0 0;font:700 13px/1.5 Archivo,sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.scroll-cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);font:700 10px Archivo,sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-cue span{width:1px;height:38px;background:linear-gradient(var(--text),transparent);animation:cue 2.2s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

.intro{padding-top:clamp(36px,6vw,64px);padding-bottom:4px;font-size:20px}
.lede{font-size:clamp(22px,2.6vw,27px);line-height:1.5}
.lede::first-letter{float:left;font:400 4.1em/.8 Anton,sans-serif;margin:.06em .1em 0 0;color:var(--gold)}

/* chapters */
.chapter{padding-top:clamp(40px,6vw,72px)}
.chapter .col{padding-bottom:20px}
.ch-body{padding-top:26px}
.ch-head{position:relative;margin-bottom:26px}
.ch-num{display:block;font:400 clamp(64px,10vw,120px)/.8 Anton,sans-serif;color:var(--c);opacity:.95;transform-origin:0 100%}
.ch-title{font-size:clamp(34px,5vw,54px);margin-top:10px}
.ch-line{display:block;height:3px;margin-top:18px;background:var(--c);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.3s var(--ease) .35s}
.ch-head.in .ch-line{transform:scaleX(1)}
.js .ch-head .ch-num{transform:scale(.6) translateY(30px);opacity:0;transition:transform 1.2s var(--ease),opacity 1s}
.js .ch-head.in .ch-num{transform:none;opacity:.95}
.quote{margin:34px 0 8px;padding:0 0 0 22px;border-left:4px solid var(--c);font:400 clamp(30px,5vw,48px)/1.08 Anton,sans-serif;text-transform:uppercase}
.js .quote span{color:rgba(238,241,246,.16);transition:color .5s}
.js .quote span.lit{color:var(--text)}

/* photos */
.ph{margin:0;position:relative}
.ph-frame{position:relative;overflow:hidden;background:#0c1422 center/cover no-repeat;width:100%}
.ph-frame::before{content:"";position:absolute;inset:0;z-index:1;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);transition:opacity .9s;pointer-events:none}
.ph-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s,filter 1.4s;filter:saturate(.9)}
.ph.loaded .ph-frame img{opacity:1}
.ph.loaded .ph-frame::before{opacity:0}
.ph.sharp .ph-frame img{filter:none}
.ph figcaption{padding:12px clamp(16px,5vw,24px) 0;font-size:13px;color:var(--muted);letter-spacing:.3px;max-width:var(--col);margin:0 auto}
.row{margin:0 auto clamp(14px,2vw,22px);cursor:zoom-in}
.row.full{max-width:1600px}
.row.inset{max-width:var(--col);padding:0 clamp(16px,5vw,24px)}
.row.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,20px);max-width:1240px;padding:0 clamp(16px,4vw,40px)}
.row.pair.single{grid-template-columns:1fr;max-width:var(--col)}
.row.pair .ph figcaption,.row.inset .ph figcaption{padding-left:0;padding-right:0}
@media (max-width:640px){.row.pair{grid-template-columns:1fr;gap:10px;padding:0}.row.pair .ph figcaption{padding:8px 16px 0}}

/* full-width photos: the image sits a little taller than its frame and drifts as you scroll */
.row.full .ph-frame img,.row.inset .ph-frame img{top:-7%;height:114%;transform:translate3d(0,var(--py,0px),0)}
/* reveals: a curtain wipe for full width, the pair slides in from both sides */
.js .row.full.reveal,.js .row.inset.reveal{opacity:1;transform:none;clip-path:inset(12% 6% 12% 6%);transition:clip-path 1.4s var(--ease)}
.js .row.full.reveal.in,.js .row.inset.reveal.in{clip-path:inset(0 0 0 0)}
.js .row.pair.reveal{opacity:1;transform:none}
.js .row.pair.reveal .ph{opacity:0;transition:opacity 1s,transform 1.2s var(--ease)}
.js .row.pair.reveal .ph:first-child{transform:translateX(-40px)}
.js .row.pair.reveal .ph:last-child{transform:translateX(40px)}
.js .row.pair.reveal.in .ph{opacity:1;transform:none}
.js .row.pair.reveal.in .ph:last-child{transition-delay:.15s}

/* full time */
.fulltime{text-align:center;padding:clamp(60px,9vw,110px) 16px 10px}
.ft-score{margin:0;font:400 clamp(48px,10vw,120px)/.95 Anton,sans-serif;text-transform:uppercase}
.ft-more{margin:14px 0 0;font:800 14px Archivo,sans-serif;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold)}
.credits{margin-top:40px;font:700 12px Archivo,sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.eps{display:flex;justify-content:space-between;gap:16px;padding-top:56px}
.eps a{text-decoration:none;font:400 22px/1.1 Anton,sans-serif;text-transform:uppercase;max-width:48%;transition:color .3s}
.eps a:hover{color:var(--gold)}
.eps a small{display:block;font:700 11px Archivo,sans-serif;letter-spacing:2px;color:var(--muted);margin-bottom:6px}
.eps .next{text-align:right;margin-left:auto}
.share{padding:28px 0 64px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.share button{background:var(--text);color:var(--panel);border:0;border-radius:999px;padding:14px 26px;font:800 13px Archivo,sans-serif;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:transform .3s var(--ease),background .3s}
.share button:hover{transform:translateY(-2px);background:var(--gold)}
.share a{font:700 12px Archivo,sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}

/* generic reveal for text blocks */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity 1s ease,transform 1.1s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* chapter openers: the chapter's first big photo, full screen, title over the picture */
.opener{position:relative;height:88svh;min-height:420px;max-height:980px;overflow:hidden;isolation:isolate;cursor:zoom-in}
.opener-media{position:absolute;inset:0;z-index:-1}
.opener-media .ph,.opener-media .ph-frame{height:100%}
.opener-media .ph-frame{aspect-ratio:auto!important}
.opener-media .ph-frame img{top:-7%;height:114%;transform:translate3d(0,var(--py,0px),0)}
.opener-media figcaption{display:none}
.opener::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(5,8,15,0) 40%,rgba(5,8,15,.55) 72%,var(--ink) 100%)}
.opener-text{position:absolute;left:0;right:0;bottom:0;max-width:var(--col);margin:0 auto;padding:0 clamp(16px,5vw,24px) 6px}
.opener-text .ch-title{text-shadow:0 2px 30px rgba(0,0,0,.5)}

/* reading bar: appears once you're past the cover; the chapter menu works on phones too */
.minibar{position:fixed;top:4px;left:0;right:0;z-index:35;display:flex;align-items:center;gap:14px;height:46px;padding:0 clamp(12px,3vw,28px);background:rgba(5,8,15,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(140,160,188,.15);transform:translateY(-120%);transition:transform .5s var(--ease)}
.minibar.show{transform:none}
.mb-home{font:800 11px Archivo,sans-serif;letter-spacing:2px;text-transform:uppercase;text-decoration:none;color:var(--gold);white-space:nowrap}
.mb-ep{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 12px Archivo,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.mb-chap{position:relative}
.mb-chap button{background:var(--text);color:var(--ink);border:0;border-radius:999px;padding:7px 14px;font:800 11px Archivo,sans-serif;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-chap ol{position:absolute;right:0;top:44px;margin:0;padding:8px;list-style:none;background:var(--panel);border:1px solid #1d2c47;border-radius:10px;min-width:240px;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.mb-chap li a{display:flex;gap:10px;align-items:baseline;padding:9px 10px;border-radius:6px;text-decoration:none;font-weight:600;font-size:15px}
.mb-chap li a:hover{background:var(--panel2)}
.mb-chap li b{font:400 20px Anton,sans-serif;color:var(--c)}
@media (max-width:560px){.mb-ep{display:none}.mb-home{flex:1}}
.scroll-cue{text-decoration:none}

/* up next */
.upnext{max-width:var(--col);margin:0 auto;padding:clamp(40px,6vw,70px) clamp(16px,5vw,24px) 70px}
.un-card{display:block;text-decoration:none;padding:28px 26px;border-radius:12px;background:var(--panel);position:relative;overflow:hidden;transition:transform .5s var(--ease)}
.un-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#EB2B29,#F37E21,#F6EA0C,#2CAE4A,#117EC2,#5F4EA1,#E41F91)}
a.un-card:hover{transform:translateY(-3px)}
.un-card small{display:block;font:700 12px Archivo,sans-serif;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold)}
.un-card span{display:block;font:400 clamp(36px,6vw,56px)/1 Anton,sans-serif;text-transform:uppercase;margin:10px 0 14px}
.un-card b{font:800 13px Archivo,sans-serif;letter-spacing:1.5px;text-transform:uppercase}
.un-card.soon b{color:var(--muted)}
.un-actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:24px}
.un-actions button{background:var(--text);color:var(--panel);border:0;border-radius:999px;padding:13px 24px;font:800 12px Archivo,sans-serif;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer}
.un-actions button:hover{background:var(--gold)}
.un-actions a{font:700 12px Archivo,sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}

/* home: the latest episode is the front door */
.front{color:inherit;text-decoration:none;cursor:pointer}
.front-ep{margin:0 0 6px;font:400 clamp(22px,3vw,30px) Anton,sans-serif;text-transform:uppercase;color:var(--gold);letter-spacing:1px}
.cta{display:inline-flex;align-items:center;gap:12px;margin-top:28px;background:var(--gold);color:var(--ink);border-radius:999px;padding:16px 28px;font:800 14px Archivo,sans-serif;letter-spacing:2px;text-transform:uppercase;box-shadow:0 10px 40px rgba(212,166,60,.25);transition:transform .4s var(--ease),box-shadow .4s}
.cta b{display:inline-block;transition:transform .4s var(--ease)}
.front:hover .cta{transform:translateY(-2px);box-shadow:0 14px 50px rgba(212,166,60,.4)}
.front:hover .cta b{transform:translateX(6px)}
.series{padding:clamp(30px,5vw,56px) 0 70px}
.col-wide{max-width:1240px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.series-blurb{margin:0 0 22px;max-width:680px;color:var(--muted);font-size:17px}
.strip{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px clamp(16px,4vw,40px) 18px;max-width:1240px;margin:0 auto;scrollbar-width:thin}
.ep-card{flex:0 0 clamp(250px,30vw,340px);scroll-snap-align:start;display:flex;flex-direction:column;text-decoration:none;background:var(--panel);border-radius:10px;overflow:hidden;position:relative;transition:transform .5s var(--ease)}
a.ep-card:hover{transform:translateY(-4px)}
.ep-card .ph-frame{aspect-ratio:4/3!important}
.ep-card .ph-frame img{transition:opacity .9s,transform 1.2s var(--ease)}
a.ep-card:hover .ph-frame img{transform:scale(1.05)}
.ep-num{position:absolute;top:10px;left:14px;font:400 54px/1 Anton,sans-serif;text-shadow:0 2px 20px rgba(0,0,0,.6)}
.ep-title{padding:16px 18px 4px;font:400 26px/1.05 Anton,sans-serif;text-transform:uppercase}
.ep-result{padding:0 18px;font:700 12px Archivo,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.ep-go{padding:14px 18px 18px;margin-top:auto;font:800 12px Archivo,sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.ep-card.soon{border:2px dashed #23344f;background:transparent;justify-content:flex-end;min-height:260px}
.ep-card.soon .ep-num{position:static;padding:18px 18px 0;font-size:72px}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(3,5,10,.97);display:flex;align-items:center;justify-content:center;animation:fade .3s}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100vw;max-height:88vh;object-fit:contain;animation:zoom-in .45s var(--ease)}
@keyframes fade{from{opacity:0}}
@keyframes zoom-in{from{transform:scale(.94);opacity:.4}}
.lb-cap{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:var(--muted);font-size:14px;margin:0;padding:0 60px}
.lightbox button{position:absolute;background:none;border:0;color:var(--text);font-size:46px;cursor:pointer;padding:10px 18px;line-height:1}
.lb-close{top:8px;right:8px}.lb-prev{left:4px}.lb-next{right:4px}

.foot{padding-bottom:40px;text-align:center;font-size:14px}
.foot p{margin:16px 0 0}

/* people who ask for less motion get the same page, still */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .word>span,.rise{transform:none!important;opacity:1!important}
  .js .reveal,.js .row.reveal .ph,.js .ch-head .ch-num{opacity:1!important;transform:none!important;clip-path:none!important}
  .js .quote span{color:var(--text)}
  .ch-line{transform:none}
  .row.full .ph-frame img{transform:none!important}
}