@font-face{font-family:Cormorant;src:url(/assets/fonts/cormorant-garamond-latin-300-normal.woff2?v=719eedba4e) format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Cormorant;src:url(/assets/fonts/cormorant-garamond-latin-300-italic.woff2?v=1b2b00c0d7) format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:Jost;src:url(/assets/fonts/jost-latin-400-normal.woff2?v=03aaf59e66) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Jost;src:url(/assets/fonts/jost-latin-500-normal.woff2?v=b2cf900a39) format("woff2");font-weight:500;font-display:swap}

:root{--ink:#0b0908;--panel:#14100d;--ivory:#f4eadd;--dim:#b7a999;--rule:rgba(244,234,221,.16);--accent:#d9a55a;--glaze:#e0922a;
  --serif:Cormorant,"Iowan Old Style",Georgia,serif;--sans:Jost,"Avenir Next",system-ui,sans-serif;--gut:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.2,.7,.2,1)}
.jin{--accent:#f0c75e}.ryu{--accent:#a8ddfb}.kayden{--accent:#ff8d45}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--ivory);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
em{font-style:italic;color:var(--accent)}
p{margin:0}
:focus-visible{outline:2px solid var(--ivory);outline-offset:4px}
.skip{position:absolute;left:16px;top:-80px;z-index:20;background:var(--ivory);color:var(--ink);padding:10px 16px}
.skip:focus{top:12px}

/* Opening sequence (home page, entered from outside): the glaze drop falls, splashes, soft golden waves roll out,
   the wordmark surfaces and lifts out (gone at 1.57 s), then the last wave opens the site from 1.6 s (Bon 08.11: no frame
   where the logo and the hero overlap). Transforms and opacity only, about 2.5 s, tap or key skips. */
#intro{display:none;position:fixed;inset:0;z-index:1;grid-template-columns:100%;place-items:center;overflow:hidden;cursor:pointer;
  background:radial-gradient(120vmax 80vmax at 50% 58%,#1b1510 0,#120e0b 38%,var(--ink) 70%)}
.intro #intro{display:grid}
#intro>*{grid-area:1/1}
#intro .glow,#intro .wave,#intro .splash{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;will-change:transform,opacity}
#intro .glow{width:46vmin;height:46vmin;margin:-23vmin 0 0 -23vmin;opacity:0;
  background:radial-gradient(circle,rgba(240,199,94,.55) 0,rgba(224,146,42,.22) 32%,rgba(224,146,42,0) 66%);
  animation:glow 1.5s cubic-bezier(.16,1,.3,1) .52s both}
#intro .wave{width:76vmax;height:76vmax;margin:-38vmax 0 0 -38vmax;opacity:0;transform:scale(.04);
  background:radial-gradient(circle,rgba(240,199,94,0) 44%,rgba(240,199,94,.18) 47%,rgba(240,199,94,.6) 49%,rgba(255,226,150,1) 49.8%,rgba(240,199,94,.6) 50.6%,rgba(240,199,94,.18) 52.6%,rgba(240,199,94,0) 56%);
  animation:wave 1.6s cubic-bezier(.16,1,.3,1) both}
#intro .w1{animation-delay:.52s}
#intro .w2{animation-delay:.72s;background:radial-gradient(circle,rgba(240,199,94,0) 43%,rgba(240,199,94,.14) 46.5%,rgba(236,180,70,.7) 49.6%,rgba(240,199,94,.14) 52.8%,rgba(240,199,94,0) 57%)}
#intro .w3{animation-delay:.94s;background:radial-gradient(circle,rgba(240,199,94,0) 44%,rgba(240,199,94,.1) 47%,rgba(224,146,42,.5) 49.8%,rgba(240,199,94,.1) 52.5%,rgba(240,199,94,0) 56%)}
#intro .w4{animation-delay:1.18s;background:radial-gradient(circle,rgba(240,199,94,0) 45%,rgba(224,146,42,.3) 49.8%,rgba(240,199,94,0) 55%)}
#intro .splash{width:9px;height:9px;margin:-4px 0 0 -4px;background:radial-gradient(circle at 35% 35%,#ffe3a1,#e0922a 70%);opacity:0;
  animation:splash .72s cubic-bezier(.2,.8,.3,1) .5s both}
