/* qp archive: design tokens. Colours are sampled from the storefront photo.
   Type: Bodoni Moda (display, upright only), Barlow Condensed (labels), Archivo (text). All SIL OFL, self-hosted, latin subset.
   Spacing: ONE scale (--sp-*). Every margin, padding and gap in the css files uses these tokens. */
@font-face{font-family:"QP Display";src:url("../fonts/bodoni-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"QP Label";src:url("../fonts/barlow-condensed-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"QP Text";src:url("../fonts/archivo-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
:root{
  --qp-ink:#070708;        /* shadows in the photo */
  --qp-asphalt:#101112;
  --qp-steel:#1b1d1f;
  --qp-hair:#4a4d51;       /* hairlines, 2.3:1 on ink: decoration only, never text */
  --qp-concrete:#a9a9a3;
  --qp-caption:#c4c2b8;    /* captions over the tunnel, 9:1 on ink */   /* secondary text, checked >= 7:1 on ink */
  --qp-bone:#f1ebde;       /* primary text, warm white */
  --qp-lamp:#f2d9a4;       /* interior light */
  --qp-amber:#d79c52;      /* reflections on wet stone */

  --qp-display:"QP Display","Bodoni Moda","Didot","Bodoni 72","Times New Roman",serif;
  --qp-label:"QP Label","Barlow Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --qp-text:"QP Text",Archivo,"Helvetica Neue",Arial,sans-serif;

  /* spacing scale (4px base) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:144px;
  --sp-gutter:clamp(var(--sp-5),5vw,var(--sp-9));
  --sp-section:clamp(var(--sp-9),12vw,var(--sp-10));

  /* type scale */
  --fs-label:.8125rem; --fs-small:.9375rem; --fs-body:1.0625rem; --fs-lede:1.25rem;
  --fs-h2:clamp(2.5rem,1.4rem + 4.6vw,5rem);
  --fs-h1:clamp(3rem,1.6rem + 6.4vw,7rem);

  --qp-ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--qp-ink)}
body{margin:0;background:var(--qp-ink);color:var(--qp-bone);font-family:var(--qp-text);font-size:var(--fs-body);line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit}
i{font-style:normal}
.tone{color:var(--qp-lamp)}
:focus-visible{outline:2px solid var(--qp-lamp);outline-offset:var(--sp-1)}
.qp-label{font-family:var(--qp-label);font-weight:500;font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;color:var(--qp-concrete);line-height:1.3}

.qp-skip{position:fixed;left:var(--sp-3);top:-80px;z-index:100;background:var(--qp-bone);color:var(--qp-ink);padding:var(--sp-3) var(--sp-4);min-height:44px;font-family:var(--qp-label);letter-spacing:.14em;text-transform:uppercase;font-size:var(--fs-label);text-decoration:none;display:inline-flex;align-items:center}
.qp-skip:focus{top:var(--sp-3)}

/* header: plain type, not a logo */
.qp-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:var(--sp-1) var(--sp-gutter);pointer-events:none}
.qp-header::before{content:"";position:absolute;inset:0 0 calc(var(--sp-6) * -1) 0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(7,7,8,.95) 0,rgba(7,7,8,.92) 66%,rgba(7,7,8,0))}
.qp-header>*{pointer-events:auto}
.qp-mark{font-family:var(--qp-display);font-size:1.75rem;text-decoration:none;color:var(--qp-bone);min-height:44px;min-width:44px;display:inline-flex;align-items:center}
.qp-nav{display:flex;gap:0;margin-right:calc(var(--sp-3) * -1)}
.qp-nav a{font-family:var(--qp-label);font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--qp-bone);min-height:44px;padding:0 var(--sp-3);display:inline-flex;align-items:center;position:relative}
.qp-nav a::after,.qp-footer a::after{content:"";position:absolute;left:var(--sp-3);right:var(--sp-3);bottom:var(--sp-3);height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--qp-ease)}
.qp-nav a:hover::after,.qp-nav a:focus-visible::after,.qp-footer a:hover::after,.qp-footer a:focus-visible::after{transform:scaleX(1)}

