/* Archive: a sideways strip of older work, then a 3D depth field you step into. */
.archive{position:relative;background:var(--black);color:var(--snow)}
.arch-pin{position:relative;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,5vh,48px)}
.arch-head{display:flex;justify-content:space-between;align-items:end;gap:24px;padding:0 var(--gut)}
.arch-head h2{font:500 clamp(34px,4.4vw,64px)/1 var(--display);letter-spacing:-.025em}
.arch-head p{max-width:26em;color:#B9BAC3;font-size:15px}
.arch-track{display:flex;gap:clamp(20px,3vw,48px);padding:0 var(--gut);width:max-content;will-change:transform}

.arch-panel{position:relative;flex:none;width:clamp(280px,48vw,780px);aspect-ratio:16/10;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.arch-panel .ph{position:absolute;inset:0;border-radius:6px;overflow:hidden;background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.arch-panel img{width:100%;height:100%;object-fit:cover;transform:scale(var(--pz,1.08));transition:transform .5s var(--ease)}
.arch-name{position:absolute;left:clamp(12px,2vw,28px);bottom:clamp(-18px,-1.4vw,-10px);font:500 clamp(40px,6.4vw,112px)/.9 var(--display);letter-spacing:-.035em;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.45);pointer-events:none}
.arch-panel small{position:absolute;right:16px;top:14px;font-size:13px;color:#fff;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
@media (hover:hover) and (pointer:fine){ .arch-panel:hover img{transform:scale(1.02)} }
.arch-hint{padding:0 var(--gut);font-size:14px;color:#8C8D96}

/* the depth field */
#field{position:fixed;inset:0;z-index:60;background:#000;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s;overflow:hidden}
#field.open{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.f-space{position:absolute;inset:0;perspective:900px;perspective-origin:50% 50%}
.f-world{position:absolute;left:50%;top:50%;transform-style:preserve-3d}
.f-item{position:absolute;padding:0;border:0;background:#111;border-radius:4px;overflow:hidden;cursor:pointer;box-shadow:0 20px 60px rgba(0,0,0,.6);transform-origin:50% 50%}
.f-item img{display:block;width:100%;height:100%;object-fit:cover}
.f-item:focus-visible{outline:2px solid var(--violet);outline-offset:4px}
#field.focused .f-item{opacity:.12 !important;pointer-events:none;transition:opacity .4s ease}

.f-big{position:fixed;z-index:3;margin:0;border-radius:6px;overflow:hidden;box-shadow:0 30px 120px rgba(0,0,0,.8);pointer-events:none;will-change:transform}
.f-big img{width:100%;height:100%;object-fit:contain;background:#0a0a0c}
.f-cap{position:fixed;z-index:4;left:var(--gut);bottom:clamp(20px,4vh,40px);display:flex;align-items:baseline;gap:16px;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s var(--ease);pointer-events:none}
#field.focused .f-cap{opacity:1;transform:none}
.f-cap b{font:500 clamp(28px,3.4vw,48px)/1 var(--display);letter-spacing:-.025em}
.f-cap span{color:#B9BAC3;font-size:15px}
.f-ui{position:fixed;z-index:5;top:16px;right:var(--gut);display:flex;gap:10px}
.f-ui button{padding:10px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.5);color:#fff;font:500 14px/1 var(--sans);cursor:pointer;transition:background .2s ease,border-color .2s ease}
.f-ui button:hover{background:rgba(255,255,255,.12);border-color:#fff}
.f-ui .f-back{display:none}
#field.focused .f-ui .f-back{display:block}
.f-tip{position:fixed;z-index:4;left:var(--gut);top:22px;font-size:14px;color:#8C8D96}
#field.focused .f-tip{opacity:0}

@media (max-width:860px){
  .arch-head{flex-direction:column;align-items:start}
  .arch-panel{width:78vw}
}
@media (prefers-reduced-motion:reduce){
  .arch-pin{height:auto;padding:80px 0}
  .arch-track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory}
  .arch-panel{scroll-snap-align:start}
  .arch-panel img{transition:none}
  #field,.f-cap{transition:none}
}
@media (max-width:420px){ .f-tip{display:none} .f-ui{right:12px} }