/* VSN / SPATIAL EDITION. Physical planes, real perspective, native scroll. */
.hero-ground { position:absolute; inset:44% -12% 0 23%; pointer-events:none; perspective:650px; opacity:.38; overflow:hidden; }
.hero-ground i { position:absolute; inset:-30% -10% -85%; background:repeating-linear-gradient(90deg,transparent 0 79px,rgba(182,211,211,.08) 80px 81px),repeating-linear-gradient(0deg,transparent 0 79px,rgba(182,211,211,.08) 80px 81px); transform:rotateX(76deg); transform-origin:50% 75%; mask-image:radial-gradient(ellipse,black,transparent 64%); }
.hero-art::before { content:''; position:absolute; width:66%; height:9%; bottom:0; left:17%; border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.8),transparent 69%); filter:blur(12px); }
.hero-art::after { content:''; position:absolute; inset:10% 13% 12%; z-index:-1; background:radial-gradient(ellipse,color-mix(in srgb,var(--forma) 9%,transparent),transparent 65%); filter:blur(25px); }
[data-theme="light"] .hero-ground i { background:repeating-linear-gradient(90deg,transparent 0 79px,rgba(36,75,72,.1) 80px 81px),repeating-linear-gradient(0deg,transparent 0 79px,rgba(36,75,72,.1) 80px 81px); }
[data-theme="light"] .hero-art::before { opacity:.16; }
.spatial-chapter { position:relative; --spatial-surface:#111719; --spatial-edge:rgba(214,233,234,.25); background:var(--bg); }
.spatial-sticky { position:relative; padding:100px var(--gutter) 65px; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse at 50% 58%,color-mix(in srgb,var(--forma) 9%,var(--bg)),var(--bg) 72%); }
.spatial-room { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.spatial-horizon { position:absolute; inset:10% -30% 13%; border-radius:50%; border:1px solid var(--hair); opacity:.2; transform:rotateX(65deg); }
.spatial-floor { position:absolute; width:160%; height:90%; left:-30%; top:56%; background:repeating-linear-gradient(90deg,transparent 0 99px,var(--hair) 100px 101px),repeating-linear-gradient(0deg,transparent 0 99px,var(--hair) 100px 101px); transform:perspective(650px) rotateX(72deg); transform-origin:50% 0%; mask-image:radial-gradient(ellipse at 50% 30%,black,transparent 65%); opacity:.17; }
.spatial-wall { position:absolute; width:86%; height:auto; left:7%; top:39%; color:var(--fg); fill:currentColor; opacity:.045; }
.spatial-intro { position:relative; text-align:center; z-index:4; max-width:1000px; margin:0 auto 65px; pointer-events:none; }
.spatial-intro>.eyebrow { color:var(--fg-dim); font-size:9px; letter-spacing:.17em; }
.spatial-intro h2 { margin:30px 0 25px; font:400 clamp(48px,6.6vw,108px)/1.02 var(--disp); letter-spacing:-.065em; }
.spatial-intro h2 span { color:var(--fg-dim); }
.spatial-intro p { font:300 12px/1.85 var(--body); color:var(--fg-dim); }
.spatial-camera { position:relative; }
.spatial-world { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
/* Six unframed objects; the discipline names remain real, readable links. */
.spatial-card { display:block; min-width:0; position:relative; color:var(--fg); text-decoration:none; text-align:center; outline-offset:8px; }
.spatial-symbol { position:relative; display:block; margin:0 auto; width:100%; aspect-ratio:320/260; transition:transform .65s var(--ease),filter .65s; }
.spatial-symbol::before { content:''; position:absolute; inset:22% 14% 5%; background:radial-gradient(ellipse,rgba(205,190,160,.07),transparent 65%); opacity:.35; transition:opacity .65s; pointer-events:none; }
.vsn-experience .spatial-symbol img { position:relative; display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 22px 20px #0005); }
.department-art-canvas { display:none!important; }
.department-art-tile { position:absolute; inset:-15%; width:130%; height:130%; pointer-events:none; visibility:hidden; }
.department-art-ready .department-art-tile { visibility:visible; }
.department-art-ready .spatial-symbol img { opacity:0; }
.spatial-card-label { display:flex; justify-content:center; align-items:center; gap:13px; margin-top:-8px; font:400 clamp(18px,1.5vw,25px)/1.3 var(--disp); letter-spacing:.12em; }
.spatial-card-label b { font-weight:400; }
.spatial-card-number { flex:0 0 16px; font-size:8px; letter-spacing:.07em; color:var(--plane-color); }
.spatial-card-arrow { flex:0 0 16px; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1; opacity:0; transform:translate(-3px,3px); transition:opacity .35s,transform .35s; }
.spatial-card-practice { display:block; margin-top:9px; color:var(--fg-dim); font:400 8px/1.5 var(--disp); letter-spacing:.08em; text-transform:uppercase; }
.spatial-card:is(:hover,:focus-visible) .spatial-symbol { transform:translateY(-5px) scale(1.025); }
.spatial-card:is(:hover,:focus-visible) .spatial-symbol::before { opacity:.7; }
.spatial-card:is(:hover,:focus-visible) .spatial-card-arrow { opacity:1; transform:none; }
.spatial-card:focus-visible { outline:1px solid var(--plane-color); border-radius:3px; }
.spatial-note { position:relative; display:flex; justify-content:space-between; align-items:center; gap:35px; margin-top:65px; border-top:1px solid var(--hair); padding-top:25px; font:400 9px/1.5 var(--disp); text-transform:uppercase; letter-spacing:.1em; color:var(--fg-dim); }
.spatial-note.shell { width:100%; }
.spatial-meter { width:90px; height:1px; background:var(--hair); display:none; }
.spatial-meter i { display:block; width:100%; height:100%; background:var(--fg); transform:scaleX(var(--spatial-progress,0)); transform-origin:left; }
/* Only the enhanced desktop scene is pinned. Other modes stay fully linear. */
.spatial-chapter.is-spatial { height:380svh; min-height:2100px; background:transparent; }
.is-spatial .spatial-sticky { height:100svh; min-height:640px; padding:0; position:sticky; top:0; overflow:clip; }
.is-spatial .spatial-intro { position:absolute; left:12%; right:12%; top:39%; margin:0; max-width:none; opacity:var(--intro-opacity,1); transform:translate3d(0,var(--intro-rise,0px),0); }
.is-spatial .spatial-intro h2 { margin-top:23px; font-size:clamp(62px,6.1vw,99px); }
.is-spatial .spatial-intro h2 span { color:var(--fg); }
.is-spatial .spatial-intro p { margin-top:20px; }
.is-spatial .spatial-camera { position:absolute; inset:0; perspective:1200px; perspective-origin:50% 50%; }
.is-spatial .spatial-world { display:block; position:absolute; inset:0; pointer-events:none; transform-style:preserve-3d; transform:translateZ(var(--camera-z,0px)) rotateX(var(--camera-rx,0deg)) rotateY(var(--camera-ry,0deg)); }
.is-spatial .spatial-card { position:absolute; width:clamp(200px,25vw,360px); pointer-events:auto; transform-style:preserve-3d; transform:translate3d(-50%,-50%,var(--plane-z,0px)) rotateX(var(--plane-rx,0deg)) rotateY(var(--plane-ry,0deg)) rotateZ(var(--plane-rz,0deg)); }
.is-spatial .spatial-symbol { height:clamp(130px,23svh,270px); width:100%; aspect-ratio:auto; }
.is-spatial .spatial-card-label { color:var(--fg); text-shadow:0 2px 12px var(--bg); }
.is-spatial .spatial-card-practice { text-shadow:0 2px 8px var(--bg); }
.is-spatial .spatial-note { position:absolute; width:calc(100% - var(--gutter)*2); left:var(--gutter); right:var(--gutter); bottom:32px; margin:0; z-index:5; }
.is-spatial .spatial-meter { display:block; }
.is-spatial .spatial-card:focus-visible { outline-color:var(--plane-color); outline-offset:9px; }

/* A shared light field carries the paper chapter into the spatial room. */
.field-band { background:linear-gradient(var(--paper),color-mix(in srgb,var(--paper),var(--bg) var(--field-handoff,0%))); color:var(--ink); border-color:transparent; }
.field-band span:nth-of-type(even) { -webkit-text-stroke-color:var(--ink); }
.is-spatial .spatial-sticky { --spatial-backdrop:color-mix(in srgb,var(--paper),var(--bg) var(--field-handoff,100%)); background:radial-gradient(ellipse at var(--room-light,35%) 58%,color-mix(in srgb,var(--forma) 8%,var(--spatial-backdrop)),var(--spatial-backdrop) 74%); }
.is-spatial .spatial-intro { color:color-mix(in srgb,var(--ink),var(--fg) var(--field-handoff,100%)); }
.is-spatial .spatial-intro h2 span { color:inherit; }
.is-spatial .spatial-intro>.eyebrow,.is-spatial .spatial-intro p { color:inherit; opacity:.65; }
.is-spatial .spatial-floor { translate:0 var(--room-shift,0px); }
.spatial-vault { display:none; }
.is-spatial .spatial-vault { display:block; position:absolute; inset:0; perspective:1000px; perspective-origin:50% 48%; opacity:.4; }
.spatial-architecture { position:absolute; inset:0; transform-style:preserve-3d; }
.spatial-architecture i { position:absolute; inset:8% 2% 9%; border:1px solid color-mix(in srgb,var(--fg) 17%,transparent); transform:translateZ(-280px); box-shadow:inset 0 0 70px color-mix(in srgb,var(--forma) 2%,transparent); }
.spatial-architecture i:nth-child(2) { transform:translateZ(-720px); }
.spatial-architecture i:nth-child(3) { transform:translateZ(-1280px); }
.spatial-architecture i:nth-child(4) { transform:translateZ(-1950px); }
.is-spatial .spatial-room::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 45%,transparent 20%,var(--spatial-backdrop) 100%); opacity:.65; }
.work-section { position:relative; background:radial-gradient(ellipse at 55% 0%,color-mix(in srgb,var(--forma) 6%,var(--bg)),var(--bg) 640px); }
.hero-stage { perspective:1600px; }
.hero-portal { transform-origin:80% 50%; }
.portal-shade::after { content:''; position:absolute; inset:55% 0 0; background:linear-gradient(transparent,var(--paper)); opacity:var(--portal-bridge,0); pointer-events:none; }
.portal-caption { color:color-mix(in srgb,#f2f0ed,var(--ink) calc(var(--portal-bridge,0) * 100%)); }
.portal-meta .text-link { color:inherit; }
.portal-meta { border-color:color-mix(in srgb,currentColor 30%,transparent); }
.reel-slide .work-meta { will-change:transform,opacity; }
[data-theme="light"] .spatial-chapter { --spatial-surface:#d9dcd5; --spatial-edge:rgba(36,61,58,.26); }
[data-theme="light"] .spatial-symbol img { filter:drop-shadow(0 16px 18px #253b3a24); }
[data-theme="light"] .is-spatial .spatial-card-label { color:var(--fg); text-shadow:none; }

/* Framed editorial images sit on different planes, with an optical edge. */
.editorial-work { perspective:1600px; }
.editorial-card .ph { box-shadow:0 30px 70px -22px rgba(0,0,0,.4); }
.atlas-preview { box-shadow:0 35px 65px -35px rgba(13,27,25,.6); }
.process-diagram { filter:drop-shadow(0 12px 8px rgba(0,0,0,.3)); }
@media (max-width:900px) {
 .spatial-sticky { padding-top:75px; }
 .spatial-world { grid-template-columns:repeat(2,1fr); gap:38px 24px; }
 .spatial-intro h2 { font-size:clamp(45px,8vw,70px); }

 .spatial-intro { margin-bottom:48px; }
 .spatial-wall { top:40%; }
 .spatial-note { gap:15px; font-size:8px; }
 .spatial-note>span:first-child { display:none; }
 .hero-ground { inset:48% -25% 0 0; }
}
@media (max-width:520px) {
 .spatial-sticky { padding:68px 24px 50px; }
 .spatial-world { gap:30px 17px; }
 .spatial-intro h2 { font-size:49px; margin:28px 0; }
 .spatial-intro>.eyebrow { font-size:8px; }
 .spatial-intro p { font-size:11px; }
 .spatial-card-label { gap:8px; }
 .spatial-symbol { aspect-ratio:320/260; }
 .spatial-card-label { font-size:17px; margin-top:0; letter-spacing:.08em; }
 .spatial-card-number { flex-basis:11px; font-size:7px; }
 .spatial-card-arrow { flex-basis:11px; width:11px; height:11px; }
 .spatial-card-practice { font-size:7px; letter-spacing:.04em; margin-top:7px; }

 .spatial-note { margin-top:40px; padding-top:20px; }
 .hero-art::before { bottom:0; }
}
@media (min-width:761px) and (max-width:900px) {
 .is-spatial .spatial-card:nth-child(even) { margin-top:0; }
 .is-spatial .spatial-intro { left:10%; right:10%; top:40%; }
 .is-spatial .spatial-intro h2 { font-size:clamp(50px,7vw,64px); }
 .is-spatial .spatial-note>span:first-child { display:block; }
 .is-spatial .spatial-note { font-size:8px; }
}
@media (prefers-reduced-motion:reduce) {
 .spatial-symbol,.spatial-symbol::before,.spatial-card-arrow,.spatial-card-label,.spatial-card,.spatial-world,.spatial-intro { transition:none!important; }
 .spatial-card:is(:hover,:focus-visible) .spatial-symbol { transform:none; }
}

/* THE CONNECTED PRACTICE / the overview opens into six photographic worlds. */
.world-stage { display:none; }
.is-spatial .world-stage { display:block; position:absolute; inset:0; z-index:6; overflow:hidden; isolation:isolate; background:#0a0c0d; color:#fff; visibility:hidden; opacity:0; transform-origin:50% 58%; }
.world-images,.world-scene,.world-shade { position:absolute; inset:0; }
.world-scene { opacity:0; overflow:hidden; transition:opacity .8s cubic-bezier(.22,.61,.36,1); }
.world-scene.is-current { opacity:1; }
.vsn-experience .world-scene img { display:block; width:100%; height:100%; object-fit:cover; transform:translateY(var(--world-pan,0px)) scale(1.13); transition:transform 1.8s var(--ease); }
.vsn-experience .world-scene.is-current img { transform:translateY(var(--world-pan,0px)) scale(1.055); }
.world-scene[data-unavailable] img { visibility:hidden; }
.world-shade { pointer-events:none; background:linear-gradient(0deg,rgba(2,5,8,.86),rgba(2,5,8,.1) 53%,rgba(2,5,8,.3)),linear-gradient(270deg,rgba(2,5,8,.43),transparent 35%); }
.world-shade::after { content:''; position:absolute; inset:0; box-shadow:inset 0 0 160px rgba(0,0,0,.12); }
.world-topline { position:absolute; inset:100px var(--gutter) auto; display:flex; align-items:center; justify-content:space-between; gap:25px; font:400 10px/1.5 var(--disp); letter-spacing:.14em; text-transform:uppercase; }
.world-topline,.world-copy,.world-bottom,.world-controls { opacity:var(--world-interface,0); }
.world-topline a { display:flex; align-items:center; gap:20px; color:inherit; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.4); }
.world-topline a span { font-size:22px; }
.world-copy { position:absolute; left:var(--gutter); right:var(--gutter); bottom:17%; pointer-events:none; transform:translateY(calc((1 - var(--world-interface,0)) * 24px)); }
.world-kicker { display:block; font:400 11px/1.5 var(--disp); text-transform:uppercase; letter-spacing:.13em; margin-bottom:26px; }
.world-name { font:400 clamp(100px,15.5vw,260px)/.8 var(--disp); letter-spacing:-.075em; margin:0; }
.world-phrase { margin:28px 0 0; font:300 clamp(20px,2.2vw,34px)/1.35 var(--disp); letter-spacing:-.025em; color:rgba(255,255,255,.82); }
.world-bottom { position:absolute; bottom:43px; left:var(--gutter); right:var(--gutter); display:flex; justify-content:space-between; align-items:end; gap:30px; border-top:1px solid rgba(255,255,255,.28); padding-top:24px; }
.world-project { font:400 9px/1.7 var(--disp); letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.65); }
.world-enter { color:#fff; display:flex; align-items:center; justify-content:space-between; gap:60px; font:400 13px/1.5 var(--disp); }
.world-enter span { width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.4); border-radius:50%; font-size:24px; transition:background .4s,color .4s,transform .4s; }
.world-enter:hover span { background:#fff; color:#111; transform:rotate(45deg); }
.world-controls { position:absolute; right:var(--gutter); top:29%; display:flex; flex-direction:column; width:clamp(136px,13vw,210px); gap:7px; }
.world-controls button { color:rgba(255,255,255,.55); display:grid; grid-template-columns:21px 1fr 16px; align-items:center; gap:12px; text-align:left; padding:10px 0; font:400 11px/1.4 var(--disp); letter-spacing:.04em; transition:color .3s; }
.world-controls button>span { font-size:8px; opacity:.6; }
.world-controls button>b { font-weight:400; }
.world-controls button>i { width:4px; height:4px; border:1px solid currentColor; border-radius:50%; justify-self:end; transition:width .4s,background .4s; }
.world-controls button[aria-current],.world-controls button:hover { color:#fff; }
.world-controls button[aria-current]>i { width:16px; border-radius:1px; background:var(--active-world,#fff); border-color:var(--active-world,#fff); }
.world-progress { position:absolute; inset:auto 0 0; height:2px; background:rgba(255,255,255,.12); }
.world-progress i { display:block; width:100%; height:100%; background:var(--active-world,#fff); transform:scaleX(var(--world-scroll,0)); transform-origin:left; }
.spatial-note a { color:inherit; text-decoration:none; pointer-events:auto; padding:7px 0; }
@media (min-width:761px) and (max-width:1100px) {
 .world-topline { font-size:9px; }
 .world-copy { bottom:18%; }
 .world-name { font-size:15.7vw; }
 .world-controls { top:35%; width:135px; }
 .world-kicker { font-size:9px; margin-bottom:24px; }
 .world-project { max-width:48%; font-size:8px; }
 .world-enter { font-size:12px; gap:27px; }
}
@media (min-width:761px) and (max-height:800px) {
 .world-topline { top:82px; }
 .world-controls { top:25%; gap:1px; }
 .world-controls button { padding:8px 0; }
 .world-copy { bottom:23%; }
 .world-name { font-size:13vw; }
 .world-kicker { margin-bottom:18px; }
 .world-phrase { margin-top:18px; }
 .world-bottom { bottom:30px; padding-top:16px; }
}
@media (max-width:760px) {
 .spatial-world { gap:35px 20px; }
 .spatial-card:nth-child(n) { grid-column:auto; }
 .spatial-card:nth-child(even) { margin-top:0; }



 .spatial-intro { text-align:left; }
 .spatial-intro h2 { font-size:clamp(46px,10vw,68px); }
 .spatial-intro p { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { .world-stage { display:none!important; } }

@media(min-width:761px) and (max-width:1000px) {
 .is-spatial .spatial-card { width:26vw; }
 .is-spatial .spatial-symbol { height:20svh; }
 .is-spatial .spatial-card-label { font-size:19px; gap:8px; letter-spacing:.1em; }
 .is-spatial .spatial-card-practice { font-size:7px; letter-spacing:.025em; }
}
@media(min-width:761px) and (max-height:800px) {
 .is-spatial .spatial-symbol { height:22svh; }
 .is-spatial .spatial-card-label { font-size:19px; margin-top:-4px; }
 .is-spatial .spatial-card-practice { margin-top:6px; }
 .is-spatial .spatial-note { bottom:14px; padding-top:20px; }
 .is-spatial .spatial-intro { top:34%; }
 .is-spatial .spatial-intro h2 { font-size:clamp(44px,5vw,68px); margin:15px 0; }
 .is-spatial .spatial-intro p { font-size:11px; line-height:1.65; margin-top:11px; }
}
/* Keep the centre copy clear of the lower sculptures on shorter desktop windows. */
@media(min-width:761px) and (min-height:801px) and (max-height:950px) {
 .is-spatial .spatial-intro h2 { font-size:clamp(56px,5vw,76px); margin:18px 0; }
 .is-spatial .spatial-intro p { font-size:12px; line-height:1.65; margin-top:12px; }
}