.qp-footer{padding:var(--sp-9) var(--sp-gutter) var(--sp-8);border-top:1px solid var(--qp-hair);display:grid;gap:var(--sp-2);justify-items:start;background:var(--qp-ink)}
.qp-footer__brand{font-family:var(--qp-display);font-size:2rem}
.qp-footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--qp-bone);position:relative;text-decoration:none}
.qp-footer a::after{left:0;right:0;bottom:var(--sp-2)}
.qp-footer__small{font-size:var(--fs-small);color:var(--qp-concrete)}

.qp-draft{position:fixed;right:var(--sp-2);bottom:var(--sp-2);z-index:90;font-family:var(--qp-label);font-size:.75rem;letter-spacing:.26em;color:var(--qp-ink);background:var(--qp-lamp);padding:var(--sp-1) var(--sp-2);pointer-events:none}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* nothing may widen the page (glows, scaled layers): clip keeps position:sticky working */
main,.walk,.archive,.launch{overflow-x:clip}
/* ===== WALKTHROUGH ===== */
.walk{position:relative;background:var(--qp-ink)}
.walk__stage{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:var(--qp-ink)}
.walk__photo,.walk__interior,.walk__ent,.walk__veil{position:absolute;inset:0}
.walk__photo{overflow:hidden}
.walk__photo picture{display:block;width:100%;height:100%}
.walk__img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform-origin:0 0;backface-visibility:hidden}
.walk__interior{visibility:hidden;pointer-events:none;overflow:hidden}
/* until the drawn interior is ready (and behind it) the opening shows a warm, dark room, so the rising shutter never reveals a copy of itself */
.walk__scene{display:block;width:100%;height:100%;background:radial-gradient(ellipse 70% 60% at 50% 50%,#3b2c17 0,#1a140b 55%,#0a0a09 100%)}
.walk__ent{transform-origin:0 0;pointer-events:none}
/* entrance: strips are the photo's own pixels, cut at the slats, sitting exactly on top of the photo until the shutter moves */
.ent__shutter{position:absolute;overflow:hidden;visibility:hidden}
.ent__strip{position:absolute;left:0;width:100%;overflow:hidden;will-change:transform;box-shadow:0 -6px 10px rgba(0,0,0,calc(var(--o,0) * .6))}
.ent__img{position:absolute;max-width:none;object-fit:cover;object-position:50% 50%;display:block}
/* warm light from the opened shop falling on the wet pavement (light level only: opacity here is exposure) */
.ent__spill{position:absolute;pointer-events:none;visibility:hidden;opacity:0;mix-blend-mode:screen;transform-origin:50% 0;will-change:transform,opacity;background:radial-gradient(ellipse 62% 100% at 50% 0%,rgba(255,228,168,.62) 0,rgba(215,156,82,.24) 42%,rgba(215,156,82,0) 78%)}
.walk__veil{pointer-events:none;background:
  linear-gradient(0deg,rgba(7,7,8,.92) 0,rgba(7,7,8,.7) 22%,rgba(7,7,8,0) 52%),
  linear-gradient(180deg,rgba(7,7,8,.55) 0,rgba(7,7,8,0) 18%)}

/* depth haze + vignette: one static layer (cheap), instead of redrawing a full-screen gradient every frame */
.walk__stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(70% 70% at 50% 50%,rgba(0,0,0,0) 45%,rgba(0,0,0,.45) 100%)}

/* chapters: text layers that move with the camera (translate + wipe mask driven by scroll, no opacity fades) */
.walk__chapters{position:absolute;inset:0;pointer-events:none}
.ch{position:absolute;left:calc(var(--sp-gutter) - var(--sp-6));right:calc(var(--sp-gutter) - var(--sp-6));bottom:clamp(var(--sp-8),12vh,var(--sp-9));width:fit-content;max-width:calc(46rem + var(--sp-7))}
/* text sits on a feathered dark scrim that is wiped in WITH the text, so the words keep >= 4.5:1 over any pixel of the photo or interior */
.ch__in{position:relative;isolation:isolate;display:grid;gap:var(--sp-4);padding:var(--sp-7) var(--sp-6)}
.ch__in::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(7,7,8,.86);-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--sp-5),#000 calc(100% - var(--sp-5)),transparent),linear-gradient(180deg,transparent,#000 var(--sp-5),#000 calc(100% - var(--sp-5)),transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 var(--sp-5),#000 calc(100% - var(--sp-5)),transparent),linear-gradient(180deg,transparent,#000 var(--sp-5),#000 calc(100% - var(--sp-5)),transparent);mask-composite:intersect}
.ch__title{font-family:var(--qp-display);font-weight:400;font-size:var(--fs-h1);line-height:.98;letter-spacing:-.01em;text-wrap:balance}
.ch__title .tone{display:block}
.ch__title--sm{font-size:var(--fs-h2)}
.ch__line{font-size:var(--fs-lede);color:#e4decf;max-width:28rem}
.ch__big{font-family:var(--qp-display);font-size:var(--fs-h2);line-height:1.02;letter-spacing:-.01em}
.ch__big--sm{font-size:clamp(2.25rem,1.3rem + 4.6vw,4.75rem)}
.ch--b,.ch--d{bottom:auto;top:50%;margin-top:-1.2em}
.ch--d{text-align:center;margin-inline:auto}
.ch--d .ch__in{justify-items:center}

.walk__cue{position:absolute;left:var(--sp-gutter);bottom:var(--sp-5);display:flex;align-items:center;gap:var(--sp-4);color:var(--qp-bone);pointer-events:none}
.walk__cue i{display:block;width:56px;height:1px;background:var(--qp-lamp);transform-origin:left;animation:qp-cue 2.4s var(--qp-ease) infinite}
@keyframes qp-cue{0%{transform:scaleX(.1)}60%{transform:scaleX(1)}100%{transform:scaleX(1)}}
.walk__rail{position:absolute;right:calc(var(--sp-gutter) * .5);top:50%;width:1px;height:96px;margin-top:-48px;background:rgba(241,235,222,.3)}
.walk__rail i{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--qp-lamp);transform:scaleY(0);transform-origin:top}