#intro .s1{--dx:-52px;--dy:-62px}#intro .s2{--dx:-22px;--dy:-98px;width:6px;height:6px;animation-delay:.53s}#intro .s3{--dx:10px;--dy:-84px;width:8px;height:8px}
#intro .s4{--dx:48px;--dy:-70px;width:7px;height:7px;animation-delay:.52s}#intro .s5{--dx:30px;--dy:-40px;width:5px;height:5px;animation-delay:.56s}
#intro .drop{width:clamp(72px,18vw,128px);animation:fall .52s cubic-bezier(.55,0,1,.65) both,land .28s cubic-bezier(.3,0,.2,1) .52s both}
#intro .drop img{width:100%;height:auto;filter:drop-shadow(0 18px 24px rgba(224,146,42,.35))}
#intro .word{width:clamp(180px,42vw,320px);height:auto;margin-top:clamp(150px,34vw,230px);animation:word .85s cubic-bezier(.16,1,.3,1) .72s both}
#ring{display:none;position:fixed;left:50%;top:50%;z-index:3;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;border-radius:50%;pointer-events:none;
  transform:scale(0);will-change:transform,opacity;
  background:radial-gradient(circle,rgba(240,199,94,0) 48.4%,rgba(240,199,94,.28) 49.3%,rgba(236,180,70,.95) 49.9%,rgba(240,199,94,.3) 50.5%,rgba(240,199,94,0) 51.6%)}
.intro #ring{display:block;animation:ring .9s cubic-bezier(.16,1,.3,1) 1.6s both}
.intro .site{position:relative;z-index:2;animation:reveal .9s cubic-bezier(.16,1,.3,1) 1.6s both}
.intro-done #intro,.intro-done #ring{display:none}
@keyframes fall{0%{transform:translateY(-52vh) scale(.92,1.1);opacity:0}12%{opacity:1}100%{transform:translateY(0) scale(.96,1.08);opacity:1}}
@keyframes land{0%{transform:scale(.96,1.08);opacity:1}38%{transform:scale(1.28,.66);opacity:.95}100%{transform:scale(1.7,.12);opacity:0}}
@keyframes splash{0%{transform:translate(0,0) scale(.5);opacity:0}10%{opacity:1}50%{transform:translate(var(--dx),var(--dy)) scale(1);opacity:.95}100%{transform:translate(calc(var(--dx)*1.35),calc(var(--dy)*-.35)) scale(.3);opacity:0}}
@keyframes glow{0%{transform:scale(.2);opacity:0}25%{opacity:1}100%{transform:scale(1.5);opacity:0}}
@keyframes wave{0%{transform:scale(.04);opacity:0}8%{opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes word{0%{opacity:0;transform:translateY(16px) scale(.97)}40%{opacity:1;transform:none}65%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-14px) scale(1.02)}}
@keyframes ring{0%{transform:scale(0);opacity:1}80%{opacity:.7}100%{transform:scale(1);opacity:0}}
@keyframes reveal{from{clip-path:circle(0px at 50vw 50vh)}to{clip-path:circle(75vmax at 50vw 50vh)}}

/* Header floats over the art */
.top{position:absolute;inset:0 0 auto;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:max(18px,env(safe-area-inset-top)) var(--gut) 18px}
.mark img{height:26px;width:auto}
.mark{display:block;padding:9px 0}
.top nav{display:flex;gap:clamp(14px,3vw,36px)}
.top nav a{font:500 12px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;padding:16px 0;
  color:var(--ivory);opacity:.82;transition:opacity .3s}
.top nav a:hover,.top nav a[aria-current]{opacity:1}
.top nav a[aria-current]{color:var(--accent)}

