*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Arial,sans-serif}body{background:#101714;color:#faf7ed;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:5px}.study-header{height:96px;position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;padding:22px 4vw;gap:35px;font-size:11px;letter-spacing:.025em}.brand{font:11px/.9 Arial;letter-spacing:-.03em;border:1px solid currentColor;padding:7px}.back{margin-left:auto}.study-header nav{display:flex;gap:20px}.study-header nav a{opacity:.5;padding:7px 0}.study-header nav a[aria-current]{opacity:1;border-bottom:1px solid currentColor}.study-header button{border:1px solid #ffffff66;background:none;border-radius:30px;padding:8px 13px}#stage{height:100dvh;position:relative}.study-footer{position:fixed;bottom:0;left:0;width:100%;height:64px;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;font-size:11px;z-index:10;gap:15px}.study-footer button{border:0;border-bottom:1px solid currentColor;background:none;padding:7px 0}.photo{display:block;padding:0;border:0;background:none;position:relative;text-align:left;overflow:hidden}.photo img{display:block;width:100%;height:100%;object-fit:cover}.photo>span{position:absolute;bottom:15px;left:15px;color:white;font-size:11px;text-shadow:0 1px 5px #000;opacity:0;transition:opacity .4s}.photo:hover>span,.photo:focus-visible>span{opacity:1}#viewer{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:65px 6vw 25px;border:0;background:#0e1212f5;color:white}#viewer::backdrop{background:#000c}#viewer img{width:100%;height:calc(100% - 45px);object-fit:contain}#viewer p{text-align:center;font-size:13px}#close{position:absolute;right:4vw;top:20px;background:transparent;border:1px solid #ffffff88;border-radius:25px;padding:9px 16px}.paused *{animation-play-state:paused!important}.mode-0{overflow:auto;background:#edece6;color:#183239}.mode-0 .study-header{position:relative}.mode-0 #stage{height:auto;padding:30px 4vw 70px}.intro{padding:0 0 55px;display:grid;grid-template-columns:1fr 1fr}.intro>p{grid-column:1/-1;font-size:12px;margin:0 0 25px}.intro h1{font:clamp(45px,6vw,88px)/.98 Georgia;margin:0;letter-spacing:-.045em}.intro>span{font:14px/1.7 Arial;align-self:end;max-width:400px;margin-left:auto}.concepts{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 30px}.concept{display:block}.cover{aspect-ratio:1.55;overflow:hidden;background:#273730}.cover img{width:100%;height:100%;object-fit:cover;transition:scale .8s}.concept:hover .cover img{scale:1.035}.concept-copy{display:grid;grid-template-columns:35px 1fr;column-gap:12px;padding-top:18px}.concept-copy>span{font:13px Georgia;padding-top:8px}.concept h2{font:30px Georgia;margin:0}.concept p{grid-column:2;font-size:13px;line-height:1.6;margin:10px 0}.concept b{grid-column:2;font-size:11px;font-weight:normal;text-decoration:underline;text-underline-offset:5px}
/* 01 — photograph as cinema */
.mode-1 .cinema-image{position:absolute;inset:0;width:100%;height:100%;animation:cinema-entry 1.5s ease both}.cinema-image img{animation:camera 18s ease-in-out infinite alternate}.cinema-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#07110ce6,transparent 80%),linear-gradient(90deg,#06130a88,transparent 70%)}.cinema-title{position:absolute;left:6vw;bottom:18vh;pointer-events:none}.cinema-title p{font-size:14px;margin:0 0 22px}.cinema-title h1{font:clamp(52px,8vw,115px)/.95 Georgia;letter-spacing:-.045em;margin:0 0 25px}.cinema-title em{font-weight:normal}.cinema-title>span{font-size:11px;letter-spacing:.04em}.filmstrip{position:absolute;right:4vw;bottom:12vh;display:flex;gap:10px}.film{width:8vw;height:12vh;min-width:70px;border:1px solid #fff5}.film:hover{translate:0 -7px}.film-progress{position:absolute;left:4vw;bottom:64px;height:1px;background:#d7e3cc;width:92vw;transform-origin:left;animation:progress 9s linear infinite}@keyframes camera{to{transform:scale(1.08) translate(-1%,.5%)}}@keyframes cinema-entry{from{opacity:.3;clip-path:inset(0 0 8% 0)}to{opacity:1;clip-path:inset(0)}}@keyframes progress{from{scale:0 1}to{scale:1 1}}
/* 02 — suspended spatial exhibition */
.mode-2{background:#111516}.sculpture-title{position:absolute;left:0;top:13vh;text-align:center;width:100%}.sculpture-title h1{font:clamp(60px,10vw,150px)/1 Georgia;letter-spacing:-.055em;font-weight:normal;margin:0;color:#d5d7ce}.sculpture-title span{display:block;font:12px Arial;letter-spacing:.1em;margin-top:17px;color:#94a29f}.gallery-space{position:absolute;inset:33vh 0 15vh;perspective:1500px;overflow:hidden}.turntable{position:absolute;left:50%;top:45%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-8deg) rotateY(var(--rotation,0deg));transition:transform 1.5s cubic-bezier(.2,.7,.2,1)}.spatial{position:absolute;width:clamp(140px,20vw,290px);height:32vh;left:calc(clamp(140px,20vw,290px)/-2);top:-16vh;transform:rotateY(var(--turn)) translateZ(32vw);backface-visibility:hidden;box-shadow:0 26px 45px #0008;outline:1px solid #ffffff33;outline-offset:8px;animation:spatial-breathe 8s ease-in-out infinite alternate}.spatial img{filter:saturate(.85)}.floor-ring{position:absolute;left:15%;right:15%;bottom:0;height:30%;border:1px solid #ffffff20;border-radius:50%;box-shadow:0 18px 75px #000;pointer-events:none}.rotate-controls{position:absolute;left:0;right:0;bottom:12vh;display:flex;justify-content:center;align-items:center;gap:30px;font-size:11px;color:#afbdb7}.rotate-controls button{width:42px;height:42px;border:1px solid #62706b;border-radius:50%;background:transparent;font-size:22px}.mode-2 .study-footer{color:#b8c7c2}@keyframes spatial-breathe{from{filter:brightness(.85)}to{filter:brightness(1.08)}}
/* 03 — fashion editorial */
.mode-3{background:#eee9df;color:#4c1b29}.mode-3 .study-header button,.mode-5 .study-header button{border-color:currentColor}.editorial-title{position:absolute;left:6vw;top:19vh;z-index:3;pointer-events:none}.editorial-title>span{font-size:12px}.editorial-title h1{font:clamp(70px,11vw,170px)/.77 Georgia;letter-spacing:-.065em;margin:4vh 0}.editorial-title h1 i{font-weight:normal}.editorial-title p{font-size:12px;line-height:1.7}.editorial-main{position:absolute;left:40%;top:15vh;width:37%;height:65vh;animation:editorial-reveal 1.3s ease both}.editorial-detail{position:absolute;right:5%;bottom:11vh;width:20%;height:29vh;outline:10px solid #eee9df;animation:editorial-reveal 1.5s ease both}.editorial-mark{position:absolute;right:4vw;top:20vh;writing-mode:vertical-rl;font:20px Georgia}.editorial-rule{position:absolute;height:1px;left:6vw;right:6vw;bottom:9vh;background:#4c1b2933}.mode-3 .study-footer{height:8vh}@keyframes editorial-reveal{from{clip-path:inset(0 0 100% 0);translate:0 20px}to{clip-path:inset(0);translate:0 0}}
/* 04 — continuous photographic folding wall */
.mode-4{background:#39243b}
.folds{position:absolute;inset:0;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:76px 0 64px;touch-action:pan-x;isolation:isolate;overscroll-behavior-x:contain}
.folds::-webkit-scrollbar{display:none}
.fold{flex:0 0 21vw;min-width:0;height:100%;overflow:hidden;filter:brightness(.67);transform-origin:center 55%;transition:transform .32s cubic-bezier(.16,1,.3,1),filter .32s;box-shadow:0 18px 36px #0007}
.fold img{height:100%;object-position:50%;pointer-events:none}
.fold span{opacity:1;left:20px;bottom:28px;writing-mode:vertical-rl;font:17px Georgia;pointer-events:none}
.fold:focus-visible{filter:brightness(1.1)!important;outline:2px solid #fff;outline-offset:-4px}
.fold-title{position:absolute;left:6vw;top:20vh;z-index:15;pointer-events:none;text-shadow:0 2px 25px #0008}
.fold-title p{font-size:13px}.fold-title h1{font:clamp(50px,7vw,96px)/.98 Georgia;letter-spacing:-.04em;margin:25px 0}
.mode-4 .study-header{background:linear-gradient(#39243be0,transparent)}
.mode-4 .study-footer{pointer-events:none;background:linear-gradient(transparent,#39243bba)}
.fold-edge{position:absolute;top:50%;z-index:14;font-size:25px;pointer-events:none;opacity:.7;text-shadow:0 2px 12px #000}.edge-left{left:18px}.edge-right{right:18px}
.fold-counter{position:absolute;right:4vw;bottom:26px;z-index:12;font-size:11px;font-variant-numeric:tabular-nums}
@media(max-width:650px){.fold{flex-basis:39vw}.folds{padding-top:80px;padding-bottom:64px}.fold-title h1{font-size:48px}.fold span{font-size:12px;left:10px}.fold-edge{font-size:19px}.edge-left{left:8px}.edge-right{right:8px}}
@media(prefers-reduced-motion:reduce){.fold{transform:none!important}}
/* 05 — architectural portals and moving daylight */
.mode-5{background:#d8d0c2;color:#302e24}.mode-5 #stage{background:linear-gradient(110deg,#ebe5d9,#c3bba9)}.light-title{position:absolute;left:6vw;top:14vh;z-index:3;pointer-events:none}.light-title p{font-size:12px}.light-title h1{font:clamp(45px,6vw,95px)/.92 Georgia;letter-spacing:-.04em;margin:20px 0}.light-title i{font-weight:normal}.portals{position:absolute;inset:23vh 5vw 12vh 31vw;display:flex;align-items:end;gap:2vw}.portal-wrap{flex:1;min-width:0;height:85%;position:relative}.portal-wrap:nth-child(2){height:100%}.portal-wrap:nth-child(3){height:73%}.portal{width:100%;height:100%;border-radius:50% 50% 0 0 / 24% 24% 0 0;box-shadow:12px 16px 25px #41322255;animation:portal-in 1.7s ease both}.portal img{animation:camera 20s ease-in-out infinite alternate}.portal-wrap>span{display:block;font:12px Georgia;margin-top:16px}.sunlight{position:absolute;inset:-50%;pointer-events:none;background:linear-gradient(115deg,transparent 40%,#fff5 40%,#fff5 45%,transparent 45%,transparent 48%,#fff5 48%,#fff5 55%,transparent 55%);transform:translateX(-8%);animation:sun 25s ease-in-out infinite alternate;z-index:2;mix-blend-mode:soft-light}.mode-5 .study-footer{color:#302e24}@keyframes sun{to{transform:translateX(12%) rotate(7deg)}}@keyframes portal-in{from{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}
@media(max-width:650px){.study-header{height:80px;padding:16px 5vw;gap:12px}.back{font-size:9px}.study-header nav{gap:10px;font-size:10px}.brand{font-size:9px}.study-header button{font-size:9px;padding:6px 9px}.study-footer{font-size:9px;padding:0 5vw;gap:10px}.study-footer #hint{display:none}.intro{display:block}.intro h1{font-size:47px}.intro>span{display:block;margin:25px 0 0;font-size:12px}.concepts{grid-template-columns:1fr}.cinema-title{bottom:34vh;left:6vw}.cinema-title h1{font-size:54px}.filmstrip{right:6vw;bottom:13vh}.film{width:23vw;height:14vh}.sculpture-title{top:20vh}.sculpture-title h1{font-size:58px}.gallery-space{top:37vh;bottom:23vh}.spatial{width:44vw;height:28vh;left:-22vw;top:-14vh;transform:rotateY(var(--turn)) translateZ(52vw)}.rotate-controls{bottom:14vh}.editorial-title{top:18vh}.editorial-title h1{font-size:74px}.editorial-title p{font-size:10px;max-width:140px;margin-top:32vh}.editorial-main{left:32%;top:30vh;width:62%;height:47vh}.editorial-detail{width:31%;height:20vh;bottom:12vh;right:6%}.editorial-mark{font-size:13px;top:15vh}.fold-title{top:20vh}.fold-title h1{font-size:52px}.fold span{font-size:12px;left:8px}.light-title{top:16vh}.light-title h1{font-size:56px}.portals{inset:43vh 6vw 15vh;gap:4vw}.portal-wrap>span{font-size:10px}.portal{border-radius:50% 50% 0 0 / 17% 17% 0 0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.mode-1 .study-header{background:linear-gradient(#08100a70,transparent)}
@media(max-width:650px){.study-header{gap:10px}.study-header .back{font-size:8px;max-width:64px}.study-header nav{gap:9px}.study-header button{margin-left:auto}}
body:not(.mode-0) #stage{position:fixed;inset:0;overflow:hidden}
@keyframes portal-in{from{opacity:.55;translate:0 12px}to{opacity:1;translate:0 0}}

[hidden]{display:none!important}
@keyframes editorial-reveal{from{opacity:.7;translate:0 8px}to{opacity:1;translate:0 0}}

.mode-4 #hint{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}.fold{user-select:none}

/* Photo itself is the close control, with Escape as the keyboard alternative. */
.mode-4 #viewer{padding:3vh 4vw 2vh}
.full-photo{display:block;border:0;padding:0;background:none;width:100%;height:calc(100% - 42px);cursor:zoom-out}
#viewer .full-photo img{width:100%;height:100%;object-fit:contain}
.full-photo:focus-visible{outline:2px solid #37a4c1;outline-offset:4px}

.room-page .brand{border:0;padding:0}.room-page .brand img{width:60px;height:60px}
.room-page .study-header nav{margin-left:auto;font-size:12px}.room-page .study-header nav a{opacity:.85}
@media(max-width:650px){.room-page .brand img{width:42px;height:42px}.room-page .study-header nav{gap:12px;font-size:10px}.room-page .study-header{gap:12px}}

.room-page .study-footer a{pointer-events:auto}

/* A bounded set of stationary hit targets avoids giant scroll surfaces and filter-layer churn. */
.folds{display:block;overflow:hidden;touch-action:pan-y;padding:0;contain:layout;overflow-anchor:none}
.fold-slot{position:absolute;top:76px;bottom:64px;left:0;will-change:transform}
.fold-slot .fold{width:100%;height:100%;filter:none!important;transition:transform .18s ease-out;box-shadow:none}
.fold::after{content:'';position:absolute;inset:0;background:#000;opacity:var(--shade,.33);pointer-events:none;transition:opacity .18s ease-out}
.fold span{z-index:2}.fold img{pointer-events:none}.fold:focus-visible::after{opacity:0}
@media(max-width:650px){.fold-slot{top:80px}}

.mode-4 #viewer{background:#2b192ef5}.mode-4 #viewer::backdrop{background:#29172bcc}