/* ---- DEFAULT = STATIC (no JS, reduced motion, saveData, slow network, low memory, scene failed) ---- */
.walk__interior,.walk__ent,.walk__rail,.ch--b,.ch--c,.ch--d{display:none}
.walk__cue span{font-size:0}
.walk__cue span::after{content:"Archive below";font-size:var(--fs-label)}
.walk__door{position:relative;height:min(78vh,720px);overflow:hidden;border-top:1px solid var(--qp-hair)}
.walk__door picture,.walk__door img{display:block;width:100%;height:100%}
.walk__door img{object-fit:cover;object-position:80% 42%;transform:scale(2.4);transform-origin:80.5% 42.8%}
.walk__door::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,7,8,.92),rgba(7,7,8,.1) 55%,rgba(7,7,8,.5))}
.walk__door-copy{position:absolute;z-index:1;left:var(--sp-gutter);right:var(--sp-gutter);bottom:var(--sp-7);display:grid;gap:var(--sp-3)}
.walk__door-text{font-family:var(--qp-display);font-size:clamp(2rem,1.2rem + 3.6vw,3.75rem);line-height:1.08;max-width:20ch}

/* ---- LIVE: pinned, ~4 screens of scroll ---- */
.qp-live .walk{height:400vh;height:400svh}
.qp-live .walk__stage{position:sticky;top:0}
.qp-live .walk__interior,.qp-live .walk__ent,.qp-live .walk__rail{display:block}
.qp-live .ch--b,.qp-live .ch--c,.qp-live .ch--d{display:grid;visibility:hidden}
.qp-live .walk__cue span{font-size:inherit}
.qp-live .walk__cue span::after{content:none}
.qp-live .walk__static{display:none}
.qp-live .walk__img{will-change:transform}
.qp-live .walk__scene{will-change:transform}