.eyebrow,.no{font:500 12px/1.4 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
h1,h2,.big,.next-name,.name{font-family:var(--serif);font-weight:300;letter-spacing:-.01em}
h1 em,h2 em,.next-name em,.name em{padding-right:.04em}
h1{font-size:clamp(58px,15vw,168px);line-height:.92;margin:16px 0 18px}
.big{font-size:clamp(34px,5.4vw,68px);line-height:1.1;max-width:18em}

/* Hero */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:flex-end;isolation:isolate}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,9,8,.62) 0,rgba(11,9,8,0) 22%,rgba(11,9,8,0) 42%,rgba(11,9,8,.86) 80%,var(--ink) 100%)}
.hero .full,.hero-media,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .full{animation:drift 22s ease-out both}
.hero-video{object-position:50% 20%}
.hero-text{position:relative;z-index:2;width:100%;padding:0 var(--gut) clamp(36px,7vh,76px);animation:rise 1.4s var(--ease) both .15s}
.intro .hero-text{animation-delay:2s}
.sub{font:300 clamp(23px,3.4vw,36px)/1.2 var(--serif);margin-bottom:28px}
.quote{font-style:italic}
/* Disclosure beside the first button, plus the hero clip's play/pause on the home page */
.hero-foot{display:flex;align-items:center;gap:20px;margin-top:18px}
.note{font:400 14px/1.5 var(--sans);color:var(--ivory);opacity:.8;max-width:30em}
.vbtn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;
  border:1px solid rgba(244,234,221,.4);background:rgba(11,9,8,.55);color:var(--ivory);cursor:pointer;backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);transition:background .3s,border-color .3s}
.vbtn:hover{background:rgba(11,9,8,.8);border-color:var(--ivory)}
.vbtn svg{fill:currentColor}
.vbtn .q,.vbtn.playing .p{display:none}
.vbtn.playing .q{display:block}
@keyframes drift{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* The one call to action */
.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:58px;min-width:min(100%,320px);padding:0 22px;
  font:500 clamp(11px,3.4vw,13px)/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--ink);background:var(--accent);
  border-radius:2px;transition:background .35s,gap .35s,transform .35s}
.cta i{font-style:normal;font-size:17px;letter-spacing:0}
.cta:hover{background:var(--ivory);gap:38px}
.cta:active{transform:scale(.98)}

/* Cast cards */
.cast{padding:clamp(56px,10vw,120px) var(--gut) clamp(40px,8vw,96px)}
.cast>.eyebrow{margin-bottom:28px}
.cards{display:grid;gap:clamp(18px,3vw,28px)}
.slot{position:relative}
.slot .vbtn{position:absolute;top:12px;right:12px;z-index:2}
.card{position:relative;display:block;text-decoration:none;isolation:isolate}
.media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:var(--panel)}
.media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media video{object-position:50% 25%;opacity:0;transition:opacity .5s}
.media img{transition:transform 1.6s var(--ease)}
.card.on .media video{opacity:1}
.card:hover .media img{transform:scale(1.04)}
.media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,9,8,0) 50%,rgba(11,9,8,.78) 100%);pointer-events:none}
.card-text{position:absolute;inset:auto 0 0;z-index:1;display:block;padding:0 clamp(18px,3vw,28px) clamp(20px,3vw,28px)}
.card .no{display:block;margin-bottom:8px}
.name{display:block;font-size:clamp(38px,7vw,58px);line-height:1;margin-bottom:8px}
.card .quote{display:block;font:italic 300 clamp(21px,2.4vw,26px)/1.25 var(--serif);margin-bottom:16px;text-shadow:0 1px 14px rgba(0,0,0,.55)}
.enter{display:inline-flex;gap:12px;align-items:center;min-height:40px;font:500 12px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  border-bottom:1px solid var(--rule)}
.enter i{font-style:normal;font-size:16px;letter-spacing:0;transition:transform .35s}
.card:hover .enter i{transform:translateX(8px)}

/* Character pages */
.profile{padding:clamp(70px,12vw,160px) var(--gut) clamp(50px,8vw,100px);display:grid;gap:40px}
.profile .body{max-width:34em;margin-top:26px;color:var(--dim);font-size:18px}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px;margin:52px 0 0;border-top:1px solid var(--rule)}
.facts div{padding:18px 0;border-bottom:1px solid var(--rule)}
.facts dt{font:500 11px/1.4 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.facts dd{margin:0;font:300 clamp(22px,2.8vw,30px)/1.15 var(--serif)}
.preview{position:relative;width:min(100%,360px);margin:0 auto;aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:var(--panel);
  box-shadow:0 30px 80px rgba(0,0,0,.5)}
.preview-video{width:100%;height:100%;object-fit:cover}
.preview .vbtn{position:absolute;right:12px;bottom:12px}
/* The subscription button again, straight after the preview */
.mid{padding:0 var(--gut) clamp(50px,8vw,100px);display:grid;gap:14px;justify-items:start}
.mid-line{font:300 clamp(26px,3.6vw,40px)/1.15 var(--serif);max-width:16em;margin-bottom:14px}
/* Gallery: one lead image, then the other two as a pair (phones); lead left, pair stacked right (desktop) */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.gallery img:first-child{grid-column:1/-1;aspect-ratio:4/5}
.label{padding:28px var(--gut) 0;font-size:14px;color:var(--dim)}
.next{display:block;padding:44px var(--gut) 52px;text-decoration:none;border-top:1px solid var(--rule);margin-top:40px;transition:background .4s}
.next:hover{background:var(--panel)}
.next-name{display:block;margin-top:12px;font-size:clamp(40px,7vw,84px);line-height:1}
.next-name i{font:400 .55em var(--sans);transition:margin .35s}
.next:hover .next-name i{margin-left:.25em}
.next.jin em{color:#f0c75e}.next.ryu em{color:#a8ddfb}.next.kayden em{color:#ff8d45}

/* Footer: the call to action again, the social row, the label */
.foot{border-top:1px solid var(--rule);color:var(--dim);font-size:13px}
.close{padding:clamp(70px,12vw,150px) var(--gut) clamp(40px,6vw,70px);color:var(--ivory)}
.close .big{margin:18px 0 34px}
.find{padding:0 var(--gut) clamp(40px,6vw,70px)}
.social{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.social a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--rule);border-radius:999px;
  text-decoration:none;color:var(--ivory);font-size:14px;transition:border-color .3s,background .3s}
.social a:hover{border-color:var(--accent);background:var(--panel)}
.net{font:500 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.legal{padding:0 var(--gut) 8px}
.legal:last-child{padding-bottom:calc(44px + env(safe-area-inset-bottom))}
.legal strong{font-weight:500;color:var(--ivory)}

@media (min-width:820px){
  .top nav a{font-size:13px}
  .mark img{height:32px}
  .home-hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;height:auto;min-height:100vh;padding:clamp(90px,12vh,140px) var(--gut) clamp(50px,8vh,90px);gap:5vw}
  .home-hero::after{display:none}
  .home-hero .hero-media{position:relative;inset:auto;width:min(100%,420px);height:auto;aspect-ratio:9/16;justify-self:center;border-radius:8px;overflow:hidden;
    box-shadow:0 40px 120px rgba(0,0,0,.6),0 0 0 1px var(--rule)}
  .home-hero .hero-video{position:absolute;inset:0}
  .home-hero .hero-text{padding:0}
  .home-hero .sub{max-width:16em}
  .cards{grid-template-columns:repeat(3,1fr)}
  .name{font-size:clamp(34px,3.6vw,52px)}
  .profile{grid-template-columns:1.1fr .9fr;column-gap:8vw;align-items:center}
  .profile .body{margin-top:26px}
  .facts{margin-top:40px}
  .preview{margin:0 0 0 auto}
  .cta{padding:0 24px;gap:28px}
  .gallery{grid-template-columns:1.25fr 1fr}
  .gallery img{aspect-ratio:3/4}
  .gallery img:first-child{grid-column:auto;grid-row:span 2;height:100%;aspect-ratio:auto!important}
  .gallery.wide{grid-template-columns:1fr 1fr}
  .gallery.wide img:first-child{grid-column:1/-1;grid-row:auto;height:auto;aspect-ratio:3/1!important}
  .close{display:grid;grid-template-columns:1fr auto;grid-template-areas:"eye eye" "big cta";align-items:end;column-gap:6vw}
  .close .eyebrow{grid-area:eye}.close .big{grid-area:big;margin-bottom:0}.close .cta{grid-area:cta;justify-self:end}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .intro #intro,.intro #ring{display:none}
  .hero .full{transform:none}
}