@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-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
:root{--ground:#E9E1DA;--ink:#121212;--soft:#5B5650;--bone:#EFEBE3;--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(--ground)}
body{color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--blaze);color:var(--bone)}
:focus-visible{outline:2px solid var(--blaze);outline-offset:4px}
img{display:block;max-width:100%}

/* a real header: nav, the mark centred, the drop and the bag */
.top{position:absolute;inset:0 0 auto;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:calc(var(--pad) * .7) var(--pad);color:var(--bone)}
.top a{color:inherit;text-decoration:none}
.nav-l,.nav-r{display:flex;gap:clamp(16px,2vw,32px);font:700 13px/1 Archivo,sans-serif;font-stretch:87%;letter-spacing:.09em;text-transform:uppercase}
.nav-r{justify-content:flex-end;align-items:center}
.nav-l{align-items:center}
.nav-l a,.nav-r a{position:relative;display:inline-flex;align-items:center;height:28px;line-height:1}
.nav-l a::after,.nav-r a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--blaze);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.nav-l a:hover::after,.nav-r a:hover::after,.nav-l a[aria-current]::after{transform:none}
.bag span{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:7px;line-height:1;border-radius:999px;background:var(--blaze);color:var(--bone);font-size:11px;letter-spacing:0}
.mark{display:flex;align-items:flex-end;gap:clamp(8px,.8vw,12px);height:clamp(20px,2.2vw,28px);color:inherit;--wm-x:#E8541E;--duck-x:#E8541E}
.mark span{display:block;height:100%}.mark .duck{height:132%;margin-bottom:-1%}.mark svg{height:100%;width:auto;display:block}
@media (max-width:760px){.nav-l a:not(:first-child),.nav-r a:not(.bag){display:none}}

/* the opening: the campfire, slowly breathing */
.hero{position:relative;height:100vh;height:100svh;overflow:hidden;background:#3a352d}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;animation:breathe 22s ease-in-out infinite alternate;transform-origin:60% 60%}
@keyframes breathe{from{transform:scale(1.02)}to{transform:scale(1.09)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,16,10,.55),rgba(20,16,10,0) 45%),linear-gradient(to bottom,rgba(20,16,10,.35),rgba(20,16,10,0) 22%);pointer-events:none}
.hero-words{position:absolute;left:var(--pad);bottom:clamp(60px,11vh,120px);z-index:2;color:var(--bone)}
.hero-words h1{font:800 clamp(64px,11vw,200px)/.82 Archivo,sans-serif;font-stretch:75%;text-transform:uppercase;letter-spacing:-.015em;overflow:hidden}
.hero-words h1 span{display:block;animation:rise 1.4s var(--ease) .2s both}
.hero-words p{margin-top:16px;max-width:38ch;font:400 clamp(15px,1.15vw,18px)/1.5 Inter,sans-serif;opacity:.92;animation:fade 1.4s var(--ease) .6s both}
@keyframes rise{from{transform:translateY(100%)}}
@keyframes fade{from{opacity:0;transform:translateY(10px)}}
.hint{position:absolute;right:var(--pad);bottom:clamp(60px,11vh,120px);z-index:2;display:flex;align-items:center;gap:10px;color:var(--bone);
  font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase}
.hint svg{width:10px;height:30px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;animation:nudge 2.4s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}

/* a look: the photo, tall, beside the piece itself */
main{padding:clamp(90px,16vh,180px) 0 0}
.look{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);padding:0 var(--pad);align-items:center;margin-bottom:clamp(90px,16vh,180px)}
.look .photo{grid-column:1/7;aspect-ratio:4/5;overflow:hidden;border-radius:2px}
.look .photo img{width:100%;height:118%;object-fit:cover;will-change:transform}
.look .side{grid-column:8/12}
.look.flip .photo{grid-column:7/13;grid-row:1}
.look.flip .side{grid-column:2/6;grid-row:1}
.no{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-bottom:clamp(18px,3vh,30px)}
.piece{aspect-ratio:1/.87;margin-bottom:clamp(18px,3vh,30px)}
.piece img{width:100%;height:100%;object-fit:contain}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:clamp(18px,3vh,30px)}
.pair img{width:100%;aspect-ratio:1/.9;object-fit:contain}
.side h2{font:800 clamp(34px,3.8vw,64px)/.88 Archivo,sans-serif;font-stretch:75%;text-transform:uppercase;letter-spacing:-.01em}
.spec{margin-top:12px;font:500 clamp(11px,.85vw,12.5px)/1.55 "IBM Plex Mono",monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--soft);max-width:42ch}
.look-link{display:inline-flex;align-items:center;gap:10px;margin-top:22px;color:var(--ink);text-decoration:none;font:700 15px/1 Archivo,sans-serif;font-stretch:87%;
  letter-spacing:.06em;text-transform:uppercase;padding-bottom:6px;background:linear-gradient(var(--blaze),var(--blaze)) 0 100%/0 2px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 100%/100% 1px no-repeat;
  transition:background-size .6s var(--ease),color .3s}
