:root{color-scheme:dark;--bg:#090a0b;--text:#f5f5f2;--muted:#9a9da0;--line:#ffffff2b;--accent:#00e5ff;--gutter:clamp(24px,4vw,72px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:0}body{margin:0;background:var(--bg);color:var(--text);font-family:Syne,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:6px}p,h1,h2,figure{margin:0}.mono{font:400 11px/1.65 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.04em}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.skip-link{position:fixed;top:8px;left:24px;z-index:20;background:var(--accent);color:#000;padding:12px;transform:translateY(-160%)}.skip-link:focus{transform:none}
.header{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:20px var(--gutter);background:#090a0bed;backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.wordmark{font-size:40px;line-height:1;font-weight:800;letter-spacing:-.07em}.wordmark span{font:12px 'JetBrains Mono',monospace;vertical-align:top;display:inline-block;margin:4px 0 0 7px}.header-actions{display:flex;align-items:center;gap:32px}.header nav{display:flex;gap:36px}.header nav a:hover{color:var(--accent)}.sound-toggle{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;background:#ffffff0a;border:1px solid var(--line);border-radius:2px;color:var(--muted);font-size:11px;cursor:pointer;transition:color .2s,border-color .2s,background .2s;pointer-events:auto}.sound-toggle:hover{color:var(--text);border-color:#ffffff59;background:#ffffff14}.sound-toggle[aria-pressed=true]{color:var(--accent);border-color:var(--accent);background:#00e5ff12}.sound-bars{display:inline-flex;align-items:flex-end;gap:2.5px;height:11px;width:13px}.sound-bars i{display:block;width:1.5px;background:currentColor;height:3px;border-radius:1px;transition:height .2s ease}.sound-toggle[aria-pressed=true] .sound-bars i:nth-child(1){animation:soundBar 1.1s ease-in-out infinite alternate}.sound-toggle[aria-pressed=true] .sound-bars i:nth-child(2){animation:soundBar .85s ease-in-out infinite alternate .2s}.sound-toggle[aria-pressed=true] .sound-bars i:nth-child(3){animation:soundBar 1.35s ease-in-out infinite alternate .4s}.sound-toggle[aria-pressed=true] .sound-bars i:nth-child(4){animation:soundBar 1.05s ease-in-out infinite alternate .15s}@keyframes soundBar{0%{height:2.5px}100%{height:11px}}@media(prefers-reduced-motion:reduce){.sound-toggle[aria-pressed=true] .sound-bars i{animation:none!important;height:7px}}
.intro{padding:60px var(--gutter) 72px;display:grid;grid-template-columns:1fr 1fr;gap:22px}.intro-label{grid-column:1/-1;color:var(--muted)}.intro h1{font-size:clamp(50px,8vw,126px);line-height:1.02;letter-spacing:-.07em;font-weight:600;white-space:nowrap}.intro h1 span{color:transparent;-webkit-text-stroke:1px var(--text)}.intro-copy{justify-self:end;max-width:300px;display:flex;flex-direction:column;justify-content:space-between;padding-top:10px;gap:22px}.intro-copy>p{font-size:16px;line-height:1.55}.intro-copy .mono{color:var(--muted)}
.project-index{position:fixed;top:clamp(230px,40vh,390px);bottom:90px;left:var(--gutter);width:190px;overflow-y:auto;scrollbar-width:thin;z-index:2}.project-index>p{color:var(--muted);margin-bottom:20px}.project-index nav{display:flex;flex-direction:column;gap:2px}.project-index nav a{display:flex;gap:12px;padding:5px 0;font-size:12px;color:#73797d;transition:color .2s}.project-index nav a span{font:9px 'JetBrains Mono',monospace;color:#666}.project-index a[aria-current],.project-index nav a:hover{color:var(--text)}.project-index a[aria-current] span{color:var(--accent)}.index-cta{display:block;margin-top:28px;font-size:10px;color:var(--muted)}
.gallery{margin-left:24vw;padding-right:var(--gutter)}.project{padding-bottom:120px;scroll-margin-top:110px}.project-top{display:flex;justify-content:space-between;gap:20px;color:var(--muted);margin-bottom:16px}.project-image{display:block;position:relative;overflow:hidden;background:#131719;aspect-ratio:1.48}.project-image img{display:block;width:100%;height:100%;object-fit:contain;transition:filter .5s}.project-image:hover img{filter:brightness(1.06)}.image-action{position:absolute;bottom:18px;right:18px;background:var(--text);color:var(--bg);padding:14px 18px;font-size:12px;opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none}.project-image:hover .image-action,.project-image:focus-visible .image-action{opacity:1;transform:none}.project-details{display:grid;grid-template-columns:1.05fr 1fr;gap:32px;border-bottom:1px solid var(--line);padding:26px 0 32px}.project-details h2{font-size:clamp(24px,3.3vw,52px);line-height:1.12;letter-spacing:-.045em;font-weight:600;text-wrap:balance}.project-details h2 span{font-size:.6em;color:var(--muted)}.project-lead{font-size:16px;line-height:1.6;max-width:37ch;text-wrap:pretty}.project-services{font-size:10px;line-height:1.8;color:var(--muted);margin-top:18px}.project-links{display:flex;gap:24px;flex-wrap:wrap;margin-top:22px;font-size:12px}.project-links a,.project-links button{padding:8px 0;border-bottom:1px solid #ffffff4d}.project-links a:hover,.project-links button:hover{color:var(--accent)}.provenance{font-size:9px;color:var(--muted);margin-top:18px}
.project:nth-child(4n+2){width:80%;margin-left:20%}.project:nth-child(4n+3){width:85%}.project:nth-child(4n+2) .project-image{aspect-ratio:1.15}.project:nth-child(4n+3) .project-image{aspect-ratio:1.4}.closing{margin:0 var(--gutter) 0 24vw;padding:48px 0 140px;border-top:1px solid var(--line)}.closing>.mono{color:var(--muted)}.closing h2{font-size:clamp(40px,7vw,110px);line-height:1.05;letter-spacing:-.055em;font-weight:600;margin:32px 0}.closing h2 a{color:transparent;-webkit-text-stroke:1px var(--text)}.closing h2 a:hover{color:var(--accent);-webkit-text-stroke:0}.closing>p{font-size:17px;line-height:1.65;max-width:45ch}.contact-link{display:inline-block;margin-top:28px;padding-bottom:12px;border-bottom:1px solid var(--text);font-size:15px}
.dock{position:fixed;bottom:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:18px var(--gutter);min-height:70px;background:#090a0bf2;backdrop-filter:blur(16px);border-top:1px solid var(--line)}.dock #current-name{margin-left:16px;color:var(--muted)}.view-controls{display:flex;gap:22px}.view-controls button{font-size:12px;min-height:36px;color:var(--muted);padding:4px 0;border-bottom:1px solid transparent}.view-controls button[aria-pressed=true]{color:var(--text);border-color:var(--accent)}.reading-progress{position:absolute;top:-1px;left:0;height:1px;background:var(--accent);width:100%;transform:scaleX(0);transform-origin:left}
.grid-view .gallery{display:grid;grid-template-columns:1fr 1fr;gap:60px 30px}.grid-view .project{width:100%;margin:0;padding-bottom:0}.grid-view .project-image{aspect-ratio:1.4}.grid-view .project-top{font-size:9px;flex-direction:column;gap:0}.grid-view .project-details{display:block;padding:18px 0 28px}.grid-view .project-details h2{font-size:27px;margin-bottom:18px}.grid-view .project-lead{font-size:14px}.grid-view .closing{margin-top:100px}
.viewer{position:fixed;inset:16px;width:calc(100% - 32px);height:calc(100svh - 32px);max-width:none;max-height:none;padding:0;border:1px solid var(--line);background:var(--bg);color:var(--text)}.viewer::backdrop{background:#000c;backdrop-filter:blur(16px)}.viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 20px;min-height:70px;font-size:12px;border-bottom:1px solid var(--line)}.viewer-bar button,.viewer-bar a{padding:12px 8px}.device-controls{display:flex;gap:8px}.device-controls button[aria-pressed=true]{color:var(--accent)}.viewer iframe{display:block;width:100%;height:calc(100% - 70px);border:0;background:#fff}.viewer--mobile iframe{max-width:390px;margin:auto}.viewer--mobile{background:#171a1c}body:has(.viewer[open]){overflow:hidden}
@media(max-width:1000px){.project-index{width:140px}.gallery{margin-left:23vw}.intro{padding-top:44px}.intro h1{font-size:7.5vw}.project-details{grid-template-columns:1fr}.project-index nav a{font-size:11px}.project-top{font-size:10px}.closing{margin-left:23vw}}
@media(max-width:700px){html{scroll-padding-top:0}.project{scroll-margin-top:90px}.header{padding:18px 24px}.wordmark{font-size:30px}.header-actions{gap:14px}.sound-toggle{padding:5px 9px;min-height:36px;font-size:10px}.sound-prefix{display:none}.header nav{gap:16px;font-size:9px}.header nav a{min-height:32px;display:flex;align-items:center}.intro{display:block;padding:40px 24px 44px}.intro-label{font-size:9px;margin-bottom:24px}.intro h1{font-size:11.5vw;white-space:normal}.intro-copy{max-width:none;padding-top:28px;flex-direction:row;gap:20px}.intro-copy>p{font-size:13px;max-width:190px}.intro-copy .mono{font-size:8px;max-width:115px}.project-index{display:none}.gallery{margin:0;padding:0}.project,.project:nth-child(n){width:100%;margin:0;padding-bottom:66px}.project-top{padding:0 24px;font-size:9px;gap:18px;margin-bottom:14px;line-height:1.6}.project-top>span:last-child{text-align:right;max-width:125px}.project-image,.project:nth-child(n) .project-image{aspect-ratio:1.22}.project-image img{object-fit:contain}.project-details{margin:0 24px;padding:22px 0 28px;gap:20px}.project-details h2{font-size:clamp(26px,8vw,40px)}.project-lead{font-size:15px;line-height:1.65}.project-services{font-size:9px;margin-top:14px}.project-links{margin-top:18px;font-size:12px}.project-links a,.project-links button{min-height:44px;display:inline-flex;align-items:center}.image-action{display:none}.closing{margin:0 24px;padding:40px 0 140px}.closing h2{font-size:11vw}.closing>p{font-size:15px}.dock{padding:12px 24px;gap:16px;min-height:72px}.dock>.mono{font-size:9px}.dock>a{display:none}.dock #current-name{display:block;margin:3px 0 0;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.view-controls{gap:18px}.view-controls button{min-height:44px;font-size:11px}.grid-view .gallery{padding:0 24px;gap:30px 14px}.grid-view .project-top{padding:0;font-size:8px;display:block;min-height:55px}.grid-view .project-top>span{display:block;text-align:left;max-width:none}.grid-view .project-details{margin:0;padding:14px 0}.grid-view .project-details h2{font-size:18px;letter-spacing:-.03em;margin-bottom:0;overflow-wrap:anywhere}.grid-view .project-details>div{display:none}.grid-view .project:nth-child(n) .project-image{aspect-ratio:1.1}.viewer{inset:6px;width:calc(100% - 12px);height:calc(100svh - 12px)}.viewer-bar{padding:8px 10px;flex-wrap:wrap;gap:4px;font-size:10px}.viewer-bar strong{width:calc(100% - 65px);order:0}.viewer-bar #viewer-close{order:1}.device-controls{order:2}.viewer-bar>a{order:3}.viewer iframe{height:calc(100% - 100px)}.viewer--mobile iframe{max-width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}.project-image img{transform:none!important}}
.project-index nav a{font-size:13px;padding:6px 0}.project-top{font-size:12px}.project-services{font-size:11px}
@media(max-width:700px){.header nav{font-size:10px}.project-top{font-size:10px}.project-services{font-size:10px}.viewer-bar button,.viewer-bar a{min-height:44px}.grid-view .project-top{font-size:9px;min-height:64px}}
@media(max-width:420px){.sound-label{display:none}.sound-toggle{padding:7px 9px}}
@media(max-width:359px){.header nav>a:first-child{display:none}.wordmark{font-size:26px}.intro-copy{display:block}.intro-copy .mono{display:block;max-width:none;margin-top:18px}.project-top{font-size:9px}.dock #current-name{max-width:145px}}
@media(max-width:700px){.header nav>a:first-child{display:none}.header nav>a:last-child{white-space:nowrap}.grid-view .project:nth-child(n){padding-bottom:0}.grid-view .project-image img{object-fit:cover}.grid-view .project-details h2 span{font-size:.55em}}
/* Immersive browser: the work moves through a persistent studio frame. */
body.experience{height:100svh;overflow:hidden}.experience .header{position:fixed;top:0;left:0;right:0;background:transparent;backdrop-filter:none;border:0;padding:24px var(--gutter);pointer-events:none}.experience .header a,.experience .header button{pointer-events:auto}.experience .wordmark{font-size:clamp(40px,6.3vw,94px)}.experience .intro{position:fixed;inset:0;padding:0;display:block;pointer-events:none;z-index:4}.experience .intro h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.experience .intro-label{position:absolute;top:128px;left:var(--gutter);font-size:10px}.experience .intro-copy{position:absolute;right:var(--gutter);top:110px;width:21vw;max-width:300px;padding:0;gap:16px}.experience .intro-copy>p{font-size:13px;line-height:1.55}.experience .intro-copy>.mono{font-size:9px;line-height:1.65}.experience .project-index{top:38svh;bottom:14svh;width:19vw;max-width:245px;z-index:5}.experience .project-index>p{display:none}.experience .project-index nav a{font-size:11px;padding:4px 0;gap:10px}.experience .index-cta{margin-top:20px;font-size:9px}
.experience .gallery{position:fixed;inset:0;margin:0;padding:13svh 0;overflow:auto;scrollbar-width:none;overscroll-behavior:contain;outline-offset:-4px;scroll-behavior:smooth}.experience .gallery::-webkit-scrollbar{display:none}.experience .project,.experience .project:nth-child(n){height:74svh;min-height:430px;width:100%;margin:0;padding:0;display:flex;align-items:center;justify-content:center;scroll-margin:0}.experience .project-image,.experience .project:nth-child(n) .project-image{width:52vw;max-width:850px;height:50svh;max-height:660px;aspect-ratio:auto;background:transparent;overflow:visible;z-index:1}.experience .project-image img{object-fit:contain;width:100%;height:100%;transition:opacity .2s}.experience .image-action{bottom:0;right:0;z-index:6}.experience .project-details{display:contents}.experience .project-top{position:fixed;top:calc(50svh - 140px);right:var(--gutter);width:21vw;max-width:300px;display:flex;flex-direction:column;gap:8px;font-size:10px;visibility:hidden;opacity:0;pointer-events:none;z-index:4;margin:0}.experience .project-details h2{position:fixed;top:22svh;left:var(--gutter);width:19vw;max-width:245px;font-size:clamp(24px,2.7vw,44px);line-height:1.15;visibility:hidden;opacity:0;pointer-events:none;z-index:5;overflow-wrap:anywhere}.experience .project-details>div{position:fixed;top:calc(50svh - 64px);right:var(--gutter);width:21vw;max-width:300px;visibility:hidden;opacity:0;pointer-events:none;z-index:5}.experience .project.is-active .project-top,.experience .project.is-active .project-details h2,.experience .project.is-active .project-details>div{visibility:visible;opacity:1;pointer-events:auto}.experience .project-lead{font-size:14px;line-height:1.6}.experience .project-services{font-size:9px;line-height:1.8;margin-top:20px}.experience .project-links{font-size:11px;margin-top:20px;gap:16px}.experience .provenance{font-size:8px;line-height:1.7}.stage-frame,.stage-cue{display:none}.experience .stage-frame{display:block;position:fixed;top:24svh;left:calc(50% - 27vw);width:54vw;height:52svh;pointer-events:none;z-index:4}.stage-frame i{position:absolute;width:26px;height:26px;border-color:var(--accent);border-style:solid;opacity:.65}.stage-frame i:nth-child(1){top:0;left:0;border-width:1px 0 0 1px}.stage-frame i:nth-child(2){top:0;right:0;border-width:1px 1px 0 0}.stage-frame i:nth-child(3){bottom:0;left:0;border-width:0 0 1px 1px}.stage-frame i:nth-child(4){bottom:0;right:0;border-width:0 1px 1px 0}.experience .stage-cue{display:block;position:fixed;left:50%;bottom:13svh;transform:translateX(-50%);color:var(--muted);font-size:9px;z-index:4;pointer-events:none;white-space:nowrap}.experience .dock{background:transparent;backdrop-filter:none;border:0}.experience .view-controls{gap:24px}.experience .reading-progress{top:auto;bottom:0;height:2px}.experience .closing{min-height:85svh;margin:0;padding:16svh 27vw 14svh;width:100%;border:0;position:relative;z-index:7}.experience .closing h2{font-size:6vw}.experience.at-close .project-details,.experience.at-close .project-top,.experience.at-close .stage-frame,.experience.at-close .stage-cue,.experience.at-close .project-index{visibility:hidden!important}.gallery-canvas{position:fixed;inset:0;pointer-events:none;z-index:3}.project-image.gl-ready img{opacity:0!important}.experience:has(.viewer[open]) .gallery-canvas{visibility:hidden}
/* Horizontal preserves native touch/trackpad movement, with vertical wheel support. */
.experience.horizontal-view .gallery{display:flex;align-items:center;padding:0 11vw;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity}.experience.horizontal-view .project,.experience.horizontal-view .project:nth-child(n){flex:0 0 78vw;width:78vw;height:100svh;min-height:0;scroll-snap-align:center}.experience.horizontal-view .project-image,.experience.horizontal-view .project:nth-child(n) .project-image{width:52vw}.experience.horizontal-view .closing{flex:0 0 100vw;min-height:100svh;padding:25svh 25vw}
/* A genuinely different archive mode, retaining captions and provenance. */
.experience.grid-view .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 24px;padding:170px var(--gutter) 120px 24vw;align-content:start}.experience.grid-view .project,.experience.grid-view .project:nth-child(n){display:block;height:auto;min-height:0;width:100%;padding:0}.experience.grid-view .project-image,.experience.grid-view .project:nth-child(n) .project-image{width:100%;height:24vw;max-height:340px;aspect-ratio:auto;overflow:hidden;background:#141719}.experience.grid-view .project-top{position:static;width:auto;max-width:none;visibility:visible;opacity:1;display:flex;flex-direction:column;font-size:9px;margin:0 0 14px;min-height:44px}.experience.grid-view .project-details{display:block;padding:18px 0;border:0}.experience.grid-view .project-details h2{position:static;width:auto;max-width:none;font-size:23px;visibility:visible;opacity:1;pointer-events:auto;overflow-wrap:anywhere}.experience.grid-view .project-details>div{position:static;width:auto;max-width:none;visibility:visible;opacity:1;pointer-events:auto;display:block}.experience.grid-view .project-lead{font-size:12px;line-height:1.65;margin-top:16px}.experience.grid-view .project-services{display:none}.experience.grid-view .project-links{font-size:10px;margin-top:12px}.experience.grid-view .stage-frame,.experience.grid-view .stage-cue,.experience.grid-view .intro-copy{display:none}.experience.grid-view .closing{grid-column:1/-1;width:auto;min-height:0;padding:80px 0}.experience.grid-view .closing h2{font-size:5vw}.experience.grid-view .project-index{top:170px}.experience .project-image a:focus-visible{outline:2px solid var(--accent)}
@media(max-width:1000px) and (min-width:701px){.experience .intro-copy{width:19vw}.experience .project-top,.experience .project-details>div{width:19vw}.experience .project-lead{font-size:12px}.experience .project-index nav a{font-size:10px}.experience .project-details h2{font-size:26px}.experience.grid-view .gallery{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.experience .header{padding:22px 24px;background:var(--bg)}.experience .wordmark{font-size:28px}.experience .header nav{font-size:10px}.experience .intro-label{top:84px;left:24px;font-size:8px}.experience .intro-copy{display:none}.experience .gallery{padding:2svh 0}.experience .project,.experience .project:nth-child(n){height:74svh;min-height:0}.experience .project-image,.experience .project:nth-child(n) .project-image{width:calc(100vw - 48px);height:38svh;max-height:none}.experience .stage-frame{top:19svh;left:16px;width:calc(100% - 32px);height:40svh}.stage-frame i{width:16px;height:16px}.experience .project-top{top:14svh;left:24px;right:24px;width:auto;max-width:none;flex-direction:row;justify-content:space-between;font-size:8px;gap:20px;padding:0;text-align:left}.experience .project-top>span:last-child{max-width:120px}.experience .project-details{display:block;position:fixed;top:61svh;left:24px;right:24px;bottom:92px;padding:0;margin:0;border:0;z-index:5;visibility:hidden;pointer-events:none;overflow:auto;scrollbar-width:none}.experience .project.is-active .project-details{visibility:visible;pointer-events:auto}.experience .project-details h2{position:static;width:auto;max-width:none;font-size:26px;line-height:1.12;margin:0 0 12px;overflow-wrap:normal}.experience .project-details>div{position:static;width:auto;max-width:none}.experience .project-lead{font-size:13px;line-height:1.55}.experience .project-services{display:none}.experience .project-links{font-size:11px;gap:20px;margin-top:14px}.experience .project-links a,.experience .project-links button{min-height:40px}.experience .provenance{margin-top:8px;font-size:8px}.experience .stage-cue{bottom:auto;top:11svh;font-size:8px;left:auto;right:24px;transform:none}.experience .dock{padding:12px 24px;min-height:72px;background:var(--bg)}.experience .dock #current-name{display:none}.experience .dock>.mono{font-size:10px}.experience .view-controls{gap:18px}.experience .view-controls button{font-size:10px;min-height:44px}.experience .closing{padding:24svh 24px 16svh;min-height:85svh}.experience .closing h2{font-size:11vw}.experience.horizontal-view .gallery{padding:0;align-items:flex-start}.experience.horizontal-view .project,.experience.horizontal-view .project:nth-child(n){flex-basis:100vw;width:100vw;height:78svh}.experience.horizontal-view .project-image,.experience.horizontal-view .project:nth-child(n) .project-image{width:calc(100vw - 48px);height:38svh}.experience.horizontal-view .closing{padding:25svh 24px;min-height:100svh}.experience.grid-view .gallery{grid-template-columns:1fr 1fr;padding:120px 24px 100px;gap:30px 16px}.experience.grid-view .project-top{font-size:8px;min-height:64px;gap:4px;display:flex;flex-direction:column}.experience.grid-view .project-image,.experience.grid-view .project:nth-child(n) .project-image{height:42vw}.experience.grid-view .project-details{position:static;visibility:visible;overflow:visible;padding:14px 0;pointer-events:auto}.experience.grid-view .project-details h2{font-size:18px;margin:0;overflow-wrap:anywhere}.experience.grid-view .project-details>div{display:none}.experience.grid-view .closing{padding:50px 0;min-height:0}.experience.grid-view .closing h2{font-size:10vw}.experience.grid-view .project-index{display:none}}
@media(max-width:700px) and (max-height:700px){.experience .project-image,.experience .project:nth-child(n) .project-image,.experience.horizontal-view .project-image,.experience.horizontal-view .project:nth-child(n) .project-image{height:30svh}.experience .stage-frame{top:23svh;height:32svh}.experience .project-details{top:57svh}.experience .project-details h2{font-size:23px}.experience .project-lead{font-size:12px}.experience .intro-label{font-size:7px}.experience .stage-cue{display:none}}
@media(prefers-reduced-motion:reduce){.experience .gallery{scroll-behavior:auto}.gallery-canvas{display:none}.project-image.gl-ready img{opacity:1!important}}
/* Keep archive rows intrinsic inside the fixed scrolling viewport. */
.experience.grid-view .gallery{grid-auto-rows:max-content}
.experience.grid-view .project,.experience.grid-view .project:nth-child(n){min-height:max-content;align-self:start}
.experience.grid-view .project-image img{object-fit:contain}
.experience .project-index{scrollbar-width:none}.experience .project-index::-webkit-scrollbar{display:none}
.experience.at-close:not(.grid-view) .project-details h2,.experience.at-close:not(.grid-view) .project-details>div{visibility:hidden!important;pointer-events:none!important}
.experience.grid-view.at-close .project-details,.experience.grid-view.at-close .project-top{visibility:visible!important}
.experience.at-close:not(.grid-view) .intro-copy{visibility:hidden}
.experience:not(.grid-view) .closing{min-height:100svh;padding-top:30svh}
.experience:not(.grid-view) .closing h2{font-size:5vw}
@media(max-width:700px){.experience:not(.grid-view) .closing h2{font-size:11vw}.experience:not(.grid-view) .closing{padding-top:25svh}}

/* Each device exposes its primary browsing axis plus the archive. */
.view-controls button[hidden]{display:none!important}
@media(min-width:701px){#horizontal-view{display:none!important}.experience .gallery{overflow-x:hidden}}
@media(max-width:700px){#reel-view{display:none!important}}

/* The gesture direction is independent from the gallery layout axis. */
.experience:not(.grid-view) .gallery{touch-action:pinch-zoom}
/* JavaScript settles once after a drag/wheel gesture. Native snapping must not
   compete with the instant scroll updates while a pointer is still moving. */
.experience.horizontal-view .gallery{scroll-snap-type:none}
.experience:not(.grid-view) .project-image{cursor:grab}
.experience .gallery.is-dragging,.experience .gallery.is-dragging .project-image{cursor:grabbing;user-select:none}
/* A bounded image stage keeps the moving stream clear of persistent content. */
.experience{--stage-top:26svh;--stage-bottom:26svh;--stage-side:25vw}
.experience:not(.grid-view) .project-image,.experience:not(.grid-view) .project:nth-child(n) .project-image{width:48vw;height:46svh;max-height:none;max-width:none}
.experience:not(.grid-view) .stage-frame{top:var(--stage-top);left:var(--stage-side);width:calc(100% - 2 * var(--stage-side));height:calc(100svh - var(--stage-top) - var(--stage-bottom))}
.experience .gallery-canvas{clip-path:inset(var(--stage-top) var(--stage-side) var(--stage-bottom) var(--stage-side))}
.experience:not(.grid-view) .project-details h2{width:20vw;max-width:280px;font-size:clamp(22px,2vw,32px);overflow-wrap:normal;word-break:normal;hyphens:none}
.experience:not(.grid-view) .project-top,.experience:not(.grid-view) .project-details>div,.experience .intro-copy{width:18vw;max-width:300px}
.experience:not(.grid-view) .project-top{top:32svh}
.experience:not(.grid-view) .project-details>div{top:43svh;max-height:38svh;overflow-y:auto;scrollbar-width:thin}
.experience .stage-cue{bottom:18svh}
@media(max-width:1000px) and (min-width:701px){
  .experience:not(.grid-view) .project-details h2{font-size:clamp(17px,2vw,22px)}
  .experience .intro-copy>p{font-size:11px}.experience .intro-copy>.mono{font-size:8px}
  .experience:not(.grid-view) .project-lead{font-size:12px}
}
@media(max-width:700px){
  .experience{--stage-top:19svh;--stage-bottom:41svh;--stage-side:16px}
  .experience:not(.grid-view) .project-image,.experience:not(.grid-view) .project:nth-child(n) .project-image{width:calc(100vw - 48px);height:38svh}
  .experience:not(.grid-view) .project-top{top:14svh;width:auto;max-width:none}
  .experience:not(.grid-view) .project-details h2{width:auto;max-width:none;font-size:26px}
  .experience:not(.grid-view) .project-details>div{top:auto;width:auto;max-width:none;max-height:none;overflow:visible}
  .experience .stage-cue{bottom:auto;top:11svh}
}
@media(max-width:700px) and (max-height:700px){
  .experience{--stage-top:23svh;--stage-bottom:45svh}
  .experience:not(.grid-view) .project-image,.experience:not(.grid-view) .project:nth-child(n) .project-image{height:30svh}
  .experience:not(.grid-view) .project-details h2{font-size:23px}
}
.experience:not(.grid-view) .project-details>div{max-height:none;overflow:visible}
@media(min-width:701px){.experience:not(.grid-view) .project-details h2{top:max(160px,22svh)}}
@media(min-width:701px) and (max-height:700px){.experience .intro-copy{display:none}.experience .intro-label{top:118px}}

/* The reel is the focus: a quiet frame and a small playback bar. */
.showreel{position:fixed;inset:0;z-index:90;background:#050505;overflow:hidden;transition:opacity .45s ease,visibility .45s}
.showreel.is-dismissed{opacity:0;visibility:hidden;pointer-events:none}
.showreel-stage{position:absolute;inset:0}
.showreel-video{position:absolute;inset:0;margin:auto;display:block;width:calc(100% - 128px);height:calc(100% - 144px);object-fit:contain;object-position:center;background:transparent;outline:none}
.reel-close{position:absolute;top:max(20px,env(safe-area-inset-top));right:28px;z-index:2;display:inline-flex;align-items:center;gap:12px;min-height:44px;padding:8px 12px;font-size:13px;color:#ffffffb3;background:transparent;border:0}
.reel-close>span{font-size:24px;line-height:1;font-weight:400}
.reel-close:hover{color:white}
.showreel-controls{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:2;width:min(360px,calc(100% - 48px));padding:0 12px;background:#050505cc;transition:opacity .35s ease}
.showreel-progress-track{height:1px;background:#ffffff26;overflow:hidden}
.showreel-progress-fill{width:100%;height:100%;background:#ffffffa6;transform:scaleX(0);transform-origin:left;transition:transform .1s linear}
.showreel-control-row{display:flex;align-items:center;gap:20px;min-height:48px}
.showreel-control-row button{font-size:12px;min-height:44px;padding:8px 0;color:#ffffffb3;white-space:nowrap}
.showreel-control-row button:hover{color:white}
.showreel-time-readout{margin-left:auto;font:10px var(--font-geist-mono,'JetBrains Mono'),monospace;white-space:nowrap;color:#ffffff70}
.showreel button:focus-visible{outline:1px solid white;outline-offset:4px}
@media(hover:hover) and (pointer:fine){.showreel.is-idle:not(.is-paused) .showreel-controls:not(:hover):not(:focus-within){opacity:0;pointer-events:none}}
.replay-reel{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:#ffffff0a;border:1px solid var(--line);color:var(--muted);font-size:11px;min-height:36px;transition:color .2s,border-color .2s}
.replay-reel:hover{color:white;border-color:#ffffff66}
@media(max-width:700px){.showreel-video{width:100%;height:auto;aspect-ratio:16/9;max-height:calc(100svh - 144px)}.reel-close{right:16px;top:max(16px,env(safe-area-inset-top));font-size:12px}.showreel-controls{bottom:max(20px,env(safe-area-inset-bottom));width:calc(100% - 40px)}.replay-reel{font-size:10px;padding:5px 9px}}
@media(prefers-reduced-motion:reduce){.showreel,.showreel-controls,.showreel-progress-fill{transition:none}}

/* A compact welcome: sound is a choice before playback, not a landing page. */
.player-audio-prompt{position:fixed;inset:0;margin:auto;width:min(440px,calc(100% - 40px));max-height:calc(100svh - 40px);overflow:auto;padding:28px 32px;color:var(--text);background:#0d1012;border:1px solid #ffffff1f;box-shadow:0 24px 80px #0008;font-family:Syne,sans-serif}
.player-audio-prompt::backdrop{background:#000a;backdrop-filter:blur(10px)}
.audio-welcome-mark{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}
.audio-welcome-mark>span{font-size:26px;font-weight:800;letter-spacing:-.06em;line-height:1}
.audio-art{display:block;width:56px;height:42px;color:var(--accent);flex-shrink:0}
.audio-wave{animation:audioWaveWelcome 1s ease-out both;transform-origin:30px 24px}
.wave-two{animation-delay:.12s;opacity:.65}.wave-three{animation-delay:.24s;opacity:.35}
@keyframes audioWaveWelcome{from{transform:translateX(-4px);stroke-opacity:0}to{transform:translateX(0);stroke-opacity:1}}
.audio-kicker{font-size:9px;letter-spacing:.06em;color:var(--muted);margin-bottom:12px}
.player-audio-prompt h2{font-size:28px;line-height:1.16;letter-spacing:-.035em;font-weight:600;text-wrap:balance}
#audio-prompt-description{font-size:14px;line-height:1.7;color:#ffffffa6;margin-top:14px;text-wrap:pretty}
.player-audio-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.player-audio-btn{display:flex;align-items:center;justify-content:center;padding:12px 10px;font-size:13px;min-height:48px;border:1px solid #ffffff33;transition:background .3s,color .3s,border-color .3s}
.player-audio-btn.on{background:var(--accent);color:#000;border-color:var(--accent)}
.player-audio-btn.on:hover{background:#fcfcfc;border-color:#fcfcfc}
.player-audio-btn.off{color:#fcfcfc;background:transparent}
.player-audio-btn.off:hover{background:#ffffff0d;border-color:#ffffff80}
.audio-skip{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin-top:12px;padding:0;color:#ffffff80;font-size:12px}
.audio-skip:hover{color:#fcfcfc}
@media(max-width:480px){.player-audio-prompt{padding:24px;width:calc(100% - 40px);max-height:calc(100svh - 40px)}.player-audio-prompt h2{font-size:26px}.audio-welcome-mark{margin-bottom:24px}.audio-art{width:48px;height:36px}}
@media(prefers-reduced-motion:reduce){.audio-wave{animation:none}.player-audio-btn{transition:none}}