@media (max-width:760px){
  .walk__img,.ent__img{object-position:72% 50%}
  .walk__door img{object-position:100% 50%;transform:scale(1.9);transform-origin:73% 42.8%}
}
/* the very first view is the real photo; text must stay readable on the brightest area */
.ch__title,.ch__line,.ch__big{text-shadow:0 1px 22px rgba(7,7,8,.75)}
/* ===== ARCHIVE: night photos are the main look; studio colorways are a smaller strip below ===== */
.archive{position:relative;padding:var(--sp-section) var(--sp-gutter);background:var(--qp-asphalt);border-top:1px solid var(--qp-hair)}
.archive__head{display:grid;gap:var(--sp-4);max-width:40rem}
.archive__title{font-family:var(--qp-display);font-weight:400;font-size:var(--fs-h2);line-height:1.02;text-wrap:balance}
.archive__intro{color:#cfcabd;max-width:30rem}

/* the wall: five tall photos, mobile = staggered single column */
.archive__wall{display:flex;flex-direction:column;gap:var(--sp-8);margin-top:var(--sp-9)}
.shot{width:86%}
.shot:nth-child(even){align-self:flex-end}
.shot figure{display:grid;gap:var(--sp-3)}
.shot img{width:100%;height:auto;aspect-ratio:1744/2336;object-fit:cover;background:var(--qp-steel)}
.shot figcaption,.swatch figcaption{font-family:var(--qp-label);font-weight:500;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--qp-caption);line-height:1.3}

/* colorways strip: smaller, secondary, scrolls sideways */
.colorways{margin-top:var(--sp-10);display:grid;gap:var(--sp-3)}
.colorways__title{font-family:var(--qp-display);font-weight:400;font-size:clamp(1.75rem,1.2rem + 2vw,2.5rem);line-height:1.1}
.colorways__intro{color:var(--qp-caption);font-size:var(--fs-small);max-width:30rem}
.colorways__list{display:flex;gap:var(--sp-5);width:max-content}
.colorways__strip{margin-top:var(--sp-4);margin-inline:calc(var(--sp-gutter) * -1);padding:var(--sp-2) var(--sp-gutter) var(--sp-5);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:var(--sp-gutter);scrollbar-width:thin;scrollbar-color:var(--qp-hair) transparent}
.colorways__strip:focus-visible{outline-offset:calc(var(--sp-1) * -1)}
.swatch{flex:0 0 auto;width:min(62vw,260px);scroll-snap-align:start}
.swatch figure{display:grid;gap:var(--sp-3)}
.swatch img{width:100%;height:auto;aspect-ratio:952/1275;object-fit:cover;background:var(--qp-steel)}

