/* Spatial edition — progressive enhancements layered on the original artwork.
   Everything remains readable and navigable when this file or JS is absent. */
:root {
  --studio-ease: cubic-bezier(.22,.73,.22,1);
  --studio-shadow: 0 24px 68px rgba(62,76,48,.13),0 4px 12px rgba(62,76,48,.07);
}
body { background-image: radial-gradient(ellipse at 77% 2%, rgba(185,217,122,.075), transparent 43%); }
.shell, .hero-layout > *, .project-grid > *, .systems-layout > *, .about-layout > *, .contact-layout > * {min-width:0}
.hero-section { isolation:isolate; }
.hero-section::before { content:"";position:absolute;z-index:-1;top:9%;left:0;width:min(28vw,400px);height:min(28vw,400px);border:1px solid rgba(83,103,59,.055);border-radius:50%;transform:translate(-68%,-12%);pointer-events:none; }
.hero-copy::before { content:"01 / FIELD NOTES";position:absolute;left:0;bottom:2px;color:var(--copper-ink);font:9px/1.5 var(--mono);letter-spacing:.08em;opacity:.8; }
.hero-copy h1 { filter:drop-shadow(0 10px 25px rgba(58,69,40,.045)); }
.hero-proof b { font-variant-numeric:tabular-nums; }
/* Preserve original hi / flower editorial design as an instant SVG fallback. */
.hero-wip-banner { background:linear-gradient(145deg,#e8edda 0%,#dce5ce 58%,#ced9bc 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.44),0 27px 63px rgba(55,78,36,.09);overflow:hidden;transform-style:flat; }
.hero-wip-banner::before { background-image:linear-gradient(rgba(88,102,66,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(88,102,66,.09) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(120deg,#000 35%,transparent 95%); }
.hero-wip-banner::after { width:78%;left:12%;top:13%;border-style:dashed;opacity:.6; }
.hero-wip-top { z-index:6; }
.hero-wip-hello { z-index:1;left:5%;top:14%;color:rgba(53,65,45,.88);user-select:none; }
.hero-wip-flower {z-index:3;filter:drop-shadow(10px 18px 18px rgba(58,73,40,.18));}
.hero-wip-sticker { z-index:6;left:5%;bottom:23%;box-shadow:3px 9px 30px rgba(68,84,49,.11); }
.hero-wip-index {z-index:6;}
.hero-wip-bottom {z-index:7;}
.hero-wip-caption {align-items:center;flex-wrap:wrap;row-gap:7px;}
.hero-wip-caption > span {max-width:100%;}
.hero-canvas {position:absolute;display:block;z-index:4;inset:5% -5% 11% 13%;width:96%;height:85%;max-width:none!important;pointer-events:none;touch-action:pan-y;opacity:0;transition:opacity .9s ease;cursor:grab;}
.hero-canvas:active {cursor:grabbing;}
.hero-wip-banner.has-webgl .hero-canvas {opacity:1;pointer-events:auto;}
.hero-wip-banner.has-webgl .hero-wip-flower {opacity:0;animation:none;}
.hero-canvas-shade {position:absolute;z-index:2;left:30%;top:36%;width:74%;height:60%;border-radius:50%;background:radial-gradient(ellipse,rgba(63,75,45,.21) 0%,rgba(81,105,61,.065) 42%,transparent 71%);filter:blur(16px);transform:scaleY(.55);pointer-events:none;}
.hero-canvas-orbit {position:absolute;inset:14% 7% 16% 15%;border:1px solid rgba(62,80,44,.19);border-radius:50%;transform:rotate(31deg) scaleY(.73);pointer-events:none;z-index:2;}
.hero-canvas-orbit::after {content:"";position:absolute;width:8px;height:8px;border-radius:50%;right:11%;bottom:21%;background:var(--copper);box-shadow:0 0 0 7px rgba(200,121,80,.13)}
.motion-button.spatial-motion {border:1px solid rgba(83,103,59,.28);background:var(--surface);padding:9px 13px;display:none;gap:8px;margin-left:auto;min-height:38px;white-space:nowrap;font-size:9px;}
.enhanced .motion-button.spatial-motion {display:inline-flex!important;}
.motion-button.spatial-motion:hover {background:var(--lime);color:var(--ink)}
.motion-button.spatial-motion:disabled {opacity:.7}
.motion-indicator {flex-shrink:0}
.hero-live-status {font:8px/1.6 var(--mono);color:#536046;max-width:18ch;}
.hero-art-note {position:absolute;z-index:6;left:25px;top:49%;font:8px/1.7 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:#54634a;pointer-events:none;}
.hero-art-note strong {display:block;font:500 9px var(--mono);color:#415039;}
/* Tilt is based on the CSS custom properties already set by the original cursor JS. */
.project-card {perspective:1300px;transition:transform .4s var(--studio-ease)}
.project-preview {transform:perspective(1300px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(0);transform-origin:center;transition:transform .27s var(--studio-ease),box-shadow .35s var(--studio-ease),filter .35s;box-shadow:0 2px 1px rgba(62,70,48,.03);will-change:auto;}
.project-preview::before {content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(145deg,rgba(255,255,255,.23),transparent 28%,transparent 68%,rgba(26,38,20,.11));mix-blend-mode:soft-light;}
.project-preview::after {content:"";position:absolute;z-index:2;inset:0;border:1px solid rgba(255,255,255,.32);pointer-events:none;}
.project-preview img {transform:scale(1.01);transition:transform .75s var(--studio-ease),filter .5s;}
.project-preview:hover,.project-preview:focus-visible {box-shadow:var(--studio-shadow);transform:perspective(1300px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-7px);}
.project-preview:hover img,.project-preview:focus-visible img {transform:scale(1.06);}
.project-card:focus-within .project-body h3,.project-card:hover .project-body h3 {color:var(--olive);}
.project-body h3 {transition:color .25s}
.preview-index {z-index:4;background:rgba(250,248,241,.76);backdrop-filter:blur(9px);padding:6px 8px;left:14px;top:13px;}
.project-aadi .preview-index {background:rgba(41,49,38,.54)}
.preview-arrow {z-index:4;box-shadow:0 3px 16px rgba(29,46,20,.14)}
.project-cursor {box-shadow:0 13px 36px rgba(59,73,33,.23)}
.project-dialog[open] {animation:studio-dialog-in .32s var(--studio-ease)}
@keyframes studio-dialog-in {from {opacity:.4;transform:translateY(13px) scale(.984)}to{opacity:1;transform:none}}
.dialog-project-art {height:184px;overflow:hidden;position:relative;border:1px solid var(--line);margin:17px 0 27px;isolation:isolate;background:var(--sage)}
.dialog-project-art img {width:100%;height:100%;object-fit:cover;object-position:center;}
.dialog-project-art::after {content:"CASE STUDY  /  SYSTEM DETAIL";position:absolute;right:15px;bottom:14px;background:rgba(250,248,241,.91);color:#415037;padding:7px 10px;font:8px var(--mono);letter-spacing:.06em;}
/* The existing clickable capability nodes remain the single source of truth. */
.capabilities-section {position:relative;isolation:isolate;}
.capabilities-section::before {content:"";position:absolute;z-index:-1;left:0;top:8%;width:40%;height:50%;background:radial-gradient(ellipse,rgba(195,218,157,.17),transparent 68%);pointer-events:none}
.systems-map {box-shadow:0 24px 48px rgba(67,82,47,.085);background:linear-gradient(155deg,#eaf0e0,#dae5cf);transition:box-shadow .4s}
.systems-map:hover {box-shadow:0 29px 57px rgba(67,82,47,.13)}
.map-lines {pointer-events:none;}
.map-lines [data-edge] {stroke-dasharray:5 5;stroke-dashoffset:0;animation:network-stream 6s linear infinite;}
.map-lines [data-edge].edge-active {stroke:var(--copper-ink);stroke-width:2.75;stroke-dasharray:4 7;animation-duration:2.4s;}
.map-lines > circle {transform-origin:300px 229px;animation:map-orbit-breathe 13s ease-in-out infinite;}
@keyframes network-stream {to {stroke-dashoffset:-110}}
@keyframes map-orbit-breathe {50% {transform:scale(1.045);opacity:.7}}
.map-center {box-shadow:0 15px 32px rgba(56,68,40,.13);transition:transform .35s var(--studio-ease),box-shadow .35s;}
.map-center:hover {transform:translate(-50%,-50%) scale(1.055)}
.map-node {box-shadow:0 5px 14px rgba(54,71,42,.065);transition:background .25s,border-color .25s,box-shadow .25s;}
.map-node[aria-pressed="true"] {box-shadow:0 10px 24px rgba(41,42,36,.18)}
.map-node:hover {box-shadow:0 9px 22px rgba(54,71,42,.13)}
.map-system-pulse {position:absolute;left:50%;top:50%;z-index:0;width:176px;height:176px;border:1px solid rgba(83,103,59,.15);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;animation:map-pulse 4s ease-in-out infinite}
.map-system-pulse::before {content:"";position:absolute;inset:14px;border:1px dashed rgba(83,103,59,.19);border-radius:50%}
@keyframes map-pulse {50% {width:193px;height:193px;opacity:.58}}
.map-signal {display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;border:1px solid var(--line);background:var(--canvas);padding:15px 18px;margin-top:16px;max-width:100%;}
.map-signal .signal-index {font:9px var(--mono);color:var(--copper-ink);padding-top:4px}
.map-signal p {font:10px/1.8 var(--mono);color:var(--muted)}
.map-signal strong {color:var(--olive);font-weight:500}
.capability {position:relative;transition:background .25s}
.capability[open] {background:linear-gradient(90deg,rgba(185,217,122,.10),transparent 80%)}
.capability[open] summary {color:var(--olive)}
/* Distributed light-depth visual rhythm; no multiple expensive 3D canvases. */
.about-section {position:relative;isolation:isolate;background-image:radial-gradient(circle at 93% 4%,rgba(250,248,241,.40) 1px,transparent 1px);background-size:25px 25px}
.about-art {background:radial-gradient(ellipse at 52% 55%,rgba(250,248,241,.41),transparent 70%),rgba(237,241,225,.20);perspective:800px;}
.about-monogram {text-shadow:12px 12px 0 rgba(68,89,46,.065);transition:transform .8s var(--studio-ease);}
.about-art:hover .about-monogram {transform:rotateY(-6deg) rotateX(3deg)}
.monogram-orbit {animation:monogram-orbit 25s ease-in-out infinite alternate;}
@keyframes monogram-orbit {to{transform:rotate(-21deg) scale(.93)}}
.skill-group {transition:padding .35s var(--studio-ease),background .35s}
.skill-group[open] {background:linear-gradient(90deg,rgba(185,217,122,.12),transparent 70%);padding-left:10px}
.skill-group summary:hover h3 {color:var(--olive)}
.skill-tags span {transition:background .25s,transform .25s,color .25s}
.skill-tags span:hover {transform:translateY(-2px);background:var(--sage);color:var(--ink)}
.journey-item {position:relative;transition:background .4s,transform .4s var(--studio-ease);}
.journey-item::before {content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--copper);transition:width .6s var(--studio-ease)}
.journey-item:hover::before,.journey-item.is-revealed::before {width:min(45%,360px)}
.journey-item:hover {transform:translateX(5px)}
.process-art {perspective:800px;transform-style:preserve-3d}
.process-art>div {box-shadow:8px 15px 28px rgba(77,88,61,.09);transition:transform .5s var(--studio-ease),left .5s;}
.process-art:hover>div:nth-child(1) {transform:rotate(20deg) skew(-8deg) translate3d(-5px,10px,15px)}
.process-art:hover>div:nth-child(2) {transform:rotate(25deg) skew(-8deg) translate3d(3px,4px,30px)}
.process-art:hover>div:nth-child(3) {transform:rotate(35deg) skew(-8deg) translate3d(9px,-5px,45px)}
.process-art:hover>div:nth-child(4) {transform:rotate(40deg) skew(-8deg) translate3d(16px,-12px,60px)}
.process-steps li.is-current .process-step-title h3 {color:var(--olive)}
.play-panel {box-shadow:inset 0 0 85px rgba(102,130,77,.07),0 20px 55px rgba(67,82,47,.08)}
.play-panel::after {content:"";position:absolute;z-index:1;inset:18px;pointer-events:none;border:1px solid rgba(83,103,59,.13);}
.contact-section {position:relative;isolation:isolate;}
.contact-section::before {content:"";position:absolute;top:0;left:25%;width:50%;height:100%;z-index:-1;background:radial-gradient(ellipse at center,rgba(185,217,122,.065),transparent 65%);pointer-events:none}
.contact-orbit {box-shadow:0 0 0 18px rgba(185,217,122,.07);}
/* Animate entrance sparingly. Unenhanced markup never depends on opacity:0. */
@media (prefers-reduced-motion:no-preference) {
  .depth-init {opacity:.94;transform:translate3d(0,17px,0);transition:transform .75s var(--studio-ease),opacity .75s ease;}
  .depth-init.is-revealed {opacity:1;transform:translateZ(0)}
}
@media (hover:none), (pointer:coarse) {
  .project-preview,.project-preview:hover,.project-preview:focus-visible {transform:none;box-shadow:0 8px 28px rgba(65,82,44,.10);}
  .project-preview img {transform:scale(1.005)}
  .project-preview:hover img {transform:scale(1.005)}
  .project-cursor {display:none!important}
  .preview-arrow {background:var(--lime)}
  .project-preview {cursor:pointer!important}
  .about-art:hover .about-monogram,.journey-item:hover {transform:none}
}
@media (max-width:1120px) {
  .hero-art-note {display:none}
  .hero-canvas {inset:7% -8% 13% 11%;width:98%;height:81%}
  .map-system-pulse {display:none}
}
@media (max-width:640px) {
  .hero-copy::before {display:none}
  .hero-wip-hello {left:5%;top:19%;font-size:clamp(142px,47vw,227px)}
  .hero-canvas {inset:10% -4% 14% 6%;width:96%;height:80%;}
  .hero-canvas-orbit {inset:17% 7% 18% 12%;}
  .hero-canvas-shade {left:19%;width:82%}
  .hero-wip-sticker {bottom:24%;width:57px;height:57px;}
  .hero-wip-caption {gap:12px;padding-top:12px}
  .hero-wip-caption .hero-live-status {flex:1 0 40%;text-align:left;max-width:none;font-size:7px}
  .hero-wip-caption .motion-button {margin-left:0;min-height:44px;}
  .hero-wip-bottom {font-size:9px}
  .project-preview {border-radius:1px}
  .map-lines,.map-system-pulse {display:none}
  .map-signal {padding:12px 13px}
  .map-center:hover {transform:none}
  .about-monogram {text-shadow:7px 7px 0 rgba(68,89,46,.05)}
  .journey-item::before {max-width:45%}
  .contact-layout {overflow:visible}
  .contact-orbit {justify-self:center;margin:10px 0 18px}
  .contact-orbit-type {max-width:none}
  .dialog-project-art {height:137px;margin:17px 0 20px}
  .process-art:hover>div {transform:rotate(30deg) skew(-8deg)!important;}
}
@media (max-width:370px) {
  .hero-wip-hello {font-size:clamp(135px,47vw,166px)}
  .hero-wip-caption {gap:8px}
  .hero-wip-caption > span:first-child {max-width:100%}
  .hero-wip-caption .motion-button {font-size:8px;padding:8px}
  .hero-canvas {inset:10% -7% 14% 2%;width:103%}
  .map-signal {grid-template-columns:minmax(0,1fr)}
  .contact-orbit {margin-inline:auto}
}
@media (prefers-reduced-motion:reduce) {
  .hero-canvas,.project-preview,.project-preview img,.dialog-project-art {transition:none!important;animation:none!important}
  .map-lines [data-edge],.map-lines > circle,.map-system-pulse,.monogram-orbit {animation:none!important}
  .depth-init {transform:none!important;opacity:1!important}
}
.is-paused .map-lines [data-edge], .is-paused .map-lines > circle,.is-paused .map-system-pulse {animation-play-state:paused!important}
@media print { .hero-canvas,.hero-canvas-shade,.hero-canvas-orbit,.map-signal,.map-system-pulse {display:none!important}.hero-wip-flower {display:block!important}.project-preview {transform:none!important} }
.system-visual-column {min-width:0;}
.map-signal .signal-copy {display:block;margin-top:3px;}
.map-packets {pointer-events:none;}
.signal-dot {fill:#7f9b66;stroke:#e9efe0;stroke-width:1.7;opacity:0;transition:opacity .3s,fill .3s;}
.map-lines.signals-active .signal-dot {opacity:.8;}
.map-lines .signal-dot.is-selected {fill:#c87950;opacity:1;}
@media (max-width:640px){.signal-dot {display:none;}}
/* Reserve real room for the contact type ring at tablet widths; do not clip it. */
@media (min-width:851px) and (max-width:1120px) {
 .contact-layout {grid-template-columns:minmax(0,1fr) 214px;}
}
@media (min-width:641px) and (max-width:850px) {
 .contact-layout {grid-template-columns:minmax(0,1fr) 193px;}
}
@media (max-width:640px) {
 .contact-section {overflow-x:visible;}
}
/* A rotating square SVG reaches farther at 45 degrees than at rest. Reserve
   enough grid width for its diagonal, including viewBox lettering. */
@media (min-width:1121px) {
 .contact-layout {grid-template-columns:minmax(0,1fr) 300px;}
}
@media (min-width:851px) and (max-width:1120px) {
 .contact-layout {grid-template-columns:minmax(0,1fr) 254px;}
}
@media (min-width:641px) and (max-width:850px) {
 .contact-layout {grid-template-columns:minmax(0,1fr) 215px;}
}