:root{font-family:"Segoe UI","Yu Gothic UI",Meiryo,sans-serif;color:#e9e5d9;background:#1c211e;font-synthesis:none;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;padding:0 40px 64px;background:radial-gradient(120% 80% at 50% -10%,#242c27 0%,#1c211e 62%)}
a{color:inherit;text-decoration:none}

header{padding:32px 0 0}
.wordmark{font-size:29px;font-weight:650;letter-spacing:7px}
.wordmark span{display:block;font-size:9px;font-weight:400;letter-spacing:2.1px;color:#b6b8ac;margin-top:9px}

.intro{margin:76px 0 40px}
.eyebrow{font-size:9px;letter-spacing:2.4px;color:#c5ba92;display:flex;gap:9px;align-items:center}
.eyebrow i{height:5px;width:5px;border-radius:50%;background:#d8b669;box-shadow:0 0 14px #ffc564}
.intro h1{font-size:27px;letter-spacing:3px;font-weight:450;margin:17px 0 11px}
.intro p{font-size:12px;color:#9fa79d;letter-spacing:2px;margin:0}

#grid{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}

.card{flex:0 0 232px;display:flex;flex-direction:column;border:1px solid #d5dec21f;border-radius:17px;background:linear-gradient(140deg,#253029d6,#161e1bcf);overflow:hidden;transition:.25s}
.card:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent);transform:translateY(-4px);box-shadow:0 18px 50px #0000005e}

.shot{position:relative;z-index:0;aspect-ratio:3/4;overflow:hidden;background:#1a201d}
/* A zoomed-out character leaves a strip above and below its own screenshot;
   a blurred cover-fit copy of the same image fills it with the same ground. */
.shot::before{content:'';position:absolute;inset:0;background:var(--img) center/cover;filter:blur(26px) brightness(.55) saturate(.85);transform:scale(1.25)}
.shot img{position:absolute;z-index:1;width:var(--iw);max-width:none;height:auto;left:var(--ix);top:var(--iy);transition:.5s}
.card:hover .shot img{transform:scale(1.04)}
.shot::after{content:'';position:absolute;z-index:2;inset:auto 0 0;height:44%;background:linear-gradient(#0000,#141b18f2)}

.meta{padding:16px 18px 20px;margin-top:-42px;position:relative}
.line{display:flex;align-items:baseline;gap:9px}
.line b{font-size:9px;font-weight:500;letter-spacing:1px;color:var(--accent);opacity:.75}
.name{font-size:17px;font-weight:650;letter-spacing:4.5px}
.role{font-size:8px;letter-spacing:2px;color:#8e988a;margin-top:7px}
.meta h2{font-size:14px;font-weight:450;letter-spacing:1.6px;margin:15px 0 8px}
.meta p{font-size:11px;letter-spacing:1.2px;color:#9fa79d;margin:0}

footer{margin-top:44px;font-size:9px;color:#a1aa99;letter-spacing:.6px}
footer b{margin:0 8px;font-weight:400;color:#626c61}
a:focus-visible{outline:2px solid #e0cb87;outline-offset:3px}

@media(max-width:760px){.card{flex:0 0 calc(50% - 8px)}}
@media(max-width:800px){
  body{padding:0 22px 48px}
  .wordmark{font-size:23px;letter-spacing:5px}.wordmark span{font-size:7px}
  .intro{margin:48px 0 28px}.intro h1{font-size:19px;letter-spacing:1px}.intro p{font-size:11px}
  #grid{gap:14px}
}

/* ---- Teaser entrance ---- */
#teaser{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:24px;position:relative;overflow:hidden;margin:0 -40px;padding:40px}
#motes{position:absolute;inset:0;pointer-events:none}
#motes i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--mc,#ffd98c);box-shadow:0 0 14px var(--ms,#ffc564);opacity:0;animation:moteRise linear infinite}
@keyframes moteRise{0%{translate:0 12vh;opacity:0}18%{opacity:.75}82%{opacity:.5}100%{translate:2vw -68vh;opacity:0}}
.t-copy{position:relative;z-index:1;max-width:640px;justify-self:end;text-align:left}
.t-eyebrow{font-size:10px;letter-spacing:3px;color:#c5ba92;display:flex;gap:9px;align-items:center}
.t-eyebrow i{height:5px;width:5px;border-radius:50%;background:#d8b669;box-shadow:0 0 14px #ffc564}
.t-wordmark{font-size:clamp(34px,5.4vw,84px);font-weight:650;letter-spacing:.16em;margin:26px 0 18px;line-height:1;white-space:nowrap}
.t-wordmark span{display:inline-block;opacity:0;animation:letterLight 1.1s forwards;animation-delay:calc(.15s + var(--i)*.09s)}
@keyframes letterLight{0%{opacity:0;transform:translateY(16px);text-shadow:none}55%{opacity:1;text-shadow:0 0 28px #ffc56480}100%{opacity:1;transform:none;text-shadow:0 0 10px #ffc56426}}
.t-lead{font-size:clamp(16px,1.8vw,22px);letter-spacing:4px;margin:0 0 20px;color:#e9e5d9;opacity:0;animation:fadeUp 1s 1.3s forwards}
.t-sub{font-size:12px;line-height:2.2;letter-spacing:1.6px;color:#9fa79d;margin:0 0 34px;opacity:0;animation:fadeUp 1s 1.7s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#enter{background:#c4b78020;border:1px solid #d3c28c50;color:#e9dba9;border-radius:26px;padding:13px 44px;font:inherit;font-size:13px;letter-spacing:4px;cursor:pointer;opacity:0;animation:fadeUp 1s 2.1s forwards;transition:background .2s}
#enter:hover{background:#c4b78038}
.t-stage{position:relative;z-index:1;justify-self:start;width:min(360px,54vh,80vw)}
.t-shot{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:20px;background:#121714;border:1px solid #d5dec21a}
.t-shot img{position:absolute;max-width:none;height:auto;opacity:0;filter:brightness(.15) saturate(.5);transition:opacity 1.6s,filter 2.6s}
.t-shot img.lit{filter:brightness(1) saturate(1)}
.t-vignette{position:absolute;inset:0;z-index:2;background:radial-gradient(75% 68% at 50% 42%,#0000 55%,#10151277 84%,#101512d9 100%);pointer-events:none}
.t-caption{margin-top:18px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;opacity:0;transform:translateY(8px);transition:opacity .9s,transform .9s}
.t-caption.show{opacity:1;transform:none}
.t-caption b{font-size:10px;font-weight:500;letter-spacing:1px;color:#8e988a}
.t-name{font-size:20px;font-weight:650;letter-spacing:5px}
.t-eye{font-size:9px;letter-spacing:2px;color:#8e988a}
.t-title{width:100%;font-size:12px;letter-spacing:2px;color:#b9c1b3}
#gallery{padding-top:26px}
@media(max-width:900px){
 #teaser{grid-template-columns:1fr;margin:0 -22px;padding:56px 22px 40px;gap:34px}
 .t-copy{justify-self:start}
 .t-stage{justify-self:center}
 .t-sub br{display:none}
}
@media(prefers-reduced-motion:reduce){
 .t-wordmark span,.t-lead,.t-sub,#enter{animation:none;opacity:1}
 #motes i{animation:none;opacity:.4}
}

/* ---- Story ---- */
#story{max-width:860px;margin:0 auto;padding:16vh 0 10vh;text-align:center}
.s-eyebrow{font-size:10px;letter-spacing:4px;color:#c5ba92;display:flex;gap:9px;align-items:center;justify-content:center;margin-bottom:14vh}
.s-eyebrow i{height:5px;width:5px;border-radius:50%;background:#d8b669;box-shadow:0 0 14px #ffc564}
.s-line{font-size:clamp(16px,2.2vw,24px);font-weight:400;letter-spacing:3px;line-height:2.3;color:#d9d5c6;margin:0 0 16vh}
.s-key{font-size:clamp(19px,2.7vw,30px);color:#e9e5d9}
.s-key b{font-weight:650;letter-spacing:6px;color:#e9dba9;text-shadow:0 0 22px #ffc56444}
.s-arrow{font-size:20px;color:#8e988a;margin-top:-6vh;padding-bottom:4vh}
.s-line,.s-arrow,#story .s-eyebrow{opacity:0;transform:translateY(22px);transition:opacity 1.4s ease,transform 1.4s ease}
.s-line.show,.s-arrow.show,#story .s-eyebrow.show{opacity:1;transform:none}
@media(max-width:700px){.s-br{display:none}.s-line{letter-spacing:1.5px;margin-bottom:12vh}}
@media(prefers-reduced-motion:reduce){.s-line,.s-arrow,#story .s-eyebrow{opacity:1;transform:none;transition:none}}

/* Story act two: the light cools where the system has no reach, and warms
   again where the holders move. */
.s-dark{color:#9aa8ad}
.s-dark em{font-style:normal;color:#c3d8e0;letter-spacing:4px;text-shadow:0 0 18px #3ec2ff2e}
.s-hope{color:#ded8c4}
.s-hope b{font-weight:650;letter-spacing:4px;color:#e9dba9;text-shadow:0 0 18px #ffc56444}

/* ---- Screening controls ---- */
.t-actions{display:flex;gap:12px;opacity:0;animation:fadeUp 1s 2.1s forwards}
.t-actions #enter{animation:none;opacity:1}
#play{background:#e9dba9;border:1px solid #e9dba9;color:#241f10;border-radius:26px;padding:13px 34px;font:inherit;font-size:13px;letter-spacing:3px;cursor:pointer;transition:.2s}
#play:hover:not(:disabled){background:#fff0c4}
#play:disabled{opacity:.55;cursor:default}
#sound{position:fixed;top:26px;right:28px;z-index:9;width:44px;height:44px;border-radius:50%;background:#1d242246;border:1px solid #ffffff25;color:#8e988a;font-size:17px;cursor:pointer;backdrop-filter:blur(10px);transition:.2s}
#sound.on{color:#e9dba9;border-color:#d3c28c60;text-shadow:0 0 12px #ffc56466}
@media(max-width:700px){.t-actions{flex-wrap:wrap}#sound{top:18px;right:18px}}

/* ---- Cinema ---- */
#cinema{position:fixed;inset:0;background:#050706;z-index:50;opacity:0;transition:opacity 1.1s;cursor:pointer}
#cinema.on{opacity:1}
.c-bar{position:absolute;left:0;right:0;height:9vh;background:#000;z-index:6}
.c-top{top:0}.c-bottom{bottom:0}
.c-skip{position:absolute;right:26px;bottom:calc(9vh + 14px);z-index:7;font-size:10px;letter-spacing:2px;color:#6f7a70}
.c-shot{position:absolute;inset:9vh 0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .8s ease}
.c-shot.show{opacity:1}
.c-text{max-width:900px;padding:0 28px;text-align:center;font-size:clamp(18px,2.6vw,30px);letter-spacing:3px;line-height:2.3;color:#ddd8c8}
.c-text.c-cold{color:#9aa8ad}
.c-text.c-cold em{font-style:normal;color:#c3d8e0;text-shadow:0 0 18px #3ec2ff2e}
.c-text.c-hope{color:#ded8c4}
.c-text.c-hope b{color:#e9dba9;text-shadow:0 0 18px #ffc56444}
.c-text b{font-weight:650;letter-spacing:5px;color:#e9dba9}
.c-title{font-size:clamp(38px,6vw,84px);font-weight:650;letter-spacing:.2em;color:#e9e5d9;text-shadow:0 0 30px #ffc56433}
.c-title span{display:block;font-size:11px;letter-spacing:8px;color:#c5ba92;margin-top:22px;font-weight:400}
.c-frame{position:relative;margin:0;width:min(46vh,84vw);text-align:center}
.c-crop{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:8px;background:#0c100e}
.c-crop img{position:absolute;max-width:none;height:auto;transform-origin:50% 42%;animation:kenburns 7s ease-out forwards}
@keyframes kenburns{from{scale:1}to{scale:1.1}}
.c-crop::after{content:'';position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 42%,#0000 52%,#05070699 86%,#050706 100%)}
.c-frame figcaption{margin-top:14px;font-size:12px;letter-spacing:5px;color:#b9c1b3}
.c-frame figcaption b{font-size:9px;letter-spacing:1px;color:#75806f;margin-right:8px}
.g-cold .c-crop img{filter:brightness(.68) saturate(.35) hue-rotate(165deg)}
.g-cold figcaption{color:#8fa4ac}
.g-swell .c-crop img{animation:kenburns-swell 7s ease-in forwards}
@keyframes kenburns-swell{from{scale:1}to{scale:1.28}}
.g-flicker .c-crop img{animation:kenburns 7s ease-out forwards,flick 2.2s steps(2) infinite}
@keyframes flick{0%,78%{opacity:1}82%{opacity:.55}86%{opacity:1}92%{opacity:.7}100%{opacity:1}}
.g-rise .c-crop img{animation:kenburns-rise 7s ease-out forwards}
@keyframes kenburns-rise{from{scale:1.12;translate:0 2.5%}to{scale:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.c-crop img{animation:none!important}.c-shot{transition-duration:.3s}}

.c-url{display:block;font-size:13px;letter-spacing:3px;color:#8e988a;margin-top:26px;font-weight:400}

.c-who{display:flex;align-items:baseline;justify-content:center;gap:12px}
.c-mode{font-style:normal;font-size:10px;letter-spacing:2px;color:#8fd8f0;border:1px solid #3ec2ff55;border-radius:12px;padding:3px 11px;background:#3ec2ff14}
.g-cold .c-mode{color:#9fb8c4;border-color:#9fb8c433}
.c-desc{display:block;margin-top:9px;font-size:11px;letter-spacing:2px;color:#8e988a}

/* The story now lives in the film; the section stays only as its script. */
#story{display:none}

/* Live inserts fill their frame edge to edge, letting the motion carry. */
.c-live .c-crop{aspect-ratio:1/1}
.c-live video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.g-cold .c-live video{filter:brightness(.68) saturate(.35) hue-rotate(165deg)}

/* PIP's lane: a strip across the foot of the teaser, behind the copy. */
#courier{position:absolute;left:0;right:0;bottom:0;height:min(34vh,290px);z-index:2;opacity:0;transition:opacity 1.6s ease;pointer-events:none}
#courier.ready{opacity:1}
#courier canvas{display:block;width:100%;height:100%}
.t-copy,.t-stage{z-index:1}
@media(max-width:900px){#courier{height:min(24vh,190px)}}
@media(prefers-reduced-motion:reduce){#courier{display:none}}
/* ---- Architecture links: two quiet doorway cards under the character grid. */
#arch{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}
.arch-link{flex:1 1 300px;max-width:420px;text-decoration:none;color:inherit;background:#ffffff08;border:1px solid #ffffff14;border-radius:14px;padding:18px 20px;transition:.25s}
.arch-link:hover{background:#ffffff10;border-color:#d8b66955}
.arch-link b{font-size:10px;color:#c5ba92;letter-spacing:2px}
.arch-link .a-name{display:block;font-size:17px;letter-spacing:2px;margin:8px 0 3px}
.arch-link .a-role{display:block;font-size:9px;letter-spacing:2px;color:#9fa79d}
.arch-link p{font-size:11px;line-height:1.7;color:#9fa79d;margin:10px 0 0}
@media(max-width:700px){.arch-link{flex-basis:100%}}
#worldnav{display:flex;justify-content:center}
.world-link{flex-basis:100%;max-width:856px}