/* The preview floats; the project title and its links stay in the document plane. */
.spatial-section{overflow:clip}
.spatial-deck{position:relative;isolation:isolate}
.depth-frame{position:relative;min-width:0}

@media(min-width:901px) and (prefers-reduced-motion:no-preference){
  .spatial-deck{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(24px,3.2vw,54px);
    padding:40px 5px 16px;
    perspective:1400px;
  }
  .spatial-deck::before{
    content:"";
    position:absolute;
    z-index:-1;
    pointer-events:none;
    left:-7%;
    right:-7%;
    top:6%;
    height:76%;
    transform:perspective(750px) rotateX(64deg) translateY(12%);
    transform-origin:50% 35%;
    background-image:linear-gradient(#b3c18c20 1px,transparent 1px),linear-gradient(90deg,#b3c18c20 1px,transparent 1px);
    background-size:52px 52px;
    mask-image:radial-gradient(ellipse at 50% 50%,#000 12%,transparent 71%);
    opacity:.8;
  }
  .spatial-deck::after{
    content:"";
    position:absolute;
    z-index:-2;
    pointer-events:none;
    inset:-7% -6% 28%;
    background:radial-gradient(ellipse at 50% 60%,#c9c28e0f,transparent 64%);
  }
  .spatial-deck>.spatial-grid{display:contents}
  .spatial-deck article{min-width:0}
  .spatial-deck>.spatial-feature{--depth-yaw:-7deg;--depth-pitch:4deg;--depth-offset:9px;--depth-factor:.8}
  .spatial-deck>.spatial-grid>article:first-child{--depth-yaw:0deg;--depth-pitch:4deg;--depth-offset:29px;--depth-factor:-.7}
  .spatial-deck>.spatial-grid>article:last-child{--depth-yaw:7deg;--depth-pitch:4deg;--depth-offset:9px;--depth-factor:.8}
  .spatial-deck .depth-frame{
    transform-style:preserve-3d;
    transform:translate3d(0,calc(var(--depth-offset,0px) + var(--gallery-drift,0px)*var(--depth-factor,1) + var(--depth-lift,0px)),0) rotateX(calc(var(--depth-pitch,4deg) + var(--gallery-rotation,0deg))) rotateY(var(--depth-yaw,0deg));
    transform-origin:50% 75%;
    transition:transform .35s cubic-bezier(.22,.7,.3,1);
  }
  .spatial-deck .depth-frame::before{
    content:"";
    position:absolute;
    pointer-events:none;
    inset:0 2px;
    border-radius:10px;
    border:1px solid #d8ddbb3b;
    background:linear-gradient(145deg,#69755b,#303d2b 48%,#1e291d);
    transform:translate3d(0,7px,-10px);
    box-shadow:0 24px 35px -16px #0d160c85;
  }
  .spatial-deck .depth-frame::after{
    content:"";
    position:absolute;
    pointer-events:none;
    left:8%;
    right:8%;
    bottom:-29px;
    height:19px;
    border-radius:50%;
    background:#101a0cb0;
    filter:blur(12px);
    transform:translateZ(-24px);
    opacity:.75;
  }
  .spatial-deck .depth-frame>.spatial-cover{
    aspect-ratio:1.5;
    border-radius:9px;
    border-color:#cad3ae75;
    box-shadow:0 2px 0 #121d0d66,0 12px 24px #121d0d38;
  }
  .spatial-deck .spatial-feature-info,
  .spatial-deck .spatial-small-info{display:block;padding:49px 0 0}
  .spatial-deck .spatial-feature-info h3,
  .spatial-deck .spatial-small-info h3{font-size:clamp(23px,2vw,29px);line-height:1.15;margin:0 0 12px;letter-spacing:-.7px}
  .spatial-deck .spatial-feature-info p,
  .spatial-deck .spatial-small-info p{font-size:13px;line-height:1.75;max-width:33ch}
  .spatial-deck .spatial-feature-info>div:last-child{flex-direction:row;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding-top:17px}
  .spatial-deck .spatial-tags{gap:5px}
  .spatial-deck .spatial-tags>span{font-size:9px;padding:5px 9px}
  .spatial-deck .spatial-feature-info .text-link{font-size:12px;gap:10px;min-height:32px}
  .spatial-deck .small-arrow{display:none}
  .spatial-deck .cover-badge{top:12px;left:12px;font-size:8px;letter-spacing:.2px;padding:8px 9px;gap:7px}
  .spatial-deck .spatial-play,
  .spatial-deck .spatial-grid .spatial-play{width:40px;height:40px;right:13px;bottom:13px;font-size:21px}
}

@media(min-width:901px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .spatial-deck .depth-frame:hover,
  .spatial-deck .depth-frame:focus-within{--depth-lift:-7px}
}

@media(max-width:900px),(prefers-reduced-motion:reduce){
  .spatial-deck{display:block;padding:0;perspective:none}
  .spatial-deck::before,.spatial-deck::after,.depth-frame::before,.depth-frame::after{display:none}
  .spatial-deck .depth-frame{transform:none;transition:none}
}
@media print{
  .spatial-deck{display:block;padding:0;perspective:none}
  .spatial-deck::before,.spatial-deck::after,.depth-frame::before,.depth-frame::after{display:none}
  .spatial-deck .depth-frame{transform:none!important;transition:none!important}
}