/* Maya & the Fog — v3 design system
   Colour: one warm light (lamp) against cool fog, taken from the show's art.
   Type:   Fraunces (soft) for voice and titles, Figtree for reading.
   Layout: film-still scenes, hairlines instead of boxes, one accent. */

:root{
  color-scheme: dark;
  /* neutrals — cool, from the fog */
  --ink:#0D1119;
  --ink-2:#131A25;
  --ink-3:#1B2331;
  --line:rgba(160,174,196,.15);
  --line-2:rgba(160,174,196,.28);
  --mist:#A9B2C3;
  --mist-2:#8189A0;
  /* text — warm, from the lamp */
  --paper:#F1E8DA;
  /* the one accent */
  --lamp:#F4B860;
  --lamp-hi:#FFD08A;
  --lamp-ink:#241706;
  /* type */
  --serif:"Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:"Figtree", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --soft:"SOFT" 100, "WONK" 0;
  /* scale (major third on 18px) */
  --t-label:.8125rem;
  --t-small:.9375rem;
  --t-body:1.125rem;
  --t-lede:1.3125rem;
  --t-h3:clamp(1.5rem,1.1rem + 1vw,1.875rem);
  --t-h2:clamp(2.5rem,1.6rem + 3vw,4rem);
  --t-display:clamp(4rem,2rem + 7.5vw,9.5rem);
  /* space */
  --wrap:1240px;
  --gut:clamp(20px,4vw,48px);
  --sect:clamp(72px,3.5rem + 4vw,124px);
  --r:14px;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important;animation:none!important}}
body{margin:0;background:var(--ink);color:var(--paper);font:400 var(--t-body)/1.65 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,video,canvas,svg{display:block;max-width:100%}
p,h1,h2,h3,h4,dl,dd,ol,ul,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--lamp);outline-offset:3px;border-radius:4px}
::selection{background:var(--lamp);color:var(--lamp-ink)}
.wrap{max-width:calc(var(--wrap) + var(--gut)*2);margin-inline:auto;padding-inline:var(--gut)}
[hidden]{display:none!important}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:10px;z-index:100;background:var(--lamp);color:var(--lamp-ink);padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{left:12px}

/* ---------- type roles ---------- */
.serif,h1,h2,h3{font-family:var(--serif);font-variation-settings:var(--soft);font-optical-sizing:auto}
h1,h2,h3{font-weight:600;line-height:1.02;letter-spacing:-.015em;text-wrap:balance;color:var(--paper)}
h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3);line-height:1.1}
.label{font:650 var(--t-label)/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--mist-2)}
.label.lamp{color:var(--lamp)}
.lede{font-size:var(--t-lede);line-height:1.55;color:var(--mist);max-width:40ch}
.voice{font-family:var(--serif);font-style:italic;font-weight:400;font-variation-settings:var(--soft);letter-spacing:-.005em}
.muted{color:var(--mist)}
.num{font-variant-numeric:tabular-nums}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;gap:.6em;min-height:48px;padding:0 1.35em 0 .55em;border-radius:999px;background:var(--lamp);color:var(--lamp-ink);font:700 1rem/1 var(--sans);letter-spacing:.005em;text-decoration:none;border:0;cursor:pointer;transition:background .2s, transform .2s, box-shadow .3s;box-shadow:0 10px 30px -12px rgba(244,184,96,.7)}
.btn .pl{width:34px;height:34px;border-radius:50%;background:var(--lamp-ink);color:var(--lamp);display:grid;place-items:center;flex:none}
.btn .pl svg{width:14px;height:14px;margin-left:2px}
.btn:hover{background:var(--lamp-hi);transform:translateY(-1px);box-shadow:0 14px 34px -12px rgba(244,184,96,.85)}
.btn.plain{padding:0 1.35em;background:transparent;color:var(--paper);box-shadow:inset 0 0 0 1.5px var(--line-2)}
.btn.plain:hover{box-shadow:inset 0 0 0 1.5px var(--mist);background:rgba(241,232,218,.04)}
.btn.sm{min-height:40px;font-size:.9375rem;padding:0 1.1em 0 .45em}
.btn.sm .pl{width:28px;height:28px}
.btn.plain.sm{padding:0 1.1em}
.link{display:inline-flex;align-items:center;gap:.4em;color:var(--paper);font-weight:600;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:2px;transition:color .2s}
.link:hover{color:var(--lamp)}
.link .ar{transition:transform .25s}
.link:hover .ar{transform:translateX(3px)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background .35s, box-shadow .35s}
.top.solid{background:rgba(13,17,25,.84);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 0 var(--line)}
.top .wrap{display:flex;align-items:center;gap:24px;height:72px}
.wm-s{font:600 1.375rem/1 var(--serif);font-variation-settings:var(--soft);color:var(--paper);text-decoration:none;white-space:nowrap;letter-spacing:-.01em}
.wm-s i{font-style:italic;font-weight:300;font-size:.82em;color:var(--lamp);margin:0 .06em}
.top nav{margin-left:auto}
.top nav ul{display:flex;gap:4px}
.top nav a{display:block;padding:10px 14px;border-radius:999px;color:var(--mist);text-decoration:none;font-size:var(--t-small);font-weight:500;transition:color .2s}
.top nav a:hover{color:var(--paper)}
@media (min-width:881px){.top .spacer{display:none}}
@media (max-width:400px){.wm-s{font-size:1.2rem}.top .wrap{gap:14px}}

/* ---------- sections ---------- */
.sect{padding-block:var(--sect)}
.sect-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:18px 64px;align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.sect-head .label{grid-column:1/-1}
@media (max-width:860px){.sect-head{grid-template-columns:1fr}}
.rel{position:relative}

@media (max-width:900px){.promise .grid{grid-template-columns:1fr}}

/* episodes */
.still{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:#070A10;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.still img,.still video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.still .badge{position:absolute;left:16px;top:16px;z-index:2;background:var(--lamp);color:var(--lamp-ink);font:700 var(--t-label)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:8px 11px;border-radius:999px}
.scare{display:inline-flex;align-items:center;gap:8px}
.scare .dots{display:inline-flex;gap:4px}
.scare .dots i{width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--mist-2)}
.scare .dots i.on{background:var(--lamp);box-shadow:0 0 10px rgba(244,184,96,.6)}

/* characters */
.cast-feature{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
@media (max-width:860px){.cast-feature{grid-template-columns:1fr}}
.cast-feature .portrait{position:relative;aspect-ratio:2/3;border-radius:var(--r);overflow:hidden;background:#070A10;box-shadow:0 40px 90px -40px rgba(0,0,0,.95)}
.cast-feature .portrait img{width:100%;height:100%;object-fit:cover;transition:opacity .35s}
.cast-feature .portrait img.swap{opacity:0}
@media (max-width:860px){.cast-feature .portrait{max-width:440px;aspect-ratio:4/5}.cast-feature .portrait img{object-position:50% 16%}}
.who-name{font-size:clamp(3rem,2rem + 4vw,5.5rem);line-height:.92;margin:14px 0 18px;letter-spacing:-.03em}
.who-role{display:inline-flex;align-items:center;gap:10px}
.who-role i{width:10px;height:10px;border-radius:50%;background:var(--c,var(--lamp));flex:none}
.who-blurb{font-size:var(--t-lede);line-height:1.55;color:var(--mist);max-width:38ch}
.who-quote{margin-top:26px;font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.2;color:var(--paper)}
.who-quote::before{content:"“"}.who-quote::after{content:"”"}
.who-prop{margin-top:22px;font-size:var(--t-small);color:var(--mist-2)}
.who-prop b{color:var(--mist);font-weight:600}
.lineup{margin-bottom:clamp(28px,3vw,44px);display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:10px}
@media (max-width:1100px){.lineup{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:104px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}}
.face{appearance:none;border:0;background:none;padding:0;color:inherit;cursor:pointer;text-align:left;scroll-snap-align:start;font:inherit}
.face .f{display:block;aspect-ratio:2/3;border-radius:10px;overflow:hidden;background:#070A10;filter:brightness(.5) saturate(.7);transition:filter .35s, transform .35s, box-shadow .35s}
.face img{width:100%;height:100%;object-fit:cover}
.face .n{display:block;margin-top:10px;font:600 var(--t-small)/1.2 var(--sans);color:var(--mist-2);transition:color .25s}
.face:hover .f{filter:brightness(.82) saturate(.95)}
.face[aria-pressed="true"] .f{filter:none;transform:translateY(-4px);box-shadow:0 0 0 2px var(--c),0 18px 40px -18px var(--c)}
.face[aria-pressed="true"] .n,.face:hover .n{color:var(--paper)}
.cast-more{margin-top:34px}
.group-label{margin:56px 0 26px;display:flex;align-items:center;gap:16px}
.group-label::after{content:"";flex:1;height:1px;background:var(--line)}

/* cast page cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,56px) clamp(20px,2.5vw,32px)}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards{grid-template-columns:1fr}}
.card .f{aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:#070A10}
.card img{width:100%;height:100%;object-fit:cover;object-position:50% 14%}
.card h3{font-size:2.1rem;margin:20px 0 8px}
.card .who-role{margin-bottom:12px}
.card p{color:var(--mist)}
.card .who-quote{font-size:1.3rem;margin-top:14px}
.card .who-prop{margin-top:12px}



/* brave kid club */
.club{position:relative;isolation:isolate;overflow:hidden}
.club .grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px);align-items:center}
@media (max-width:900px){.club .grid{grid-template-columns:1fr}}
.club h2{margin:12px 0 18px}
.field{display:grid;gap:8px;margin-top:22px}
.field label{font:650 var(--t-label)/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
.field input,.field select{font:500 1.0625rem/1.2 var(--sans);color:var(--paper);background:rgba(13,17,25,.72);border:1.5px solid var(--line-2);border-radius:12px;padding:14px 16px;width:100%;appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--mist) 50%),linear-gradient(135deg,var(--mist) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.field input:focus,.field select:focus{outline:none;border-color:var(--lamp);box-shadow:0 0 0 4px rgba(244,184,96,.18)}
.cert{border-radius:4px;overflow:hidden;box-shadow:0 50px 100px -40px rgba(0,0,0,.95),0 0 0 1px rgba(241,232,218,.25);transform:rotate(-1.2deg)}
.cert img{width:100%;height:auto}
.cert-note{margin-top:22px;font-size:var(--t-small);color:var(--mist)}
.club .actions{margin-top:22px}


/* footer */
footer{padding-block:0 44px}
.foot{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,.8fr));gap:36px}
@media (max-width:760px){.foot{grid-template-columns:1fr}}
.foot .signoff{font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem);line-height:1.1;color:var(--paper)}
.foot .signoff+p{margin-top:16px;max-width:40ch}
.foot .foot-h{font:650 var(--t-label)/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mist-2);margin-bottom:14px}
.foot li+li{margin-top:8px}
.foot a{color:var(--mist);text-decoration:none}
.foot a:hover{color:var(--paper)}
.legal{margin-top:48px;font-size:var(--t-small);color:var(--mist-2)}

