*{box-sizing:border-box}html{scrollbar-width:none}html::-webkit-scrollbar{display:none}html,body{margin:0;background:#fdfdfb;color:#11120e;font-family:Arial,Helvetica,sans-serif}body{overscroll-behavior-y:none}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid #709364;outline-offset:6px}header{position:fixed;z-index:30;top:16px;left:16px;right:16px;display:flex;align-items:center;justify-content:space-between}.brand{font-size:48px;font-weight:900;letter-spacing:-5px;line-height:1}nav{display:flex;gap:22px;align-items:center;font-size:12px}#theme{font-size:22px}#journey{height:400vh}#stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}#orbit{position:absolute;inset:0;z-index:4}.sphere{position:absolute;left:0;top:0;display:block;overflow:hidden;border-radius:50%;border:0;padding:0;will-change:transform,width,height,border-radius;isolation:isolate}.sphere img{width:110%;height:110%;object-fit:cover;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}.sphere .label{position:absolute;bottom:18px;left:22px;color:white;font-size:12px;text-shadow:0 1px 9px #000;opacity:0}.sphere:hover .label{opacity:1}#intro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;text-align:center;font-size:16px;font-weight:400;line-height:1.5;width:310px;z-index:2}footer{position:fixed;z-index:25;bottom:16px;left:16px;right:24px;display:flex;align-items:center;justify-content:space-between;font-size:11px}#action{background:#11120e;color:#fff;border-radius:40px;padding:20px 26px;display:flex;align-items:center;gap:36px}#hint{opacity:.5}#dots{position:relative;width:45px;height:45px}#dots i{position:absolute;left:50%;top:50%;width:4px;height:4px;border:1px solid currentColor;border-radius:50%;opacity:.4}#dots i.active{background:currentColor;opacity:1}#gallery-wrap{position:absolute;inset:0;z-index:3;opacity:0;visibility:hidden}#gallery{width:100%;height:100%;border:0;display:block}#back{position:fixed;z-index:50;left:50%;transform:translateX(-50%);bottom:24px;background:#f3f0e9;color:#151515;border:1px solid #aaa4;border-radius:24px;font-size:11px;padding:12px 20px}#loading{position:fixed;z-index:60;bottom:80px;left:50%;transform:translateX(-50%);font-size:12px;background:#eee;padding:12px 20px;border-radius:30px}[hidden]{display:none!important}body.in-gallery header,body.in-gallery footer{visibility:hidden}body.in-gallery #orbit,body.in-gallery #intro{visibility:hidden}body.dark{background:#151513;color:#eee}body.dark #action{background:#eee;color:#111}.reference #journey{height:1000vh}.reference #mode-link{font-size:11px}.reference #hint{display:none}.reference #enter{display:none}
#ref-title{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);font-size:36px;pointer-events:none;z-index:20;white-space:nowrap}.ref-arrow{position:fixed;top:50%;transform:translateY(-50%);z-index:20;background:#fdfdfb;color:#111;border-radius:50%;width:48px;height:48px;font-size:24px;opacity:0;pointer-events:none}
@media(max-width:700px){header{top:20px;left:20px;right:20px}.brand{font-size:36px;letter-spacing:-4px}nav{gap:16px}nav a{font-size:10px}#enter{font-size:10px}#intro{font-size:13px;width:245px}footer{bottom:20px;left:20px;right:20px}#action{font-size:10px;padding:16px 20px;gap:15px}#hint{display:none}#ref-title{font-size:24px;bottom:100px}.ref-arrow{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sphere{will-change:auto}}
@media(max-width:700px){body:not(.reference) #intro{width:180px;font-size:12px;line-height:1.4}}
body:not(.reference) #intro,body:not(.reference) #hint{display:none}

#project-details{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#ececec;overflow:hidden}
#project-details::backdrop{background:#ececec}
#project-details .detail-scroll{width:100%;height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
#project-details .detail-scroll::-webkit-scrollbar{display:none}
#project-details iframe{display:block;border:0;width:100%;height:100dvh}
#project-details .detail-back{position:fixed;top:clamp(24px,4.2vh,54px);left:50%;transform:translateX(-50%);z-index:10;background:transparent;color:#fff;border:0;border-radius:0;height:32px;padding:0 12px;font:400 14px/1.2 Arial,Helvetica,sans-serif;mix-blend-mode:difference;box-shadow:none;cursor:pointer}
#project-details .detail-back:focus,#project-details .detail-back:focus-visible{outline:0;border:0;box-shadow:none;text-decoration:underline;text-underline-offset:4px}
.detail-video-stage{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:clamp(32px,4vw,64px);background:#ececec}
.detail-canvas{position:relative;flex:none;width:var(--wide-width);max-width:100%;aspect-ratio:16/9;overflow:hidden;border:0;border-radius:0;background:#ececec}
#project-details .detail-canvas video{display:block;width:100%;height:100%;aspect-ratio:16/9;object-fit:contain;background:#ececec}
.detail-poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
#detail-geometry{position:fixed;inset:0;visibility:hidden;pointer-events:none;z-index:-1}
#project-details{outline:0;box-shadow:none}
#project-details.is-preparing{opacity:0;pointer-events:none}
#project-details.is-preparing::backdrop{background:transparent}
#project-details::backdrop{background:transparent}

@media(min-width:1920px){.detail-video-stage{padding-top:max(64px,calc((100svh - var(--hero-height))/2),calc(100svh - var(--hero-height) - var(--chapter-gap)))}}

#project-details .detail-play-toggle{position:absolute;right:clamp(12px,1vw,20px);bottom:clamp(12px,.8vw,16px);width:clamp(40px,6.25%,88px);aspect-ratio:1;border:0;border-radius:50%;background:#fff9;color:#171717;font:400 16px/1 Arial,sans-serif;display:grid;place-items:center;opacity:0;transition:opacity .2s;cursor:pointer}
#project-details .detail-canvas:hover .detail-play-toggle,#project-details .detail-canvas:focus-within .detail-play-toggle{opacity:1}
@media(hover:none),(max-width:768px){#project-details .detail-play-toggle{opacity:1}}

/* Intro/Work/About share Wardrobe's #ececec stock. */
body:not(.reference),body:not(.reference) #stage{background:#ececec}
body:not(.reference) #back,body:not(.reference) .sphere .label{display:none!important}
body.reference #section-nav,body.reference #about{display:none}
#section-nav{position:fixed;top:20px;left:50%;right:auto;transform:translateX(-50%);z-index:70;display:block;width:min(400px,calc(100vw - 24px));height:44px;overflow:hidden;font:400 11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:-.025em;text-transform:uppercase;mask-image:linear-gradient(to right,transparent,#000 24%,#000 76%,transparent)}
.section-nav-track{position:absolute;left:50%;top:0;display:flex;align-items:center;gap:32px;height:44px;width:max-content;will-change:transform}
#section-nav a{display:block;flex:none;min-width:44px;text-align:center;padding:12px 4px;color:#282924;white-space:nowrap;transition:color .15s,opacity .15s;text-decoration:none}
#section-nav a:hover,#section-nav a:focus-visible{opacity:1!important;color:#10110f;outline:0;text-decoration:underline;text-underline-offset:4px}
#about{position:relative;min-height:100svh;background:#ececec;color:#181916;padding:0;overflow:hidden}
#about-badge{position:absolute;inset:0;width:100%;height:100%;display:block;border:0;background:#ececec}
#about-pane{position:fixed;inset:0;z-index:45;background:#ececec;transform:translateY(100%);transition:transform 700ms cubic-bezier(.22,1,.36,1);overflow:hidden}
#about-pane.is-present{transform:translateY(0)}
#about-badge{visibility:hidden}
body.about-transitioning{overflow:hidden}
@media(prefers-reduced-motion:reduce){#about-pane{transition:none}}
.about-sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#about h2{font:400 clamp(38px,5vw,72px)/1.1 Georgia,'Times New Roman',serif;letter-spacing:-.045em;margin:0}
#about-links{font-size:clamp(14px,1.5vw,22px);line-height:1.5;text-align:center}
body:has(#project-details[open]) #section-nav{visibility:hidden}
body:not(.reference) #journey{height:calc(var(--viewport-height,100dvh) * 4)}
body:not(.reference) #stage{height:var(--viewport-height,100dvh)}
body:not(.reference) #about{min-height:var(--viewport-height,100dvh)}
.clou-fluid-canvas{position:fixed;inset:0;width:100vw;height:100dvh;pointer-events:none;z-index:100;mix-blend-mode:plus-lighter}
.clou-hover-cursor{position:fixed;left:0;top:0;z-index:11000;pointer-events:none;mix-blend-mode:difference}
.clou-hover-cursor span{position:absolute;left:0;top:0;width:calc(clamp(14px,1vw,38px)*2.2);height:calc(clamp(14px,1vw,38px)*2.2);border:1.5px solid #fff;border-radius:50%}
.has-clou-cursor,.has-clou-cursor *{cursor:none!important}
@media(max-width:700px){#section-nav{top:12px;font-size:10px;width:calc(100vw - 24px)}.section-nav-track{gap:28px}}