@media (min-width:761px){
  /* editorial wall on 12 columns, different sizes and drops, nothing in an even row */
  .archive__wall{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--sp-5);row-gap:var(--sp-9);align-items:start;max-width:1280px}
  .shot{width:auto}
  .shot--1{grid-column:1 / span 6}
  .shot--2{grid-column:8 / span 4;margin-top:var(--sp-10)}
  .shot--3{grid-column:2 / span 4;margin-top:var(--sp-5)}
  .shot--4{grid-column:7 / span 5;margin-top:var(--sp-9)}
  .shot--5{grid-column:4 / span 4}
  .colorways__strip{max-width:none}
  .swatch{width:240px}
}
/* ===== LAUNCH: a closed shutter that lifts. Everything under it is honest: date TBD. ===== */
.launch{position:relative;background:var(--qp-ink);border-top:1px solid var(--qp-hair)}
.launch__stage{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:grid;place-items:center;padding:var(--sp-10) var(--sp-gutter) var(--sp-9)}
.launch__room{position:absolute;inset:0}
.launch__glow{position:absolute;left:50%;top:-10%;width:130%;height:80%;transform:translateX(-50%);background:radial-gradient(50% 55% at 50% 30%,rgba(242,217,164,.30),rgba(215,156,82,.10) 55%,rgba(7,7,8,0) 80%)}
.launch__floor{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(0deg,rgba(215,156,82,.22),rgba(215,156,82,0))}
.launch__content{position:relative;z-index:1;display:grid;gap:var(--sp-4);width:min(100%,34rem);justify-items:start}
.launch__title{font-family:var(--qp-display);font-weight:400;font-size:var(--fs-h2);line-height:1;text-wrap:balance}
.launch__lede{font-size:var(--fs-lede);color:#e0dacb;max-width:26rem}

.signup{display:grid;gap:var(--sp-4);width:100%;margin-top:var(--sp-3);padding-top:var(--sp-5);border-top:1px solid var(--qp-hair)}
.signup__field{display:grid;gap:var(--sp-2)}
.signup input{width:100%;min-height:48px;padding:0 var(--sp-4);font:inherit;font-size:1rem;color:var(--qp-bone);background:rgba(241,235,222,.05);border:1px solid #6b6e72;border-radius:0}
.signup input::placeholder{color:#a9a9a3;opacity:1}
.signup input:disabled{cursor:not-allowed}
.signup__btn{min-height:48px;padding:0 var(--sp-5);font-family:var(--qp-label);font-size:.9rem;letter-spacing:.24em;text-transform:uppercase;color:var(--qp-bone);background:transparent;border:1px solid var(--qp-bone);border-radius:0;cursor:not-allowed;justify-self:start}
.signup__btn:disabled{opacity:1}
.signup .qp-label{color:var(--qp-caption)}
.signup__note{font-size:var(--fs-small);color:var(--qp-caption);max-width:28rem}

/* the shutter (decorative; only exists in live mode) */
.shutter,.launch__lift{display:none}
.qp-live .shutter{display:block;position:absolute;inset:0 0 auto 0;height:100%;z-index:3;transform:translate3d(0,calc(var(--qp-open,0) * -100%),0);will-change:transform;pointer-events:none}
.shutter__slats{position:absolute;inset:0;background:repeating-linear-gradient(180deg,#1d1f21 0 26px,#0a0b0c 26px 30px),#111}
.shutter__slats::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 70%,rgba(242,217,164,.10))}
.shutter__bar{position:absolute;left:0;right:0;bottom:0;height:var(--sp-5);background:linear-gradient(180deg,#2b2d30,#141516);border-top:1px solid #4a4d51;box-shadow:0 14px 50px 8px rgba(242,217,164,.35)}
.shutter__bar i{position:absolute;left:50%;top:var(--sp-1);width:var(--sp-8);height:var(--sp-2);margin-left:calc(var(--sp-8) / -2);background:#0a0a0b;border:1px solid #55595e}
.qp-live .launch{height:240vh;height:240svh}
.qp-live .launch__stage{position:sticky;top:0;height:100vh;height:100svh}
.qp-live .launch__lift{display:inline-flex;position:absolute;z-index:4;left:50%;bottom:var(--sp-8);transform:translateX(-50%);min-height:48px;align-items:center;padding:0 var(--sp-5);color:var(--qp-bone);background:var(--qp-ink);border:1px solid var(--qp-bone);cursor:pointer;transition:background-color .25s var(--qp-ease),color .25s var(--qp-ease),letter-spacing .25s var(--qp-ease)}
.qp-live .launch__lift:hover,.qp-live .launch__lift:focus-visible{background:var(--qp-bone);color:var(--qp-ink);letter-spacing:.3em}
.qp-live .launch.is-open .launch__lift{visibility:hidden}
@media (max-width:760px){.launch__content{width:100%}}
/* ===== SHOES COMING SOON: last section before the footer ===== */
.shoes{position:relative;background:var(--qp-ink);border-top:1px solid var(--qp-hair)}
.shoes__stage{padding:var(--sp-section) var(--sp-gutter)}
.shoes__head{display:grid;gap:var(--sp-4);max-width:36rem}
.shoes__title{font-family:var(--qp-display);font-weight:400;font-size:var(--fs-h2);line-height:1.02;text-wrap:balance}
.shoes__intro{color:#cfcabd;max-width:30rem}
.shoes__rail{display:none}

/* default (no JS, reduced motion, saveData): a staggered, readable stack */
.shoes__view{margin-top:var(--sp-9)}
.shoes__track{display:flex;flex-direction:column;gap:var(--sp-8)}
.shoe{width:72%}
.shoe:nth-child(even){align-self:flex-end}
.shoe figure{display:grid;gap:var(--sp-3)}
.shoe img{width:100%;height:auto;aspect-ratio:896/1200;object-fit:cover;background:var(--qp-steel)}
.shoe figcaption{font-family:var(--qp-label);font-weight:500;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--qp-caption);line-height:1.3}

@media (min-width:761px){
  .shoes__track{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--sp-5);row-gap:var(--sp-9);align-items:start;max-width:1280px}
  .shoe{width:auto}
  .shoe--1{grid-column:1 / span 4}
  .shoe--2{grid-column:6 / span 4;margin-top:var(--sp-9)}
  .shoe--3{grid-column:3 / span 4}
  .shoe--4{grid-column:8 / span 5;margin-top:var(--sp-9)}
}

/* LIVE: the section is pinned and the shoes slide sideways as you scroll (translate tied to scroll progress; set by js/shoes.js) */
.qp-live .shoes{height:calc(100vh + var(--shoes-run,120vw));height:calc(100svh + var(--shoes-run,120vw))}
.qp-live .shoes__stage{position:sticky;top:0;height:100vh;height:100svh;min-height:520px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:var(--sp-5);padding-block:var(--sp-9) var(--sp-7)}
.qp-live .shoes__view{margin:0;min-height:0;overflow:visible}
.qp-live .shoes__track{display:flex;flex-direction:row;align-items:stretch;gap:var(--sp-6);width:max-content;height:100%;max-width:none;transform:translate3d(calc(var(--shoes-x,0) * -1px),0,0);will-change:transform}
/* two sizes, two heights: tall ones hang from the top, short ones sit on the bottom edge */
.qp-live .shoe{width:auto;margin:0;flex:0 0 auto}
.qp-live .shoe:nth-child(odd){align-self:flex-start}
.qp-live .shoe:nth-child(even){align-self:flex-end}
.qp-live .shoe img{width:auto;height:min(50svh,520px);aspect-ratio:896/1200}
.qp-live .shoe:nth-child(even) img{height:min(38svh,400px)}
.qp-live .shoes__rail{display:block;position:absolute;left:var(--sp-gutter);right:var(--sp-gutter);bottom:var(--sp-5);height:1px;background:rgba(241,235,222,.3)}
.qp-live .shoes__rail i{position:absolute;inset:0;background:var(--qp-lamp);transform:scaleX(var(--shoes-p,0));transform-origin:left}

@media (min-width:761px){
  .qp-live .shoes__track{display:flex;gap:11vw;max-width:none}
  .qp-live .shoes__head{max-width:none}
  .qp-live .shoes__intro{max-width:36rem}
}
/* ===== DEPTH: a fixed tunnel behind the sections after the walkthrough =====
   Rays converge on a vanishing point, rings recede toward a light at the far end, two fog layers and floor pools drift.
   Colours: green-black and amber/lamp only. No blur filters, no grain, no opacity animation.
   Live mode: depth.js sets --dp (0..1) from window scroll; each layer moves by translate/scale only.
   Static / reduced motion / save-data / no JS: the same picture at --dp:0 (still deep, not flat). */
.qp-depth{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:strict;
  background:radial-gradient(120% 90% at 50% 40%,#12221a 0,#0a130e 40%,#070708 78%)}
.qp-depth>*{position:absolute;inset:0}
.qp-live .qp-depth>*{will-change:transform}

.qp-depth__rays{
  background:repeating-conic-gradient(from 7deg at 50% 40%,rgba(215,156,82,.11) 0 .22deg,transparent .22deg 15deg);
  -webkit-mask-image:radial-gradient(75% 68% at 50% 40%,transparent 0,#000 20%,#000 52%,transparent 100%);
  mask-image:radial-gradient(75% 68% at 50% 40%,transparent 0,#000 20%,#000 52%,transparent 100%);
  transform:translate3d(0,calc(var(--dp,0) * -4vh),0) scale(1.1)}

.qp-depth__ring{inset:auto;left:calc(50% - var(--w) / 2);top:calc(40% - var(--w) / 2);width:var(--w);height:var(--w);border:1px solid rgba(215,156,82,.15);
  transform:scale(calc(1 + var(--dp,0) * var(--k)))}
.qp-depth__ring--1{--w:6%;--k:2.4}
.qp-depth__ring--2{--w:11%;--k:2.1}
.qp-depth__ring--3{--w:19%;--k:1.7}
.qp-depth__ring--4{--w:32%;--k:1.3}
.qp-depth__ring--5{--w:52%;--k:.9}

.qp-depth__lamp{
  background:radial-gradient(20% 15% at 50% 40%,rgba(242,217,164,.1),rgba(215,156,82,.04) 55%,rgba(215,156,82,0) 100%),
             radial-gradient(60% 45% at 50% 40%,rgba(215,156,82,.04),rgba(215,156,82,0) 100%);
  transform:scale(calc(1 + var(--dp,0) * .5));transform-origin:50% 40%}

.qp-depth__fog--1{
  background:radial-gradient(46% 26% at 26% 60%,rgba(130,124,80,.08),rgba(122,118,78,0) 100%),
             radial-gradient(40% 22% at 76% 68%,rgba(215,156,82,.04),rgba(215,156,82,0) 100%);
  transform:translate3d(calc(var(--dp,0) * -9vw),calc(var(--dp,0) * -3vh),0) scale(1.15)}
.qp-depth__fog--2{
  background:radial-gradient(58% 28% at 64% 30%,rgba(58,92,66,.24),rgba(58,84,64,0) 100%),
             radial-gradient(44% 22% at 20% 22%,rgba(58,92,66,.16),rgba(58,84,64,0) 100%);
  transform:translate3d(calc(var(--dp,0) * 8vw),calc(var(--dp,0) * 4vh),0) scale(1.15)}

.qp-depth__pools{
  background:radial-gradient(34% 8% at 50% 90%,rgba(215,156,82,.04),rgba(215,156,82,0) 100%),
             radial-gradient(24% 6% at 22% 78%,rgba(215,156,82,.04),rgba(215,156,82,0) 100%),
             radial-gradient(24% 6% at 80% 80%,rgba(215,156,82,.04),rgba(215,156,82,0) 100%);
  transform:translate3d(0,calc(var(--dp,0) * -7vh),0) scale(1.1)}

/* sections after the walkthrough let the tunnel show through */
body{background:transparent}
.archive,.launch,.shoes,.qp-footer{background:transparent}

/* small screens: fewer layers, fewer rays */
@media (max-width:760px){
  .qp-depth__ring--2,.qp-depth__ring--4,.qp-depth__fog--2{display:none}
  .qp-depth__rays{background:repeating-conic-gradient(from 7deg at 50% 40%,rgba(215,156,82,.11) 0 .3deg,transparent .3deg 30deg)}
}