@font-face{font-family:Archivo;src:url('assets/archivo.woff2') format('woff2');font-display:swap}@font-face{font-family:Korean;src:url('assets/notosanskr.woff2') format('woff2');font-display:swap}*{box-sizing:border-box}html{background:#101214;scroll-behavior:smooth}body{margin:0;color:#e7e8e6;font-family:Archivo,Korean,sans-serif;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #e8e8e5;outline-offset:6px}button:disabled{opacity:.25;cursor:default}.skip{position:fixed;z-index:99;left:16px;top:-100px;background:#ddd;color:#111;padding:12px}.skip:focus{top:16px}.world{position:fixed;inset:0;overflow:hidden;pointer-events:none;background:#101214;z-index:-1}.ambient{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,#292e31 0,transparent 55%)}.liquid{position:absolute;width:140%;height:160%;left:-20%;top:-25%;opacity:.6;will-change:transform}.floor{position:absolute;inset:-10%;background:radial-gradient(ellipse at 47% 51%,#747b7e40,transparent 52%),repeating-linear-gradient(97deg,transparent 0 2px,#ffffff02 3px 4px),linear-gradient(168deg,#101214 18%,#373d40 50%,#101315 88%);opacity:0;transform:perspective(700px) rotateX(20deg) scale(1.3);will-change:opacity}.shade{position:absolute;inset:0;background:radial-gradient(ellipse at 45% 45%,transparent 25%,#05060899 100%)}.intro{height:100svh;position:fixed;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:5;pointer-events:none;transition:opacity .65s}.intro p{font-size:clamp(42px,7vw,100px);font-weight:500;letter-spacing:-.05em;margin:0}.intro small{font-size:11px;letter-spacing:.15em;margin-top:24px;color:#959b9e}.intro.finished{opacity:0}.story{height:145svh;position:relative}.copy{position:fixed;left:14vw;top:50%;width:min(700px,72vw);transform:translateY(-42%);opacity:0;pointer-events:none;will-change:transform,opacity}.eyebrow{font-size:12px;letter-spacing:.12em;color:#a4aaae}.copy h1,.copy h2{font-weight:500;font-size:clamp(36px,5.2vw,72px);line-height:1.05;letter-spacing:-.045em;margin:30px 0}.role{font-size:clamp(20px,2.4vw,30px);margin:0 0 12px;letter-spacing:-.02em}.disciplines{font-size:16px;color:#a3aaad}.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 32px;max-width:470px;margin-top:40px;font-size:19px;color:#c2c6c6}.education h2{font-family:Korean,sans-serif;font-size:32px;letter-spacing:-.05em;margin-bottom:38px}.degree{display:flex;gap:42px;border-top:1px solid #70777b50;padding:22px 0;max-width:560px;line-height:1.6}.degree time{font-size:16px;padding-top:4px;color:#a5acaf}.degree p{margin:0;font-family:Korean,sans-serif;font-size:18px}.degree p span{color:#adb3b4;font-size:16px}.archive{height:570svh;position:relative}.archive>h2{position:fixed;top:5vh;left:0;width:100%;text-align:center;font-size:13px;font-weight:400;letter-spacing:.4em;opacity:0;margin:0;pointer-events:none}.stage{position:fixed;inset:0;perspective:1800px;perspective-origin:50% 35%;opacity:0;pointer-events:none;transform-style:preserve-3d}.plate{position:absolute;width:clamp(180px,22vw,350px);height:clamp(180px,22vw,350px);left:50%;top:47%;margin-left:calc(clamp(180px,22vw,350px)/-2);margin-top:calc(clamp(180px,22vw,350px)/-2);padding:0;border:0;background:transparent;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.7,.2,1),opacity .45s;pointer-events:auto}.face{position:absolute;inset:0;background:linear-gradient(140deg,#1c2022,#080a0c 65%,#1b1f20);border:1px solid #a9aca9;border-left:3px solid #d3d5d2;box-shadow:-3px 0 0 #676d6f,-4px 0 0 #202426,0 24px 32px -20px #000;backface-visibility:hidden;overflow:hidden}.face:before{content:'';position:absolute;inset:0;background:linear-gradient(125deg,transparent 15%,#d8dfde12 45%,transparent 62%)}.front svg{width:78%;height:78%;position:absolute;inset:4% 11%}.front .number{position:absolute;left:18px;bottom:18px;font-size:22px;font-weight:400}.front .view{position:absolute;right:18px;bottom:23px;font-size:9px;letter-spacing:.1em;color:#bec3c4;opacity:0}.plate.selected .view{opacity:1}.back{transform:rotateY(180deg);display:flex;align-items:center;justify-content:center;color:#dce1df;font-size:13px;letter-spacing:.15em}.plate:after{content:'';position:absolute;top:102%;left:0;width:100%;height:65%;background:linear-gradient(#a6b0b023,transparent);transform:scaleY(-1);filter:blur(12px);pointer-events:none}.archive-help{position:fixed;left:0;right:0;bottom:16vh;text-align:center;opacity:0;pointer-events:none}.archive-help>span{font-size:12px;letter-spacing:.14em}.archive-help p{font-size:12px;color:#8b9499;margin:10px 0}.controls{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:14px}.controls span{font-size:9px;letter-spacing:.12em;color:#9aa3a7}.controls button{border:1px solid #737d8155;border-radius:50%;background:#12161966;width:36px;height:36px;pointer-events:auto}.progress{position:fixed;bottom:6vh;left:50%;width:min(430px,58vw);transform:translateX(-50%);opacity:0;transition:opacity .4s;z-index:20;pointer-events:none}.progress-heading{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.13em;margin-bottom:14px;color:#b9c0c2}.track{height:2px;background:#a4ada333}#fill{height:100%;width:0;background:#e1e4df;transition:width .15s linear}#scroll-hint{position:fixed;bottom:5.6vh;right:4vw;z-index:20;background:none;border:0;font-size:10px;letter-spacing:.15em;padding:12px;opacity:0;transition:opacity .4s}footer{min-height:60svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}footer>span{font-size:10px;letter-spacing:.18em;color:#939da0}footer a{font-size:clamp(18px,3vw,36px);letter-spacing:-.03em;color:#e3e5e2;text-decoration:none}.video-panel{position:fixed;inset:10vh 10vw;z-index:30;background:#080b0df5;border:1px solid #7f898b;box-shadow:0 20px 100px #000c;opacity:0;transition:opacity .35s;display:flex;align-items:center;justify-content:center}.video-panel[hidden]{display:none}.video-panel.visible{opacity:1}#close{position:absolute;top:24px;right:24px;background:none;border:0;font-size:11px;letter-spacing:.13em;padding:10px}.placeholder{text-align:center;padding:24px}.placeholder>span{font-size:11px;letter-spacing:.18em;color:#899497}.placeholder h2{font-size:clamp(30px,5vw,64px);font-weight:500;letter-spacing:-.04em}.placeholder p{font-size:16px}.placeholder small{color:#778287;font-size:12px}@media(max-width:600px){.copy{left:8vw;width:84vw}.copy h1,.copy h2{font-size:40px}.education h2{font-size:27px}.tools{font-size:16px;gap:17px}.degree{gap:24px}.degree p{font-size:15px}.degree p span{font-size:14px}.degree time{font-size:13px}.plate{width:200px;height:200px;margin-left:-100px;margin-top:-100px}.archive-help{bottom:21vh}.archive>h2{top:7vh;font-size:11px;letter-spacing:.28em}.progress{width:66vw;left:8vw;transform:none;bottom:7vh}.progress-heading{font-size:10px}#scroll-hint{right:3vw;bottom:5.2vh;font-size:8px;width:65px;line-height:1.8}.video-panel{inset:13vh 5vw}.placeholder p{font-size:13px}.placeholder small{font-size:10px}.front .number{font-size:18px}.front .view{font-size:8px}.liquid{width:220%;left:-70%}.intro p{font-size:44px}footer a{font-size:21px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:0s!important;animation:none!important}.liquid{will-change:auto}.plate{will-change:auto}}

.procedural-fallback{display:none}.photo-material{display:none}

.intro{opacity:0}.intro.loading{opacity:1}.intro.finished{opacity:0}.asset-loader{width:100px;height:1px;background:#9ba4a45c;margin-top:18px}.asset-loader:after{content:"";display:block;width:40%;height:1px;background:#dfe3e0}.world{transition:transform 1.2s ease-out;transform:scale(1.04)}body.entered .world{transform:scale(1)}@media(prefers-reduced-motion:reduce){.world{transform:none}}
/* Readable type hierarchy informed by measured Apple product-page typography;
   actual rendered families remain bundled Archivo + Noto Sans KR, not SF. */
body{color:#f5f5f7}.intro p{font-size:72px;line-height:1.05;font-weight:500;letter-spacing:-.02em}.copy h1,.copy h2{font-size:64px;line-height:1.0625;font-weight:500;letter-spacing:-.03em}.role{font-size:30px;line-height:1.2;font-weight:500;letter-spacing:-.015em}.disciplines{font-size:19px;line-height:1.5;letter-spacing:-.01em;color:#b8bdc6}.education h2{font-size:28px;line-height:34px;letter-spacing:-.03em}.degree p,.degree p span{font-size:19px;line-height:1.5;letter-spacing:-.01em}.degree p span{color:#b8bdc6}.degree time{font-size:14px;line-height:20px;font-weight:500}.progress-heading{font-size:14px;line-height:20px;font-weight:500;letter-spacing:.04em}.tools{color:#b8bdc6}.eyebrow{font-size:14px;line-height:20px;letter-spacing:.05em}
@media(max-width:600px){.intro p{font-size:40px;line-height:1.1}.copy h1,.copy h2{font-size:36px;line-height:40px}.role{font-size:24px;line-height:1.25;letter-spacing:-.01em}.disciplines{font-size:17px;line-height:25px}.education h2{font-size:22px;line-height:29px}.degree{gap:18px}.degree p,.degree p span{font-size:17px;line-height:25px}.degree time{font-size:14px;white-space:nowrap}.progress-heading{font-size:12px;line-height:18px}.tools{font-size:17px}.eyebrow{font-size:12px}}
/* Revision 2: long spatial journey, genuine reflective geometry, real tool marks. */
@font-face{font-family:Geist;src:url('assets/geist.woff2') format('woff2');font-display:swap;font-weight:100 900}
#metal-world{position:fixed;inset:0;z-index:0;display:block;width:100%;height:100%;touch-action:pan-y}
#scroll-track{position:relative;z-index:2;pointer-events:none}.copy{z-index:3}.intro{z-index:8}
.webgl-ready .world{display:none}.webgl-ready #stage,.webgl-ready .plate{visibility:hidden!important;pointer-events:none!important}
.story{height:260svh}.archive{height:820svh}.archive>h2{z-index:4}.archive-help{z-index:4;bottom:15vh}.archive-help>span{display:none}.archive-help p{font-size:11px;letter-spacing:.1em}.controls{margin-top:8px}.controls button{width:40px;height:40px}
.intro p{font-family:Geist,Archivo,sans-serif;font-size:clamp(44px,6.1vw,84px);font-weight:500;letter-spacing:-.035em;line-height:1.08}.intro small{font-size:10px;letter-spacing:.12em;min-height:12px}.asset-loader{width:130px;background:#a4a9ac30;margin-top:12px;overflow:hidden}.asset-loader:after{transition:width .65s ease;width:22%}.assets-ready .asset-loader:after{width:100%}
.logo-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));max-width:640px;gap:30px 20px;align-items:center}.tool{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;height:86px}.tool img{display:block;width:42px;height:42px;object-fit:contain;filter:grayscale(1) brightness(0) invert(.85)}.tool>span:last-child{font-size:12px;line-height:1.25;letter-spacing:0;color:#c7cbcd;white-space:nowrap}.seedance-wordmark{height:42px;display:flex;align-items:center;font-family:Geist,sans-serif;font-size:16px;font-weight:600;letter-spacing:-.04em;color:#d5d7d8}.tool:has(.seedance-wordmark)>span:last-child{visibility:hidden}
footer{position:relative;z-index:3;pointer-events:auto}footer a{pointer-events:auto}
@media(max-width:650px){.story{height:240svh}.archive{height:820svh}.logo-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:22px 10px;max-width:100%}.tool img{width:33px;height:33px}.tool{height:68px}.tool>span:last-child{font-size:10px;white-space:normal;text-align:center}.seedance-wordmark{font-size:12px}.intro p{font-size:40px}.archive-help{bottom:17vh}.controls button{width:38px;height:38px}.archive>h2{font-size:12px;letter-spacing:.23em}}
/* Preserve internal contrast in multitone official app badges. */
.tool img[src$="maya.svg"],.tool img[src$="premiere.svg"]{filter:grayscale(1) brightness(1.5)}
#scroll-hint{bottom:92px}
/* A soft local scrim preserves readable type over moving silver surfaces. */
.copy::before{content:"";position:absolute;inset:-90px -150px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse closest-side at 42% 50%,rgba(10,13,16,.88) 0%,rgba(10,13,16,.67) 38%,rgba(10,13,16,0) 100%)}
.copy h1,.copy h2,.copy .role{text-shadow:0 2px 20px rgba(0,0,0,.4)}
#scroll-hint{color:#e7e9eb;text-shadow:0 1px 8px #000;background:rgba(13,16,19,.65);padding:10px 13px;border-radius:2px;min-height:40px}
.tool img[src$="maya.svg"],.tool img[src$="premiere.svg"]{filter:none}
.logo-grid{grid-template-columns:repeat(7,minmax(0,1fr));max-width:760px;gap:26px 18px}
.tool img[src$="flow.svg"]{width:62px}
@media(max-width:650px){.logo-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 10px;margin-top:24px}.tool{height:64px}.tool img[src$="flow.svg"]{width:46px}#tools .copy h2{margin-bottom:20px}}

