/* 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 */
  --wall:#eeece6;          /* museum wall (light, warm white) */
  --wall-ink:#1d1a16;      /* text on the wall: 14:1 */

  --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}

.qp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* header on the light museum wall: switched by scroll position in js/museum.js (html.qp-tone-light) */
.qp-tone-light .qp-header::before{background:linear-gradient(180deg,rgba(238,236,230,.96) 0,rgba(238,236,230,.93) 66%,rgba(238,236,230,0))}
.qp-tone-light .qp-header,.qp-tone-light .qp-header a{color:var(--wall-ink)}
/* ===== 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__gallery{position:absolute;inset:0;will-change:transform;background:radial-gradient(ellipse 70% 60% at 50% 38%,#8a7650 0,#3a3024 48%,#15110c 100%)}
.walk__lit{position:absolute;inset:0;pointer-events:none;background:var(--wall);opacity:0}
.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;opacity:var(--vig,1);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:210vh;height:210svh}
.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}

@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)}
/* ===== MUSEUM: the night photos hang on a light gallery wall. The wall is the museum's own surface (warm white, soft pools of light);
   at the bottom the wall meets a floor and dissolves into the page's dark tunnel (a spatial gradient, not a fade of content). ===== */
.archive{position:relative;isolation:isolate;--lights:1;--out-h:36svh;padding:var(--sp-section) var(--sp-gutter) 0;color:var(--wall-ink)}
.archive::before{content:"";position:absolute;z-index:-2;left:0;right:0;top:0;bottom:var(--out-h);background:linear-gradient(180deg,var(--wall) 0,#e8e5de 16%,#e4e1d9 100%)}
.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;color:var(--wall-ink)}
.archive .tone{color:#7a5a24}
.archive__intro{color:#4a463f;max-width:30rem}

/* the wall: five tall photos, mobile = staggered single column */
.archive__wall{display:flex;flex-direction:column;gap:var(--sp-9);margin-top:var(--sp-9);counter-reset:work}
.shot{position:relative;isolation:isolate;width:86%}
.shot:nth-child(even){align-self:flex-end}
.shot figure{position:relative;display:grid;gap:var(--sp-4);counter-increment:work}
/* pool of light on the wall around each work */
.shot::before{content:"";position:absolute;z-index:-1;left:-22%;right:-22%;top:-12%;height:70%;pointer-events:none;opacity:var(--lights);
  background:radial-gradient(ellipse 50% 60% at 50% 20%,rgba(255,253,246,.95) 0,rgba(255,253,246,.5) 45%,rgba(255,253,246,0) 100%)}
/* the frame: dark moulding, white mat, and a soft shadow on the wall (a close contact shadow and a long, faint one) */
.shot img{width:100%;height:auto;aspect-ratio:1744/2336;object-fit:cover;box-sizing:border-box;padding:var(--sp-4);background-color:#f8f7f3;border:var(--sp-2) solid #1a1815;
  box-shadow:0 2px 3px rgba(40,34,24,.35),0 var(--sp-3) var(--sp-5) rgba(40,34,24,.28),0 var(--sp-6) var(--sp-8) -8px rgba(40,34,24,.3)}
/* picture light: a thin brass bar above the frame and a soft cone falling on the top of the picture */
.shot figure::before{content:"";position:absolute;left:30%;right:30%;top:calc(var(--sp-5) * -1);height:3px;background:#8f7d4e;box-shadow:0 1px 2px rgba(40,34,24,.45)}
.shot figure::after{content:"";position:absolute;left:12%;right:12%;top:0;height:40%;pointer-events:none;opacity:var(--lights);clip-path:polygon(24% 0,76% 0,100% 100%,0 100%);background:linear-gradient(180deg,rgba(255,248,226,.34),rgba(255,248,226,0))}
/* wall label */
.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}
.shot figcaption{padding-top:var(--sp-3);border-top:1px solid rgba(29,26,22,.32);max-width:16rem;color:#2b2824}
.shot figcaption::before{content:counter(work,decimal-leading-zero);display:block;margin-bottom:var(--sp-1);color:#6b5c33}

/* where the wall ends: baseboard, floor, then the dark tunnel takes over. The flipbook section overlaps this zone (negative margin), so it adds no scroll. */
.archive__out{position:relative;height:var(--out-h);margin-inline:calc(var(--sp-gutter) * -1);pointer-events:none;
  background:linear-gradient(180deg,#e4e1d9 0,#e4e1d9 9%,#c9c5ba 9%,#c9c5ba 9.7%,#d8d5cb 9.7%,#bdb9ae 22%,#7d7a71 40%,color-mix(in srgb,#3c3a35 55%,transparent) 62%,color-mix(in srgb,#0a130e 0%,transparent) 100%)}

.qp-live .archive{--out-h:72svh}
/* floor reflection of the light (a cone on the floor, same warm white) */
.archive__out::before{content:"";position:absolute;left:20%;right:20%;top:10%;height:18%;opacity:var(--lights);background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(255,253,246,.55),rgba(255,253,246,0))}

/* colorways strip: smaller, secondary, scrolls sideways */
.colorways{position:relative;display:grid;gap:var(--sp-3);padding:var(--sp-7) var(--sp-gutter) var(--sp-8)}
.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}
}
/* ===== FLIPBOOK: a transparent stage over the page's own tunnel. No backdrop of its own. ===== */
.flip{position:relative;background:transparent}
.flip__stage{position:relative}
.flip__canvas{display:none}

/* default = STATIC (no JS, reduced motion, saveData, slow network, low memory): a few stills on the tunnel, text as plain lines */
.flip__still{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:var(--sp-6) var(--sp-7);padding:var(--sp-9) var(--sp-gutter) var(--sp-section)}
.flip__still li{flex:0 0 auto}
.flip__still img{display:block;width:auto;height:min(54vh,460px);max-width:42vw;object-fit:contain}
.flip__chapters{padding:var(--sp-section) var(--sp-gutter) 0}
.fc:not(:first-child){display:none}
.fc .ch__in{padding:0}
.fc .ch__in::before{display:none}

/* LIVE: pinned stage, scroll length is set here (it replaces the old drawn corridor, so the page is no longer overall) */
.qp-live .flip{height:190vh;height:190svh;margin-top:-72vh;margin-top:-72svh}   /* overlaps the museum's floor zone: the figures come out of the dissolving wall, and no scroll is added */
.qp-live .flip__stage{position:sticky;top:0;height:100vh;height:100svh;min-height:520px;overflow:hidden}
.qp-live .flip__canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.qp-live .flip__still{display:none}
.qp-live .flip__chapters{display:block;position:absolute;inset:0;padding:0;pointer-events:none}
.qp-live .fc:not(:first-child){display:block}
.qp-live .fc .ch__in{padding:var(--sp-7) var(--sp-6)}
.qp-live .fc .ch__in::before{display:block}
.qp-live .fc{position:absolute;visibility:hidden;left:calc(var(--sp-gutter) - var(--sp-6));bottom:clamp(var(--sp-8),14vh,var(--sp-9));width:fit-content;max-width:min(26rem,36vw)}
.qp-live .fc:nth-child(even){left:auto;right:calc(var(--sp-gutter) - var(--sp-6));text-align:right}
.qp-live .fc .ch__big{font-size:clamp(2rem,1rem + 3.2vw,3.75rem)}
.qp-live .fc .tone{display:block}
@media (max-width:760px){
  .qp-live .fc,.qp-live .fc:nth-child(even){left:calc(var(--sp-gutter) - var(--sp-6));right:auto;text-align:left;top:clamp(var(--sp-9),12svh,6.5rem);bottom:auto;max-width:calc(100% - var(--sp-gutter))}
  .qp-live .fc .ch__big{font-size:clamp(1.75rem,1.2rem + 3vw,2.5rem)}
}
/* frames failed or are too slow: show the stills inside the pinned stage instead of the canvas */
.qp-live .flip.is-still .flip__canvas,.qp-live .flip.is-still .flip__chapters{display:none}
.qp-live .flip.is-still .flip__still{display:flex;position:absolute;inset:0;padding:0 var(--sp-gutter);align-items:center;justify-content:center;flex-wrap:nowrap}
.qp-live .flip.is-still .flip__still img{height:min(62svh,560px)}
@media (max-width:760px){.qp-live .flip.is-still .flip__still li:nth-child(n+3){display:none}}
/* ===== 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: four shoes in one straight row, floating above a long podium under ONE spotlight. No background of its own: the page's dark tunnel is the backdrop. =====
   Light: neutral warm white (255,244,224). A wide soft cone lights the whole row and the podium top; In live mode the track slides so the shoes pass through a fixed centre light, one by one.
   Cones are gradients clipped to a trapezoid (no blur filters). The shoes carry their own top-down light and shade (baked), and a soft shadow ellipse sits on the podium under each.
   Brightness / opacity here is only exposure (how much light a shoe or the floor gets). No glow, bloom or rim light around any shoe. */
.shoes{position:relative;--light:255,244,224;--pod:clamp(110px,18svh,170px);--top:calc(var(--pod) * .45)}
.shoes__stage{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:var(--sp-section) 0 0}
.shoes__head{position:relative;z-index:2;display:grid;gap:var(--sp-4);max-width:36rem;padding-inline:var(--sp-gutter)}
.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:#e6e0d2;max-width:30rem}
.shoes__rail{display:none}

/* the cones (decorative). Static default: both stand still, centred. */
.shoes__beam,.shoes__core{position:absolute;left:50%;top:0;height:calc(100% - var(--pod) * .5);pointer-events:none;transform-origin:50% 0}
.shoes__beam{width:min(130vw,1500px);margin-left:calc(min(130vw,1500px) / -2);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(var(--light),.13) 0,rgba(var(--light),.08) 50%,rgba(var(--light),.03) 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 25%,#000 75%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 25%,#000 75%,transparent 100%)}
.shoes__core{--cw:min(70vw,640px);width:var(--cw);margin-left:calc(var(--cw) / -2);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(var(--light),.20) 0,rgba(var(--light),.14) 55%,rgba(var(--light),.07) 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 70%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 70%,transparent 100%)}

/* the row: four equal columns, each shoe centred in its column, all the same height, floating */
.shoes__view{position:relative;z-index:1;margin-top:var(--sp-8);padding-inline:var(--sp-3);flex:1 1 auto;display:flex;align-items:flex-end}
.shoes__track{--sh:min(40svh,17vw);container-type:inline-size;width:100%;max-width:1200px;margin-inline:auto;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--sp-2);align-items:end}
@supports (width:1cqi){.shoes__track{--sh:min(40svh,19cqi)}}
.shoe{position:relative;z-index:1;--base:calc(var(--top) * .5)}
.shoe figure{margin:0}
.shoe__pic{position:relative;height:var(--sh);display:flex;align-items:flex-end;justify-content:center}
.shoe__img{display:block;height:var(--sh);width:auto;max-width:100%;object-fit:contain;object-position:50% 100%;transform:translate3d(0,calc(var(--base) * -1 - var(--lit,1) * 18px),0)}
.shoe__shadow{position:absolute;left:50%;bottom:calc(var(--top) * -.25);width:84%;height:calc(var(--top) * .55);margin-left:-42%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.66),rgba(0,0,0,.3) 55%,rgba(0,0,0,0) 100%);opacity:calc(.4 + .6 * var(--lit,1))}
/* colour label: on the front face of the podium, under its shoe */
.shoe figcaption{position:absolute;left:0;right:0;top:calc(100% + var(--base) + var(--sp-3));text-align:center;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}

/* the podium: a long mantle, full width. Top surface catches the light, the front face stays dark. */
.shoes__podium{position:relative;z-index:0;flex:0 0 auto;height:var(--pod);margin-top:calc(var(--top) * -.5)}
.shoes__podium::before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--pod) - var(--top));background:linear-gradient(180deg,#0d0e0d,#060607)}
.shoes__top{position:absolute;left:0;right:0;top:0;height:var(--top);
  background:radial-gradient(ellipse 34% 100% at calc(50% + var(--beam-x,0px)) 55%,rgba(var(--light),.42) 0,rgba(var(--light),.16) 60%,rgba(var(--light),0) 100%),radial-gradient(ellipse 60% 100% at 50% 55%,rgba(var(--light),.12) 0,rgba(var(--light),0) 100%),linear-gradient(180deg,rgba(var(--light),.05),rgba(var(--light),.02))}
@media (max-width:760px){
  .shoe figcaption{font-size:.6875rem;letter-spacing:.1em}
  .shoes__core{--cw:100vw}
}

/* LIVE: pinned. The spotlight stays in the centre. The track translates (js/shoes.js: --track-x) so the shoes slide through the light one by one. --lit lifts and brightens the shoe in the light, and its podium label comes up with it. */
.qp-live .shoes{height:calc(100vh + 120vh);height:calc(100svh + 120svh)}   /* 120svh of pinned scroll: about 30svh per shoe */
.qp-live .shoes__stage{position:sticky;top:0;height:100vh;height:100svh;min-height:520px;padding-top:var(--sp-9)}
.qp-live .shoes__beam,.qp-live .shoes__core{top:-60vh;top:-60svh;height:calc(100% + 60svh - var(--pod) * .5)}
.qp-live .shoes__core{transform:none} /* the cone stays centred; the shoes move, not the light */
.qp-live .shoes__view{overflow:hidden;padding-inline:0;padding-bottom:calc(var(--top) + var(--sp-6))}
.qp-live .shoes__track{display:flex;width:max-content;max-width:none;margin-inline:0;column-gap:var(--sp-6);--sh:min(46svh,62vw);transform:translate3d(var(--track-x,0px),0,0);will-change:transform;grid-template-columns:unset}
.qp-live .shoe{flex:0 0 auto;width:min(72vw,22rem)}
@media (min-width:761px){
  .qp-live .shoes__track{--sh:min(42svh,28vw);column-gap:var(--sp-8)}
  .qp-live .shoe{width:min(32vw,22rem)}
}
.qp-live .shoes__rail{display:block;position:absolute;left:var(--sp-gutter);right:var(--sp-gutter);bottom:var(--sp-3);z-index:2;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}
.qp-live .shoe__img{filter:brightness(calc(.45 + .55 * var(--lit,1)))}
/* the podium label travels with its shoe and comes up in the light (exposure only) */
.qp-live .shoe figcaption{opacity:calc(.35 + .65 * var(--lit,1));color:var(--qp-bone)}
/* ===== 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}
.flip,.colorways,.launch,.shoes,.qp-footer{background:transparent}   /* the museum (.archive) paints its own wall */

/* 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)}
}
/* ===== ARCHIVE COLLECTION (preorder): the first works on the museum wall, straight after the shutter.
   Lives inside .archive so it shares the wall colour the walkthrough hands off to, the header tone and the picture lights.
   Static layout only: no sticky, no scroll effects. Appended to the end of css/qp.css. ===== */
@media (max-width:400px){.qp-nav a{padding:0 var(--sp-2);letter-spacing:.14em}.qp-nav{margin-right:calc(var(--sp-2) * -1)}}

#collection,#set,#tee,#after-dark{scroll-margin-top:var(--sp-8)}
.coll{display:grid;gap:var(--sp-9);padding-bottom:var(--sp-section);margin-bottom:var(--sp-section);border-bottom:1px solid rgba(29,26,22,.32)}
.coll__head{display:grid;gap:var(--sp-4);max-width:40rem}
.coll__kicker{color:#6b5c33}
.coll__title{font-family:var(--qp-display);font-weight:400;font-size:var(--fs-h2);line-height:1.02;text-wrap:balance;color:var(--wall-ink)}
.coll__lede{color:#4a463f;font-size:var(--fs-lede);max-width:30rem}

.coll__piece{display:grid;gap:var(--sp-7)}
.coll__piece--tee{padding-top:var(--sp-9);border-top:1px solid rgba(29,26,22,.32)}
.coll__copy{display:grid;gap:var(--sp-2);align-content:start;justify-items:start;max-width:28rem}
.coll__name{margin:0;font-family:var(--qp-display);font-weight:400;font-size:clamp(2rem,1.3rem + 2.6vw,3.25rem);line-height:1.05;color:var(--wall-ink)}
.coll__intro{color:var(--wall-ink)}
.coll__line{color:#4a463f}
.coll__price{margin-top:var(--sp-4);font-family:var(--qp-display);font-size:2rem;line-height:1;color:var(--wall-ink)}
.coll__note{color:#57524a}
.coll__btn{margin-top:var(--sp-4);display:inline-flex;align-items:center;justify-content:center;min-height:52px;min-width:44px;padding:0 var(--sp-6);
  background:var(--wall-ink);color:var(--wall);border:1px solid var(--wall-ink);text-decoration:none;
  font-family:var(--qp-label);font-weight:500;font-size:var(--fs-label);letter-spacing:.24em;text-transform:uppercase;
  transition:background-color .25s var(--qp-ease),color .25s var(--qp-ease);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.coll__btn:hover,.coll__btn:focus-visible{background:transparent;color:var(--wall-ink)}
.coll__btn:focus-visible{outline:2px solid var(--wall-ink);outline-offset:var(--sp-1)}

/* the works: framed like the museum pieces (dark moulding, white mat, contact shadow), under the same picture lights */
.coll__works{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-4);row-gap:var(--sp-7);align-items:start}
.work{position:relative;isolation:isolate}
.work::before{content:"";position:absolute;z-index:-1;left:-18%;right:-18%;top:-10%;height:70%;pointer-events:none;opacity:var(--lights);
  background:radial-gradient(ellipse 50% 60% at 50% 20%,rgba(255,253,246,.95) 0,rgba(255,253,246,.5) 45%,rgba(255,253,246,0) 100%)}
.work img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;box-sizing:border-box;padding:var(--sp-2);background-color:#f8f7f3;border:var(--sp-1) solid #1a1815;
  box-shadow:0 2px 3px rgba(40,34,24,.35),0 var(--sp-3) var(--sp-5) rgba(40,34,24,.28),0 var(--sp-6) var(--sp-8) -8px rgba(40,34,24,.3)}
.work--lead{grid-column:1 / -1;width:92%}
.work--c{grid-column:1 / -1;width:72%;justify-self:end}
.work--b,.work--e{margin-top:var(--sp-8)}
.coll__works--tee .work--lead{width:80%}

@media (min-width:761px){
  .coll__piece{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--sp-5);row-gap:var(--sp-9);align-items:start}
  .coll__copy{grid-column:1 / span 4;padding-top:var(--sp-8)}
  .coll__works{grid-column:5 / -1;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:var(--sp-5);row-gap:var(--sp-9)}
  .work img{padding:var(--sp-4);border-width:var(--sp-2)}
  .work--lead{grid-column:1 / span 5;grid-row:1;width:auto}
  .work--c{grid-column:6 / span 3;grid-row:1;width:auto;justify-self:stretch;margin-top:var(--sp-10)}
  .work--a{grid-column:1 / span 3;grid-row:2}
  .work--b{grid-column:4 / span 3;grid-row:2;margin-top:var(--sp-9)}
  .work--d{grid-column:2 / span 3;grid-row:3}
  .work--e{grid-column:6 / span 3;grid-row:3;margin-top:var(--sp-9)}
  .coll__works--tee .work--lead{grid-column:1 / span 4;grid-row:1;width:auto}
  .coll__works--tee .work--d{grid-column:5 / span 3;grid-row:1;margin-top:var(--sp-10)}
  .coll__works--tee .work--e{grid-column:2 / span 3;grid-row:2;margin-top:0}
  .coll__piece--tee .coll__copy{grid-column:9 / span 4;grid-row:1}
  .coll__piece--tee .coll__works{grid-column:1 / span 8;grid-row:1}
}

/* ===== COMING SOON: one quiet marker on every section after the Archive Collection (older museum, flipbook, colorways, next drop, shoes).
   Same label type as the rest of the site, a short lamp line before it. The photos stay as they are. ===== */
.soon{display:inline-flex;align-items:center;gap:var(--sp-3);color:var(--qp-lamp);letter-spacing:.28em}
.soon::before{content:"";flex:0 0 auto;width:var(--sp-6);height:1px;background:currentColor}
.archive .soon{color:#6b5c33}
.colorways .soon{margin-bottom:var(--sp-1)}
.soon--flip{position:absolute;z-index:2;left:var(--sp-gutter);top:calc(var(--sp-section) - var(--sp-7));pointer-events:none}
.qp-live .soon--flip{top:auto;bottom:var(--sp-7)}
@media (min-width:761px){.qp-live .soon--flip{top:var(--sp-9);bottom:auto}}
.soon--launch{position:absolute;z-index:5;left:50%;top:var(--sp-9);transform:translateX(-50%);white-space:nowrap;pointer-events:none}