/* Vesper Works. Fonts: Fraunces and Figtree (SIL OFL 1.1), self-hosted. */
@font-face{font-family:"Fraunces";src:url(assets/fonts/fraunces.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(assets/fonts/fraunces-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Figtree";src:url(assets/fonts/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}

/* ---------- Themes ----------
   Studio pages: midnight and champagne gold (the evening star).
   Each production brings its own palette; The Little Lights is violet dusk. */
:root,.theme-studio{
  --bg:#06060f;--bg-2:#0e0d22;--bg-glow-1:rgba(233,207,155,.10);--bg-glow-2:rgba(150,140,255,.08);
  --panel:rgba(255,255,255,.04);--line:rgba(233,215,180,.13);
  --text:#f6f2ea;--muted:#b4adc2;--soft:#ddd5c7;
  --accent:#e9cf9b;--accent-2:#c9b8ff;--accent-ink:#1b1408;--glow:rgba(233,207,155,.45);
  --btn-top:#f3dfb4;--btn-bottom:#d9b574;
}
.theme-ll{
  --bg:#0a0720;--bg-2:#120c33;--bg-glow-1:rgba(181,123,255,.16);--bg-glow-2:rgba(240,122,230,.08);
  --line:rgba(205,180,255,.15);--muted:#b7aed6;--soft:#e4dcff;
  --accent:#b57bff;--accent-2:#f07ae6;--accent-ink:#170733;--glow:rgba(181,123,255,.55);
  --btn-top:#c99bff;--btn-bottom:#9a5cf5;
}
:root{
  --radius:22px;--radius-sm:14px;--wrap:1180px;--gutter:clamp(16px,4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --display:"Fraunces",ui-serif,Georgia,serif;
  --sans:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --header-h:72px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;min-height:100vh;color:var(--text);font:400 clamp(16px,1.05vw + 11px,18px)/1.62 var(--sans);
  background:
    radial-gradient(1200px 700px at 85% -10%,var(--bg-glow-1),transparent 60%),
    radial-gradient(900px 600px at -10% 30%,var(--bg-glow-2),transparent 60%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 55%,var(--bg) 100%);
  background-color:var(--bg);background-attachment:fixed;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-weight:500}
em{font-style:italic}
ul,ol{padding:0;margin:0;list-style:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--text);color:var(--bg);padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.wrap.narrow{width:min(100% - 2*var(--gutter),740px)}
.wrap.wide{width:min(100% - 2*var(--gutter),1240px)}
.center{text-align:center}
.muted{color:var(--muted)}
.icon{width:1.1em;height:1.1em;flex:none}

/* ---------- Type ---------- */
.eyebrow{font:600 .76rem/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.display{font-family:var(--display);font-weight:400;font-variation-settings:"SOFT" 100,"opsz" 144;font-size:clamp(2.5rem,6vw,5.2rem);line-height:1.03;letter-spacing:-.025em;text-wrap:balance;margin-bottom:22px}
.display-2{font-family:var(--display);font-weight:400;font-variation-settings:"SOFT" 100,"opsz" 120;font-size:clamp(1.9rem,4vw,3.2rem);line-height:1.07;letter-spacing:-.02em;margin-bottom:.45em;text-wrap:balance}
.lede{font-size:clamp(1.08rem,1.2vw + .7rem,1.32rem);line-height:1.5;color:var(--soft);text-wrap:pretty}
.tagline{font:600 .9rem/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--soft)}

/* ---------- The Vesper Works mark and wordmark ---------- */
.mark{width:28px;height:28px;overflow:visible}
.mark-star{fill:var(--accent);filter:drop-shadow(0 0 6px var(--glow))}
.mark-horizon{stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;opacity:.75}
.theme-ll .mark-star{fill:#f1e4c4}
.theme-ll .mark-horizon{stroke:#f1e4c4}
.wordmark{display:inline-flex;align-items:center;gap:11px;white-space:nowrap}
.wm-text{display:inline-flex;align-items:baseline;gap:.55em}
.wm-a{font:500 1.2rem/1 var(--display);font-variation-settings:"SOFT" 30,"opsz" 72;letter-spacing:.16em;text-transform:uppercase}
.wm-b{font:600 .66rem/1 var(--sans);letter-spacing:.38em;text-transform:uppercase;color:var(--accent)}
.theme-ll .wm-b{color:#f1e4c4}
.wm-lg .mark{width:40px;height:40px}
.wm-lg .wm-a{font-size:1.6rem}
.wm-lg .wm-b{font-size:.78rem}

/* ---------- Buttons and links ---------- */
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.actions.center{justify-content:center}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;font:600 1rem/1 var(--sans);text-decoration:none;cursor:pointer;border:0;color:inherit;transition:transform .25s var(--ease),background .25s,box-shadow .25s,border-color .25s}
.btn .icon{width:18px;height:18px}
.btn-primary{background:linear-gradient(180deg,var(--btn-top),var(--btn-bottom));color:var(--accent-ink);box-shadow:0 10px 30px -10px var(--glow),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px var(--glow),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-ghost{border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.05);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.45);transform:translateY(-2px)}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--c,var(--accent));text-decoration:none}
.link .icon{transition:transform .2s var(--ease)}
.link:hover .icon{transform:translateX(3px)}
.prose a,.gallery-note a,.prod-next a{color:var(--accent);text-underline-offset:3px}

/* ---------- Header and navigation ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:50;transition:background .35s,box-shadow .35s}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:20px;width:min(100% - 2*var(--gutter),1280px);margin-inline:auto;height:72px}
.site-header.is-solid,body:not(.has-hero) .site-header{background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:saturate(1.4) blur(18px);-webkit-backdrop-filter:saturate(1.4) blur(18px);box-shadow:0 1px 0 var(--line)}
.brand{text-decoration:none;color:var(--text)}
.foot-bottom a{color:inherit;text-underline-offset:3px}
.foot-bottom a:hover{color:#fff}
/* On the show's pages the corner wordmark keeps the studio's gold */
.brand-studio .wm-b{color:#e9cf9b}
.brand-studio .mark-star{fill:#e9cf9b}
.brand-studio .mark-horizon{stroke:#e9cf9b}
/* A production's own logo in its footer */
.brand-show{display:inline-flex;flex-direction:column;align-items:center;line-height:1}
.brand-show img{height:30px;width:auto;filter:drop-shadow(0 0 12px rgba(181,123,255,.55))}
.brand-show span{margin-top:3px;font:600 .5rem/1 var(--sans);letter-spacing:.38em;text-indent:.38em;text-transform:uppercase;color:#efe6ff}
.foot-show{align-items:center}
.foot-show .brand-show img{height:46px}
.foot-show .brand-show span{font-size:.62rem}
.foot-show-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px 26px}
.foot-show-links a{text-decoration:none;color:var(--soft);font-size:.95rem}
.foot-show-links a:hover,.foot-show-links a[aria-current]{color:#fff}
@media (max-width:960px){.foot-show-links{justify-content:flex-start}}
.site-nav > ul{display:flex;align-items:center;gap:2px}
.nav-item{position:relative;display:flex;align-items:center}
.nav-item > a:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-item > a[aria-current="page"],.nav-item.is-active > a{color:#fff;background:color-mix(in srgb,var(--accent) 18%,transparent)}
.nav-item > a,.nav-trigger{padding:10px 12px;border-radius:999px;text-decoration:none;font:500 .93rem/1.2 var(--sans);color:color-mix(in srgb,var(--text) 82%,transparent);transition:background .2s,color .2s}
.nav-trigger{display:inline-flex;align-items:center;gap:5px;padding-right:10px;border:0;background:none;cursor:pointer}
.nav-trigger .icon{width:14px;height:14px;opacity:.7;transition:transform .25s var(--ease)}
.nav-trigger:hover,.has-sub.is-open .nav-trigger{color:#fff;background:rgba(255,255,255,.07)}
.nav-item.is-active > .nav-trigger{color:#fff;background:color-mix(in srgb,var(--accent) 18%,transparent)}
.sub{position:absolute;top:calc(100% + 6px);left:0;min-width:250px;padding:8px;border-radius:16px;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 0 0 1px var(--line),0 24px 60px -20px rgba(0,0,0,.8);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s var(--ease),visibility .2s}
.sub::before{content:"";position:absolute;inset:-10px 0 auto;height:10px}
.sub a{display:block;padding:10px 14px;border-radius:10px;text-decoration:none;font-size:.95rem;color:var(--soft)}
.sub a:hover,.sub a[aria-current="page"]{background:rgba(255,255,255,.07);color:#fff}
@media (hover:hover) and (min-width:1101px){.has-sub:hover .sub{opacity:1;visibility:visible;transform:none}.has-sub:hover .nav-trigger .icon{transform:rotate(180deg)}}
.has-sub.is-open .sub{opacity:1;visibility:visible;transform:none}
.has-sub.is-open .nav-trigger .icon{transform:rotate(180deg)}
.menu-btn{display:none}

@media (max-width:1100px){
  /* Phones and tablets (1 Nov): a glass "Menu" pill instead of a hamburger; it opens a full-screen panel of large
     serif links that rise in one after another. The panel is fixed to the screen, so it works anywhere on the page. */
  .site-header .brand{position:relative;z-index:2}
  .menu-btn{position:relative;z-index:2;display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 18px 0 15px;border:0;border-radius:999px;cursor:pointer;font:600 .92rem/1 var(--sans);letter-spacing:.02em;color:#fff;background:rgba(255,255,255,.09);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 8px 24px -12px rgba(0,0,0,.6);transition:background .25s,box-shadow .25s}
  .menu-btn i{width:7px;height:7px;border-radius:50%;background:var(--accent,#ffd08a);box-shadow:0 0 10px var(--accent,#ffd08a);transition:transform .35s var(--ease)}
  .menu-btn:active{background:rgba(255,255,255,.16)}
  .menu-btn[aria-expanded="true"]{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
  .menu-btn[aria-expanded="true"] i{transform:scale(1.35)}
  .site-header.menu-open,.site-header.is-solid.menu-open{background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .site-header.menu-open::before{display:none}
  .site-nav{position:fixed;inset:0;z-index:1;overflow-y:auto;overscroll-behavior:contain;padding:max(96px,calc(env(safe-area-inset-top) + 88px)) var(--gutter) calc(40px + env(safe-area-inset-bottom));
    background:radial-gradient(80% 50% at 85% 0%,color-mix(in srgb,var(--accent,#b57bff) 22%,transparent),transparent 70%),radial-gradient(70% 50% at 0% 100%,rgba(70,110,230,.18),transparent 70%),color-mix(in srgb,var(--bg) 96%,#000);
    opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s}
  .site-nav.is-open{opacity:1;visibility:visible}
  .site-nav > ul > li{opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
  .site-nav.is-open > ul > li{opacity:1;transform:none}
  .site-nav.is-open > ul > li:nth-child(2){transition-delay:.04s}.site-nav.is-open > ul > li:nth-child(3){transition-delay:.08s}
  .site-nav.is-open > ul > li:nth-child(4){transition-delay:.12s}.site-nav.is-open > ul > li:nth-child(5){transition-delay:.16s}
  .site-nav.is-open > ul > li:nth-child(6){transition-delay:.2s}.site-nav.is-open > ul > li:nth-child(7){transition-delay:.24s}
  .site-nav.is-open > ul > li:nth-child(n+8){transition-delay:.28s}
  .site-nav > ul{flex-direction:column;align-items:stretch;gap:2px}
  .nav-item{flex-wrap:wrap}
  .nav-item{border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-item > a{flex:1;padding:16px 4px;font:400 clamp(1.7rem,7vw,2.3rem)/1.1 var(--display);letter-spacing:-.01em;border-radius:0;background:none!important}
  .nav-item > a[aria-current="page"]{color:var(--accent,#ffd08a)}
  .nav-trigger{flex:1;justify-content:space-between;padding:16px 4px;font:400 clamp(1.7rem,7vw,2.3rem)/1.1 var(--display);border-radius:0;background:none!important}
  .nav-trigger .icon{width:18px;height:18px}
  .sub{position:static;flex-basis:100%;min-width:0;padding:0 0 8px 14px;background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1;visibility:visible;transform:none;display:none}
  .has-sub.is-open .sub{display:block}
  body.menu-lock{overflow:hidden}
}

/* A production's section tabs (inside the page, under its title) */
.prod-tabs{display:flex;justify-content:center;margin-top:34px}
.prod-tabs ul{display:inline-flex;gap:2px;padding:5px;border-radius:999px;background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px var(--line);max-width:100%;overflow-x:auto;scrollbar-width:none}
.prod-tabs ul::-webkit-scrollbar{display:none}
.prod-tabs a{display:block;padding:9px 16px;border-radius:999px;font-size:.9rem;font-weight:500;text-decoration:none;white-space:nowrap;color:var(--soft);transition:background .2s,color .2s}
.prod-tabs a:hover{background:rgba(255,255,255,.08);color:#fff}
.prod-tabs a[aria-current="page"]{background:color-mix(in srgb,var(--accent) 28%,transparent);color:#fff}

/* ---------- Media loading and error states ---------- */
.media{position:relative;display:block;overflow:hidden;background:linear-gradient(110deg,rgba(255,255,255,.03) 30%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.03) 70%) 0 0/300% 100%,color-mix(in srgb,var(--bg-2) 80%,#000);animation:shimmer 1.6s linear infinite}
.media:has(img.is-loaded),.media:has(video){animation:none;background:color-mix(in srgb,var(--bg-2) 80%,#000)}
@keyframes shimmer{to{background-position:-300% 0,0 0}}
.js .media img{opacity:0;transition:opacity .6s ease,transform .8s var(--ease)}
.js .media img.is-loaded{opacity:1}
.media.is-broken{animation:none}
.media.is-broken::after{content:"Image unavailable";position:absolute;inset:0;display:grid;place-items:center;font-size:.85rem;color:var(--muted)}
.rounded{border-radius:var(--radius);box-shadow:0 0 0 1px var(--line),0 40px 80px -40px rgba(0,0,0,.9)}

/* ---------- Home hero: the moving wall of artwork ---------- */
.home-hero{position:relative;min-height:clamp(640px,100svh,1000px);display:grid;place-items:center;padding:120px 0 100px;overflow:hidden;isolation:isolate;text-align:center}
.mq{position:absolute;inset:-18% -20%;z-index:-2;display:flex;flex-direction:column;justify-content:center;gap:18px;transform:rotate(-7deg);opacity:.62}
.mq-row{overflow:hidden}
.mq-track{display:flex;gap:18px;width:max-content;animation:mq 120s linear infinite}
.mq-r .mq-track{animation-direction:reverse;animation-duration:140s}
.mq-tile{flex:none;width:clamp(230px,24vw,380px);aspect-ratio:1280/704;border-radius:16px;overflow:hidden;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.mq-tile img{width:100%;height:100%;object-fit:cover}
@keyframes mq{to{transform:translateX(-50%)}}
.home-hero-shade{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(60% 55% at 50% 48%,rgba(6,6,15,.88) 0%,rgba(6,6,15,.72) 45%,rgba(6,6,15,.35) 100%),
  linear-gradient(180deg,rgba(6,6,15,.7) 0%,rgba(6,6,15,0) 25%,rgba(6,6,15,0) 70%,var(--bg) 100%)}
.home-hero-copy{display:flex;flex-direction:column;align-items:center}
.mark-xl{width:clamp(76px,9vw,112px);height:auto}
.hero-mark-wrap{margin-bottom:22px}
.hero-mark-wrap .mark-star{filter:drop-shadow(0 0 22px var(--glow)) drop-shadow(0 0 60px rgba(233,207,155,.35))}
.hero-wordmark{display:flex;flex-direction:column;align-items:center;gap:.5em}
.hero-wordmark .wm-a{font-size:clamp(3.2rem,10.5vw,8.6rem);letter-spacing:.11em;line-height:.9;margin-right:-.11em;font-variation-settings:"SOFT" 40,"opsz" 144;background:linear-gradient(180deg,#fffaf0 30%,#e9cf9b);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 40px rgba(0,0,0,.6))}
.hero-wordmark .wm-b{font-size:clamp(.8rem,1.6vw,1.1rem);letter-spacing:.9em;margin-right:-.9em}
.hero-line{margin:36px 0 10px;font:italic 400 clamp(1.4rem,2.8vw,2.2rem)/1.2 var(--display);color:#fbf4e6}
.hero-sub{max-width:34rem;color:var(--soft);margin:0}
/* The opening: the star rises, then the name and words follow */
.intro{animation:introUp 1.2s var(--ease) both}
.intro-2{animation-delay:.35s}.intro-3{animation-delay:.6s}.intro-4{animation-delay:.75s}.intro-5{animation-delay:.9s}
.hero-mark-wrap.intro{animation:starRise 1.6s var(--ease) both}
@keyframes introUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes starRise{from{opacity:0;transform:translateY(26px) scale(.8)}to{opacity:1;transform:none}}
.scroll-cue{position:absolute;left:50%;bottom:22px;width:26px;height:42px;margin-left:-13px;border:1.5px solid rgba(255,255,255,.4);border-radius:14px}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}


/* Large buttons */
.btn-lg{min-height:56px;padding:0 28px;font-size:1.06rem}

/* ---------- Meet the Little Lights: the album cards ---------- */
.cast-band{position:relative;isolation:isolate}
.cast-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(45% 60% at 15% 45%,rgba(95,212,255,.13),transparent 70%),
  radial-gradient(45% 60% at 85% 55%,rgba(255,122,209,.14),transparent 70%),
  radial-gradient(55% 70% at 50% 40%,rgba(181,123,255,.16),transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
/* Each card's width follows its picture's width (--w), so all eight stand the same height */
.card-row{display:flex;gap:clamp(8px,1.2vw,16px)}
.card-row li{flex:var(--w) 1 0;min-width:0}
.album-card{display:block;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent),0 18px 40px -18px color-mix(in srgb,var(--c) 70%,transparent);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.album-card img{width:100%;height:auto}
@media (hover:hover) and (pointer:fine){.album-card:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 0 0 1.5px var(--c),0 26px 60px -16px var(--c)}}
.album-card:focus-visible{transform:translateY(-8px) scale(1.03);box-shadow:0 0 0 1.5px var(--c),0 26px 60px -16px var(--c)}
/* Phones: a calm sideways row. No slide-in per card (they jumped while swiping), no tap-hover lift,
   a gentle snap to each card's start, and a sideways swipe never drags the page or the browser's back gesture */
@media (max-width:900px){
  .card-row{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--gutter);scrollbar-width:none;margin-inline:calc(-1*var(--gutter));padding:8px var(--gutter) 18px}
  .card-row::-webkit-scrollbar{display:none}
  .card-row li{flex:none;width:calc(var(--w) * min(1px,.24vw));scroll-snap-align:start}
  .js .card-row li.reveal{opacity:1;transform:none;transition:none}
}

/* ---------- The trailer ---------- */
.trailer-band{background:radial-gradient(70% 60% at 50% 60%,rgba(240,122,230,.10),transparent 70%)}
.trailer-frame{position:relative;display:block;width:100%;margin:clamp(24px,4vw,44px) 0 0;padding:0;border:0;border-radius:var(--radius);overflow:hidden;cursor:pointer;background:#120c33;aspect-ratio:1536/1024;max-height:78svh;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 120px -40px rgba(181,123,255,.55)}
.trailer-frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s}
.trailer-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(6,6,15,.85))}
.trailer-frame:hover img{transform:scale(1.03);filter:brightness(1.08)}
.trailer-play{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:clamp(72px,9vw,108px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 0 0 1.5px rgba(255,255,255,.55),0 20px 60px -10px rgba(181,123,255,.8);color:#fff;transition:transform .35s var(--ease),background .35s}
.trailer-play .icon{width:38%;height:38%;margin-left:7%}
.trailer-frame:hover .trailer-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(255,255,255,.26)}
.trailer-meta{position:absolute;left:clamp(18px,3vw,36px);bottom:clamp(16px,3vw,32px);z-index:1;display:flex;flex-direction:column;align-items:flex-start;text-align:left;color:#fff}
.trailer-meta strong{font:400 clamp(1.3rem,2.4vw,2rem)/1.1 var(--display)}
.trailer-meta span{color:var(--soft);font-size:.95rem}
.link-btn{padding:0;border:0;background:none;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

/* The trailer player: the whole screen, dark, with the film's own controls */
.theatre{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:clamp(12px,4vw,56px);background:rgba(3,3,10,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.theatre[hidden]{display:none}
.theatre-video{width:min(100%,calc((100svh - 2*clamp(12px,4vw,56px)) * 1.5));height:auto;border-radius:14px;background:#000;box-shadow:0 40px 120px -30px rgba(181,123,255,.5)}
.theatre-close{position:absolute;top:16px;right:16px}

/* ---------- The album ---------- */
.album{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(22px,4vw,48px);border-radius:32px;
  background:
    radial-gradient(60% 70% at 0% 0%,rgba(95,212,255,.30),transparent 70%),
    radial-gradient(70% 80% at 100% 100%,rgba(255,150,120,.38),transparent 70%),
    linear-gradient(135deg,#2a1466 0%,#5a2390 45%,#a43f9c 80%,#d9638f 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 60px 120px -50px rgba(217,99,143,.6)}
.album-cover .zoom{margin:0}
.album-cover a{display:block;border-radius:18px;overflow:hidden;box-shadow:0 30px 70px -20px rgba(10,4,30,.8),0 0 0 1px rgba(255,255,255,.18)}
.album-cover img{width:100%;height:auto;transition:transform .8s var(--ease)}
.album-cover a:hover img{transform:scale(1.025)}
.album-copy .eyebrow{color:#ffe7b8}
.album-copy .display-2{color:#fff}
.album-copy .lede{color:#f6e9ff;margin-bottom:22px}
.tracks{border-radius:18px;background:rgba(14,6,40,.42);box-shadow:0 0 0 1px rgba(255,255,255,.1) inset;padding:6px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.track{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:9px 12px;border:0;border-radius:12px;background:none;color:#fff;font:inherit;text-align:left;cursor:pointer;transition:background .2s}
.track:hover,.track.is-current{background:rgba(255,255,255,.1)}
.track-n{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:.86rem;color:#e6d8ff;font-variant-numeric:tabular-nums}
.track-n .icon{position:absolute;width:15px;height:15px;opacity:0}
.track:hover .track-n > span,.track.is-current .track-n > span{opacity:0}
.track:hover .track-play,.track.is-current:not(.is-playing) .track-play{opacity:1}
.track.is-playing .track-pause{opacity:1}
.track.is-playing:hover .track-play{opacity:0}
.track.is-current .track-n{background:#fff;color:#3a1670}
.track-name{display:flex;flex-direction:column;min-width:0}
.track-name strong{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-name span{font-size:.8rem;color:#d9c8f5}
.track-len{font-size:.86rem;color:#d9c8f5;font-variant-numeric:tabular-nums}
.player{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin-top:12px;padding:10px 18px 10px 10px;border-radius:999px;background:rgba(255,255,255,.14);box-shadow:0 0 0 1px rgba(255,255,255,.18) inset}
.player[hidden]{display:none}
.player-btn{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:#3a1670;cursor:pointer}
.player-btn .icon{width:18px;height:18px}
.player.is-playing .track-play,.player:not(.is-playing) .track-pause{display:none}
.player-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.player-main strong{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-bar{position:relative;height:5px;border-radius:3px;background:rgba(255,255,255,.25);cursor:pointer}
.player-bar span{position:absolute;inset:0 auto 0 0;width:0;border-radius:3px;background:#fff}
.player-time{font-size:.84rem;color:#f0e6ff;font-variant-numeric:tabular-nums}
@media (max-width:900px){.album{grid-template-columns:1fr}.album-cover{max-width:420px;margin-inline:auto;width:100%}}
@media (max-width:520px){.album{border-radius:24px;width:calc(100% - var(--gutter))}.track{gap:8px;padding:8px}}

/* ---------- Production hero ---------- */
.hero{position:relative;min-height:min(100svh,920px);display:flex;align-items:center;padding:calc(var(--header-h) + 40px) 0 80px;isolation:isolate;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The kingdom (2x copy, 2472 px wide) fills the hero edge to edge */
.hero-media img.hero-kingdom{object-position:50% 28%}
.drift{transform-origin:62% 40%;animation:drift 28s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1)}to{transform:scale(1.06) translate3d(-1%,0,0)}}
.hero-shade{position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 50% 45%,rgba(10,7,32,.25),rgba(10,7,32,.75) 70%),linear-gradient(180deg,rgba(10,7,32,.5),rgba(10,7,32,0) 30%,rgba(10,7,32,.4) 70%,var(--bg))}
/* The Little Lights hero: the picture is graded into the show's violet and fades out at the foot,
   so it melts into the page instead of ending in a line */
.hero-show .hero-media{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 98%);mask-image:linear-gradient(180deg,#000 55%,transparent 98%)}
.hero-show .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#4b2bc4,#7a3ad6 60%,#9a4fd8);mix-blend-mode:color;opacity:.62}
.hero-show .hero-shade{background:
  radial-gradient(62% 56% at 50% 50%,rgba(10,7,32,.74),rgba(10,7,32,.3) 65%,transparent),
  radial-gradient(90% 80% at 50% 50%,transparent 55%,rgba(10,7,32,.55)),
  linear-gradient(180deg,rgba(10,7,32,.55),transparent 28%)}
.hero-show .eyebrow{color:#e6d6ff;text-shadow:0 0 18px rgba(181,123,255,.7)}
.hero-show .hero-copy p:not(.eyebrow){text-shadow:0 1px 3px rgba(10,7,32,.9),0 0 22px rgba(10,7,32,.85)}
.hero-copy{display:flex;flex-direction:column;align-items:center}
.hero-copy .lede{max-width:30rem;margin-inline:auto}

/* The Little Lights logo with its subtitle (the logo file is the wordmark only) */
.show-mark{display:inline-flex;flex-direction:column;align-items:center;margin:0 0 22px;width:min(340px,80%)}
.show-mark > span{margin-top:.2em;font:600 clamp(.72rem,1.1vw,.9rem)/1 var(--sans);letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:#efe6ff;text-shadow:0 0 18px rgba(181,123,255,.8)}
.show-logo{width:100%;height:auto;filter:drop-shadow(0 0 22px rgba(181,123,255,.5))}
.hero-mark{width:min(560px,82vw);margin:0 auto 22px}
.hero-mark > span{font-size:clamp(.85rem,1.8vw,1.25rem)}
.show-mark-sm{width:min(250px,70%);margin-bottom:14px}

/* ---------- Sections ---------- */
.section{padding:clamp(56px,7vw,104px) 0}
.section.tight-top{padding-top:0}
.page-head{padding:calc(var(--header-h) + clamp(56px,8vw,110px)) 0 clamp(40px,6vw,70px)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:34px}
.section-head .display-2{margin:0}
.band{background:linear-gradient(180deg,transparent,rgba(255,255,255,.025) 25%,rgba(255,255,255,.025) 75%,transparent)}
.world-band{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 6%,transparent) 30%,color-mix(in srgb,var(--accent) 6%,transparent) 70%,transparent)}
.more-link{margin-top:32px}

.statement{padding-top:clamp(72px,9vw,130px)}
.statement-text{font:400 clamp(1.5rem,3.2vw,2.5rem)/1.3 var(--display);font-variation-settings:"SOFT" 100,"opsz" 96;letter-spacing:-.01em;color:#fbf4e6;text-wrap:pretty}
.statement-text span{color:var(--muted)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);align-items:center}
.split.flip > :first-child{order:2}
.name-mark{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;max-width:420px;width:100%;justify-self:center;background:radial-gradient(circle at 50% 45%,rgba(233,207,155,.16),transparent 62%)}
.mark-xxl{width:56%;height:auto}
.name-mark .mark-star{filter:drop-shadow(0 0 30px var(--glow))}
@media (max-width:900px){.split{grid-template-columns:1fr}.split.flip > :first-child{order:0}.name-mark{max-width:260px}}

/* Production cards */
.prod-card{position:relative;border-radius:28px;overflow:hidden;background:linear-gradient(135deg,var(--bg-2),var(--bg));box-shadow:0 0 0 1px var(--line),0 60px 120px -50px var(--glow)}
.prod-card + .prod-card{margin-top:22px}
.prod-card-link{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:stretch;text-decoration:none;color:var(--text)}
.prod-card-art{position:relative;min-width:0;min-height:clamp(260px,32vw,440px)}
.prod-card-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 50%;transition:transform 1.2s var(--ease),opacity .6s ease}
.prod-card-link:hover .prod-card-art img{transform:scale(1.035)}
.prod-card-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(26px,4vw,52px)}
.prod-card-logline{font:400 clamp(1.15rem,1.6vw,1.4rem)/1.4 var(--display);color:var(--soft)}
.prod-card-meta{color:var(--muted);font-size:.92rem}
.prod-card-copy .btn{margin-top:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chip{padding:6px 12px;border-radius:999px;font:600 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.07);color:var(--soft)}
.chip-live{background:color-mix(in srgb,var(--accent) 22%,transparent);color:#fff;display:inline-flex;align-items:center;gap:7px}
.chip-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
@media (max-width:900px){.prod-card-link{grid-template-columns:1fr}}
.prod-next{display:flex;align-items:center;gap:22px;margin-top:22px;padding:28px 32px;border-radius:22px;border:1px dashed var(--line);color:var(--muted)}
.prod-next .mark{width:42px;height:42px;flex:none;opacity:.8}
.prod-next h2{font:500 1.25rem/1.25 var(--display);color:var(--text);margin-bottom:6px}
.prod-next p{margin:0}

/* Home bento of artwork */
/* Every tile has its picture's own shape, so the whole picture fits with nothing cropped.
   Row 1: the big 3:2 tile is exactly as tall as the two stacked 3:2 tiles beside it (+ the gap). */
.bento{display:grid;grid-template-columns:minmax(0,calc((100% - 40px) * 2 / 3 + 24px)) minmax(0,1fr);gap:16px}
.bento-tile{position:relative;display:block;border-radius:20px;overflow:hidden;text-decoration:none;color:#fff;box-shadow:0 0 0 1px var(--line)}
.bento-tile img{display:block;width:100%;height:100%;object-fit:cover}
.bento-tile:hover img{transform:scale(1.04)}
.bento-a{grid-column:1;grid-row:1/3;aspect-ratio:3/2}
.bento-b{grid-column:2;grid-row:1;aspect-ratio:3/2}
.bento-c{grid-column:2;grid-row:2;aspect-ratio:3/2}
/* Row 2: widths in proportion to each picture's shape, so both tiles are the same height */
.bento-row{grid-column:1/-1;display:flex;gap:16px}
.bento-d{flex:2.806 1 0;min-width:0;aspect-ratio:794/283}
.bento-e{flex:1.5 1 0;min-width:0;aspect-ratio:3/2}
.bento-cap{position:absolute;inset:auto 0 0;padding:40px 18px 16px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.75));font:500 1.05rem/1.2 var(--display)}
.bento-cap em{display:block;margin-bottom:4px;font:600 .68rem/1 var(--sans);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
@media (max-width:760px){.bento{grid-template-columns:1fr}.bento-tile{grid-column:auto!important;grid-row:auto!important}.bento-row{flex-direction:column}.bento-d,.bento-e{flex:none;width:100%}}

/* Pillars, beliefs, steps, routes */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:44px 0 36px}
.pillars li,.beliefs li{padding:30px 28px;border-radius:var(--radius);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.pillars .icon{width:26px;height:26px;color:var(--accent)}
.pillars h3,.beliefs h3{font:500 1.35rem/1.2 var(--display);margin:16px 0 8px}
.pillars p,.beliefs p{color:var(--muted);margin:0}
.beliefs{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px}
.beliefs .num{font:500 .95rem/1 var(--display);color:var(--accent);letter-spacing:.1em}
@media (max-width:860px){.pillars,.beliefs{grid-template-columns:1fr}}
.steps{display:grid;gap:14px;margin:8px 0 24px;counter-reset:s}
.steps li{position:relative;padding-left:46px;color:var(--muted);counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font:500 .9rem/1 var(--display);color:var(--accent);box-shadow:inset 0 0 0 1px var(--line)}
.steps strong{display:block;color:var(--text);font-weight:600}
.routes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.routes-2{grid-template-columns:repeat(2,1fr);margin-top:22px}
.route{position:relative;display:flex;flex-direction:column;gap:4px;padding:24px 24px 26px;border-radius:20px;text-decoration:none;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);transition:background .25s,transform .25s var(--ease),box-shadow .25s}
.route > .icon:first-child{width:22px;height:22px;color:var(--accent);margin-bottom:14px}
.route strong{font:500 1.2rem/1.2 var(--display)}
.route span{color:var(--muted);font-size:.92rem}
.route-arrow{position:absolute;right:20px;top:24px;width:18px;height:18px;color:var(--muted);transition:transform .25s var(--ease),color .25s}
.route:hover{background:rgba(255,255,255,.07);transform:translateY(-3px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}
.route:hover .route-arrow{transform:translateX(3px);color:var(--accent)}
@media (max-width:960px){.routes{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.routes,.routes-2{grid-template-columns:1fr}}
.cta-band{text-align:center}

/* Facts and details */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:26px 0 0;border-radius:var(--radius-sm);overflow:hidden;background:var(--line)}
.facts li{display:flex;flex-direction:column;gap:2px;padding:16px 12px;background:color-mix(in srgb,var(--bg-2) 92%,#000);text-align:center}
.facts strong{font:500 1.7rem/1 var(--display);color:#fff}
.facts span{font-size:.8rem;color:var(--muted)}
@media (max-width:520px){.facts{grid-template-columns:repeat(2,1fr)}}
.details{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:48px 0 0;padding:24px 0 0;border-top:1px solid var(--line)}
.details dt{font:600 .72rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.details dd{margin:0}
@media (max-width:760px){.details{grid-template-columns:repeat(2,1fr)}}

.feature-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.feature-art{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.8),0 0 0 1px var(--line)}
.feature-art img{width:100%}
.feature-art-tall{width:100%;max-width:250px;justify-self:center}
@media (max-width:900px){.feature-grid{grid-template-columns:1fr}}

/* ---------- Cast stage ---------- */
.cast-stage{margin-top:40px}
.cast-art{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:0 50px 100px -40px rgba(0,0,0,.9),0 0 0 1px var(--line)}
.cast-art img{width:100%}
.hotspot{position:absolute;border:0;padding:0;background:transparent;cursor:pointer;border-radius:28px}
.hotspot::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px var(--c);opacity:0;transition:opacity .25s}
.hotspot:hover::after,.hotspot:focus-visible::after,.hotspot.is-active::after{opacity:.85}
.hotspot:focus-visible{outline:none}
.hotspot-label{position:absolute;left:50%;bottom:10px;transform:translate(-50%,6px);padding:6px 12px;border-radius:999px;background:rgba(10,7,32,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font:600 .82rem/1 var(--sans);white-space:nowrap;color:#fff;box-shadow:inset 0 0 0 1px var(--c);opacity:0;transition:opacity .25s,transform .25s var(--ease)}
.hotspot:hover .hotspot-label,.hotspot:focus-visible .hotspot-label,.hotspot.is-active .hotspot-label{opacity:1;transform:translate(-50%,0)}
.cast-strip{display:flex;gap:10px;margin:18px 0 0;padding:4px 2px 8px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.cast-strip::-webkit-scrollbar{display:none}
.cast-chip{flex:1 0 86px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 8px 10px;border:0;border-radius:18px;background:var(--panel);color:var(--muted);font:600 .86rem/1 var(--sans);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line);transition:background .25s,box-shadow .25s,color .25s,transform .25s var(--ease)}
.cast-chip img{width:100%;max-width:92px;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%;border-radius:12px}
.cast-chip:hover{transform:translateY(-2px);color:#fff}
.cast-chip.is-active{color:#fff;background:color-mix(in srgb,var(--c) 14%,transparent);box-shadow:inset 0 0 0 1.5px var(--c),0 10px 30px -12px var(--c)}
.cast-panel{margin-top:18px}
.cast-card{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;padding:clamp(22px,3vw,34px);border-radius:var(--radius);background:linear-gradient(135deg,color-mix(in srgb,var(--c) 12%,transparent),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 35%,transparent);animation:rise .45s var(--ease)}
.cast-card[hidden]{display:none}
.cast-card h3{font:400 clamp(1.8rem,3vw,2.4rem)/1.05 var(--display);margin-bottom:10px}
.cast-card .eyebrow{color:var(--c)}
.cast-card p:not(.eyebrow){max-width:44rem}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.emblem{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 45%,transparent),0 0 30px -6px var(--c)}
.emblem .icon{width:28px;height:28px}
.traits{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 16px}
.traits span{padding:6px 12px;border-radius:999px;font:600 .74rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:color-mix(in srgb,var(--c,var(--accent)) 22%,transparent)}
@media (max-width:640px){.cast-card{grid-template-columns:1fr;gap:14px}.hotspot-label{display:none}}

/* ---------- The Little Lights page ---------- */
.places-rail{margin-top:40px}
.places-rail .rail-item{width:min(400px,82vw)}
.place{display:flex;flex-direction:column;width:100%;border-radius:var(--radius);overflow:hidden;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);scroll-margin-top:calc(var(--header-h) + 20px)}
.place-media{aspect-ratio:1280/704}
.place-media img,.place-media video{width:100%;height:100%;object-fit:cover}
.place-copy{padding:22px 24px 26px}
.place-copy h3{font:500 1.45rem/1.15 var(--display);margin-bottom:8px}
.place-copy p{color:var(--muted);margin:0}
.place-blank{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;height:100%;min-height:140px;color:var(--muted);background:radial-gradient(60% 80% at 50% 40%,rgba(95,212,255,.10),transparent),color-mix(in srgb,var(--bg-2) 85%,#000);font-size:.9rem}
.place-blank .icon{width:28px;height:28px;color:#9fe3ff;opacity:.7}

.episodes-rail{margin-top:40px}
.episodes-rail .rail-item{width:min(323px,82vw)}
.episode{display:flex;flex-direction:column;gap:18px;width:100%;padding:16px 16px 22px;border-radius:var(--radius);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.episode-art{border-radius:var(--radius-sm)}
.episode-art img{width:100%;aspect-ratio:194/151;object-fit:cover}
.ep-num{position:absolute;left:10px;bottom:10px;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font:500 1.15rem/1 var(--display);background:rgba(10,7,32,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1.5px var(--accent),0 0 18px var(--glow)}
.episode-copy{padding:0 6px}
.episode h3{font:400 clamp(1.3rem,1.8vw,1.55rem)/1.15 var(--display);margin-bottom:6px}
.episode .eyebrow{margin-bottom:8px}
.adventure{color:var(--soft);font-size:.95rem}
.episode blockquote{margin:0 0 12px;font:italic 400 1.12rem/1.4 var(--display);color:#f3b6ef}
.song{display:flex;align-items:center;gap:8px;margin:0;font-size:.9rem;color:var(--muted)}
.song .icon{color:var(--accent);width:14px;height:14px}

.song-band{background:radial-gradient(60% 80% at 80% 50%,color-mix(in srgb,var(--accent-2) 12%,transparent),transparent 70%)}
.song-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center}
.lyrics{margin:0;padding:clamp(24px,4vw,40px);border-radius:var(--radius);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);font:italic 400 clamp(1.05rem,1.4vw,1.3rem)/1.55 var(--display);color:#efe6ff}
.lyrics span{display:block}
@media (max-width:860px){.song-grid{grid-template-columns:1fr}}

.key-art{display:grid;grid-template-columns:1fr 1.25fr;gap:22px;margin-top:44px;align-items:start}
@media (max-width:760px){.key-art{grid-template-columns:1fr}}
.zoom{margin:0}
.zoom a{display:block;position:relative;border-radius:var(--radius-sm);overflow:hidden;box-shadow:0 0 0 1px var(--line),0 30px 60px -30px rgba(0,0,0,.8);cursor:zoom-in}
.zoom img{width:100%;transition:transform .6s var(--ease)}
.zoom a:hover img{transform:scale(1.02)}
figcaption{margin-top:12px;font-size:.92rem;color:var(--muted)}

/* Characters page */
.jump{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:28px}
.jump a{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.92rem;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s,background .2s}
.jump a .icon{color:var(--c);width:15px;height:15px}
.jump a:hover{box-shadow:inset 0 0 0 1.5px var(--c);background:color-mix(in srgb,var(--c) 10%,transparent)}
.profile{position:relative;padding:clamp(64px,9vw,120px) 0;scroll-margin-top:var(--header-h)}
.profile::before{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 25% 50%,color-mix(in srgb,var(--c) 16%,transparent),transparent 70%);pointer-events:none}
.profile.flip::before{background:radial-gradient(50% 60% at 75% 50%,color-mix(in srgb,var(--c) 16%,transparent),transparent 70%)}
.profile-grid{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) 1fr;gap:clamp(32px,6vw,80px);align-items:center}
.profile.flip .profile-art{order:2}
.profile-art{position:relative;max-width:420px;width:100%;justify-self:center}
.profile-art img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border-radius:28px;box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent),0 40px 80px -30px color-mix(in srgb,var(--c) 60%,#000)}
.profile-emblem{position:absolute;right:-14px;bottom:28px;display:grid;place-items:center;width:62px;height:62px;border-radius:20px;color:var(--c);background:rgba(10,7,32,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1.5px var(--c),0 0 30px -4px var(--c)}
.profile-emblem .icon{width:30px;height:30px}
.profile .eyebrow{color:var(--c)}
.more{display:grid;gap:14px;margin:22px 0 0}
.more dt{font:600 .76rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.more dd{margin:6px 0 0}
.profile-extra{position:relative;margin-top:48px}
.big-quote{margin:0 auto 40px;max-width:44rem;text-align:center;font:italic 400 clamp(1.3rem,2.4vw,1.9rem)/1.35 var(--display);color:#f0e4ff}
.sheets{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:22px}
.seen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.seen figure{margin:0}
.seen img{border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--line)}
.profile-art.is-card{max-width:400px}
.profile-art.is-card .zoom{margin:0}
.profile-art.is-card img{aspect-ratio:auto;object-fit:contain;border-radius:22px}
.profile-art.is-card .profile-emblem{display:none}
.key-details{grid-template-columns:auto 1fr;column-gap:22px;row-gap:12px;margin-top:6px}
.key-details > div{display:contents}
.key-details dt{align-self:baseline}
.key-details dd{margin:0}
.family-head{padding-bottom:0}
.profile-loop{max-width:760px;margin:0 auto 22px}
.profile-loop video{width:100%;border-radius:var(--radius);box-shadow:0 0 0 1px var(--line)}
.seen:has(> :only-child){max-width:820px;margin:0 auto}
.shadow-form{max-width:900px;margin:0 auto}
@media (max-width:860px){.profile-grid{grid-template-columns:1fr}.profile.flip .profile-art{order:0}.profile-art{max-width:340px}.sheets{grid-template-columns:1fr}}

/* ---------- Swipe rows ---------- */
.rail-bar{display:flex;align-items:flex-end;gap:16px;margin-bottom:14px}
.rail-title{display:flex;align-items:baseline;gap:10px;font:400 clamp(1.4rem,2.2vw,1.8rem)/1.15 var(--display)}
.rail-title span{font:600 .78rem/1 var(--sans);letter-spacing:.08em;color:var(--muted)}
.rail-nav{display:flex;gap:8px;margin-left:auto}
.rail-btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;color:var(--text);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:background .2s,opacity .2s,transform .2s var(--ease)}
.rail-btn:hover:not(:disabled){background:rgba(255,255,255,.1);transform:scale(1.06)}
.rail-btn:disabled{opacity:.28;cursor:default}
.rail-btn .icon{width:18px;height:18px}
.rail.is-static .rail-nav{visibility:hidden}
.rail-track{display:flex;gap:16px;margin:0 calc(-1*var(--gutter));padding:6px var(--gutter) 14px;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--gutter),#000 calc(100% - var(--gutter)),transparent)}
.rail-track::-webkit-scrollbar{display:none}
.rail-item{flex:0 0 auto;display:flex;scroll-snap-align:start}
@media (hover:hover) and (pointer:fine){.rail-track{cursor:grab}}
.rail-track.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.rail-track.is-dragging a{pointer-events:none}
@media (max-width:640px){.rail-nav{display:none}.rail-bar:not(:has(.rail-title)){display:none}}

/* ---------- Characters: one at a time ---------- */
.viewer{scroll-margin-top:var(--header-h);padding-bottom:clamp(48px,7vw,96px)}
.viewer-tabs{margin:8px auto 0;padding-inline:2px}
.viewer-tabs .cast-chip{text-decoration:none}
.viewer-track{display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;transition:height .45s var(--ease)}
.viewer-track::-webkit-scrollbar{display:none}
.viewer-track > .slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;padding:clamp(44px,6vw,80px) 0}
.viewer-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:22px;border-top:1px solid var(--line)}
.viewer-btn{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px;border:0;border-radius:999px;color:var(--text);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);font:600 .95rem/1 var(--sans);cursor:pointer;transition:background .2s}
.viewer-btn:hover{background:rgba(255,255,255,.09)}
.viewer-btn[hidden]{display:inline-flex;visibility:hidden}
.viewer-btn .icon{width:16px;height:16px}
.viewer-count{font:600 .78rem/1 var(--sans);letter-spacing:.16em;color:var(--muted)}
@media (max-width:640px){.viewer-btn{padding:0 14px;font-size:.9rem}}

/* ---------- Characters & Worlds ---------- */
.sub-head{font:600 .78rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:30px 0 16px}
.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px}
.char-card{display:flex;flex-direction:column;gap:3px;padding:10px 10px 14px;border-radius:18px;text-decoration:none;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);transition:transform .25s var(--ease),box-shadow .25s,background .25s}
.char-card .media{border-radius:12px;aspect-ratio:3/4;margin-bottom:8px}
.char-card img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.char-card strong{font:500 1.1rem/1.2 var(--display)}
.char-card > span:last-child{font-size:.8rem;color:var(--c)}
.char-card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1.5px var(--c),0 18px 40px -20px var(--c)}
.place-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.place-card{display:flex;flex-direction:column;gap:10px;text-decoration:none}
.place-card .media{border-radius:16px;aspect-ratio:1280/704;box-shadow:0 0 0 1px var(--line)}
.place-card .media:has(.place-blank){animation:none}
.place-card img{width:100%;height:100%;object-fit:cover}
.place-card:hover img{transform:scale(1.05)}
.place-card strong{font:500 1.05rem/1.25 var(--display)}
@media (max-width:640px){
  .char-grid,.place-grid{display:flex;gap:12px;margin:0 calc(-1*var(--gutter));padding:4px var(--gutter) 12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .char-grid::-webkit-scrollbar,.place-grid::-webkit-scrollbar{display:none}
  .char-grid > li{flex:0 0 128px;scroll-snap-align:start}
  .place-grid > li{flex:0 0 72vw;scroll-snap-align:start}
}

/* ---------- Gallery ---------- */
.g-rows{display:grid;gap:clamp(40px,5vw,60px)}
.g-row{min-width:0;scroll-margin-top:calc(var(--header-h) + 16px)}
.g-rail{--rh:min(clamp(210px,26vw,320px),var(--rh-max,9999px))}
.g-item{margin:0;width:calc(var(--rh) * var(--ar))}
.g-item .media{height:var(--rh);border-radius:16px;box-shadow:0 0 0 1px var(--line);cursor:zoom-in}
.g-item img{width:100%;height:100%;object-fit:cover}
.g-item .media:hover img{transform:scale(1.03)}
.g-item figcaption{margin-top:10px;font-size:.9rem;color:var(--soft)}
.gallery-note{margin-top:0;text-align:center;font-size:.92rem}
.jump a span{font-size:.75rem;color:var(--muted)}

/* ---------- Empty states, contact, journal ---------- */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:clamp(36px,6vw,64px) 24px;border-radius:24px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.empty[hidden]{display:none}
.empty .mark{width:44px;height:44px;margin-bottom:12px}
.empty .mark-lg{width:64px;height:64px}
.empty-icon{width:34px;height:34px;color:var(--accent);margin-bottom:12px}
.empty h2{font:500 clamp(1.4rem,2.4vw,1.9rem)/1.2 var(--display)}
.empty p{max-width:32rem;color:var(--muted)}
.empty-lg{padding:clamp(48px,8vw,96px) 24px}
.contact-card{display:flex;align-items:center;gap:18px;padding:26px 28px;border-radius:20px;text-decoration:none;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.contact-card > .icon{width:28px;height:28px;color:var(--accent)}
.contact-card strong{display:block;font:500 1.3rem/1.2 var(--display)}
.socials{display:flex;gap:10px;margin-top:14px}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.post a{display:block;text-decoration:none}
.post time{display:block;margin:14px 0 6px;font-size:.85rem;color:var(--accent)}
.post h2{font:500 1.4rem/1.2 var(--display);margin-bottom:8px}
.post p{color:var(--muted)}

/* Prose (legal pages, journal entries) */
.prose h2{font:500 1.45rem/1.2 var(--display);margin:2em 0 .6em}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--soft)}
.prose ul{display:grid;gap:10px;margin:0 0 1em}
.prose li{position:relative;padding-left:20px}
.prose li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* 404 */
.notfound{min-height:80vh;display:grid;align-items:center}
.nf-mark{display:inline-grid;margin-bottom:24px}
.nf-mark .mark{opacity:.85;animation:float 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}

/* ---------- Behind the scenes ---------- */
.step-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,80px);align-items:center}
.step-grid.flip{grid-template-columns:1.2fr .8fr}
.step-grid.flip > :first-child{order:2}
.step-n{font:500 .95rem/1 var(--display);color:var(--accent);letter-spacing:.1em;margin-bottom:12px}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.compare figure{margin:0}
.compare img,.compare video{width:100%;border-radius:var(--radius-sm);box-shadow:0 0 0 1px var(--line)}
.compare.tight{max-width:520px}
.swatches{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.swatches li{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;font-weight:600;font-size:.88rem;background:color-mix(in srgb,var(--c) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent)}
.swatches .icon{color:var(--c);width:15px;height:15px}
.timeline{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.timeline li{padding:20px 18px 18px;border-radius:var(--radius-sm);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:6px}
.timeline li::before{content:"";width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--muted);margin-bottom:8px}
.timeline li.done::before{background:var(--accent);box-shadow:0 0 12px var(--accent)}
.timeline strong{font:500 1.08rem/1.2 var(--display)}
.timeline span{font-size:.88rem;color:var(--muted)}
@media (max-width:860px){.step-grid,.step-grid.flip{grid-template-columns:1fr}.step-grid.flip > :first-child{order:0}}

.loop{width:100%;background:#140d37}

/* ---------- Footer ---------- */
.site-footer{margin-top:clamp(40px,6vw,80px);padding:clamp(56px,7vw,90px) 0 calc(36px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.45))}
.foot-top{display:grid;grid-template-columns:1.1fr 2fr;gap:40px 60px}
.foot-brand p{margin-top:18px;max-width:22rem;color:var(--muted)}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.foot-col h2{font:600 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.foot-col ul{display:grid;gap:10px}
.foot-col a{text-decoration:none;color:var(--soft);font-size:.95rem}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.foot-bottom p{margin:0}
@media (max-width:960px){.foot-top{grid-template-columns:1fr}.foot-cols{grid-template-columns:repeat(2,1fr)}}

/* ---------- Image viewer ---------- */
.lightbox{position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:clamp(16px,4vw,48px);background:rgba(4,4,12,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.lightbox[hidden]{display:none}
.lb-figure{grid-column:2;margin:0;display:flex;flex-direction:column;align-items:center;min-width:0}
.lb-figure img{max-width:100%;max-height:calc(100svh - 140px);width:auto;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lightbox-cap{margin:14px 0 0;color:var(--muted);text-align:center}
.lb-btn{display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.lb-btn:hover{background:rgba(255,255,255,.22)}
.lb-btn .icon{width:22px;height:22px}
.lb-btn[hidden]{visibility:hidden;display:grid}
.lightbox-close{position:absolute;top:16px;right:16px}
.lb-prev{grid-column:1}.lb-next{grid-column:3}
@media (max-width:640px){.lightbox{grid-template-columns:1fr 1fr;grid-template-rows:1fr auto}.lb-figure{grid-column:1/-1;grid-row:1}.lb-prev{grid-column:1;grid-row:2;justify-self:end}.lb-next{grid-column:2;grid-row:2;justify-self:start}}

/* ---------- The Little Lights page (rebuilt 31 Oct) ----------
   A faint starfield behind the whole page, drifting lights, star dividers over the titles,
   and every section lit like a feature-film page. */
body.ll-page::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%,#fff 50%,transparent),radial-gradient(1px 1px at 33% 72%,#e9dcff 50%,transparent),
    radial-gradient(1.5px 1.5px at 58% 34%,#fff 50%,transparent),radial-gradient(1px 1px at 81% 61%,#d6c2ff 50%,transparent),
    radial-gradient(1.3px 1.3px at 92% 12%,#fff 50%,transparent),radial-gradient(1px 1px at 46% 92%,#fff 50%,transparent),
    radial-gradient(1px 1px at 7% 55%,#e9dcff 50%,transparent),radial-gradient(1.4px 1.4px at 69% 83%,#fff 50%,transparent);
  background-size:520px 460px,380px 420px,610px 540px,450px 390px,700px 620px,330px 360px,480px 520px,560px 600px}

/* Drifting lights */
.sparkles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sparkles i{position:absolute;width:var(--s);height:var(--s);border-radius:50%;background:#fff;opacity:0;
  box-shadow:0 0 6px 1px rgba(226,206,255,.95),0 0 16px 4px rgba(181,123,255,.55);animation:twinkle var(--d) ease-in-out var(--t) infinite}
@keyframes twinkle{0%,100%{opacity:0;transform:translateY(6px) scale(.5)}50%{opacity:.95;transform:translateY(-16px) scale(1)}}
.hero-show .hero-copy{position:relative;z-index:1}

/* Section titles: the evening star between two fading lines */
.ll-head{margin-bottom:clamp(30px,4vw,52px)}
.ll-star{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:18px;color:#efe4ff}
.ll-star::before,.ll-star::after{content:"";width:clamp(40px,8vw,90px);height:1px;background:linear-gradient(90deg,transparent,rgba(214,186,255,.75))}
.ll-star::after{transform:scaleX(-1)}
.ll-star .icon{width:18px;height:18px;filter:drop-shadow(0 0 8px rgba(214,186,255,.95)) drop-shadow(0 0 22px rgba(181,123,255,.7))}
.ll-star-lg .icon{width:30px;height:30px}
.ll-page .ll-head .eyebrow{color:#cbb2ff;margin-bottom:12px}
.ll-page .display-2,.ll-finale .display{background:linear-gradient(180deg,#fff 35%,#d7c1ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 26px rgba(181,123,255,.3))}
.ll-lede{max-width:40rem;margin:0 auto;color:var(--soft);font-size:clamp(1.02rem,.6vw + .8rem,1.15rem)}

/* The story: Vesper in a glowing arch beside the story */
.ll-story{position:relative;isolation:isolate}
.story-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(36px,7vw,100px);align-items:center}
.story-portal{position:relative;justify-self:center;width:clamp(190px,19vw,250px);aspect-ratio:277/880;border-radius:999px 999px 30px 30px;overflow:hidden;
  box-shadow:inset 0 0 0 1.5px rgba(214,186,255,.5),0 0 0 8px rgba(181,123,255,.08),0 0 80px -6px rgba(181,123,255,.65),0 50px 90px -40px #000}
.story-portal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.portal-glow{position:absolute;inset:-30% -60%;z-index:-1;background:radial-gradient(50% 45% at 50% 45%,rgba(181,123,255,.45),transparent 70%);filter:blur(10px)}
.story-portal .sparkles{z-index:1}
.story-lede{font:400 clamp(1.25rem,1vw + .95rem,1.6rem)/1.5 var(--display);color:#f4edff;text-wrap:pretty;margin-bottom:22px}
.story-tree{display:flex;gap:14px;align-items:flex-start;margin:0 0 30px;padding:18px 20px;border-radius:18px;background:linear-gradient(135deg,rgba(255,231,184,.08),rgba(181,123,255,.06));box-shadow:inset 0 0 0 1px rgba(255,231,184,.16);color:#e9dfff;font:italic 400 1.05rem/1.55 var(--display)}
.story-tree .icon{flex:none;width:18px;height:18px;margin-top:4px;color:#ffe2a8;filter:drop-shadow(0 0 8px rgba(255,214,140,.8))}
.medals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,18px);max-width:560px;margin:0 0 26px}
.medals li{display:grid;place-content:center;gap:4px;aspect-ratio:1;border-radius:50%;text-align:center;
  background:radial-gradient(60% 60% at 50% 35%,#4a26a8,#1b0f4c 75%);box-shadow:inset 0 0 0 1.5px rgba(214,186,255,.4),0 0 34px -8px rgba(181,123,255,.8)}
.medals strong{font:500 clamp(1.4rem,2.2vw,2rem)/1 var(--display);color:#fff}
.medals span{font:600 clamp(.56rem,.7vw,.68rem)/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#cfbdf5;padding:0 8px}
.themes{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.themes span{padding:8px 14px;border-radius:999px;font:600 .8rem/1 var(--sans);color:#efe6ff;background:rgba(181,123,255,.14);box-shadow:inset 0 0 0 1px rgba(214,186,255,.24)}
@media (max-width:860px){.story-grid{grid-template-columns:1fr}.story-copy{text-align:center}.story-tree{text-align:left}.medals{margin-inline:auto}.themes{justify-content:center}}

/* The cast picture sits in a soft violet glow */
.ll-cast{isolation:isolate}
.cast-glow{position:relative}
.cast-glow::before{content:"";position:absolute;inset:-4% 2% 30%;z-index:-1;background:radial-gradient(50% 55% at 50% 50%,rgba(181,123,255,.4),transparent 72%);filter:blur(30px)}
.ll-cast .cast-art{box-shadow:0 0 0 1px rgba(214,186,255,.22),0 0 90px -20px rgba(181,123,255,.6),0 60px 100px -50px #000}

/* Places: big pictures with their names on them */
.ll-world .places-rail{margin-top:0}
.ll-world .places-rail .rail-item{width:min(520px,86vw)}
.ll-world .place{background:none;box-shadow:none;border-radius:0;overflow:visible}
.ll-world .place-media{position:relative;aspect-ratio:16/10;border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px rgba(214,186,255,.2),0 30px 60px -30px #000}
.ll-world .place-media::after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(180deg,transparent,rgba(10,7,32,.85))}
.ll-world .place-media img{transition:transform 1s var(--ease)}
.ll-world .place:hover .place-media img{transform:scale(1.04)}
.ll-world .place-media h3{position:absolute;left:22px;right:22px;bottom:16px;z-index:1;font:400 clamp(1.4rem,2vw,1.85rem)/1.1 var(--display);color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.ll-world .place > p{margin:14px 6px 0;color:var(--muted);font-size:.96rem}

/* Episodes: each one glows in its own colour */
.ll-episodes .episodes-rail{margin-top:0}
.ll-episodes .episodes-rail .rail-item{width:min(360px,84vw)}
.ll-episodes .episode{position:relative;gap:0;padding:0;overflow:hidden;border-radius:24px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 18%,#150b3d),#110930 55%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 38%,transparent),0 34px 60px -38px color-mix(in srgb,var(--c) 85%,transparent)}
.ll-episodes .episode-art{border-radius:0}
.ll-episodes .episode-art img{width:100%;aspect-ratio:194/151;object-fit:cover}
.ll-episodes .ep-num{position:relative;left:auto;bottom:auto;align-self:flex-start;width:54px;height:54px;margin:-27px 0 0 20px;z-index:1;font-size:1.55rem;color:#fff;background:#150b3d;
  box-shadow:inset 0 0 0 2px var(--c),0 0 26px -2px var(--c)}
.ll-episodes .episode-copy{padding:14px 22px 26px}
.ll-episodes .episode .eyebrow{color:var(--c)}
.ll-episodes .episode-copy > p:not([class]){font-size:.95rem;line-height:1.6;color:var(--soft)}
.ll-episodes .episode h3{font-size:clamp(1.35rem,1.6vw,1.6rem)}
.ll-episodes .episode blockquote{color:color-mix(in srgb,var(--c) 45%,#fff)}
.ll-episodes .song .icon{color:var(--c)}

/* The theme song: a glowing lyric sheet */
.ll-song .lyrics{position:relative;overflow:hidden;text-align:center;padding:clamp(32px,5vw,58px);border-radius:28px;
  background:radial-gradient(80% 90% at 50% 0%,rgba(240,122,230,.18),transparent 70%),rgba(255,255,255,.03);
  box-shadow:inset 0 0 0 1px rgba(214,186,255,.22),0 40px 90px -40px rgba(181,123,255,.6)}
.ll-song .lyrics span{position:relative;z-index:1}

/* Posters glow a little */
.ll-posters .zoom a{box-shadow:0 0 0 1px rgba(214,186,255,.2),0 0 70px -24px rgba(181,123,255,.55),0 40px 70px -40px #000}

/* The finale */
.ll-finale{position:relative;overflow:hidden;isolation:isolate;padding:clamp(100px,13vw,170px) 0;
  background:radial-gradient(55% 70% at 50% 100%,rgba(240,122,230,.26),transparent 70%),radial-gradient(70% 80% at 50% 70%,rgba(120,70,230,.32),transparent 75%)}
.ll-finale .wrap{position:relative;z-index:1}
.ll-finale .display{margin-bottom:14px}
.ll-finale .actions{margin-top:30px}

@media (prefers-reduced-motion:reduce){.sparkles i{animation:none;opacity:.6}}

/* ---------- The Little Lights palette (31 Oct: "way too much purple") ----------
   Midnight blue for the night sky, warm gold for the stars and small titles, and violet kept
   for Vesper and the main buttons only. The friends' own colours stay on their cards. */
.ll-page{--bg:#060a1c;--bg-2:#0b1330;--bg-glow-1:rgba(255,196,120,.07);--bg-glow-2:rgba(90,160,255,.09);
  --panel:rgba(255,255,255,.035);--line:rgba(190,210,255,.14);--muted:#a9b3d2;--soft:#dde4f6;
  --accent:#ffd08a;--accent-2:#7fc4ff}
.ll-page .eyebrow,.ll-page .ll-head .eyebrow{color:#ffd08a}
.ll-page .hero-show .eyebrow{color:#ffe6bd;text-shadow:0 0 16px rgba(255,190,110,.55)}
.ll-star{color:#fff3dc}
.ll-star::before,.ll-star::after{background:linear-gradient(90deg,transparent,rgba(255,214,150,.7))}
.ll-star .icon{filter:drop-shadow(0 0 8px rgba(255,226,170,.95)) drop-shadow(0 0 22px rgba(255,186,100,.55))}
.ll-page .display-2,.ll-finale .display{background:linear-gradient(180deg,#fff 40%,#ffe7c2);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 26px rgba(255,200,130,.18))}
.sparkles i{box-shadow:0 0 6px 1px rgba(255,240,210,.95),0 0 16px 4px rgba(255,196,120,.45)}

/* The kingdom keeps more of its own sunset colours */
.ll-page .hero-show .hero-media::after{background:linear-gradient(180deg,#2c3f9e,#5b3fc4 60%,#8a4fc8);opacity:.14}

/* Story: Vesper's arch stays violet (her colour); the facts and themes go midnight and gold */
.ll-page .story-tree{background:linear-gradient(135deg,rgba(255,214,150,.09),rgba(90,160,255,.05));box-shadow:inset 0 0 0 1px rgba(255,214,150,.18)}
.ll-page .medals li{background:radial-gradient(60% 60% at 50% 35%,#1d2e6b,#0b1433 75%);box-shadow:inset 0 0 0 1.5px rgba(255,214,150,.45),0 0 34px -10px rgba(255,190,110,.55)}
.ll-page .medals span{color:#ffdca6}
.ll-page .themes span{background:rgba(120,160,255,.1);box-shadow:inset 0 0 0 1px rgba(190,210,255,.22);color:#e8eeff}

/* The cast picture glows in the friends' colours, not one violet */
.ll-page .cast-glow::before{background:radial-gradient(30% 50% at 22% 55%,rgba(95,212,255,.32),transparent 70%),radial-gradient(30% 50% at 50% 45%,rgba(181,123,255,.3),transparent 70%),radial-gradient(30% 50% at 78% 55%,rgba(255,150,120,.3),transparent 70%)}
.ll-page .ll-cast .cast-art{box-shadow:0 0 0 1px rgba(190,210,255,.2),0 0 90px -24px rgba(120,170,255,.5),0 60px 100px -50px #000}

/* Episode cards: midnight base, each lit by its own colour */
.ll-page .ll-episodes .episode{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 16%,#0c1536),#0a1129 55%)}
.ll-page .ll-episodes .ep-num{background:#0c1536}

/* The album: night sky to sunset, like the art */
.ll-page .album{background:
  radial-gradient(60% 70% at 0% 0%,rgba(95,190,255,.28),transparent 70%),
  radial-gradient(70% 80% at 100% 100%,rgba(255,170,110,.42),transparent 70%),
  linear-gradient(135deg,#0f1d4d 0%,#26357f 45%,#8a4f8e 80%,#e0866f 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 60px 120px -50px rgba(224,134,111,.5)}
.ll-page .tracks{background:rgba(6,10,28,.42)}
.ll-page .track.is-current .track-n,.ll-page .player-btn{color:#1d2a63}

/* Lyric sheet, posters and finale: gold and blue light instead of violet */
.ll-page .ll-song .lyrics{background:radial-gradient(80% 90% at 50% 0%,rgba(255,196,120,.14),transparent 70%),rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,214,150,.2),0 40px 90px -40px rgba(120,170,255,.45);color:#fff4e2}
.ll-page .ll-posters .zoom a{box-shadow:0 0 0 1px rgba(190,210,255,.2),0 0 70px -24px rgba(120,170,255,.45),0 40px 70px -40px #000}
.ll-page .ll-finale{background:radial-gradient(55% 70% at 50% 100%,rgba(255,180,110,.22),transparent 70%),radial-gradient(70% 80% at 50% 70%,rgba(70,110,230,.3),transparent 75%)}
.ll-page .trailer-band{background:radial-gradient(70% 60% at 50% 60%,rgba(255,180,110,.08),transparent 70%)}
.ll-page .trailer-frame{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 120px -40px rgba(120,170,255,.45)}

/* Over the show's opening picture, the header sits on a band of dark night sky that fades into the picture,
   so the logo and menu never land on top of busy art. Once the page scrolls it turns into the solid bar. */
.ll-page .site-header:not(.is-solid):not(.menu-open)::before{content:"";position:absolute;inset:0 0 -70px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,10,28,.92) 0%,rgba(6,10,28,.78) 45%,rgba(6,10,28,.38) 75%,rgba(6,10,28,0) 100%)}
.ll-page .site-header{isolation:isolate}
/* ---------- Merch (31 Oct): everything coming soon, register interest ---------- */
.merch-head{position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(60% 70% at 50% 0%,rgba(255,190,120,.12),transparent 70%),radial-gradient(60% 80% at 50% 40%,rgba(70,110,230,.18),transparent 75%)}
.merch-head .wrap{position:relative;z-index:1}
.merch-head .lede{margin-inline:auto}
.merch-head .btn .icon{width:18px;height:18px}

.merch-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 clamp(26px,4vw,40px)}
.merch-filter button{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border:0;border-radius:999px;cursor:pointer;font:600 .9rem/1 var(--sans);color:var(--soft);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line);transition:background .2s,color .2s,box-shadow .2s}
.merch-filter button span{font-size:.75rem;color:var(--muted)}
.merch-filter button:hover{color:#fff;background:rgba(255,255,255,.09)}
.merch-filter button.is-on{color:#1b1408;background:linear-gradient(180deg,#ffe2ad,#f0bd6c);box-shadow:0 8px 24px -10px rgba(255,190,110,.7)}
.merch-filter button.is-on span{color:#5a3d12}

.merch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(14px,2vw,22px)}
.merch-item[hidden]{display:none}
.merch-card{display:flex;flex-direction:column;height:100%;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#101a3d,#0a1129);box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -40px #000;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.merch-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(255,214,150,.35),0 34px 70px -36px rgba(255,180,110,.45)}
.merch-art{position:relative;aspect-ratio:1;overflow:hidden;background:#0c1536}
.merch-art img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.merch-card:hover .merch-art img{transform:scale(1.04)}
.merch-badges{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.merch-soon{padding:7px 11px;border-radius:999px;font:700 .66rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#1b1408;background:linear-gradient(180deg,#ffe7b8,#f3c072);box-shadow:0 6px 18px -6px rgba(0,0,0,.6)}
.merch-tag{padding:7px 11px;border-radius:999px;font:700 .66rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,#8b5cf6,#5b2fc9);box-shadow:inset 0 0 0 1px rgba(255,214,150,.55),0 6px 18px -6px rgba(0,0,0,.6)}
.merch-copy{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.merch-copy .eyebrow{margin-bottom:8px;font-size:.68rem}
.merch-copy h2{font:400 1.3rem/1.15 var(--display);color:#fff;margin-bottom:6px}
.merch-copy p:not(.eyebrow){color:var(--muted);font-size:.93rem;margin-bottom:16px}
.merch-want{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;min-height:44px;padding:0 16px;border:0;border-radius:999px;cursor:pointer;font:600 .92rem/1 var(--sans);color:#fff;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,214,150,.35);transition:background .2s,box-shadow .2s,color .2s}
.merch-want .icon{width:17px;height:17px;color:#ffcf86}
.merch-want:hover{background:rgba(255,214,150,.12)}
.merch-want[aria-pressed="true"]{color:#1b1408;background:linear-gradient(180deg,#ffe2ad,#f0bd6c);box-shadow:0 8px 22px -10px rgba(255,190,110,.8)}
.merch-want[aria-pressed="true"] .icon{color:#c0392b}
.merch-note{margin:26px 0 0;text-align:center;font-size:.9rem}

.merch-bar{position:fixed;left:50%;bottom:18px;z-index:40;display:flex;align-items:center;gap:16px;padding:8px 8px 8px 22px;border-radius:999px;transform:translateX(-50%);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px rgba(255,214,150,.3),0 20px 50px -14px #000;font-weight:600;white-space:nowrap}
.merch-bar[hidden]{display:none}
.merch-bar .btn{min-height:44px}

.merch-interest{position:relative}
.interest-form{display:grid;gap:18px;padding:clamp(24px,4vw,40px);border-radius:28px;background:radial-gradient(80% 90% at 50% 0%,rgba(255,196,120,.1),transparent 70%),rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,214,150,.2),0 40px 90px -40px rgba(70,110,230,.45)}
.interest-label{margin:0 0 10px;font:600 .74rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#ffd08a}
.interest-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.chip-x{display:inline-flex;align-items:center;gap:8px;padding:8px 10px 8px 14px;border:0;border-radius:999px;cursor:pointer;font:600 .85rem/1 var(--sans);color:#1b1408;background:linear-gradient(180deg,#ffe7b8,#f3c072)}
.chip-x span{font-size:1.05rem;line-height:1;opacity:.7}
.interest-row{display:grid;grid-template-columns:1fr 1.4fr;gap:14px}
.field{display:grid;gap:8px}
.field > span{font-weight:600;font-size:.92rem}
.field em{font-style:normal;color:var(--muted);font-weight:400}
.field input,.field textarea{width:100%;padding:13px 15px;border:0;border-radius:14px;font:inherit;color:#fff;background:rgba(6,10,28,.6);box-shadow:inset 0 0 0 1px var(--line);resize:vertical}
.field input:focus,.field textarea:focus{outline:none;box-shadow:inset 0 0 0 2px #ffd08a}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;cursor:pointer}
.check input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:#f0bd6c}
.interest-privacy{margin:0;font-size:.85rem;color:var(--muted)}
.interest-form .btn{justify-self:start}
.interest-status{margin:0;min-height:1.4em;font-weight:600}
.interest-status[data-kind="ok"]{color:#a8f0c6}
.interest-status[data-kind="error"]{color:#ffb4a8}
@media (max-width:640px){.interest-row{grid-template-columns:1fr}.interest-form .btn{justify-self:stretch;justify-content:center}.merch-bar{left:12px;right:12px;transform:none;justify-content:space-between}}

/* ---------- Reveal on scroll ---------- */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .mq-track,.drift,.intro,.scroll-cue span,.nf-mark .mark,.media{animation:none!important}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}