/* ---------- episode page ---------- */
.ep-hero{position:relative;isolation:isolate;min-height:min(80vh,740px);display:flex;align-items:flex-end;overflow:hidden;background:#070A10}
.ep-hero .art{position:absolute;inset:0;z-index:-2}
.ep-hero .art video,.ep-hero .art img{width:100%;height:100%;object-fit:cover}
.ep-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,var(--ink) 0%,rgba(13,17,25,.78) 30%,rgba(13,17,25,0) 64%),linear-gradient(180deg,rgba(9,12,19,.6) 0%,rgba(9,12,19,0) 20%)}
.ep-hero .wrap{width:100%;padding-block:140px 40px}
.crumbs{font-size:var(--t-small);color:var(--mist)}
.crumbs a{color:var(--mist);text-decoration:none}
.crumbs a:hover{color:var(--paper)}
.ep-hero h1{font-size:clamp(3.2rem,2rem + 5vw,7rem);line-height:.9;letter-spacing:-.03em;margin:16px 0 18px;max-width:12ch}
.ep-hero .hook{font-size:clamp(1.35rem,1.1rem + 1vw,1.9rem);line-height:1.3;max-width:34ch;color:var(--paper)}
@media (max-width:760px){.ep-hero{min-height:0;display:block}.ep-hero .art{position:relative;aspect-ratio:16/10}.ep-hero .wrap{padding-block:0 24px;margin-top:-30px;position:relative}.ep-hero::after{background:linear-gradient(0deg,var(--ink) 0%,rgba(13,17,25,0) 45%)}}
.ep-bar{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;padding-block:26px;border-bottom:1px solid var(--line)}
.ep-bar .meta{display:flex;flex-wrap:wrap;gap:6px 22px;color:var(--mist);font-size:var(--t-small)}
.embed{margin-top:32px}
.ep-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(36px,7vw,112px);padding-block:clamp(56px,6vw,88px) var(--sect)}
@media (max-width:900px){.ep-body{grid-template-columns:1fr}}
.prose h2{font-size:clamp(1.8rem,1.4rem + 1.4vw,2.4rem);margin:52px 0 16px}
.prose h2:first-child{margin-top:0}
.prose p{color:#C5CCD9;max-width:62ch}
.prose p+p{margin-top:16px}
.prose ul{display:grid;gap:10px}
.prose li{padding-left:28px;position:relative;color:#C5CCD9}
.prose li::before{content:"";position:absolute;left:4px;top:.8em;width:12px;height:1.5px;background:var(--lamp)}
.aside{display:grid;gap:34px;align-content:start;position:sticky;top:110px}
@media (max-width:900px){.aside{position:static}}
.aside .block{border-top:1px solid var(--line-2);padding-top:18px}
.aside .block .voice{display:block;margin-top:10px;font-size:1.5rem;line-height:1.25;color:var(--paper)}
.aside .block p.muted{margin-top:10px;font-size:var(--t-small)}
.aside .block .link{margin-top:14px}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-bottom:var(--sect)}
.pager a{display:block;text-decoration:none;padding-top:20px;border-top:1px solid var(--line-2)}
.pager a:hover b{color:var(--lamp)}
.pager b{display:block;margin-top:8px;font:600 clamp(1.4rem,1.1rem + 1vw,2rem)/1.1 var(--serif);font-variation-settings:var(--soft);transition:color .2s}
.pager .next{grid-column:2;text-align:right}

/* page head (cast page) */
.page-head{padding-block:150px clamp(40px,5vw,72px)}
.page-head h1{font-size:clamp(3.2rem,2rem + 5vw,6.5rem);line-height:.92;letter-spacing:-.03em;margin:16px 0 22px}

@media (max-width:880px){.top nav{display:none}.top .spacer{margin-left:auto}}

/* =====================================================================
   v5 — one continuous film, sound, captions. Fewer things, done properly.
   ===================================================================== */

/* the film: one pinned stage, four shots, scroll is the playhead */
.film{position:relative;height:560vh;background:#05070C}
.film .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.shot{position:absolute;inset:0;will-change:opacity}
.shot .layer{position:absolute;will-change:transform;pointer-events:none}
.shot .layer img{display:block;width:100%;height:100%}
.shot.house,.shot.room{opacity:0}

/* shot 1: the coast */
.coast .layer.sky{inset:-6%}
.coast .layer.sky img{object-fit:cover;object-position:30% 30%}
.coast .layer.town{left:-4%;right:-4%;bottom:-4%;height:74%}
.coast .layer.town img{object-fit:cover;object-position:50% 100%}
.coast .layer.palm{right:-2%;bottom:-10%;height:124%;aspect-ratio:2/3}
.coast .layer.palm img{object-fit:fill;filter:brightness(.6) saturate(.5) contrast(1.05)}
.coast .layer.fog-a{left:-10%;right:-10%;bottom:-16%;height:58%;opacity:.85}
.coast .layer.fog-b{left:-14%;right:-14%;bottom:-4%;height:60%;opacity:.45}
.coast .layer[class*="fog-"] img{object-fit:cover;object-position:50% 100%}
.coast .shade{position:absolute;inset:0;pointer-events:none;background:
   linear-gradient(90deg,rgba(6,9,15,.86) 0%,rgba(6,9,15,.55) 32%,rgba(6,9,15,0) 60%),
   linear-gradient(0deg,rgba(6,9,15,.8) 0%,rgba(6,9,15,0) 36%),
   linear-gradient(180deg,rgba(6,9,15,.55) 0%,rgba(6,9,15,0) 16%)}
.coast canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.coast .copy{position:absolute;inset:auto 0 0 0;padding-block:0 clamp(56px,10vh,112px);will-change:transform,opacity}
.wordmark{font-size:var(--t-display);font-weight:600;line-height:.84;letter-spacing:-.035em;margin:18px 0 40px;color:var(--paper);text-shadow:0 2px 40px rgba(6,9,15,.5)}
.wordmark i{font-style:italic;font-weight:300;font-size:.36em;letter-spacing:-.01em;color:var(--lamp);vertical-align:.95em;margin-left:.14em}
.wordmark .l2{display:block}
.coast .tag{font-size:clamp(1.5rem,1.2rem + 1vw,2rem);line-height:1.2;color:var(--paper)}
.coast .desc{margin:14px 0 32px;max-width:40ch;color:#C5CCD9;font-size:var(--t-lede);line-height:1.55}
.cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--mist);font:650 var(--t-label)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;pointer-events:none}
.cue i{width:1.5px;height:34px;background:linear-gradient(var(--mist),transparent);animation:drip 2.2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* the fog wipe: real fog photography rising through the frame */
.wipe{position:absolute;inset:0;pointer-events:none;z-index:4}
.wipe .veil{position:absolute;inset:0;opacity:0;background:radial-gradient(120% 90% at 50% 70%,#7E8BA0 0%,#4A566A 45%,#1C2331 100%)}
.wipe .f{position:absolute;left:-20%;right:-20%;height:120%;will-change:transform,opacity}
.wipe .f img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}

/* shot 2: the house */
.house .layer{inset:0;transform-origin:49.2% 36%}
.house .layer img{object-fit:cover;object-position:50% 36%}
.house .shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 80% at 50% 40%,rgba(6,9,15,0) 35%,rgba(6,9,15,.65) 100%)}
.line{position:absolute;inset:auto 0 clamp(64px,12vh,140px) 0;z-index:5;pointer-events:none;opacity:0}
.line p{font-size:clamp(1.8rem,1.2rem + 2.4vw,3.4rem);line-height:1.12;color:var(--paper);max-width:18ch;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.7)}

/* shot 3: the room, seen through the window */
.room .layer.bg{inset:0;transform-origin:52% 32%}
.room .layer.bg img{object-fit:cover;object-position:50% 50%}
.room .layer.maya{right:6%;bottom:-14%;height:74%;aspect-ratio:2/3}
.room .layer.maya img{object-fit:contain;filter:brightness(.6) contrast(1.05)}
.room .shade{position:absolute;inset:0;pointer-events:none;background:
   radial-gradient(70% 70% at 45% 55%,rgba(6,9,15,0) 30%,rgba(6,9,15,.6) 100%),
   linear-gradient(180deg,rgba(6,9,15,.75) 0%,rgba(6,9,15,0) 36%)}
.room .intro{position:absolute;inset:clamp(96px,14vh,150px) 0 auto 0;z-index:3;opacity:0}
.room .intro h2{max-width:14ch;text-shadow:0 2px 30px rgba(0,0,0,.7);margin:12px 0 14px}
.room .intro p.muted{max-width:34ch;text-shadow:0 1px 14px rgba(0,0,0,.9)}
.mark{position:absolute;z-index:3;transform:translate(-50%,-50%);appearance:none;border:0;background:none;padding:0;cursor:pointer;color:var(--paper);font:inherit;display:flex;flex-direction:column;align-items:center;gap:12px;opacity:0;transition:opacity .5s}
.mark.on{opacity:1}
.mark .dot{position:relative;width:18px;height:18px;border-radius:50%;background:var(--lamp);box-shadow:0 0 0 6px rgba(244,184,96,.22),0 0 24px 6px rgba(244,184,96,.45)}
.mark .dot::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(244,184,96,.6);animation:ping 2.6s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes ping{0%{transform:scale(.8);opacity:1}100%{transform:scale(2.6);opacity:0}}
.mark .tag{display:grid;gap:3px;justify-items:center;padding:10px 16px;border-radius:14px;background:rgba(9,12,19,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--line-2);white-space:nowrap;transition:box-shadow .2s, background .2s}
.mark .tag span{font:650 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--lamp)}
.mark .tag b{font:600 1.15rem/1.1 var(--serif);font-variation-settings:var(--soft)}
.mark:hover .tag,.mark:focus-visible .tag{background:rgba(9,12,19,.95);box-shadow:inset 0 0 0 1.5px var(--lamp)}
.skip-film{position:absolute;right:var(--gut);bottom:22px;z-index:6;font:600 var(--t-small)/1 var(--sans);color:var(--mist);text-decoration:none;opacity:0;transition:opacity .4s}
.skip-film:hover{color:var(--paper)}

@media (max-width:760px){
  .coast .layer.palm{right:-58%;height:112%}
  .coast .layer.town img{object-position:62% 100%}
  .coast .shade{background:linear-gradient(0deg,rgba(6,9,15,.95) 0%,rgba(6,9,15,.65) 48%,rgba(6,9,15,.1) 72%),linear-gradient(180deg,rgba(6,9,15,.5) 0%,rgba(6,9,15,0) 18%)}
  .room .layer.maya{right:-10%;height:52%}
  .mark .tag{padding:8px 12px}.mark .tag b{font-size:1rem}
}
@media (prefers-reduced-motion:reduce){.film{height:auto}.film .stage{position:relative}.shot.house,.shot.room,.wipe{display:none}}

/* sound */
.lights{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 1.25em 0 1em;border-radius:999px;background:rgba(9,12,19,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--paper);border:0;box-shadow:inset 0 0 0 1.5px var(--line-2);font:700 1rem/1 var(--sans);cursor:pointer;transition:box-shadow .25s}
.lights:hover{box-shadow:inset 0 0 0 1.5px var(--mist)}
.bars{display:inline-flex;align-items:flex-end;gap:2.5px;height:16px}
.bars i{width:3px;height:30%;border-radius:2px;background:var(--lamp)}
body.sound .bars i{animation:bar 1.1s ease-in-out infinite}
body.sound .bars i:nth-child(2){animation-delay:-.3s}body.sound .bars i:nth-child(3){animation-delay:-.6s}body.sound .bars i:nth-child(4){animation-delay:-.15s}
@keyframes bar{0%,100%{height:25%}50%{height:100%}}
.snd{appearance:none;border:0;background:none;color:var(--mist);display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;cursor:pointer;font:600 var(--t-small)/1 var(--sans)}
.snd:hover{color:var(--paper)}
.snd svg.spk{width:20px;height:20px}
.snd .w{display:none}
.snd .x{display:inline}
body.sound .snd .w{display:inline}
body.sound .snd .x{display:none}
body.sound .snd{color:var(--lamp)}
@media (max-width:880px){.snd .t{display:none}}
.menu-btn{display:none;appearance:none;border:0;background:none;color:var(--paper);width:44px;height:44px;border-radius:999px;cursor:pointer;place-items:center}
.menu-btn svg{width:22px;height:22px}
@media (max-width:880px){.menu-btn{display:grid}.top .wrap{gap:8px}}
.sheet{position:fixed;inset:72px 12px auto 12px;z-index:49;background:rgba(13,17,25,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:18px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8),inset 0 0 0 1px var(--line);padding:10px}
.sheet a{display:block;padding:14px 16px;font:600 1.5rem/1.1 var(--serif);font-variation-settings:var(--soft);color:var(--paper);text-decoration:none;border-radius:12px}