.eyebrow{color:#d2d5d8;text-shadow:0 1px 8px #000}

.open-selected{display:block;margin:10px auto 16px;padding:6px 8px;background:none;border:0;color:#d2d5d8;font-size:11px;letter-spacing:.1em;min-height:32px}.open-selected:hover{color:white}.open-selected:focus-visible{outline:1px solid white}

.archive-vignette{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(0,0,3,.26),transparent 28%),linear-gradient(120deg,transparent 25%,rgba(0,0,3,.28)),radial-gradient(ellipse at 42% 65%,transparent 16%,rgba(2,3,6,.46) 100%)}
[hidden]{display:none!important}

/* October 21: quiet editorial loading identity; neutral silver, not chrome type. */
.intro p{font-family:Geist,Archivo,sans-serif;font-size:clamp(34px,5.2vw,72px);font-weight:400;letter-spacing:.035em;color:#d7d8d8;text-shadow:none;line-height:1.16}
.intro small{color:#929699;letter-spacing:.18em;font-size:10px}
.asset-loader{width:96px;margin-top:16px;background:#a4a9ac22}
.asset-loader:after{background:#b7bbbd}
@media(max-width:650px){.intro p{font-size:clamp(28px,8.2vw,40px);letter-spacing:.025em}.archive-vignette{background:radial-gradient(ellipse at 50% 46%,transparent 35%,rgba(2,3,6,.26) 100%)}.progress{bottom:max(28px,env(safe-area-inset-bottom));}.archive-help{bottom:15svh}#scroll-hint{bottom:max(84px,calc(env(safe-area-inset-bottom) + 64px))}}

.education.copy::before{background:radial-gradient(ellipse closest-side at 45% 50%,rgba(10,13,16,.97) 0%,rgba(10,13,16,.88) 48%,rgba(10,13,16,0) 100%)}

/* Keep text above a dedicated local dark field without changing the approved type. */
.copy{isolation:isolate}.copy::before{z-index:-1;inset:-70px -110px;background:radial-gradient(ellipse closest-side at 44% 50%,rgba(10,13,16,.98) 0%,rgba(10,13,16,.9) 55%,rgba(10,13,16,0) 100%)}

.copy::before,.education.copy::before{inset:-40px -60px;background:rgba(10,13,16,.84);filter:blur(42px);border-radius:45px}.disciplines{color:#d1d4d8;text-shadow:0 2px 12px #080a0c}

.arrival-space{height:90svh}
#explore-cue{position:fixed;left:50%;top:48%;transform:translate(-50%,-50%);display:flex;align-items:center;flex-direction:column;gap:24px;color:#c9ccce;font-family:Geist,Archivo,sans-serif;font-size:12px;letter-spacing:.2em;z-index:8;opacity:0;transition:opacity .25s;pointer-events:none;text-shadow:0 2px 16px #000}
.explore-arrow{font-size:24px;line-height:1;letter-spacing:0;color:#e1e3e4}

@font-face{font-family:InstrumentSerif;src:url('assets/instrument-serif.ttf');font-weight:400;font-display:swap}
@font-face{font-family:BarlowCondensed;src:url('assets/barlow-condensed.ttf');font-weight:300;font-display:swap}
@font-face{font-family:Instrument;src:url('assets/instrument-medium.woff2');font-weight:500;font-display:swap}
body[data-type-review] .intro{background:radial-gradient(ellipse at 50% 48%,#080a0c66 0,transparent 55%)}
body[data-type-review] .intro small,body[data-type-review] .asset-loader{display:none}
body[data-type-review=serif] .intro p{font-family:InstrumentSerif,serif;font-size:clamp(40px,8.4vw,128px);letter-spacing:-.025em;font-weight:400;line-height:1;color:#e1e2e3}
body[data-type-review=condensed] .intro p{font-family:BarlowCondensed,sans-serif;font-size:clamp(68px,10vw,150px);letter-spacing:.12em;font-weight:300;line-height:.88;color:#d9dddf;display:flex;flex-direction:column;gap:12px;width:max-content}
body[data-type-review=condensed] .intro p span:last-child{align-self:flex-end;letter-spacing:.2em;margin-right:-.08em}
body[data-type-review=sans] .intro p{font-family:Instrument,sans-serif;font-size:clamp(38px,7.4vw,108px);letter-spacing:-.045em;font-weight:500;line-height:1;color:#e1e2e3}

/* Eight licensed type studies, flat glyphs with moving metallic colour only. */
@font-face{font-family:StudyUnbounded;src:url('assets/study-fonts/unbounded.ttf');font-weight:100 900;font-display:swap}
body[data-study='1'] .intro p{font-family:StudyUnbounded,sans-serif;font-weight:650;letter-spacing:-.045em;font-size:clamp(26px,6.4vw,96px);line-height:1.05}
@font-face{font-family:StudySyncopate;src:url('assets/study-fonts/syncopate.ttf');font-weight:700;font-display:swap}
body[data-study='2'] .intro p{font-family:StudySyncopate,sans-serif;font-weight:700;letter-spacing:-.035em;font-size:clamp(26px,6.2vw,92px);line-height:1.05}
@font-face{font-family:StudyMichroma;src:url('assets/study-fonts/michroma.ttf');font-weight:400;font-display:swap}
body[data-study='3'] .intro p{font-family:StudyMichroma,sans-serif;font-weight:400;letter-spacing:.015em;font-size:clamp(26px,5.8vw,88px);line-height:1.05}
@font-face{font-family:StudySyne;src:url('assets/study-fonts/syne.ttf');font-weight:100 900;font-display:swap}
body[data-study='4'] .intro p{font-family:StudySyne,sans-serif;font-weight:800;letter-spacing:-.04em;font-size:clamp(26px,7.6vw,112px);line-height:1.05}
@font-face{font-family:StudySpaceGrotesk;src:url('assets/study-fonts/spacegrotesk.ttf');font-weight:100 900;font-display:swap}
body[data-study='5'] .intro p{font-family:StudySpaceGrotesk,sans-serif;font-weight:650;letter-spacing:-.055em;font-size:clamp(26px,7.4vw,108px);line-height:1.05}
@font-face{font-family:StudyOxanium;src:url('assets/study-fonts/oxanium.ttf');font-weight:100 900;font-display:swap}
body[data-study='6'] .intro p{font-family:StudyOxanium,sans-serif;font-weight:600;letter-spacing:.025em;font-size:clamp(26px,7vw,104px);line-height:1.05}
@font-face{font-family:StudyRajdhani;src:url('assets/study-fonts/rajdhani.ttf');font-weight:600;font-display:swap}
body[data-study='7'] .intro p{font-family:StudyRajdhani,sans-serif;font-weight:600;letter-spacing:.12em;font-size:clamp(26px,8.6vw,128px);line-height:1.05}
@font-face{font-family:StudyArchivoBlack;src:url('assets/study-fonts/archivoblack.ttf');font-weight:400;font-display:swap}
body[data-study='8'] .intro p{font-family:StudyArchivoBlack,sans-serif;font-weight:400;letter-spacing:-.055em;font-size:clamp(26px,7.3vw,108px);line-height:1.05}
body[data-type-review=study] .intro p{color:#9aa7ad;background:linear-gradient(112deg,#56656e 0%,#a8b6bd 16%,#72818a 29%,#c4ced0 38%,#7c8d96 47%,#485b66 54%,#b1bfc5 64%,#84959f 80%,#637680 100%);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:name-reflection 7s ease-in-out infinite alternate;text-shadow:none;white-space:nowrap}
body[data-type-review=study] .intro{background:radial-gradient(ellipse at 50% 50%,rgba(8,12,15,.75),rgba(8,12,15,.3) 40%,transparent 72%)}
@keyframes name-reflection{from{background-position:0% 50%}to{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){body[data-type-review=study] .intro p{animation:none;background-position:50% 50%}}

/* Selected single direction: restrained solid titanium, no moving text reflection. */
@font-face{font-family:Sora;src:url('assets/sora.ttf');font-weight:100 900;font-display:swap}
.intro p,body[data-type-review=chosen] .intro p{font-family:Sora,Archivo,sans-serif;font-weight:500;font-size:clamp(32px,5.55vw,80px);line-height:1.08;letter-spacing:-.035em;color:#a4b0b4;background:none;-webkit-text-fill-color:#a4b0b4;animation:none;text-shadow:none}
.intro,body[data-type-review=chosen] .intro{background:radial-gradient(ellipse at 50% 48%,#080d1255 0,transparent 60%)}

/* Reference-led intro composition: reserve the dark lower-left for the name. */
@font-face{font-family:Thicccboi;src:url('assets/thicccboi-semibold.woff2');font-weight:600;font-display:swap}
body:not([data-type-review]) .intro,body[data-type-review=chosen] .intro{align-items:flex-start;padding:22vh 14vw 0;background:none}
body:not([data-type-review]) .intro p,body[data-type-review=chosen] .intro p{font-family:Thicccboi,Archivo,sans-serif;font-size:clamp(38px,6.3vw,92px);font-weight:600;line-height:1;letter-spacing:-.04em;color:#cdc6be;-webkit-text-fill-color:#cdc6be;background:none;animation:none;text-shadow:none}
body:not([data-type-review]) .intro small,body[data-type-review=chosen] .intro small{font-family:Archivo,sans-serif;color:#92908d;letter-spacing:.12em;margin-top:22px}
body:not([data-type-review]) .asset-loader{margin-top:14px;width:84px;background:#cdc6be22}
body:not([data-type-review]) .asset-loader:after{background:#b4afa8}
@media(max-width:650px){body:not([data-type-review]) .intro,body[data-type-review=chosen] .intro{padding:18vh 8vw 0}body:not([data-type-review]) .intro p,body[data-type-review=chosen] .intro p{font-size:clamp(32px,8.5vw,48px);letter-spacing:-.04em}}

/* Direction 01: high-contrast editorial name, not a final approval. */
@font-face{font-family:BodoniName;src:url('assets/bodoni-moda-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
body:not([data-type-review]) .intro,body[data-type-review=chosen] .intro{align-items:center;justify-content:center;padding:7vh 0 0;background:none}
body:not([data-type-review]) .intro p,body[data-type-review=chosen] .intro p{font-family:BodoniName,serif;font-size:13.4vw;font-weight:500;line-height:1;letter-spacing:-.015em;white-space:nowrap;color:#b8bcbd;-webkit-text-fill-color:#b8bcbd;background:none;text-shadow:none;font-synthesis:none}
body:not([data-type-review]) .intro small{font-family:Archivo,sans-serif;font-size:9px;letter-spacing:.18em;color:#92999b;margin-top:36px}
body:not([data-type-review]) .asset-loader{width:100px;margin-top:14px;background:#b8bcbd22}
body:not([data-type-review]) .asset-loader:after{background:#b8bcbd}
@media(max-width:650px){body:not([data-type-review]) .intro,body[data-type-review=chosen] .intro{padding:3vh 0 0}body:not([data-type-review]) .intro p,body[data-type-review=chosen] .intro p{font-size:14.7vw;letter-spacing:-.02em}body:not([data-type-review]) .intro small{margin-top:25px}}

/* Selected B custom vector wordmark, sharp at every display density. */
body:not([data-type-review]) .intro p,body[data-type-review=chosen] .intro p{width:86vw;max-width:1840px;font-size:0;line-height:0}
.name-wordmark{display:block;width:100%;height:auto;filter:none}
body:not([data-type-review]) .intro small{margin-top:30px}
@media(max-width:650px){body:not([data-type-review]) .intro p,body[data-type-review=chosen] .intro p{width:91vw}body:not([data-type-review]) .intro small{margin-top:22px}}

/* Extended physical descent: approximately twice the previous scroll distance. */
.arrival-space{height:150svh}.story{height:480svh}

/* Keep moving metal highlights from competing with the flat wordmark. */
.intro:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 56% 29% at 50% 55%,#101214aa 0%,#10121466 42%,transparent 90%);z-index:-1;pointer-events:none}

.archive-approach{height:200svh}.plate{transition:transform 1.4s cubic-bezier(.65,0,.35,1),opacity .45s}

/* Integrated film surface, not a detached modal card. */
body.webgl-ready .video-panel{background:transparent;border:0;box-shadow:none;transition:opacity .15s}
body.webgl-ready .video-panel .placeholder{width:100%;padding:20px}
#scroll-hint{background:transparent!important;box-shadow:none;border:0;border-radius:0}
.name-wordmark{transform:scaleY(1.16);transform-origin:center}
.film-open .progress,.film-open .archive-help,.film-open #scroll-hint{opacity:0!important;pointer-events:none!important}
@media(max-width:650px){body.webgl-ready .video-panel .placeholder{padding:8px}body.webgl-ready .placeholder h2{font-size:22px}body.webgl-ready .placeholder p{font-size:11px}body.webgl-ready .placeholder small{display:none}#close{top:4px;right:6px;min-height:40px}}

/* Archive is the final scene; contact lives within its UI, never underneath it. */
.archive{height:1420svh}
.film-index{display:flex;gap:3px}.controls .film-index button{width:28px;height:36px;border:0;border-radius:0;background:transparent;color:#7d858a;font-size:11px;letter-spacing:.02em}
.controls .film-index button[aria-current=true]{color:#e0e4e5;border-bottom:1px solid #b2b8ba}
.archive-contact{position:fixed;left:4vw;bottom:6vh;z-index:20;font-size:10px;letter-spacing:.12em;color:#b2b8ba;text-decoration:none;opacity:0;pointer-events:none;transition:opacity .3s}
.film-open .archive-contact{opacity:0!important;pointer-events:none!important}
@media(max-width:650px){.controls{gap:12px}.controls .film-index button{width:25px}.film-index{gap:1px}.archive-contact{font-size:8px;left:3vw;bottom:6vh}}

/* Tall editorial wordmark; keep the visual title box separate from loading UI. */
.story{height:650svh}.archive{height:2020svh}
.name-wordmark{transform:scaleY(1.34)}
body:not([data-type-review]) .intro small{margin-top:clamp(64px,6vw,104px)}
@media(max-width:650px){body:not([data-type-review]) .intro small{margin-top:38px}}

/* Keep small navigation readable across changing chrome reflections. */
.progress,#scroll-hint,.archive-contact{filter:drop-shadow(0 1px 2px #000c)}
/* Mobile contact shares the hint row, above the separate chapter progress row. */
@media(max-width:650px){.archive-contact{left:8vw;bottom:max(84px,calc(env(safe-area-inset-bottom) + 64px));min-height:40px;display:flex;align-items:center;font-size:10px;letter-spacing:.08em}}

.name-wordmark{filter:drop-shadow(0 1px 1px #0009)}

#video-mount{position:absolute;inset:0;background:#000;overflow:hidden}
#video-mount[hidden],#watch-original[hidden],.placeholder[hidden]{display:none!important}
#video-mount iframe{display:block;width:100%;height:100%;border:0}
.video-panel #close{top:-44px;right:0;z-index:3;min-height:40px;text-shadow:0 1px 3px #000;background:#101214b3;border-radius:2px}
#watch-original{position:absolute;left:0;bottom:-34px;color:#bcbcbc;font-size:10px;letter-spacing:.08em;text-decoration:none;text-shadow:0 1px 3px #000}
#project-title{max-width:70vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:650px){.video-panel #close{top:-42px;font-size:10px}#watch-original{font-size:9px;bottom:-28px}}

/* Review-only alternatives; the published default remains unchanged pending choice. */
body[data-type-review=clean] .intro,body[data-type-review=editorial] .intro{align-items:center;justify-content:center;padding:0}
body[data-type-review=clean] .intro p{font-family:Archivo,sans-serif;font-size:clamp(54px,10vw,210px);font-weight:600;letter-spacing:-.065em;line-height:1;width:auto;max-width:94vw;color:#bcbcbc;-webkit-text-fill-color:#bcbcbc;white-space:nowrap;transform:none;background:none;filter:drop-shadow(0 1px 2px #000a)}
body[data-type-review=editorial] .intro p{font-family:InstrumentSerif,serif;font-size:clamp(65px,12.5vw,240px);font-weight:400;letter-spacing:-.035em;line-height:1;width:auto;max-width:94vw;color:#bcbcbc;-webkit-text-fill-color:#bcbcbc;white-space:nowrap;transform:none;background:none;filter:drop-shadow(0 1px 2px #000a)}

/* Approved A direction: restrained sans, taller vertical proportion, darker neutral steel. */
body:not([data-type-review]) .intro,body[data-type-review=clean] .intro{align-items:center;justify-content:center;padding:0}
body:not([data-type-review]) .intro p,body[data-type-review=clean] .intro p{font-family:Archivo,sans-serif;font-size:clamp(54px,10vw,210px);font-weight:600;font-synthesis:weight;letter-spacing:-.065em;line-height:1;width:auto;max-width:94vw;color:#9fa3a5;-webkit-text-fill-color:#9fa3a5;white-space:nowrap;transform:scaleY(1.2);transform-origin:center;background:none;filter:drop-shadow(0 1px 2px #000b);animation:none}
body:not([data-type-review]) .intro small{margin-top:40px}
@media(max-width:650px){body:not([data-type-review]) .intro p,body[data-type-review=clean] .intro p{font-size:clamp(38px,13.5vw,70px);letter-spacing:-.06em}body:not([data-type-review]) .intro small{margin-top:28px}}

/* Material-led entry. Identity is UI, never a competing hero title. */
body:not([data-type-review]) .intro p{display:none}
body:not([data-type-review]) .intro:before{display:none}
.identity-ui{position:fixed;left:4vw;bottom:6vh;z-index:20;font:500 11px/1.5 Archivo,sans-serif;letter-spacing:.08em;color:#c5c8ca;pointer-events:none;text-shadow:0 1px 2px #000,0 0 8px #000;transition:opacity .3s;isolation:isolate}
.identity-ui span{display:block;font-size:10px;letter-spacing:.12em;color:#a4aaae;margin-top:3px}
.film-open .identity-ui{opacity:0!important}
body:not([data-type-review]) .intro small{position:absolute;left:50%;bottom:calc(6vh + 18px);transform:translateX(-50%);font-size:9px;letter-spacing:.12em;margin:0;color:#93999c}
body:not([data-type-review]) .asset-loader{position:absolute;left:50%;bottom:6vh;transform:translateX(-50%);margin:0;width:100px}
@media(max-width:650px){.identity-ui{left:8vw;bottom:max(84px,calc(env(safe-area-inset-bottom) + 64px));font-size:10px}.identity-ui span{font-size:9px}body:not([data-type-review]) .intro small{bottom:max(46px,calc(env(safe-area-inset-bottom) + 28px))}body:not([data-type-review]) .asset-loader{bottom:max(28px,env(safe-area-inset-bottom))}}

/* Feathered local contrast, not a visible UI box or full-screen overlay. */
.identity-ui:before{content:"";position:absolute;inset:-28px -42px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse closest-side,#050607a6 0%,#05060770 48%,transparent 100%)}

/* Shorten only ABOUT → TOOLS → EDUCATION travel by 30%. */
#about,#tools{height:455svh}

/* Keep the central exploration cue; remove the duplicate corner hint. */
#scroll-hint{display:none!important}

/* Six 2.24-viewport film steps plus the final viewport. */
.archive{height:1444svh}