/* Shared spatial language. Captions and navigation always remain in normal flow. */
.spatial-scene{perspective:1400px;--camera-z:0px;--camera-rx:0deg;--camera-ry:0deg;--camera-y:0px}
.spatial-camera{transform:translate3d(0,var(--camera-y),var(--camera-z)) rotateX(var(--camera-rx)) rotateY(var(--camera-ry));transform-style:preserve-3d;transition:transform 180ms linear}
.spatial-layer{position:relative;min-width:0;transform:translateZ(var(--layer-z,0px));transition:transform 350ms ease,filter 350ms ease}
.spatial-layer img{box-shadow:0 20px 40px #0005}
.index-page .project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:100px 6vw}
.index-page .project-card:nth-child(even){padding-top:100px}
.index-page .project-card .card-image,.collection-image.card-image{overflow:visible;background:transparent;transform:none;aspect-ratio:5/4}
.spatial-card-stage{display:block;width:100%;height:100%}
.spatial-card-stage .spatial-camera{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(12,minmax(0,1fr));gap:8px;height:100%}
.spatial-primary{grid-area:1/1/13/9;--layer-z:20px}
.spatial-companion{--layer-z:-25px;display:block}
.companion-0{grid-area:2/10/7/13}.companion-1{grid-area:8/10/13/13;--layer-z:35px}
.index-page .card-image .spatial-layer img,.collection-image .spatial-layer img{position:static;width:100%;height:100%;object-fit:contain;padding:0;transform:none;filter:none}
.card-image .spatial-primary:only-child{grid-column:1/-1}
.index-page .card-corner{top:0;left:0;max-width:65%}.index-page .card-arrow{bottom:0;right:0}
.spatial-card-stage[data-spatial-mode=technical] .spatial-primary,.spatial-card-stage[data-spatial-mode=technical] .spatial-companion{--layer-z:0px}
.card-image:hover .spatial-layer{filter:brightness(1.07)}
.gallery-grid.spatial-gallery{display:block;overflow:visible}
.spatial-exhibition{position:relative;isolation:isolate;padding:70px clamp(20px,4vw,60px);margin:0 0 80px;border-top:1px solid var(--line)}
.spatial-scene-index{display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.12em;color:var(--muted);margin-bottom:45px}
.spatial-composition{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 4%;align-items:start}
.spatial-composition .gallery-item{margin:0;grid-column:span 4;--layer-z:12px}
.spatial-composition .layer-0{grid-column:span 5;--layer-z:30px}
.spatial-composition .layer-1{grid-column:span 3;margin-top:90px;--layer-z:-25px}
.spatial-composition .layer-2{grid-column:span 4;margin-top:35px;--layer-z:15px}
.spatial-composition .gallery-item:only-child{grid-column:2/12}
.spatial-composition .gallery-item button{display:block;width:100%;overflow:visible;background:transparent;border:0;aspect-ratio:auto;min-height:44px}
.spatial-composition .gallery-item img{display:block;width:100%;height:auto;max-height:75svh;object-fit:contain}
.spatial-composition figcaption{position:static;font-size:11px;display:flex;justify-content:space-between;gap:16px;padding-top:16px;line-height:1.6}
.spatial-composition figcaption span:first-child{overflow-wrap:anywhere}.spatial-composition figcaption span:last-child{white-space:nowrap}
.spatial-room{background:radial-gradient(ellipse at 50% 8%,#24272b66,transparent 65%),linear-gradient(110deg,#111316,#0c0e10);border:1px solid #ffffff0c}
.spatial-room:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent 8%,#ffffff05 8.1%,transparent 8.2%,transparent 91.8%,#ffffff05 91.9%,transparent 92%);border-bottom:1px solid #ffffff10}
.spatial-room:after{content:'';position:absolute;left:5%;right:5%;bottom:0;height:28%;z-index:-1;border-top:1px solid #ffffff0b;background:linear-gradient(#ffffff02,transparent);transform:perspective(600px) rotateX(30deg);transform-origin:bottom}
[data-spatial-mode=technical] .spatial-composition{grid-template-columns:repeat(2,minmax(0,1fr));gap:45px}
[data-spatial-mode=technical] .spatial-composition .gallery-item{grid-column:auto;margin-top:0;--layer-z:0px}
[data-spatial-mode=technical] .spatial-composition .gallery-item.wide,[data-spatial-mode=technical] .spatial-composition .gallery-item:only-child{grid-column:1/-1}
[data-spatial-mode=technical] .spatial-composition img{max-height:none;box-shadow:0 10px 25px #0003}
[data-spatial-mode=material] .layer-0{grid-column:span 6}[data-spatial-mode=material] .layer-1,[data-spatial-mode=material] .layer-2{grid-column:span 3}
.spatial-composition button:focus-visible{outline:2px solid var(--fg);outline-offset:8px}
.spatial-composition .spatial-focused{filter:brightness(.8)}
.spatial-composition .gallery-item:focus-within{filter:brightness(1.06)}
@media(hover:hover) and (pointer:fine){.spatial-composition .gallery-item:hover{transform:translateZ(calc(var(--layer-z) + 12px));filter:brightness(1.05)}}
@media(max-width:1100px){.index-page .project-grid{gap:70px 4vw}.index-page .project-card:nth-child(even){padding-top:60px}.spatial-exhibition{padding:40px 20px}.spatial-composition{gap:25px 3%}.spatial-layer{--layer-z:0px!important}}
@media(max-width:700px){.index-page .project-grid{grid-template-columns:1fr;gap:50px}.index-page .project-card:nth-child(even){padding-top:0}.index-page .project-card .card-image{aspect-ratio:5/4}.spatial-exhibition{padding:28px 0;margin-bottom:48px}.spatial-room{padding:28px 16px}.spatial-scene-index{font-size:9px;margin-bottom:28px}.spatial-composition,[data-spatial-mode=technical] .spatial-composition{display:flex;flex-direction:column;gap:35px}.spatial-composition .gallery-item{width:100%;margin-top:0}.spatial-composition .gallery-item img{max-height:none}.spatial-composition figcaption{font-size:11px}.spatial-room:after{display:none}.spatial-card-stage .spatial-camera{gap:6px}}
@media(prefers-reduced-motion:reduce){.spatial-camera,.spatial-layer{transform:none!important;transition:none!important}}
.motion-off .spatial-camera,.motion-off .spatial-layer{transform:none!important;transition:none!important}
@keyframes spatial-page-in{from{opacity:.2;transform:perspective(1600px) translateZ(-65px) translateY(12px) rotateY(.6deg)}to{opacity:1;transform:none}}
@keyframes spatial-page-out{to{opacity:0;transform:perspective(1600px) translateZ(-80px) translateY(-8px) rotateY(-.6deg)}}
@media(prefers-reduced-motion:no-preference){::view-transition-old(portfolio-page){animation:spatial-page-out 420ms ease both}::view-transition-new(portfolio-page){animation:spatial-page-in 520ms cubic-bezier(.2,.7,.2,1) both}}

.motion-off .spatial-camera,.motion-off .spatial-layer{transform:none!important;transition:none!important}

/* Transparent media stays complete at every breakpoint. Technical linework keeps a reading surface. */
.media-cutout img,[data-media-kind="cutout"] img{object-fit:contain!important;background:transparent!important;filter:none!important}
.media-cutout,.spatial-layer[data-media-kind="cutout"]{background:transparent!important;box-shadow:none!important}
.detail-cover.is-cutout{object-fit:contain!important;object-position:center!important;padding:clamp(24px,5vw,80px);background:#101215}
.project-media-model{display:grid;grid-template-columns:minmax(160px,.7fr) minmax(0,1.3fr);gap:clamp(24px,5vw,80px);padding:70px var(--edge);border-top:1px solid #2b2e31}
.project-media-model h2{font-size:clamp(26px,4vw,54px);font-weight:400;letter-spacing:-.04em;margin-top:16px}
.media-viewer-shell{min-width:0;min-height:600px}
.media-viewer-shell .glb-stage{height:650px;min-height:380px}
[data-image-role="technical"] button{background:#e9e9e4}
@media(max-width:700px){.project-media-model{grid-template-columns:1fr;padding-block:42px;gap:20px}.media-viewer-shell{min-height:430px}.media-viewer-shell .glb-stage{height:500px}.detail-cover.is-cutout{padding:100px 22px 130px}}