html{scroll-behavior:smooth}body{margin:0;color:#111;background:#eee;font-family:Arial,"Apple SD Gothic Neo",sans-serif}a{color:inherit;text-decoration:none}button,a,video{outline-offset:6px}button{cursor:pointer}.school-hero{height:100svh;min-height:560px;position:relative;isolation:isolate;color:white;background:#111}.school-hero>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.school-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(#0005,transparent 40%,#0009);z-index:-1}.school-hero nav{display:flex;justify-content:space-between;padding:24px;font-size:15px}.school-hero nav div{display:flex;gap:24px}.hero-title{position:absolute;left:24px;bottom:100px}.hero-title p{font-size:13px;letter-spacing:.08em}.hero-title h1{font-size:clamp(42px,6vw,90px);font-weight:400;line-height:1.15;letter-spacing:-.055em;margin-top:20px}.scroll-cue{position:absolute;left:24px;bottom:28px;font-size:12px}.motion-toggle{position:absolute;bottom:24px;right:24px;border:1px solid #fff8;border-radius:0;padding:8px 12px;background:transparent;color:white;font-size:12px}#selected{margin:0!important}#selected>span{display:block;margin:0!important;padding:24px;font-size:13px}#selected>div{gap:0!important}.school-project{position:relative;min-height:85vh;display:grid;grid-template-columns:1fr 40%;gap:36px;align-items:center;padding:80px 24px;isolation:isolate;overflow:hidden}.project-backdrop{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;filter:blur(5px);opacity:.42;z-index:-2}.school-project:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#eeeeeebd,#eeeeee30);z-index:-1}.project-title{width:100%}.project-title h3{font-size:clamp(40px,5vw,76px);font-family:Georgia,serif;font-weight:400;line-height:1.05;margin:0}.project-title h4{font-size:clamp(32px,4vw,64px);font-weight:500;line-height:1.15;letter-spacing:-.045em;margin:8px 0 22px}.project-title span{font-size:14px;line-height:1.5;display:block;max-width:420px}.project-film{margin:0;align-self:start;margin-top:30px}.project-film video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#111;display:block}.project-film figcaption{font-size:11px;margin-top:10px}footer{padding:70px 24px;background:#e7e7e7}footer h2{font-size:clamp(30px,4vw,60px);font-weight:400;margin:48px 0}footer div{display:flex;gap:32px;flex-wrap:wrap}footer p{font-size:13px;line-height:1.7;margin-top:32px}@media(max-width:700px){.school-hero nav{padding:20px;font-size:12px}.school-hero nav div{gap:14px}.hero-title{left:20px}.school-project{grid-template-columns:1fr;gap:28px;min-height:85svh;padding:60px 20px}.project-film{margin:0}.project-backdrop{opacity:.28}.project-title h3{font-size:40px}.project-title h4{font-size:34px}.school-hero{min-height:540px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* A single viewport-sized media stage under the scrolling project index. */
#selected{position:relative;isolation:isolate;padding-bottom:20vh}
#selected>.project-stage{position:sticky;top:0;height:100svh;margin-bottom:-100svh;display:block;z-index:-1;overflow:hidden;pointer-events:none}
#selected>span{position:relative;padding-top:32px}
#selected>div:not(.project-stage){position:relative}
.school-project{display:flex;align-items:center;min-height:66svh;padding:80px 24px;isolation:auto;overflow:visible}
.school-project:after{display:none}
.project-title{width:64%;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s;opacity:.62}
.school-project.is-active .project-title{transform:translateX(28px);opacity:1}
.school-project.is-active .project-title:before{content:"";position:absolute;left:-28px;top:16px;width:15px;height:15px;background:#111;border-radius:50%}
.stage-backdrops{position:absolute;inset:0;background:#ddd}
.stage-backdrops .project-backdrop{inset:-1%;width:102%;height:102%;opacity:0;filter:blur(1.3px);transition:opacity .65s ease,transform 1.1s ease;transform:scale(1.025);z-index:auto;object-position:center 35%}
.stage-backdrops .project-backdrop.is-active{opacity:.85;transform:scale(1)}
.stage-backdrops:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(238,238,238,.76),rgba(238,238,238,.24) 56%,rgba(238,238,238,.08));pointer-events:none}
.stage-films{position:absolute;right:24px;top:10vh;width:29vw;max-width:500px;aspect-ratio:16/9}
.stage-films .project-film{position:absolute;inset:0;margin:0;opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.stage-films .project-film.is-active{opacity:1;transform:translateY(0)}
.stage-films figcaption{background:#eeeeeebd;display:inline-block;padding:3px 5px;margin-top:5px}
@media(max-width:700px){.stage-films{top:6vh;right:20px;width:56vw}.school-project{min-height:70svh;padding:32vh 20px 9vh}.project-title{width:100%}.project-title h3{font-size:34px}.project-title h4{font-size:30px}.school-project.is-active .project-title{transform:translateX(12px)}.school-project.is-active .project-title:before{left:-16px;top:10px;width:9px;height:9px}.stage-backdrops:after{background:linear-gradient(0deg,#eeeeeed9,#eeeeee60 60%,#eeeeee30)}}
@media(prefers-reduced-motion:reduce){.project-title,.stage-backdrops .project-backdrop,.stage-films .project-film{transition:none;transform:none}}
.stage-films .project-film.is-active{pointer-events:auto}
.stage-films .film-launch{display:block;position:relative;width:100%;border:0;padding:0;background:#111;color:white;aspect-ratio:16/9;overflow:hidden;cursor:pointer}
.film-launch img{display:block;width:100%;height:100%;object-fit:cover}
.film-launch span{position:absolute;right:10px;bottom:10px;background:#111d;color:white;padding:8px 10px;font-size:12px}
.stage-films iframe{width:100%;aspect-ratio:16/9;border:0;display:block;background:#111}
.stage-films{position:fixed;visibility:hidden;z-index:5}
.stage-films.stage-visible{visibility:visible}
#selected>.stage-films{position:fixed;pointer-events:none}
#selected>.stage-films .is-active{pointer-events:auto}
#selected > div.stage-films:not(.project-stage){position:fixed;top:10vh;right:24px;left:auto;width:29vw;z-index:5}
@media(max-width:700px){#selected > div.stage-films:not(.project-stage){top:6vh;right:20px;width:56vw}}
.project-detail-orbit{position:fixed;right:24px;top:calc(10vh + min(29vw,500px)*.5625 + 70px);width:76px;height:76px;z-index:6;display:grid;place-items:center;color:#111;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s}
.project-detail-orbit.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.project-detail-orbit svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1}
.orbit-track{opacity:.25}.orbit-motion{stroke-dasharray:85 198;transform-origin:50px 50px;animation:orbit-turn 5s linear infinite}
.project-detail-orbit span{font-size:26px;transition:transform .2s}.project-detail-orbit small{position:absolute;top:84px;font-size:11px;white-space:nowrap}
.project-detail-orbit:hover .orbit-motion,.project-detail-orbit:focus-visible .orbit-motion{animation-play-state:paused}.project-detail-orbit:hover span{transform:translate(2px,-2px)}
@keyframes orbit-turn{to{transform:rotate(360deg)}}
@media(max-width:700px){.project-detail-orbit{right:20px;top:calc(6vh + 31.5vw + 42px);width:52px;height:52px}.project-detail-orbit small{top:58px}}
@media(prefers-reduced-motion:reduce){.orbit-motion{animation:none}}
/* Hero and work share the viewport; scroll dissolves layers, never a section edge. */
body{isolation:isolate;background:#e5e5e5}
.school-hero{background:transparent;isolation:auto}
.school-hero>video{position:fixed;inset:0;z-index:-3;opacity:var(--hero-mix,1)}
.school-hero:after{position:fixed;z-index:-2;opacity:var(--hero-mix,1);pointer-events:none}
#selected{isolation:auto;background:transparent}
#selected>.project-stage{position:fixed;inset:0;margin:0;height:100svh;z-index:-1;opacity:var(--stage-mix,0);overflow:hidden}
.stage-backdrops{background:#d7d7d7}
.stage-backdrops .project-backdrop{filter:url(#fabric-drift);opacity:0;object-fit:cover;transform:scale(1.06);transition:opacity .8s,transform 1.4s}
.stage-backdrops .project-backdrop.is-active{opacity:.95;transform:scale(1.02)}
.stage-backdrops:after{background:linear-gradient(90deg,#eeeeeeb0,#eeeeee15 65%,transparent)}
#information{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.stage-backdrops .project-backdrop{filter:none;transition:none}}
html,body{overflow-x:clip}.stage-backdrops{overflow:hidden}.stage-backdrops>svg.project-backdrop{max-width:none}

/* Framing takes priority over cover-cropping for process and exhibition scenes. */
.stage-backdrops .composition-backdrop,.stage-backdrops .composition-backdrop.is-active{inset:0;width:100%;height:100%;transform:none}

/* Washed analogue tonality: retain deep garment shadows beneath a directional light veil.
   Geometry remains untouched; only backgrounds are graded, never the video panel. */
.stage-backdrops .project-backdrop{filter:grayscale(.3) saturate(1.3) contrast(1.6) brightness(1.1)}
.stage-backdrops .project-backdrop.is-active{opacity:1}
.stage-backdrops:after{background:linear-gradient(90deg,rgba(232,234,233,.76),rgba(232,234,233,.38) 35%,rgba(232,234,233,.08) 68%,rgba(232,234,233,.04));transition:background .7s ease}
#selected .school-project.is-active a{color:#090909;text-shadow:none}
#selected[data-active-project="2"] .project-detail-orbit{color:#fff}
@media(max-width:700px){.stage-backdrops:after{background:linear-gradient(90deg,rgba(232,234,233,.7),rgba(232,234,233,.22) 58%,rgba(232,234,233,.04))}}