.look-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.look-link:hover{background-size:100% 2px,100% 1px;color:var(--blaze)}.look-link:hover svg{transform:translateX(4px)}

/* textures: a close-up shown whole, beside one line */
.texture{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,40px);align-items:end;padding:0 var(--pad);margin:0 0 clamp(90px,16vh,180px)}
.texture figure{grid-column:3/7;aspect-ratio:1;overflow:hidden;border-radius:2px}
.texture img{width:100%;height:100%;object-fit:cover}
.texture .tx{grid-column:8/12;font:800 clamp(28px,2.8vw,46px)/.95 Archivo,sans-serif;font-stretch:75%;text-transform:uppercase;padding-bottom:6px}
.texture.flip figure{grid-column:7/11;grid-row:1}.texture.flip .tx{grid-column:2/6;grid-row:1}
.rv-t{opacity:0;transform:translateY(20px);transition:opacity 1s var(--ease) .2s,transform 1.2s var(--ease) .2s}.rv-t.in{opacity:1;transform:none}
.duo figcaption,.strip figcaption{font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,min(30vw,440px)));justify-content:center;gap:clamp(12px,2vw,32px);padding:0 var(--pad);margin-bottom:clamp(90px,16vh,180px)}
.duo figure{overflow:hidden}.duo img{width:100%;aspect-ratio:1;object-fit:cover}
.duo figcaption{margin-top:14px;color:var(--soft)}

.details{padding:0 0 clamp(90px,16vh,180px)}
.details h2{padding:0 var(--pad);font:800 clamp(44px,6vw,104px)/.86 Archivo,sans-serif;font-stretch:75%;text-transform:uppercase;letter-spacing:-.012em;margin-bottom:clamp(28px,5vh,50px)}
.strip{display:flex;gap:clamp(12px,1.6vw,24px);padding:0 var(--pad);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip figure{flex:0 0 clamp(220px,24vw,360px);scroll-snap-align:start}
.strip img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;transition:transform 1s var(--ease)}
.strip figure:hover img{transform:scale(1.03)}
.strip figcaption{margin-top:12px;color:var(--soft)}

.close{position:relative;height:100vh;height:100svh;overflow:hidden}
.close img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.close-words{position:absolute;left:var(--pad);bottom:clamp(60px,12vh,130px)}
.close-words h2{font:800 clamp(56px,8.6vw,150px)/.84 Archivo,sans-serif;font-stretch:75%;text-transform:uppercase;letter-spacing:-.012em;margin-bottom:clamp(20px,3.5vh,36px)}

/* the pieces arrive softly; no clipping */
.fade{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease)}
.fade.in{opacity:1;transform:none}

/* reveals: images unveil from the bottom, words rise */
.rv{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease)}
.rv.in{clip-path:inset(0 0 0 0)}
h2.rv,.close-words.rv{clip-path:none;opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
h2.rv.in,.close-words.rv.in{opacity:1;transform:none}

@media (max-width:760px){
  .texture,.texture.flip{grid-template-columns:1fr;row-gap:18px}.texture figure,.texture.flip figure,.texture .tx,.texture.flip .tx{grid-column:1;grid-row:auto}
  .duo{grid-template-columns:1fr 1fr}
  .look,.look.flip{grid-template-columns:1fr;row-gap:28px}
  .look .photo,.look.flip .photo,.look .side,.look.flip .side{grid-column:1;grid-row:auto}
  .hint{display:none}
}
@media (prefers-reduced-motion:reduce){.hero-img,.hero-words h1 span,.hero-words p{animation:none}.rv,h2.rv{clip-path:none;opacity:1;transform:none;transition:none}}

/* the close-ups as full-width bands again, taller and framed on the subject (a square photo can only fill the width
   if it's cropped; this shows about half of it, centred on what matters) */
.band{position:relative;height:clamp(320px,94vh,940px);overflow:hidden;margin:0 0 clamp(90px,16vh,180px)}
.band img{width:100%;height:110%;object-fit:cover;object-position:var(--pos,50% 50%);will-change:transform}
.band figcaption{position:absolute;left:var(--pad);bottom:var(--pad);color:var(--bone);text-shadow:0 1px 12px rgba(0,0,0,.4);
  font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase}