@font-face{font-family:"Archivo";src:url(../assets/fonts/archivo-latin-standard-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Inter";src:url(../assets/fonts/inter-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
:root{
  --mist:#CFC9C1;        /* the fog in the render, so the page and the film meet without a seam */
  --ground:#E9E1DA;
  --ink:#121212;
  --ink-soft:#5B5650;
  --blaze:#E8541E;
  --pad:clamp(18px,3.2vw,48px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--mist);scrollbar-gutter:stable}   /* the page never shifts when a piece opens or closes */
body{color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--blaze);color:#EFEBE3}
:focus-visible{outline:2px solid var(--blaze);outline-offset:4px}

.top{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:calc(var(--pad) * .8) var(--pad)}
.mark{display:flex;align-items:flex-end;gap:clamp(8px,.8vw,12px);height:clamp(18px,2.1vw,26px);color:var(--ink)}
.mark span{display:block;height:100%}.mark .duck{height:132%;margin-bottom:-1%}
.mark svg{height:100%;width:auto;display:block}
.drop{font:500 clamp(11px,.9vw,13px)/1 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:.7em}
.drop .sep{opacity:.4}
.eye{width:.8em;height:1.05em;border-radius:50%;background:var(--blaze);position:relative;display:inline-block}
.eye::before,.eye::after{content:"";position:absolute;left:50%;top:50%;width:.62em;height:.14em;background:var(--mist);transform:translate(-50%,-50%) rotate(45deg)}
.eye::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* the opening: the film plays once and holds on the decoy; scrolling lifts the mist into the collection */
.opening{height:200vh;position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.film,.still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.still{opacity:0;transition:opacity .4s}
.ended .still{opacity:1}
.lift{position:absolute;inset:0;background:var(--ground);opacity:0;pointer-events:none}
.line{position:absolute;left:var(--pad);bottom:clamp(64px,13vh,140px);font:800 clamp(52px,8.4vw,150px)/.86 Archivo,sans-serif;font-stretch:75%;
  text-transform:uppercase;letter-spacing:-.01em;display:flex;flex-direction:column}
.line span{display:block;overflow:hidden;opacity:0;transform:translateY(40%);transition:opacity 1.2s var(--ease),transform 1.4s var(--ease)}
.line span:nth-child(2){transition-delay:.12s}
.said .line span{opacity:1;transform:none}
.scroll{position:absolute;left:var(--pad);bottom:clamp(22px,4.5vh,44px);display:flex;align-items:center;gap:10px;font:500 11px/1 "IBM Plex Mono",monospace;
  letter-spacing:.12em;text-transform:uppercase;color:#2f2c28;opacity:0;transition:opacity 1s var(--ease) .6s}
.scroll svg{width:10px;height:30px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;animation:nudge 2.4s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
.said .scroll{opacity:1}

/* the collection, on the ground the photos were taken on */
.drop001{background:var(--ground);position:relative;z-index:2;padding:clamp(80px,14vh,160px) var(--pad) var(--pad)}
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:24px 48px;align-items:end;margin-bottom:clamp(48px,9vh,110px)}
.intro h2{font:800 clamp(56px,10vw,180px)/.84 Archivo,sans-serif;font-stretch:75%;text-transform:uppercase;letter-spacing:-.012em}
.intro p{font:400 clamp(15px,1.15vw,18px)/1.5 Inter,sans-serif;color:var(--ink-soft);max-width:34ch;padding-bottom:.4em}

.grid{list-style:none;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,2vw,32px);row-gap:clamp(40px,7vh,90px)}
.grid li{grid-column:span 4;position:relative}
.grid li:nth-child(3n+2){margin-top:clamp(40px,8vh,96px)}
.piece{display:block;position:relative;aspect-ratio:1/.92;cursor:pointer;width:100%;border:0;background:none;padding:0}
.piece img{left:6% !important;width:88% !important}
.piece img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .75s cubic-bezier(.45,0,.25,1) .06s,transform 1.1s var(--ease)}   /* a soft dissolve to the back, not a flash */
.piece img.b{opacity:0}
.piece:hover img.a,.piece:focus-visible img.a{opacity:0}
.piece:hover img.b,.piece:focus-visible img.b{opacity:1}
.piece:hover img{transform:translateY(-4px) scale(1.01)}
.piece.solo:hover img.a{opacity:1}
.piece.landing img{transition:none;transform:none}
.piece.landing img.a{opacity:1}
.piece.landing img.b{opacity:0}
.cap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:12px;border-top:1px solid rgba(18,18,18,.14);padding-top:12px}
.cap b{font:800 clamp(20px,1.9vw,30px)/1 Archivo,sans-serif;font-stretch:75%;text-transform:uppercase}
.cap span{font:400 11px/1.4 "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);text-align:right}
.reveal{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.reveal.in{opacity:1;transform:none}

.end{display:flex;justify-content:space-between;align-items:flex-end;margin-top:clamp(80px,14vh,160px);padding-top:24px;border-top:1px solid rgba(18,18,18,.14)}
.end p{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.mark.small{height:20px}

@media (max-width:760px){
  .film,.still{object-position:86% 50%}            /* keep the decoy in a portrait crop */
  .intro{grid-template-columns:1fr}
  .grid li{grid-column:span 6}
  .grid li:nth-child(n){margin-top:0}
  .grid li:nth-child(2n){margin-top:48px}
  .cap{flex-direction:column;gap:6px}.cap span{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .reveal,.line span{opacity:1;transform:none;transition:none}
}

/* one piece, opened in place: the garment flies up from the grid, its back joins it on the right, close-ups beyond */
html.viewing{overflow:hidden}
.view{position:fixed;inset:0;z-index:30;background:var(--ground);opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.view.open{opacity:1;pointer-events:auto}
.view .pair{position:absolute;left:var(--pad);right:calc(var(--pad) + clamp(120px,11vw,176px) + 32px);top:calc(var(--pad) * .8 + 64px);bottom:190px;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vw,32px);align-items:center}
.view.solo .pair{grid-template-columns:1fr;right:calc(var(--pad) + clamp(120px,11vw,176px) + 32px)}
.view .slot{position:relative;height:100%;min-height:0}
.view .slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.view .slot.back{opacity:0;transform:translateX(-30px);transition:opacity .7s var(--ease) .25s,transform .9s var(--ease) .25s}
.view.open .slot.back{opacity:1;transform:none}
.view .slot figcaption{position:absolute;left:0;right:0;bottom:-26px;text-align:center;font:500 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  opacity:0;transition:opacity .6s var(--ease) .4s}
.view.open .slot figcaption{opacity:1}
.view .shots{position:absolute;right:var(--pad);top:calc(var(--pad) * .8 + 64px);display:flex;flex-direction:column;gap:12px}
.view .shots figure{width:clamp(120px,11vw,176px);aspect-ratio:1;overflow:hidden;border-radius:3px;box-shadow:0 18px 30px -18px rgba(40,26,12,.45);
  opacity:0;transform:translateX(24px);transition:opacity .7s var(--ease) calc(.3s + var(--k) * .09s),transform .9s var(--ease) calc(.3s + var(--k) * .09s)}
.view.open .shots figure{opacity:1;transform:none}
.view .shots img{width:100%;height:100%;object-fit:cover;display:block}
.view .label{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--pad) * .9);display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 32px}
.view h3{white-space:nowrap;font:800 clamp(40px,5.6vw,96px)/.86 Archivo,sans-serif;font-stretch:75%;text-transform:uppercase;letter-spacing:-.012em}
.view .spec{grid-column:1;font:400 clamp(11px,.95vw,14px)/1.4 "IBM Plex Mono",monospace;letter-spacing:.04em;color:var(--ink-soft);text-transform:uppercase}
.view .back-btn{grid-column:2;grid-row:1/3;display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:999px;border:0;cursor:pointer;
  font:700 15px/1 Archivo,sans-serif;font-stretch:87%;background:none;box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink);transition:background .3s var(--ease),color .3s var(--ease)}
.view .back-btn:hover{background:var(--ink);color:#EFEBE3}
.view .label > *{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease) .25s,transform .8s var(--ease) .25s}
.view.open .label > *{opacity:1;transform:none}
.flyer{position:fixed;z-index:40;object-fit:contain;pointer-events:none;will-change:transform}
@media (max-width:760px){
  .view .pair{left:16px;right:16px;bottom:200px}
  .view.solo .pair{right:16px}
  .view .shots{display:none}
  .view .label{grid-template-columns:1fr}.view .back-btn{grid-column:1;grid-row:auto;justify-self:start}
  .view h3{font-size:clamp(40px,12vw,60px);white-space:normal}
}

/* the × in the wordmark O in blaze */
.mark{--wm-x:#E8541E}