/* play-a-clip button */
.hear{appearance:none;border:0;background:none;color:var(--paper);display:inline-flex;align-items:center;gap:12px;cursor:pointer;font:650 1rem/1.2 var(--sans);padding:0;text-align:left}
.hear .ring{position:relative;flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line-2);transition:box-shadow .2s}
.hear .ring svg.ic{width:14px;height:14px;color:var(--lamp)}
.hear .ring svg.play{margin-left:2px}
.hear .ring svg.pr{position:absolute;inset:0;width:46px;height:46px;transform:rotate(-90deg)}
.hear .ring svg.pr circle{fill:none;stroke:var(--lamp);stroke-width:2;stroke-dasharray:138;stroke-dashoffset:138}
.hear:hover .ring{box-shadow:inset 0 0 0 1.5px var(--lamp)}
.hear .stop{display:none}
.hear[aria-pressed="true"] .play{display:none}
.hear[aria-pressed="true"] .stop{display:block}
.hear small{display:block;margin-top:3px;font:500 var(--t-small)/1.2 var(--sans);color:var(--mist-2)}

/* captions */
.cc{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:70;transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:opacity .3s, transform .3s;width:min(92vw,720px);text-align:center}
.cc.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.cc .box{display:inline-flex;align-items:flex-start;gap:14px;padding:14px 16px 14px 20px;border-radius:18px;background:rgba(9,12,19,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 20px 50px -20px rgba(0,0,0,.8),inset 0 0 0 1px var(--line);text-align:left}
.cc .who{font:650 var(--t-label)/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--c,var(--lamp));white-space:nowrap;padding-top:2px}
.cc .said{font:italic 400 1.2rem/1.4 var(--serif);font-variation-settings:var(--soft);color:var(--paper)}
.cc .x{appearance:none;border:0;background:none;color:var(--mist);cursor:pointer;padding:2px 2px 0 6px;font:600 1.1rem/1 var(--sans)}

/* episode drawer */
dialog.ep-dlg{padding:0;border:0;background:transparent;color:var(--paper);max-width:min(980px,94vw);width:100%;max-height:92vh;overflow:visible}
dialog.ep-dlg::backdrop{background:rgba(4,6,10,.75);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dlg{position:relative;border-radius:22px;overflow:auto;max-height:92vh;background:var(--ink-2);box-shadow:0 40px 120px -30px rgba(0,0,0,.9),inset 0 0 0 1px var(--line)}
.dlg .still{border-radius:0;box-shadow:none;aspect-ratio:16/6.4}
.dlg .body{padding:clamp(22px,4vw,40px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px 40px}
@media (max-width:760px){.dlg .body{grid-template-columns:1fr}.dlg .still{aspect-ratio:16/9}}
.dlg h2{font-size:clamp(2.2rem,1.6rem + 2.4vw,3.6rem);margin:10px 0 12px}
.dlg .hook{font-size:1.3rem;line-height:1.4}
.dlg .side{display:grid;gap:20px;align-content:start}
.dlg .side .voice{margin-top:6px;font-size:1.2rem;line-height:1.35}
.dlg .close{position:absolute;right:14px;top:14px;z-index:3;width:44px;height:44px;border-radius:50%;border:0;background:rgba(9,12,19,.72);color:var(--paper);font:500 1.3rem/1 var(--sans);cursor:pointer}

/* cast line-up: room for the highlight so it never clips */
.lineup{padding:10px 6px 16px;margin-inline:-6px}
@media (max-width:1100px){.lineup{padding:10px var(--gut) 16px;margin-inline:calc(var(--gut)*-1)}}
.cards{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.card h3{font-size:1.6rem}}
@media (max-width:420px){.cards{grid-template-columns:1fr}}
@media (max-width:760px){.pager{grid-template-columns:1fr}.pager .next{grid-column:1;text-align:left}}
.house .layer.close{inset:0;opacity:0;transform-origin:49.5% 51%}
.house .layer.close img{object-fit:cover;object-position:50% 50%}
.wipe .veil{background:#0E1320}

/* v5.1 review fixes */
.coast .layer[class*="fog-"]{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,transparent 0,#000 38%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}
.room .intro::before{content:"";position:absolute;left:0;top:-80px;width:min(820px,100%);height:360px;z-index:-1;background:radial-gradient(65% 60% at 22% 45%,rgba(6,9,15,.88),rgba(6,9,15,0));pointer-events:none}
.room .intro p.muted{text-wrap:balance}
.mark-list{display:none}
@media (max-width:760px){
  .coast .layer.palm{bottom:auto;top:-14%;height:100%;right:-56%}
  .coast .layer.sky img{object-position:72% 30%}
  .mark{display:none}
  .mark-list{display:grid;gap:10px;margin-top:22px;max-width:320px}
  .mark-list button{appearance:none;border:0;cursor:pointer;display:flex;align-items:center;gap:14px;text-align:left;padding:12px 16px;border-radius:14px;background:rgba(9,12,19,.82);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--paper);font:inherit}
  .mark-list .dot{flex:none;width:12px;height:12px;border-radius:50%;background:var(--lamp);box-shadow:0 0 0 5px rgba(244,184,96,.2),0 0 16px 4px rgba(244,184,96,.4)}
  .mark-list span span{display:block;font:650 .7rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--lamp);margin-bottom:4px}
  .mark-list b{font:600 1.1rem/1.1 var(--serif);font-variation-settings:var(--soft)}
  .room .intro{top:96px}
  .ep-hero .art{aspect-ratio:16/9;height:auto}
  .ep-hero .wrap{margin-top:0;padding-top:22px}
  .ep-body .aside{order:-1}
}
.face .f{filter:brightness(.72) saturate(.85)}
#characters{padding-bottom:clamp(40px,4vw,72px)}
.cast-feature .portrait{max-height:68vh;aspect-ratio:auto;height:68vh;width:auto}
@media (max-width:860px){.cast-feature .portrait{height:auto;max-height:none;aspect-ratio:4/5}}
@media (max-width:760px){.ep-hero{padding-top:calc(72px + env(safe-area-inset-top,0px))}}
/* shots that aren't on screen must never catch clicks */
.shot.house,.line,.wipe,.cue{pointer-events:none}
.shot.room{pointer-events:none}

/* =====================================================================
   v6 — below the film: one picture per screen, a few words per block,
   no tables. Everything a parent or an answer engine needs is still in
   the page (FAQ answers live inside <details>).
   ===================================================================== */

/* episodes: three posters, gentlest first */
.eps-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 64px;align-items:end;margin-bottom:clamp(36px,4.5vw,64px)}
.eps-head h2{margin-top:12px}
.eps-head .lede{justify-self:end;max-width:42ch;text-wrap:pretty}
@media (max-width:860px){.eps-head{grid-template-columns:1fr}.eps-head .lede{justify-self:start}}
.ep-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.ep-card{position:relative;display:flex;flex-direction:column;min-width:0}   /* keeps the .vh labels inside the scroll strip */
.poster{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;isolation:isolate;background:#070A10;color:var(--paper);text-decoration:none;box-shadow:0 40px 80px -40px rgba(0,0,0,.9),inset 0 0 0 1px var(--line)}
.poster img,.poster video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.poster::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(6,9,15,.95) 0%,rgba(6,9,15,.62) 26%,rgba(6,9,15,0) 52%)}
.poster:hover img,.poster:hover video{transform:scale(1.04)}
.poster .badge{position:absolute;left:16px;top:16px;background:var(--lamp);color:var(--lamp-ink);font:700 var(--t-label)/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:8px 11px;border-radius:999px}
.poster .cap{position:absolute;inset:auto 0 0 0;display:grid;justify-items:start;gap:10px;padding:clamp(18px,2vw,26px)}
.poster .cap h3{margin:0;color:inherit;font:600 clamp(1.9rem,1.3rem + 1.3vw,2.6rem)/.98 var(--serif);font-variation-settings:var(--soft);letter-spacing:-.02em;text-wrap:balance;transition:color .25s}
.poster:hover .cap h3{color:var(--lamp-hi)}
.poster .scare{font:600 var(--t-small)/1 var(--sans);color:var(--mist)}
.ep-card .hook{margin:20px 0 22px;font-size:1.25rem;line-height:1.4;color:var(--paper);max-width:30ch}
.ep-card .actions{margin-top:auto;gap:12px 22px}
@media (max-width:860px){
  .ep-cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(78vw,340px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-inline:calc(var(--gut)*-1);padding:6px var(--gut) 10px;scroll-padding-inline:var(--gut);scrollbar-width:none}
  .ep-cards::-webkit-scrollbar{display:none}
  .ep-card{scroll-snap-align:start}
  .ep-card .hook{font-size:1.125rem}
}

/* the pull: Maya faces the fog */
.pull{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:min(94vh,860px);padding-block:var(--sect)}
.pull .bg,.pull .maya,.pull .fg{position:absolute;pointer-events:none}
.pull .bg{inset:0;z-index:-4}
.pull .bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.9)}
.pull::before{content:"";position:absolute;inset:0;z-index:-3;background:
   linear-gradient(180deg,var(--ink) 0%,rgba(13,17,25,0) 22%,rgba(13,17,25,0) 70%,var(--ink) 100%),
   linear-gradient(90deg,rgba(13,17,25,.82) 0%,rgba(13,17,25,.35) 45%,rgba(13,17,25,0) 70%)}
.pull .maya{z-index:-2;right:max(var(--gut),calc(50% - 600px));bottom:-26%;height:96%;aspect-ratio:2/3}
.pull .maya img{width:100%;height:100%;object-fit:contain;object-position:50% 0;filter:brightness(.72) contrast(1.06) saturate(.92)}
.pull .fg{z-index:-1;left:-10%;right:-10%;bottom:-6%;height:44%;opacity:.85;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 48%);mask-image:linear-gradient(180deg,transparent 0,#000 48%)}
.pull::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(13,17,25,0) 74%,var(--ink) 100%),linear-gradient(90deg,rgba(13,17,25,.7) 0%,rgba(13,17,25,.28) 40%,rgba(13,17,25,0) 60%)}
.pull .fg img{width:100%;height:100%;object-fit:cover;object-position:50% 100%;filter:brightness(.72) saturate(.8)}
.pull .wrap{width:100%}
.pull blockquote{text-indent:-.42em;font-size:clamp(2.1rem,1.1rem + 3.9vw,5.2rem);font-weight:600;line-height:1.04;letter-spacing:-.025em;color:var(--paper);text-wrap:balance;text-shadow:0 2px 40px rgba(6,9,15,.55)}
.pull blockquote span,.pull blockquote em{display:block}
.pull blockquote span+span,.pull blockquote em{text-indent:0}
.pull blockquote em{font-style:italic;font-weight:400;color:var(--lamp)}
.pull figcaption{margin-top:clamp(28px,3vw,40px)}
@media (max-width:900px){
  .pull{min-height:0;flex-direction:column;align-items:stretch;padding-block:clamp(72px,18vw,110px) 0}
  .pull .wrap{order:1}
  .pull .maya{order:2;position:relative;right:auto;bottom:auto;align-self:flex-end;width:min(60%,400px);height:auto;margin:-6px max(2%,var(--gut)) calc(min(60vw,400px)*-.6) 0}
  .pull::before{background:linear-gradient(180deg,var(--ink) 0%,rgba(13,17,25,.25) 16%,rgba(13,17,25,.25) 70%,var(--ink) 100%)}
  .pull::after{background:linear-gradient(180deg,rgba(13,17,25,0) 80%,var(--ink) 100%)}
  .pull .fg{height:36%;bottom:-2%}
}

