:root { --ink:#0d0d0c; --paper:#fbfbf9; --ease:cubic-bezier(.16,1,.3,1); --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif; --serif:"Iowan Old Style","Baskerville","Songti SC",serif; }
* { box-sizing:border-box; } html,body { width:100%; height:100%; overflow:hidden; } body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; } button,a { color:inherit; font:inherit; } button { border:0; background:none; cursor:pointer; } a { text-decoration:none; } img { display:block; width:100%; }
.site-nav { position:fixed; z-index:20; top:0; left:0; width:100%; height:62px; padding:0 4.7vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; opacity:0; pointer-events:none; transform:translateY(-8px); transition:opacity .45s var(--ease),transform .45s var(--ease); font-size:11px; letter-spacing:-.025em; }.site-nav.visible { opacity:1; pointer-events:auto; transform:none; }.nav-status { justify-self:start; padding:5px 0; }.wordmark { justify-self:center; padding:5px; font-size:12px; font-weight:750; letter-spacing:.27em; }.wordmark sup { font-size:5px; vertical-align:top; }.site-nav nav { justify-self:end; display:flex; gap:18px; }.site-nav nav button,.nav-status { padding:5px 0; }.site-nav button:hover { opacity:.5; }
.scene { position:fixed; inset:0; visibility:hidden; opacity:0; pointer-events:none; overflow:hidden; transition:visibility 0s linear .65s,opacity .5s var(--ease); }.scene.active { z-index:1; visibility:visible; opacity:1; pointer-events:auto; transition-delay:0s; }.copyright { position:fixed; z-index:21; left:4.7vw; bottom:27px; margin:0; color:#1b1b1b; font-size:10px; letter-spacing:.03em; opacity:0; pointer-events:auto; transition:opacity .4s; }.copyright a { margin-left:10px; color:inherit; text-decoration:none; }.copyright a:hover,.copyright a:focus-visible { text-decoration:underline; text-underline-offset:3px; }.copyright.visible { opacity:1; }
.intro-scene { z-index:5; color:#fff; background:#070707; }.intro-constellation { position:absolute; inset:0; }.fragment { position:absolute; object-fit:cover; opacity:0; transform:scale(.6); transition:transform 1.1s var(--ease),opacity .8s var(--ease); }.intro-scene.ready .fragment { opacity:1; transform:none; }.fragment-1 { width:7.4vw; aspect-ratio:1; top:24%; left:36%; transition-delay:.1s; }.fragment-2 { width:9.5vw; aspect-ratio:1.5; top:21%; right:36%; transition-delay:.2s; }.fragment-3 { width:7vw; aspect-ratio:1.5; top:36%; right:23%; transition-delay:.35s; }.fragment-4 { width:8vw; aspect-ratio:1.2; bottom:25%; left:27%; transition-delay:.48s; }.fragment-5 { width:8vw; aspect-ratio:1.15; bottom:19%; right:29%; transition-delay:.58s; }.fragment-6 { width:5vw; aspect-ratio:.72; bottom:16%; left:44%; transition-delay:.68s; }.intro-lockup { position:absolute; z-index:2; left:50%; top:50%; width:190px; display:grid; gap:17px; transform:translate(-50%,-50%); color:#fff; text-align:center; opacity:0; transition:opacity .7s var(--ease) .38s,transform .7s var(--ease) .38s; }.intro-scene.ready .intro-lockup { opacity:1; }.intro-lockup span { font-size:11px; font-weight:700; letter-spacing:.25em; }.intro-lockup sup { font-size:5px; vertical-align:top; }.intro-lockup i { height:1px; background:#a6a6a6; }.intro-lockup em { font-family:var(--serif); font-size:27px; font-style:normal; letter-spacing:-.07em; }.intro-lockup small { margin-top:-10px; color:#9e9e9e; font-size:10px; }.intro-hint { position:absolute; bottom:26px; left:50%; margin:0; transform:translateX(-50%); color:#aaa; font-size:9px; letter-spacing:.13em; text-transform:uppercase; opacity:0; transition:opacity .5s .9s; }.intro-scene.ready .intro-hint { opacity:1; }.intro-scene.leave { opacity:0; transform:scale(1.01); }
.works-scene { background:var(--paper); }.rail-viewport { position:absolute; top:33.2%; left:0; width:100%; height:30vh; overflow:hidden; cursor:grab; touch-action:pan-y; }.rail-viewport:active { cursor:grabbing; }.rail-track { position:absolute; left:0; top:0; height:100%; display:flex; align-items:center; gap:11px; transition:transform .85s var(--ease); will-change:transform; }.rail-card { position:relative; flex:0 0 auto; width:calc(15vw * var(--ratio)); height:25.5vh; overflow:hidden; padding:0; background:#e5e5e2; opacity:.55; transform:scale(.94); transition:opacity .65s var(--ease),transform .8s var(--ease),filter .5s; }.rail-card img { height:100%; object-fit:cover; transition:transform 1s var(--ease); }.rail-card.active { opacity:1; transform:none; }.rail-card:hover img { transform:scale(1.035); }.rail-card::after { content:""; position:absolute; inset:0; border:1px solid transparent; transition:border-color .35s; }.rail-card.active::after { border-color:rgba(255,255,255,.8); }.rail-card[data-accent="true"]::before { content:""; position:absolute; z-index:2; top:0; left:7%; width:16%; aspect-ratio:1; background:#e23123; transform:translateY(-45%); opacity:0; transition:opacity .35s,transform .65s var(--ease); }.rail-card[data-accent="true"].active::before { opacity:1; transform:translateY(-25%); }.project-caption { position:absolute; z-index:2; top:68%; left:50%; width:min(500px,80vw); transform:translateX(-50%); text-align:center; }.project-caption p,.project-caption time { margin:0; display:block; font-size:10px; line-height:1.45; letter-spacing:.01em; }.project-caption p:first-child { margin-bottom:2px; }.project-caption h1 { min-height:48px; margin:12px 0 5px; font-size:clamp(31px,3.35vw,52px); font-weight:400; letter-spacing:-.085em; line-height:.95; }.project-caption time { color:#777; }.direction { position:absolute; z-index:5; top:36%; width:10vw; height:30vh; color:transparent; }.direction:hover { color:#333; }.previous { left:0; }.next { right:0; }.works-instruction { position:absolute; z-index:3; right:4.7vw; bottom:27px; margin:0; color:#999; font-size:9px; letter-spacing:.1em; text-transform:uppercase; }
.about-scene { background:var(--paper); }.about-portrait { position:absolute; top:20%; left:34.2%; width:108px; text-align:center; }.about-portrait img { height:163px; object-fit:cover; object-position:50% 10%; filter:grayscale(1); }.about-portrait p { margin:11px 0 0; font-size:12px; line-height:1.15; letter-spacing:-.04em; }.about-portrait span { color:#777; font-size:9px; }.about-copy { position:absolute; top:31%; right:13%; width:min(430px,37vw); font-family:var(--serif); font-size:14px; line-height:1.35; letter-spacing:-.02em; }.about-copy p { margin:0 0 17px; }.about-details { position:absolute; right:12%; bottom:12%; width:54%; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; font-size:10px; line-height:1.45; }.about-details b,.about-details span { display:block; }.about-details b { margin-bottom:7px; font-weight:500; }.about-details span { color:#666; }
.lab-scene { background:var(--paper); }.lab-canvas { position:absolute; left:50%; top:50%; width:min(650px,62vw); height:min(410px,53vh); transform:translate(-50%,-50%); overflow:visible; }.lab-images { position:absolute; inset:0; }.lab-images img { position:absolute; object-fit:cover; transition:transform .8s var(--ease),filter .5s; }.lab-images img:nth-child(1) { width:30%; aspect-ratio:1.36; top:31%; left:9%; }.lab-images img:nth-child(2) { width:25%; aspect-ratio:.8; top:7%; left:41%; }.lab-images img:nth-child(3) { width:27%; aspect-ratio:1.3; top:29%; right:7%; }.lab-images img:nth-child(4) { width:26%; aspect-ratio:1; bottom:3%; left:21%; }.lab-images img:nth-child(5) { width:17%; aspect-ratio:.74; bottom:0; left:49%; }.lab-images img:nth-child(6) { width:26%; aspect-ratio:1; bottom:8%; right:9%; }.lab-canvas strong { position:absolute; z-index:2; left:50%; top:50%; width:100%; transform:translate(-50%,-50%); color:rgba(13,13,12,.92); font-size:clamp(60px,10.5vw,150px); font-weight:600; letter-spacing:-.11em; line-height:.68; text-align:center; mix-blend-mode:overlay; transition:opacity .25s,transform .4s var(--ease); }.lab-canvas:hover .lab-images img:nth-child(1) { transform:translate(-15px,-9px); }.lab-canvas:hover .lab-images img:nth-child(2) { transform:translate(13px,-18px); }.lab-canvas:hover .lab-images img:nth-child(4) { transform:translate(-12px,16px); }.lab-canvas:hover .lab-images img:nth-child(6) { transform:translate(16px,7px); }.lab-meta { position:absolute; left:4.7vw; bottom:28px; margin:0; color:#777; font-size:10px; }
.contact-scene { display:grid; align-content:center; justify-items:center; color:var(--paper); background:var(--ink); text-align:center; }.contact-scene>p { margin:0 0 14px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; }.contact-scene h2 { margin:0; font-size:clamp(58px,9.2vw,138px); font-weight:400; letter-spacing:-.1em; line-height:.82; }.contact-scene h2 em { font-family:var(--serif); font-weight:400; }.contact-scene>div { display:flex; gap:36px; margin-top:12vh; padding-top:13px; border-top:1px solid #777; }.contact-scene a,.contact-scene button { color:inherit; font-size:16px; }.contact-scene button:hover { color:#d9ff3f; }.contact-scene small { margin-top:9px; min-height:12px; color:#d9ff3f; font-size:10px; }
@media (max-width:720px) { .site-nav { height:55px; padding:0 16px; grid-template-columns:1fr auto; }.nav-status { display:none; }.wordmark { justify-self:start; }.site-nav nav { gap:13px; font-size:10px; }.copyright { left:16px; bottom:17px; }.fragment-1 { width:18vw; left:13%; top:23%; }.fragment-2 { width:28vw; right:10%; top:17%; }.fragment-3 { width:16vw; right:9%; top:42%; }.fragment-4 { width:20vw; left:9%; bottom:25%; }.fragment-5 { width:22vw; right:13%; bottom:19%; }.fragment-6 { width:14vw; bottom:13%; left:43%; }.rail-viewport { top:30%; height:35vh; }.rail-card { width:calc(35vw * var(--ratio)); height:27vh; }.project-caption { top:69%; }.project-caption h1 { min-height:38px; margin-top:10px; font-size:34px; }.direction { top:31%; width:15vw; height:34vh; }.works-instruction { right:16px; bottom:17px; font-size:8px; }.about-portrait { top:16%; left:50%; width:93px; transform:translateX(-50%); }.about-portrait img { height:140px; }.about-copy { top:48%; left:16px; right:auto; width:calc(100% - 32px); font-size:13px; }.about-details { left:16px; right:auto; bottom:11%; width:calc(100% - 32px); grid-template-columns:1fr 1fr; gap:18px; }.lab-canvas { width:90vw; height:54vh; }.lab-canvas strong { font-size:21vw; }.lab-meta { left:16px; bottom:18px; }.contact-scene h2 { font-size:16vw; }.contact-scene>div { width:calc(100% - 32px); display:grid; gap:18px; margin-top:14vh; }.contact-scene a,.contact-scene button { font-size:17px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms!important; animation-duration:.01ms!important; } }

/* Reference-style shared-image motion: every intro and rail image uses one 3:2 canvas. */
.fragment { width:7.5vw; aspect-ratio:3/2; object-fit:cover; opacity:0; transform:scale(.55); }
.fragment-1 { top:23%; left:35%; }.fragment-2 { top:17%; left:53%; }.fragment-3 { top:31%; right:22%; }.fragment-4 { bottom:27%; left:26%; }.fragment-5 { bottom:20%; right:29%; }.fragment-6 { bottom:13%; left:42%; }.fragment-7 { top:42%; left:18%; transition-delay:.74s; }.fragment-8 { top:48%; right:15%; transition-delay:.85s; }
.intro-lockup i { transform:scaleX(0); transform-origin:center; transition:transform .65s var(--ease) 1.1s; }.intro-scene.ready .intro-lockup i { transform:none; }.intro-hint { transition-delay:1.45s; }
.rail-track { transition-property:transform,opacity; }.rail-card { width:17vw; }.rail-card img { object-fit:cover; }.project-caption { transition:opacity .35s; }
.case-scene { background:var(--paper); }.case-back { position:absolute; z-index:3; top:86px; left:4.7vw; padding:0; font-size:10px; }.case-heading { position:absolute; z-index:3; top:86px; left:50%; width:450px; max-width:65vw; transform:translateX(-50%); text-align:center; }.case-heading p,.case-heading span { margin:0; display:block; font-size:10px; }.case-heading h2 { margin:11px 0 4px; font-size:clamp(28px,3.2vw,48px); font-weight:400; letter-spacing:-.08em; }.case-heading span { color:#777; }.case-gallery { position:absolute; top:29%; left:0; display:flex; align-items:center; gap:14px; width:100%; height:54vh; padding:0 8vw; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }.case-gallery::-webkit-scrollbar { display:none; }.case-gallery figure { flex:0 0 auto; width:min(57vw,720px); height:54vh; margin:0; display:grid; place-items:center; overflow:hidden; background:#f0f0ed; scroll-snap-align:center; }.case-gallery img { width:100%; height:100%; object-fit:contain; }.case-index { position:absolute; right:4.7vw; bottom:27px; margin:0; color:#777; font-size:10px; }.flight-card { position:fixed; z-index:31; margin:0; object-fit:cover; pointer-events:none; transform-origin:top left; transition:transform 1.1s var(--ease),opacity .85s var(--ease); }
@media (max-width:720px) { .fragment { width:19vw; }.fragment-1 { left:9%; top:22%; }.fragment-2 { left:60%; top:15%; }.fragment-3 { right:6%; top:38%; }.fragment-4 { left:6%; bottom:27%; }.fragment-5 { right:11%; bottom:19%; }.fragment-6 { bottom:11%; left:40%; }.fragment-7 { left:3%; top:44%; }.fragment-8 { right:3%; top:51%; }.rail-card { width:43vw; }.case-back { top:72px; left:16px; }.case-heading { top:90px; max-width:80vw; }.case-gallery { top:31%; height:48vh; padding:0 9vw; gap:10px; }.case-gallery figure { width:82vw; height:48vh; }.case-index { right:16px; bottom:18px; } }

/* 0–6s intro: the eight original square works lock to one radius and orbit the central mark. */
.intro-scene { transition:opacity .62s linear,transform .62s var(--ease); }.intro-scene.leave { opacity:0; transform:none; }
.intro-constellation { --orbit-radius:min(25vh,22vw); --orbit-diagonal:min(17.68vh,15.56vw); transform-origin:50% 50%; will-change:transform,opacity; }
.intro-scene.ready .intro-constellation { animation:intro-orbit 5.85s cubic-bezier(.38,0,.19,1) both; }
.intro-scene .fragment { position:absolute; width:clamp(42px,5vw,72px); aspect-ratio:1; object-fit:cover; opacity:0; transform:translate(-50%,-50%) scale(.08); will-change:transform,opacity; }
.intro-scene .fragment-1 { top:calc(50% - var(--orbit-radius)); left:50%; animation:intro-satellite-1 5.85s cubic-bezier(.2,.8,.2,1) both; }
.intro-scene .fragment-2 { top:calc(50% - var(--orbit-diagonal)); left:calc(50% + var(--orbit-diagonal)); animation:intro-satellite-2 5.85s cubic-bezier(.2,.8,.2,1) both; }
.intro-scene .fragment-3 { top:50%; left:calc(50% + var(--orbit-radius)); animation:intro-satellite-3 5.85s cubic-bezier(.2,.8,.2,1) both; }
.intro-scene .fragment-4 { top:calc(50% + var(--orbit-diagonal)); left:calc(50% + var(--orbit-diagonal)); animation:intro-satellite-4 5.85s cubic-bezier(.2,.8,.2,1) both; }
.intro-scene .fragment-5 { top:calc(50% + var(--orbit-radius)); left:50%; animation:intro-satellite-5 5.85s cubic-bezier(.2,.8,.2,1) both; }
.intro-scene .fragment-6 { top:calc(50% + var(--orbit-diagonal)); left:calc(50% - var(--orbit-diagonal)); animation:intro-satellite-6 5.85s cubic-bezier(.2,.8,.2,1) both; }
.intro-scene .fragment-7 { top:50%; left:calc(50% - var(--orbit-radius)); animation:intro-satellite-7 5.85s cubic-bezier(.2,.8,.2,1) both; }
.intro-scene .fragment-8 { top:calc(50% - var(--orbit-diagonal)); left:calc(50% - var(--orbit-diagonal)); animation:intro-satellite-8 5.85s cubic-bezier(.2,.8,.2,1) both; }
@keyframes intro-orbit { 0%,35% { transform:rotate(0deg); } 50% { transform:rotate(-44deg); } 68% { transform:rotate(-142deg); } 84% { transform:rotate(-254deg); } 100% { opacity:0; transform:rotate(-315deg) scale(.97); } }
@keyframes intro-satellite-1 { 0%,5% { opacity:0; transform:translate(-50%,-50%) scale(.05); } 13%,88% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-50%) scale(.42); } }
@keyframes intro-satellite-2 { 0%,10% { opacity:0; transform:translate(-50%,-50%) scale(.05); } 19%,89% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-50%) scale(.42); } }
@keyframes intro-satellite-3 { 0%,16% { opacity:0; transform:translate(-50%,-50%) scale(.05); } 25%,90% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-50%) scale(.42); } }
@keyframes intro-satellite-4 { 0%,22% { opacity:0; transform:translate(-50%,-50%) scale(.05); } 31%,91% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-50%) scale(.42); } }
@keyframes intro-satellite-5 { 0%,28% { opacity:0; transform:translate(-50%,-50%) scale(.05); } 37%,92% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-50%) scale(.42); } }
@keyframes intro-satellite-6 { 0%,34% { opacity:0; transform:translate(-50%,-50%) scale(.05); } 43%,93% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-50%) scale(.42); } }
@keyframes intro-satellite-7 { 0%,40% { opacity:0; transform:translate(-50%,-50%) scale(.05); } 49%,94% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-50%) scale(.42); } }
@keyframes intro-satellite-8 { 0%,46% { opacity:0; transform:translate(-50%,-50%) scale(.05); } 55%,95% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-50%) scale(.42); } }
.intro-scene.ready .intro-lockup { animation:intro-lockup 5.85s cubic-bezier(.2,.8,.2,1) both; transition:none; }.intro-scene.ready .intro-lockup i { animation:intro-rule .48s var(--ease) 1.05s both; transition:none; }
@keyframes intro-lockup { 0%,11% { opacity:0; transform:translate(-50%,calc(-50% + 10px)) scale(.98); } 20%,88% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,calc(-50% - 4px)) scale(.99); } }
@keyframes intro-rule { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.works-scene.intro-enter .rail-card,.works-scene.intro-enter .project-caption { opacity:0; transform:translateY(18px) scale(.98); }.works-scene.intro-enter .rail-card:nth-child(2) { transition-delay:.06s; }.works-scene.intro-enter .rail-card:nth-child(3) { transition-delay:.12s; }.works-scene.intro-enter .rail-card:nth-child(4) { transition-delay:.18s; }
@media (max-width:720px) { .intro-constellation { --orbit-radius:min(25vh,34vw); --orbit-diagonal:min(17.68vh,24vw); }.intro-scene .fragment { width:13vw; } }

/* The home rail preserves the original aspect ratio of each selected work. */
.site-nav { top:30px; }
.copyright { bottom:62px; }
.rail-viewport { top:35.9%; height:28vh; }
.rail-viewport { touch-action:none; user-select:none; -webkit-user-select:none; overscroll-behavior-x:contain; }
.rail-track { gap:14px; }
.rail-card { width:auto; height:26.4vh; aspect-ratio:var(--ratio); flex:0 0 auto; overflow:hidden; background:#f2f2ef; opacity:1; transform:none; }
.rail-card:not(.active) { opacity:1; transform:none; }
.rail-card img { width:100%; height:100%; object-fit:contain; }
.rail-card.active { opacity:1; transform:none; }
.direction { display:none; }
.project-caption { top:75.5%; }
.works-instruction { display:none; }
.works-scene.intro-enter .rail-card { opacity:0; transform:translate3d(36px,0,0) scale(.98); }
.works-scene.intro-enter .rail-card:nth-child(1) { transition-delay:0s; }.works-scene.intro-enter .rail-card:nth-child(2) { transition-delay:.07s; }.works-scene.intro-enter .rail-card:nth-child(3) { transition-delay:.14s; }.works-scene.intro-enter .rail-card:nth-child(4) { transition-delay:.21s; }.works-scene.intro-enter .rail-card:nth-child(5) { transition-delay:.28s; }.works-scene.intro-enter .rail-card:nth-child(6) { transition-delay:.35s; }
@media (max-width:720px) { .site-nav { top:0; }.copyright { bottom:18px; }.rail-viewport { top:35%; height:30vh; }.rail-card { height:28vh; }.project-caption { top:73%; }.rail-track { gap:9px; } }

/* The full black opening panel is physically pulled left, exposing the works scene from the right. */
.intro-scene.leave { opacity:1; clip-path:none; transition:none; animation:intro-panel-pull .72s cubic-bezier(.76,0,.24,1) both; }
@keyframes intro-panel-pull { from { transform:translateX(0); } to { transform:translateX(-100%); } }
.works-scene.curtain-reveal { opacity:1; transition:none; }
body.is-flying .site-nav,body.is-flying .copyright { transition:none; }

/* The reference rail is a continuous strip: no selection decoration or hover zoom. */
.rail-card,.rail-card:not(.active),.rail-card.active { opacity:1; transform:none; filter:none; transition:none; }
.rail-card img,.rail-card:hover img { transform:none; transition:none; }
.rail-card::after,.rail-card.active::after,.rail-card[data-accent="true"]::before,.rail-card[data-accent="true"].active::before { display:none; }
.rail-viewport.is-dragging { cursor:grabbing; }

/* Full-screen, staggered project wall. Each image keeps its own natural proportion. */
.case-scene { overflow-y:auto; overflow-x:hidden; background:var(--paper); scrollbar-width:none; }
.case-scene::-webkit-scrollbar { display:none; }
.case-gallery { position:relative; top:auto; left:auto; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-flow:dense; align-items:start; gap:clamp(10px,1.45vw,24px); width:100%; height:auto; padding:178px 4.7vw 12vh; overflow:visible; scroll-snap-type:none; }
.case-gallery .wall-card { position:relative; grid-column:span var(--wall-span); width:auto; height:auto; min-height:120px; margin:var(--wall-offset) 0 0; display:block; overflow:hidden; background:#f0f0ed; scroll-snap-align:none; cursor:pointer; isolation:isolate; transition:transform .55s var(--ease),box-shadow .55s var(--ease),filter .45s,opacity .45s; }
.case-gallery .wall-card img { width:100%; height:auto; object-fit:contain; transition:transform .7s var(--ease),filter .55s; }
.case-gallery .wall-card figcaption { position:absolute; z-index:2; right:10px; bottom:10px; left:10px; display:flex; align-items:end; justify-content:space-between; gap:12px; padding:10px 11px; color:#fff; background:rgba(10,10,10,.78); backdrop-filter:blur(8px); opacity:0; transform:translateY(8px); transition:opacity .35s,transform .45s var(--ease); font-size:10px; line-height:1.2; text-align:left; }
.case-gallery .wall-card figcaption span { font-weight:600; }.case-gallery .wall-card figcaption small { color:#d8d8d8; font-size:8px; text-align:right; }
.case-gallery:hover .wall-card:not(:hover) { opacity:.5; filter:grayscale(.18); }.case-gallery .wall-card:hover { z-index:3; box-shadow:0 24px 48px rgba(0,0,0,.16); transform:translateY(-9px) scale(1.018); }.case-gallery .wall-card:hover img { transform:scale(1.025); }.case-gallery .wall-card:hover figcaption { opacity:1; transform:none; }
.case-index { display:none; }
@media (max-width:720px) { .case-gallery { grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; padding:145px 16px 64px; }.case-gallery .wall-card { grid-column:span min(var(--wall-span),6); min-height:80px; }.case-gallery .wall-card figcaption { right:7px; bottom:7px; left:7px; padding:8px; }.case-heading { top:78px; }.case-back { top:78px; } }

/* Project material wall: grouped, fluid masonry; every image retains its own proportion. */
.case-gallery { display:block; padding:clamp(240px,29vh,340px) 4.7vw 12vh; }
.case-gallery { pointer-events:none; }
.case-gallery .wall-card { pointer-events:auto; }
.case-back { top:118px; z-index:6; }
.case-heading { top:112px; z-index:6; }
.wall-section { margin:0 0 72px; }
.wall-section>header { display:grid; grid-template-columns:1fr auto 1fr; align-items:baseline; gap:18px; margin:0 0 20px; padding-bottom:10px; border-bottom:1px solid #d9d9d5; }
.wall-section>header p,.wall-section>header span { margin:0; color:#777; font-size:9px; letter-spacing:.03em; }
.wall-section>header p { justify-self:start; text-transform:uppercase; }
.wall-section>header h3 { margin:0; font-size:clamp(19px,2vw,30px); font-weight:400; letter-spacing:-.07em; }
.wall-section>header span { justify-self:end; }
.waterfall { column-count:4; column-gap:clamp(10px,1.45vw,24px); }
.case-gallery .wall-card { display:inline-block; width:100%; min-height:0; margin:0 0 clamp(10px,1.45vw,24px); break-inside:avoid; grid-column:auto; overflow:hidden; vertical-align:top; }
.case-gallery .wall-card img { width:100%; height:auto; min-height:0; object-fit:contain; }
.case-gallery .wall-card img[data-src] { display:block; width:100%; min-height:clamp(150px,17vw,300px); aspect-ratio:4 / 3; background:linear-gradient(110deg,#ecece8 12%,#f7f7f4 30%,#ecece8 48%); background-size:220% 100%; animation:case-shimmer 1.25s linear infinite; }
.case-gallery .wall-card img.is-loaded { animation:none; }
.case-gallery .wall-card img.is-error { background:#ecece8; }
@keyframes case-shimmer { to { background-position:-220% 0; } }
.case-loading { margin:0; padding:28vh 0; color:#777; font-size:11px; letter-spacing:.08em; text-align:center; }
@media (max-width:900px) { .waterfall { column-count:3; } }
@media (max-width:720px) { .case-gallery { display:block; padding:214px 16px 64px; }.wall-section { margin-bottom:50px; }.wall-section>header { grid-template-columns:1fr auto; gap:8px; }.wall-section>header p { grid-column:1/-1; }.wall-section>header h3 { font-size:24px; }.waterfall { column-count:2; column-gap:10px; }.case-gallery .wall-card { margin-bottom:10px; }.case-gallery .wall-card figcaption { display:block; }.case-gallery .wall-card figcaption small { display:block; margin-top:4px; text-align:left; }.case-back { top:112px; }.case-heading { top:104px; } }

/* Lab: rebuilt as the reference's timed image-cluster / type-interlock sequence. */
.lab-canvas { width:min(760px,72vw); height:min(490px,60vh); cursor:pointer; }
.lab-images { overflow:visible; }
.lab-images img { width:auto; height:auto; object-fit:cover; opacity:0; filter:none; transform-origin:center; will-change:transform,opacity; }
.lab-images img:nth-child(1) { top:25%; left:0; width:25%; aspect-ratio:1.45; z-index:2; }
.lab-images img:nth-child(2) { top:0; left:31%; width:22%; aspect-ratio:.78; z-index:2; }
.lab-images img:nth-child(3) { top:11%; right:2%; width:23%; aspect-ratio:1.45; z-index:2; }
.lab-images img:nth-child(4) { top:34%; left:47%; width:29%; aspect-ratio:1.05; z-index:4; }
.lab-images img:nth-child(5) { bottom:9%; left:7%; width:23%; aspect-ratio:1.25; z-index:4; }
.lab-images img:nth-child(6) { top:38%; left:22%; width:27%; aspect-ratio:1; z-index:2; }
.lab-images img:nth-child(7) { right:20%; bottom:0; width:21%; aspect-ratio:.72; z-index:4; }
.lab-images img:nth-child(8) { right:5%; bottom:12%; width:23%; aspect-ratio:1.2; z-index:2; }
#lab-canvas .lab-word { position:absolute; z-index:3; top:50%; left:50%; width:max-content; max-width:none; margin:0; color:#111; font-family:var(--sans); font-size:clamp(98px,18vw,250px); font-weight:700; letter-spacing:-.10em; line-height:.72; white-space:nowrap; opacity:0; transform:translate(-50%,-50%) scaleX(.86); pointer-events:none; mix-blend-mode:normal; }
#lab-canvas .lab-word-front { z-index:5; color:#fff; mix-blend-mode:difference; }
.lab-canvas.is-playing .lab-images img:nth-child(1) { animation:lab-tile-1 1.4s cubic-bezier(.16,1,.3,1) .10s both; }
.lab-canvas.is-playing .lab-images img:nth-child(2) { animation:lab-tile-2 1.4s cubic-bezier(.16,1,.3,1) .27s both; }
.lab-canvas.is-playing .lab-images img:nth-child(3) { animation:lab-tile-3 1.4s cubic-bezier(.16,1,.3,1) .41s both; }
.lab-canvas.is-playing .lab-images img:nth-child(4) { animation:lab-tile-4 1.4s cubic-bezier(.16,1,.3,1) .55s both; }
.lab-canvas.is-playing .lab-images img:nth-child(5) { animation:lab-tile-5 1.4s cubic-bezier(.16,1,.3,1) .68s both; }
.lab-canvas.is-playing .lab-images img:nth-child(6) { animation:lab-tile-6 1.4s cubic-bezier(.16,1,.3,1) .82s both; }
.lab-canvas.is-playing .lab-images img:nth-child(7) { animation:lab-tile-7 1.4s cubic-bezier(.16,1,.3,1) .95s both; }
.lab-canvas.is-playing .lab-images img:nth-child(8) { animation:lab-tile-8 1.4s cubic-bezier(.16,1,.3,1) 1.09s both; }
.lab-canvas.words-on .lab-word { opacity:1; }
.lab-canvas.word-shift .lab-word-back { animation:lab-word-sweep .72s cubic-bezier(.16,1,.3,1) both; }
.lab-canvas.word-shift .lab-word-front { animation:lab-word-sweep .72s cubic-bezier(.16,1,.3,1) both; }
.lab-canvas.lab-exit .lab-images { animation:lab-cluster-exit .85s cubic-bezier(.76,0,.24,1) both; }
.lab-canvas.lab-exit .lab-word { animation:lab-type-exit .65s cubic-bezier(.76,0,.24,1) both; }
@keyframes lab-tile-1 { from { opacity:0; transform:translate(-150px,42px) scale(.34); } to { opacity:1; transform:none; } }
@keyframes lab-tile-2 { from { opacity:0; transform:translate(0,-150px) scale(.32); } to { opacity:1; transform:none; } }
@keyframes lab-tile-3 { from { opacity:0; transform:translate(148px,-56px) scale(.36); } to { opacity:1; transform:none; } }
@keyframes lab-tile-4 { from { opacity:0; transform:translate(98px,75px) scale(.25); } to { opacity:1; transform:none; } }
@keyframes lab-tile-5 { from { opacity:0; transform:translate(-126px,118px) scale(.34); } to { opacity:1; transform:none; } }
@keyframes lab-tile-6 { from { opacity:0; transform:translate(-54px,108px) scale(.22); } to { opacity:1; transform:none; } }
@keyframes lab-tile-7 { from { opacity:0; transform:translate(44px,154px) scale(.34); } to { opacity:1; transform:none; } }
@keyframes lab-tile-8 { from { opacity:0; transform:translate(130px,106px) scale(.31); } to { opacity:1; transform:none; } }
@keyframes lab-word-sweep { 0% { opacity:0; transform:translate(calc(-50% + 17vw),-50%) scaleX(.89); } 100% { opacity:1; transform:translate(-50%,-50%) scaleX(1); } }
@keyframes lab-cluster-exit { to { opacity:0; transform:translateX(-12vw) scale(.94); } }
@keyframes lab-type-exit { to { opacity:0; transform:translateX(-23vw) scaleX(.86); } }
@media (max-width:720px) { .lab-canvas { width:94vw; height:54vh; }.lab-word { font-size:21vw; }.lab-images img:nth-child(1) { left:1%; }.lab-images img:nth-child(3) { right:0; }.lab-images img:nth-child(8) { right:0; } }

/* About: one editorial grid, so portrait, statement and credentials read as one composition. */
.about-portrait { top:22%; left:27%; width:154px; text-align:left; }
.about-portrait img { width:154px; height:222px; object-position:50% 8%; }
.about-portrait p { margin-top:13px; padding-left:1px; }
.about-copy { top:22%; right:auto; left:47.5%; width:min(510px,33vw); font-size:16px; line-height:1.52; }
.about-copy p { margin-bottom:22px; }
.about-details { top:68%; right:auto; bottom:auto; left:27%; width:62%; gap:clamp(22px,3vw,58px); font-size:10px; }
.about-details b { margin-bottom:8px; }
@media (max-width:720px) { .about-portrait { top:14%; left:50%; width:108px; transform:translateX(-50%); text-align:center; }.about-portrait img { width:108px; height:156px; }.about-copy { top:45%; left:16px; width:calc(100% - 32px); font-size:13px; line-height:1.5; }.about-details { top:auto; bottom:8%; left:16px; width:calc(100% - 32px); gap:18px; } }