*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:60px}body{margin:0;background:#101010;color:#efeee8;font-family:'KH Teka',Arial,sans-serif;font-weight:400;--rule:#efeee856}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid #f4cd32;outline-offset:6px}h1,h2,h3,p{margin:0;font-weight:400}em{font-style:italic}header{height:54px;position:fixed;inset:0 0 auto;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-block:1px solid var(--rule);background:#101010ed;font-size:13px;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:12px}.brand img{width:19px;height:24px;object-fit:contain}header b{color:#ed482b;font-size:20px;margin-left:8px}main{padding-top:54px}.hero{position:relative;min-height:calc(100svh - 54px);display:grid;grid-template-columns:1fr 1fr;overflow:hidden;background:#050505}.hero-image{position:absolute;inset:0;overflow:hidden}.hero-image:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0003,#0006 48%,#000c)}.hero-image img{width:100%;height:120%;object-fit:cover;object-position:center 35%;filter:grayscale(1) brightness(.58);transform:translateY(var(--drift,0px))}.hero-title,.hero-copy{z-index:1;position:relative;padding:36px 28px;display:flex;flex-direction:column}.hero-title{border-right:1px solid var(--rule)}h1{font-size:clamp(68px,8.6vw,160px);line-height:.92;letter-spacing:-.07em}h1 span{display:block}.tags{display:flex;gap:5px;margin-top:28px}.tags span{font-size:12px;border:1px solid;border-radius:30px;padding:2px 8px}.hero-title>small{margin-top:auto;padding-top:180px;font-size:11px}.hero-copy p{font-size:clamp(25px,3.15vw,55px);letter-spacing:-.045em;line-height:1.03;max-width:560px}.hero-copy p span{color:#babbb8}.hero-copy>a{align-self:flex-end;margin-top:auto;font-size:100px;line-height:1;transition:transform .4s}.hero-copy>a:hover{transform:translate(8px,8px)}.statement{padding:72px 26px;display:flex;gap:40px;align-items:center;justify-content:space-between;border-block:1px solid var(--rule)}.statement p{font-size:clamp(27px,3.7vw,64px);line-height:1.1;letter-spacing:-.045em}.red{color:#ed482b}.orb{display:grid;place-items:center;flex-shrink:0;width:150px;height:150px;background:#ed482b;border-radius:50%;color:#101010;font-size:115px;animation:spin 25s linear infinite}.eyebrow{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-top:1px solid var(--rule);font-size:11px}.work,.sound,.movement,.visibility{padding:65px 26px 90px}.work-heading{display:flex;justify-content:space-between;align-items:end;margin:45px 0 80px}.work-heading p{font-size:20px;width:27%;line-height:1.3}h2{font-size:clamp(54px,7vw,130px);line-height:.94;letter-spacing:-.065em}.projects{border-bottom:1px solid var(--rule)}.project{position:relative;display:grid;grid-template-columns:6% 1fr 24% 5%;align-items:center;gap:20px;border-top:1px solid var(--rule);padding:36px 0;min-height:145px}.project>span,.project small{font-size:10px}.project h3{font-size:clamp(34px,4.6vw,85px);letter-spacing:-.06em;transition:transform .5s}.project>b{font-size:38px;font-weight:400}.project img{position:absolute;width:260px;height:320px;object-fit:cover;left:55%;top:50%;z-index:2;pointer-events:none;opacity:0;transform:translate(-50%,-45%) rotate(-7deg) scale(.8);transition:opacity .35s,transform .55s cubic-bezier(.2,.8,.2,1)}.project:hover img,.project:focus-visible img{opacity:1;transform:translate(-50%,-50%) rotate(3deg) scale(1)}.project:hover h3{transform:translateX(20px)}.sound{background:#dcd9d0;color:#161616;--rule:#16161655}.album{display:grid;grid-template-columns:1fr 1fr;gap:10%;padding-top:50px}.album small{font-size:11px}.album h2{margin:25px 0 40px}.album p{font-size:23px}.album-cover{overflow:hidden}.album-cover img{display:block;width:100%;transition:transform 1s}.album-cover:hover img{transform:scale(1.05)}.line{display:flex;justify-content:space-between;gap:35px;align-items:center;border-block:1px solid;margin-top:42px;padding:17px 0;font-size:14px}.line b{font-size:25px;font-weight:400}.movement-grid{display:grid;grid-template-columns:1fr 1fr;gap:10%;padding-top:50px;align-items:center}.movement-grid>img{width:100%;height:650px;object-fit:cover;filter:grayscale(1)}.movement p{margin-top:38px;font-size:21px}.visibility{background:#f3cd32;color:#101010;--rule:#10101055}.visibility h2{margin:55px 0;max-width:1200px}.visibility-bottom{display:grid;grid-template-columns:1fr 1fr;gap:15%;align-items:center}.visibility p{font-size:22px;max-width:470px}.visibility .line{margin:0}.song{display:grid;grid-template-columns:1fr 1.5fr auto;gap:20px;align-items:center;border-top:1px solid var(--rule);margin-top:75px;padding-top:25px}.song small{font-size:11px}.song span{font-size:clamp(30px,4vw,75px);letter-spacing:-.05em}.song b{font-size:40px}footer{padding:65px 26px 18px}footer>small{font-size:11px}.contact-title{display:flex;justify-content:space-between;align-items:center;font-size:clamp(80px,15vw,270px);letter-spacing:-.085em;line-height:1.4}.contact-title span{font-size:.8em}.footer-grid{display:flex;justify-content:space-between;gap:24px;border-block:1px solid var(--rule);padding:25px 0;font-size:12px}.preview-note{font-size:10px;color:#aaa;padding-top:25px}.opening{position:fixed;inset:0;z-index:40;background:#eeede6;color:#101010;padding:24px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;animation:openAway .95s cubic-bezier(.75,0,.2,1) 1s both}.opening>div{font-size:clamp(65px,10vw,180px);line-height:.95;letter-spacing:-.07em}.opening i{float:right;font-style:normal}.opening small{font-size:11px}.reveal{opacity:1;transform:none}.js .reveal{opacity:0;transform:translateY(55px);transition:opacity .9s,transform 1s cubic-bezier(.2,.8,.2,1)}.js .reveal.visible{opacity:1;transform:none}dialog{padding:0;border:0;max-width:none;max-height:none;width:100%;height:100svh;margin:0;background:#f3cd32;color:#101010}dialog::backdrop{background:#10101088}dialog[open]{display:flex;flex-direction:column;animation:menuIn .7s cubic-bezier(.2,.8,.2,1)}.menu-top{display:flex;justify-content:space-between;padding:18px 24px;border-bottom:1px solid #10101088;font-size:13px}dialog nav{margin:auto 12%;display:flex;flex-direction:column;align-items:start}dialog nav a{font-size:clamp(42px,6.5vw,100px);line-height:1.1;letter-spacing:-.055em;transition:transform .3s}dialog nav a:hover{transform:translateX(20px)}dialog sup{font-size:12px;vertical-align:top;letter-spacing:0}dialog>small{padding:25px;font-size:11px}.route-wipe{position:fixed;inset:0;background:#f3cd32;z-index:50;display:grid;place-items:center;transform:translateY(101%);transition:transform .6s cubic-bezier(.7,0,.2,1);pointer-events:none}.route-wipe img{width:80px}.leaving .route-wipe{transform:translateY(0)}@keyframes openAway{to{transform:translateY(-101%)}}@keyframes menuIn{from{clip-path:inset(0 0 100%)}to{clip-path:inset(0)}}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:700px){header{padding:0 15px;font-size:11px}header>span{display:none}.hero{min-height:850px;grid-template-columns:1fr}.hero-title{border-right:0;padding:38px 18px 22px}.hero-title>small{padding-top:130px}.hero-copy{border-top:1px solid var(--rule);padding:25px 18px}.hero-copy p{font-size:29px;max-width:90%}.hero-copy>a{font-size:65px}h1{font-size:20vw}.statement{padding:45px 18px;align-items:flex-start}.statement p{font-size:27px}.orb{width:55px;height:55px;font-size:42px}.work,.sound,.movement,.visibility{padding:40px 18px 55px}.eyebrow{font-size:9px}.eyebrow span:last-child{text-align:right;max-width:55%}.work-heading{display:block;margin:35px 0}.work-heading p{width:auto;font-size:17px;margin-top:30px}.project{grid-template-columns:25px 1fr 30px;gap:10px;padding:24px 0}.project small{grid-column:2;font-size:9px}.project img{position:static;grid-column:2;grid-row:2;transform:none!important;opacity:1;width:100%;height:180px;object-fit:cover;margin:15px 0}.project>b{grid-column:3;grid-row:1}.project:hover h3{transform:none}.album,.movement-grid{grid-template-columns:1fr;gap:35px;padding-top:30px}.album-cover{grid-row:1}.movement-grid>img{height:430px}.visibility-bottom{grid-template-columns:1fr;gap:30px}.visibility p{font-size:19px}.song{grid-template-columns:1fr auto}.song small{grid-column:1/-1}.footer-grid{display:grid;grid-template-columns:1fr 1fr;font-size:10px}.contact-title{font-size:18vw}footer{padding:45px 18px 18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.opening{display:none}.js .reveal{opacity:1;transform:none}.hero-image img{transform:none}.route-wipe{display:none}}
/* Reference motion study: measured Studio easing and layered curtain. */
:root{--studio-ease:cubic-bezier(.4,.4,0,1)}
body{background:#0e0e0e;--rule:#efeee8}header{height:85px;font-size:clamp(14px,2.35vw,30px);border-block-width:4px;background:#0e0e0e;backdrop-filter:none}header .original{font-size:12px}main{padding-top:85px}.hero{min-height:calc(100svh - 85px)}.hero-title{border-right-width:4px}.hero-title h1{font-size:clamp(70px,9.5vw,150px)}.hero-copy{padding:110px 8% 40px 16%}.hero-copy p{font-size:clamp(30px,4.27vw,62px)}.tags span{font-size:clamp(16px,2.7vw,40px)}.hero-image img{height:100%;transform:none}.hero-title,.hero-copy{transition:opacity 1s var(--studio-ease),transform 1s var(--studio-ease)}.js:not(.entered) .hero-title,.js:not(.entered) .hero-copy{opacity:0;transform:translateY(70px)}
.opening{animation:none;background:#000;color:#efeee8;display:grid;place-items:center;padding:0;transform-origin:top;transform:scaleY(1);transition:transform .8s var(--studio-ease) 1.8s}.opening:before{content:'';position:absolute;inset:0;background:#efeee8;transform-origin:top;transition:transform .8s var(--studio-ease) .9s;transform:scaleY(1);z-index:1}.opening>span{position:relative;z-index:2;color:#111;font-size:clamp(60px,9.5vw,120px);transition:opacity .6s var(--studio-ease) .6s}.opening>div,.opening>small{display:none}.loaded .opening{transform:scaleY(0)}.loaded .opening:before{transform:scaleY(0)}.loaded .opening>span{opacity:0}.opening[hidden]{display:none}
.js .reveal{transform:translateY(90px);transition:opacity 1s var(--studio-ease),transform 1s var(--studio-ease)}.js .reveal.visible{transform:none}.orb{animation:none}.statement .orb{transition:transform 1s var(--studio-ease)}.statement:hover .orb{transform:rotate(90deg)}
dialog{background:#ffc42c;overflow:auto;transform:translateY(-100%);transition:transform 1s var(--studio-ease)}dialog[open]{animation:none}dialog.is-open{transform:none}dialog nav a{opacity:0;transform:translateY(60px);transition:opacity .6s var(--studio-ease),transform 1s var(--studio-ease)}dialog.is-open nav a{opacity:1;transform:none;transition-delay:calc(.15s + var(--i,0)*.06s)}dialog .menu-top{padding:24px;font-size:24px}dialog>small{transform:translateY(90px);transition:transform 1s var(--studio-ease)}dialog.is-open>small{transform:none}.route-wipe{background:#0e0e0e;transform:scaleY(0);transform-origin:bottom;transition:transform .8s var(--studio-ease)}.route-wipe img{filter:invert(1)}.leaving .route-wipe{transform:scaleY(1)}.visibility{background:#ffc42c}
@media(max-width:700px){header{height:64px;font-size:13px;border-width:2px}main{padding-top:64px}.hero-title{border-right:0}.hero-copy{padding:30px 18px}.hero-title h1{font-size:20vw}.hero-copy p{font-size:30px}.tags span{font-size:18px}dialog .menu-top{font-size:16px}}
@media(prefers-reduced-motion:reduce){.opening{display:none}.js:not(.entered) .hero-title,.js:not(.entered) .hero-copy,.js .reveal{opacity:1;transform:none}dialog.is-open nav a{opacity:1;transform:none}}
/* Animation lifecycle is owned by WAAPI, avoiding CSS state races. */
.opening,.loaded .opening{transform:scaleY(1);transition:none;background:#000;color:#efeee8}
.opening:before{display:none}.opening>span,.loaded .opening>span{opacity:1;color:#efeee8;transition:none}
.opening>small{display:block;position:absolute;bottom:32px;left:28px}.opening[hidden]{display:none}
dialog,dialog[open],dialog.is-open{transform:none;transition:none;animation:none}dialog nav a,dialog.is-open nav a{opacity:1;transform:none;transition:none}dialog>small{transform:none}
.route-wipe{visibility:hidden;transform:scaleY(0);transition:none;pointer-events:all;background:#0e0e0e}
html{scroll-padding-top:85px}@media(max-width:700px){html{scroll-padding-top:64px}}
@media(prefers-reduced-motion:reduce){.opening{display:none!important}}
.experiment-detail{min-height:100svh;padding:70px 4vw;display:grid;gap:40px}.experiment-detail[hidden],main>[hidden]{display:none!important}.experiment-detail img{display:block;width:min(100%,900px);max-height:70svh;object-fit:contain}.experiment-detail>a{font-size:24px;padding:24px 0}
.motion-enable{position:fixed;bottom:20px;right:20px;z-index:100;background:#ffc42c;color:#111;padding:16px 22px;border-radius:4px;font-size:16px}.motion-demo .opening:not([hidden]){display:grid!important}.motion-demo .route-wipe{display:grid!important}
/* Single motion owner: WAAPI supplies all curtain transforms. */
.opening,.loaded .opening{transform:none;pointer-events:auto;overflow:hidden}
.opening:not([hidden]){display:grid}.opening[hidden]{display:none!important}
.intro-running,.menu-running{overflow:hidden}
.route-wipe{transform:translateY(100%)}
.experiment-detail{gap:28px;padding-top:45px}.detail-back{font-size:16px!important;padding:12px 0!important}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:start}.detail-grid img{width:100%;max-height:65svh;object-fit:contain;object-position:left top}.detail-grid p{font-size:clamp(22px,2.7vw,40px);line-height:1.15;letter-spacing:-.035em}
.detail-music{border-top:1px solid;padding-top:30px}.detail-music h3{font-size:30px;margin:24px 0}.detail-music audio{width:min(100%,650px)}.detail-music ol{columns:2;padding-left:24px;font-size:20px;line-height:1.8}
button{min-height:44px}dialog nav a{min-height:44px}dialog[open]{overscroll-behavior:contain}dialog nav{padding-block:24px}
@media(max-width:700px){.detail-grid{grid-template-columns:1fr;gap:28px}.experiment-detail{padding:30px 18px}.experiment-detail h2{font-size:clamp(45px,13vw,75px);overflow-wrap:anywhere}.detail-music ol{columns:1}dialog nav{margin:auto 8%}dialog nav a{font-size:clamp(35px,10vw,65px)}.motion-enable{left:18px;right:18px;font-size:14px}}
@media(prefers-reduced-motion:reduce){.route-wipe{display:grid}.motion-demo .opening:not([hidden]){display:grid!important}}
/* Keep the loading hold static; composite only the upward exit. */
.opening,.loaded .opening{padding:24px;transform:translate3d(0,0,0);isolation:isolate;backface-visibility:hidden;will-change:transform}
.opening>span,.loaded .opening>span{transform:translateZ(0);backface-visibility:hidden;opacity:1;visibility:visible;line-height:1.05}
html.intro-running,html.menu-running,html.route-running,body.intro-running,body.menu-running,body.route-running{overflow:hidden;overscroll-behavior:none}
.route-wipe{will-change:transform;backface-visibility:hidden}
html{scrollbar-gutter:stable;color-scheme:dark}