/* grown-ups: a headline, four facts, three rules */
.grown{background:linear-gradient(180deg,var(--ink) 0,var(--ink-2) 240px);padding-bottom:calc(var(--sect)*.55)}
.grown-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 64px;align-items:end;margin-bottom:clamp(48px,5.5vw,88px)}
.grown-top h2{margin-top:12px;max-width:12ch}
.grown-top .lede{color:var(--paper);max-width:38ch}
@media (max-width:860px){.grown-top{grid-template-columns:1fr}}
.facts-line{margin-top:18px;font:600 var(--t-small)/1.7 var(--sans);color:var(--mist)}
.facts-line i{font-style:normal;color:var(--lamp);margin:0 .4em}
.facts-line span{white-space:nowrap}
.rules3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
@media (max-width:860px){.rules3{grid-template-columns:1fr;gap:36px}}
.rules3 figure{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-top:24px;border-top:1px solid var(--line-2)}
.rules3 blockquote{margin:0;font-size:clamp(1.6rem,1.15rem + 1.3vw,2.3rem);line-height:1.12;color:var(--paper);text-wrap:balance}
.rules3 figcaption{margin-top:auto;display:grid;gap:5px;color:var(--mist);font-size:var(--t-small)}

/* questions: one quiet accordion */
.faq{background:linear-gradient(180deg,var(--ink-2) 0,var(--ink-2) calc(100% - 240px),var(--ink) 100%);padding-top:calc(var(--sect)*.55)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px clamp(32px,6vw,96px);align-items:start}
.faq-side{position:sticky;top:110px}
.faq-side h2{margin:12px 0 16px;max-width:10ch}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr}.faq-side{position:static}}
.acc details{border-top:1px solid var(--line)}
.acc details:last-child{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;text-wrap:pretty;font:500 clamp(1.08rem,1rem + .4vw,1.35rem)/1.3 var(--serif);font-variation-settings:var(--soft);color:var(--paper);transition:color .2s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--lamp-hi)}
.acc summary i{position:relative;flex:none;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);transition:box-shadow .2s}
.acc summary:hover i{box-shadow:inset 0 0 0 1.5px var(--lamp)}
.acc summary i::before,.acc summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;border-radius:1px;background:var(--lamp);transform:translate(-50%,-50%)}
.acc summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.acc details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.acc details p{padding:0 54px 24px 0;color:var(--mist);max-width:62ch}
.prose .acc{margin-top:8px}
.prose .acc details p{color:#C5CCD9}




/* footer: one last invitation over the coast, then the small print */
.cta-band{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding-block:clamp(100px,11vw,150px) clamp(80px,9vw,120px)}
.cta-band::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,var(--ink) 0%,rgba(13,17,25,.5) 38%,rgba(13,17,25,.66) 72%,var(--ink) 100%),var(--coast) 50% 42%/cover no-repeat}
.cta-band h2{font-size:clamp(2.6rem,1.5rem + 3.8vw,5.2rem);max-width:20ch;margin:0 auto 34px;text-shadow:0 2px 40px rgba(6,9,15,.6)}
.cta-band .actions{justify-content:center}
.foot{padding-top:clamp(48px,5vw,72px);border-top:1px solid var(--line)}
.foot .signoff+p{max-width:36ch;text-wrap:pretty}
.lede,.muted{text-wrap:pretty}
@media (max-width:560px){.cta-band h2{font-size:2.1rem}}

/* ---------- clickable scenes: one big scene per episode, things to find ---------- */
.explore-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 64px;align-items:end;margin-bottom:clamp(26px,3vw,40px)}
.explore-head h2{margin-top:12px}
.explore-head .lede{justify-self:end;max-width:40ch}
@media (max-width:860px){.explore-head{grid-template-columns:1fr}.explore-head .lede{justify-self:start}}
.scene-tabs{display:flex;gap:10px;margin:0 calc(var(--gut)*-1) 16px;padding:4px var(--gut);overflow-x:auto;scrollbar-width:none}
.scene-tabs::-webkit-scrollbar{display:none}
.scene-tab{appearance:none;border:0;flex:none;display:flex;align-items:center;gap:12px;padding:7px 18px 7px 7px;border-radius:14px;background:rgba(241,232,218,.03);box-shadow:inset 0 0 0 1px var(--line);color:var(--mist);font:inherit;text-align:left;cursor:pointer;transition:box-shadow .2s,background .2s,color .2s}
.scene-tab img{width:76px;height:46px;object-fit:cover;border-radius:9px;filter:brightness(.62) saturate(.8);transition:filter .2s}
.scene-tab span{display:grid;gap:4px;font:600 1.05rem/1.1 var(--serif);font-variation-settings:var(--soft);color:inherit}
.scene-tab small{font:650 .7rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mist-2)}
.scene-tab:hover{color:var(--paper)}
.scene-tab:hover img{filter:brightness(.85)}
.scene-tab[aria-selected="true"]{color:var(--paper);background:rgba(244,184,96,.08);box-shadow:inset 0 0 0 1.5px var(--lamp)}
.scene-tab[aria-selected="true"] img{filter:none}
.scene-tab[aria-selected="true"] small{color:var(--lamp)}
.scene-stage{position:relative;border-radius:var(--r);overflow:hidden;background:#070A10;box-shadow:0 40px 90px -40px rgba(0,0,0,.95),inset 0 0 0 1px var(--line)}
.scene-scroll{position:relative}
.scene-canvas{position:relative;width:100%;aspect-ratio:16/9}
.scene-canvas img,.scene-canvas video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.spot{position:absolute;z-index:2;width:56px;height:56px;transform:translate(-50%,-50%);appearance:none;border:0;padding:0;background:none;display:grid;place-items:center;color:var(--paper);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.spot i{position:relative;width:18px;height:18px;border-radius:50%;background:var(--lamp);box-shadow:0 0 0 6px rgba(244,184,96,.22),0 0 24px 6px rgba(244,184,96,.45);transition:transform .25s,background .25s,box-shadow .25s}
.spot i::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(244,184,96,.6);animation:ping 2.6s cubic-bezier(.2,.6,.3,1) infinite}
.spot span{position:absolute;left:calc(100% - 8px);top:50%;transform:translate(-6px,-50%);white-space:nowrap;padding:8px 12px;border-radius:10px;background:rgba(9,12,19,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--line-2);font:600 1.02rem/1 var(--serif);font-variation-settings:var(--soft);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.spot.flip span{left:auto;right:calc(100% - 8px);transform:translate(6px,-50%)}
.spot:hover span,.spot:focus-visible span{opacity:1;transform:translate(0,-50%)}
.spot:hover i{transform:scale(1.18)}
.spot.found i{background:rgba(9,12,19,.35);box-shadow:inset 0 0 0 2.5px var(--lamp),0 0 16px 2px rgba(244,184,96,.3)}
.spot.found i::after{animation:none;opacity:0}
.spot.on i{background:var(--lamp-hi);box-shadow:0 0 0 7px rgba(244,184,96,.3),0 0 30px 8px rgba(244,184,96,.55);transform:scale(1.15)}
.scene-count{position:absolute;z-index:3;left:16px;top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.scene-count .c{padding:9px 13px;border-radius:999px;background:rgba(9,12,19,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--line-2);font:600 var(--t-small)/1 var(--sans);color:var(--mist)}
.scene-count .c b{color:var(--lamp);font-weight:700}
.done-btn{appearance:none;border:0;cursor:pointer;padding:10px 15px;border-radius:999px;background:var(--lamp);color:var(--lamp-ink);font:700 var(--t-small)/1 var(--sans);animation:glow 1.8s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(244,184,96,.55)}50%{box-shadow:0 0 0 10px rgba(244,184,96,0)}}
.swipe-hint{display:none}
.scene-card{position:absolute;z-index:4;right:18px;bottom:18px;width:min(390px,calc(100% - 36px));padding:22px 22px 18px;border-radius:16px;background:rgba(9,12,19,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 30px 60px -20px rgba(0,0,0,.8),inset 0 0 0 1px var(--line-2)}
.scene-card .t{font-size:1.6rem;margin:0 40px 10px 0}
.scene-card .q{font-size:1.16rem;line-height:1.42;color:var(--paper)}
.scene-card .who{margin-top:12px}
.scene-card .note{margin-top:8px;font-size:var(--t-small);color:var(--mist)}
.scene-card .card-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:16px}
.scene-card .close{position:absolute;right:10px;top:10px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(241,232,218,.06);color:var(--mist);font:500 1rem/1 var(--sans);cursor:pointer}
.scene-card .close:hover{color:var(--paper);background:rgba(241,232,218,.1)}
@media (max-width:760px){
  .scene-stage{margin-inline:calc(var(--gut)*-1);border-radius:0;box-shadow:none}
  .scene-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .scene-scroll::-webkit-scrollbar{display:none}
  .scene-canvas{height:min(64vh,500px);width:calc(min(64vh,500px) * 16 / 9);aspect-ratio:auto}
  .spot{width:50px;height:50px}
  .swipe-hint{display:block;position:absolute;z-index:3;right:12px;top:16px;margin:0;padding:9px 13px;border-radius:999px;background:rgba(9,12,19,.78);font:600 .8125rem/1 var(--sans);color:var(--paper);pointer-events:none;transition:opacity .4s}
  .scene-stage.swiped .swipe-hint{opacity:0}
  .scene-card{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:auto;border-radius:0;background:var(--ink-2);box-shadow:inset 0 1px 0 var(--line-2);padding:20px var(--gut) 22px;backdrop-filter:none;-webkit-backdrop-filter:none;scroll-margin-bottom:12px}
  .scene-card .close{right:calc(var(--gut) - 8px);top:12px}
  .scene-card .t{font-size:1.4rem}
  .scene-card .q{font-size:1.05rem}
}
@media (max-width:560px){
  .scene-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow:visible}
  .scene-tab{flex-direction:column;align-items:stretch;gap:8px;padding:6px 6px 10px}
  .scene-tab img{width:100%;height:auto;aspect-ratio:16/9}
  .scene-tab span{font-size:.9rem;line-height:1.15;padding-inline:4px}
  .scene-tab small{font-size:.62rem}
}

/* review fixes */
main [id]{scroll-margin-top:76px}
.club h2{font-size:clamp(2.2rem,1.4rem + 2.2vw,3.4rem)}
@media (min-width:561px) and (max-width:860px){.ep-cards{grid-auto-columns:min(40vw,340px)}}
@media (max-width:900px){.foot{grid-template-columns:1fr 1fr}.foot>div:first-child{grid-column:1/-1}}
@media (max-width:560px){.foot{grid-template-columns:1fr}}
@media (pointer:coarse){.btn.sm{min-height:44px}.foot li a{display:inline-block;padding:7px 0}.foot li+li{margin-top:0}.cc .x{min-width:44px;min-height:44px}}
@media (max-width:560px){.acc summary{font-size:1.05rem;padding:17px 0}}