/* ───────── tokens ───────── */
:root {
  --paper: #efe8da;
  --paper-deep: #e3d9c6;
  --sheet: #fbf8f1;
  --ink: #1d2433;
  --pencil: #6e6a63;
  --red: #a51c24;
  --mustard: #d9a21b;
  --olive: #6b7a3a;
  --kraft: #c8a97e;
  --z-black: #111111;
  --z-white: #f2f0eb;
  --z-red: #d7261e;

  --f-display: "Bodoni Moda", "Didot", Georgia, serif;
  --f-hand: "Kalam", "Bradley Hand", cursive;
  --f-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --f-cond: "Anton", "Impact", sans-serif;
  --f-type: "Courier Prime", "Courier New", monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --shadow: drop-shadow(0 5px 8px rgba(60, 45, 25, 0.26)); /* one shadow, not two: half the blur work per paper piece */
  --shadow-lift: drop-shadow(0 14px 18px rgba(60, 45, 25, 0.28));
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .32  0 0 0 0 .27  0 0 0 0 .2  0 0 0 .1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ───────── base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font: 400 clamp(15px, 0.95rem + 0.15vw, 17px) / 1.6 var(--f-body);
  background-color: var(--paper);
  background-image:
    var(--noise),
    radial-gradient(circle at 16px 16px, rgba(110, 106, 99, 0.22) 1px, transparent 1.5px),
    linear-gradient(rgba(110, 106, 99, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 106, 99, 0.06) 1px, transparent 1px);
  background-size: 260px 260px, 32px 32px, 32px 32px, 32px 32px;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 400; }
figure { margin: 0; }
a.piece { display: block; }
p { margin: 0 0 1em; }
:focus-visible { outline: 2px dashed var(--red); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr-only:focus { position: fixed; z-index: 200; top: 10px; left: 10px; width: auto; height: auto; clip: auto; padding: 10px 16px; background: var(--ink); color: #fff; text-decoration: none; }
.page { position: relative; overflow-x: hidden; overflow-x: clip; }
[id] { scroll-margin-top: 84px; }
[tabindex="-1"]:focus { outline: none; }
.page > *:not(.thread) { position: relative; z-index: 2; }

/* ───────── torn edges (generated) ───────── */
.torn-1{clip-path:polygon(0.0% 3.1px,3.7% 5.8px,6.2% 4.6px,9.7% 4.0px,11.8% 0.2px,14.5% 4.5px,16.9% 3.0px,19.5% 5.1px,23.5% 2.4px,27.7% 0.4px,31.5% 5.3px,33.7% 4.2px,36.8% 5.7px,39.1% 3.2px,43.0% 3.8px,45.6% 0.5px,49.6% 2.8px,53.8% 0.8px,57.6% 4.9px,61.6% 0.1px,64.3% 0.3px,67.9% 2.1px,72.0% 2.2px,75.6% 5.2px,78.0% 3.3px,82.1% 3.2px,84.8% 1.6px,88.4% 1.2px,91.7% 3.3px,94.8% 0.8px,98.2% 5.5px,calc(100% - 2.0px) 0.0%,calc(100% - 3.5px) 4.0%,calc(100% - 0.1px) 6.4%,calc(100% - 2.1px) 10.0%,calc(100% - 1.6px) 13.0%,calc(100% - 4.4px) 16.3%,calc(100% - 0.5px) 18.8%,calc(100% - 5.5px) 23.0%,calc(100% - 3.4px) 24.8%,calc(100% - 2.4px) 28.3%,calc(100% - 5.8px) 31.8%,calc(100% - 2.3px) 35.1%,calc(100% - 1.5px) 37.3%,calc(100% - 0.7px) 39.5%,calc(100% - 5.1px) 41.8%,calc(100% - 4.8px) 44.9%,calc(100% - 4.9px) 48.9%,calc(100% - 5.6px) 50.8%,calc(100% - 4.6px) 52.8%,calc(100% - 3.9px) 56.7%,calc(100% - 0.5px) 59.4%,calc(100% - 3.8px) 61.4%,calc(100% - 3.2px) 63.8%,calc(100% - 1.0px) 66.2%,calc(100% - 4.3px) 68.8%,calc(100% - 2.4px) 71.7%,calc(100% - 3.3px) 74.7%,calc(100% - 2.7px) 77.7%,calc(100% - 4.5px) 81.9%,calc(100% - 1.9px) 84.2%,calc(100% - 2.2px) 86.5%,calc(100% - 4.5px) 88.3%,calc(100% - 2.5px) 91.5%,calc(100% - 2.0px) 95.4%,calc(100% - 5.6px) 98.6%,100.0% calc(100% - 3.7px),97.3% calc(100% - 6.0px),93.7% calc(100% - 1.8px),91.1% calc(100% - 3.5px),88.0% calc(100% - 3.1px),85.7% calc(100% - 3.5px),82.3% calc(100% - 4.6px),79.4% calc(100% - 2.7px),76.4% calc(100% - 3.2px),73.4% calc(100% - 0.1px),71.0% calc(100% - 5.9px),67.2% calc(100% - 2.8px),63.6% calc(100% - 1.3px),61.2% calc(100% - 3.1px),57.7% calc(100% - 0.2px),54.8% calc(100% - 5.4px),51.5% calc(100% - 6.0px),49.5% calc(100% - 5.5px),45.6% calc(100% - 0.2px),42.6% calc(100% - 4.6px),40.2% calc(100% - 3.9px),36.4% calc(100% - 4.8px),33.6% calc(100% - 0.4px),30.5% calc(100% - 1.1px),27.4% calc(100% - 1.6px),24.7% calc(100% - 3.3px),21.0% calc(100% - 5.9px),18.2% calc(100% - 0.0px),14.6% calc(100% - 2.0px),11.0% calc(100% - 5.0px),9.1% calc(100% - 4.4px),6.6% calc(100% - 1.9px),4.0% calc(100% - 3.2px),1.6% calc(100% - 3.0px),0.7px 100.0%,4.1px 97.6%,1.2px 95.1%,1.3px 92.4%,4.7px 88.2%,1.8px 86.1%,3.2px 83.2%,3.1px 80.5%,0.9px 76.8%,1.0px 73.7%,1.9px 70.6%,5.3px 66.9%,2.4px 62.8%,1.0px 59.5%,4.7px 56.0%,1.9px 53.2%,4.5px 49.6%,1.7px 45.8%,1.5px 43.5%,0.0px 41.2%,3.0px 39.1%,5.3px 36.3%,1.0px 33.6%,0.4px 29.5%,4.6px 26.9%,5.8px 24.4%,1.8px 20.8%,5.5px 16.9%,0.9px 13.9%,4.9px 11.8%,3.9px 7.9%,4.8px 4.2%,1.3px 1.9%)}
.torn-2{clip-path:polygon(0.0% 3.7px,2.8% 5.9px,6.2% 6.2px,8.5% 6.6px,11.0% 2.1px,12.7% 3.6px,14.6% 1.9px,17.4% 5.4px,20.6% 0.6px,22.2% 1.8px,25.0% 5.9px,28.2% 6.5px,31.0% 4.5px,33.1% 2.2px,35.1% 3.7px,37.9% 4.0px,40.3% 3.0px,42.4% 5.7px,45.2% 5.2px,48.4% 2.0px,50.2% 2.0px,53.7% 5.5px,56.1% 5.4px,58.3% 6.1px,60.1% 5.2px,63.7% 2.9px,66.2% 0.9px,68.3% 1.6px,70.5% 0.5px,72.7% 0.7px,75.4% 2.8px,77.4% 6.6px,79.6% 3.7px,83.0% 5.3px,86.6% 4.3px,89.9% 0.5px,93.0% 2.4px,95.3% 5.4px,98.4% 2.4px,calc(100% - 2.0px) 0.0%,calc(100% - 4.3px) 3.5%,calc(100% - 3.7px) 5.6%,calc(100% - 1.9px) 7.3%,calc(100% - 6.8px) 9.9%,calc(100% - 3.8px) 13.2%,calc(100% - 1.8px) 16.4%,calc(100% - 7.0px) 19.4%,calc(100% - 6.5px) 21.3%,calc(100% - 2.6px) 24.9%,calc(100% - 6.9px) 28.1%,calc(100% - 3.3px) 30.0%,calc(100% - 5.6px) 32.8%,calc(100% - 5.3px) 34.9%,calc(100% - 6.0px) 37.9%,calc(100% - 6.0px) 41.0%,calc(100% - 3.8px) 43.8%,calc(100% - 2.8px) 46.4%,calc(100% - 3.5px) 48.9%,calc(100% - 1.0px) 51.2%,calc(100% - 6.6px) 53.6%,calc(100% - 6.9px) 55.8%,calc(100% - 3.2px) 59.1%,calc(100% - 6.2px) 61.1%,calc(100% - 2.2px) 64.7%,calc(100% - 5.3px) 67.6%,calc(100% - 0.8px) 70.5%,calc(100% - 5.1px) 72.5%,calc(100% - 4.7px) 75.4%,calc(100% - 6.2px) 77.6%,calc(100% - 3.4px) 80.7%,calc(100% - 2.1px) 84.1%,calc(100% - 3.6px) 86.7%,calc(100% - 6.6px) 90.3%,calc(100% - 5.5px) 92.6%,calc(100% - 6.2px) 94.8%,calc(100% - 4.8px) 98.2%,calc(100% - 2.1px) 99.8%,100.0% calc(100% - 3.5px),98.4% calc(100% - 0.4px),96.6% calc(100% - 6.1px),93.8% calc(100% - 6.1px),90.3% calc(100% - 4.0px),86.9% calc(100% - 3.0px),84.1% calc(100% - 1.2px),81.6% calc(100% - 0.7px),79.1% calc(100% - 6.7px),75.5% calc(100% - 5.2px),73.8% calc(100% - 6.9px),71.2% calc(100% - 4.7px),68.8% calc(100% - 5.4px),66.5% calc(100% - 0.8px),64.0% calc(100% - 1.3px),62.0% calc(100% - 1.4px),59.0% calc(100% - 4.8px),57.0% calc(100% - 4.8px),55.3% calc(100% - 6.6px),53.3% calc(100% - 3.6px),51.0% calc(100% - 6.0px),48.5% calc(100% - 1.2px),45.1% calc(100% - 4.1px),43.0% calc(100% - 5.0px),39.6% calc(100% - 5.2px),36.4% calc(100% - 2.5px),34.4% calc(100% - 0.4px),30.9% calc(100% - 1.6px),28.6% calc(100% - 5.6px),26.8% calc(100% - 6.5px),24.1% calc(100% - 1.2px),20.8% calc(100% - 4.7px),19.1% calc(100% - 3.4px),16.1% calc(100% - 1.9px),13.8% calc(100% - 6.0px),12.0% calc(100% - 1.8px),10.2% calc(100% - 3.4px),7.7% calc(100% - 1.9px),5.9% calc(100% - 0.9px),2.8% calc(100% - 4.1px),0.8px 100.0%,4.8px 96.5%,5.8px 93.7%,4.3px 92.0%,0.2px 89.8%,0.2px 86.7%,1.9px 83.6%,0.4px 80.3%,6.9px 77.7%,4.3px 75.0%,4.1px 72.4%,1.8px 70.0%,5.9px 67.8%,4.9px 65.6%,6.5px 62.1%,6.3px 58.8%,3.8px 55.9%,0.5px 54.1%,3.4px 51.9%,0.1px 49.3%,2.5px 46.5%,0.6px 44.2%,5.6px 41.0%,0.8px 37.9%,6.7px 36.3%,6.6px 33.4%,5.6px 31.0%,0.6px 29.2%,4.7px 26.2%,3.7px 23.9%,1.6px 21.1%,3.3px 19.5%,6.7px 17.4%,3.7px 15.4%,3.0px 13.4%,1.6px 11.4%,5.2px 8.3%,7.0px 5.4%,3.7px 1.8%)}
.torn-3{clip-path:polygon(0.0% 1.2px,3.4% 0.8px,7.7% 1.2px,11.2% 4.6px,14.3% 4.8px,18.4% 2.7px,22.1% 2.9px,25.1% 5.0px,28.3% 4.9px,32.6% 0.1px,35.4% 2.4px,39.6% 0.9px,43.4% 1.8px,47.5% 4.6px,51.6% 1.0px,55.8% 2.2px,60.1% 2.4px,64.6% 4.9px,68.9% 4.1px,73.1% 3.0px,75.6% 4.9px,78.9% 0.1px,82.2% 2.1px,84.8% 4.8px,87.1% 4.5px,90.6% 0.9px,93.6% 2.3px,96.0% 3.8px,99.8% 4.9px,calc(100% - 3.9px) 0.0%,calc(100% - 4.7px) 4.8%,calc(100% - 2.7px) 8.5%,calc(100% - 4.1px) 12.0%,calc(100% - 4.2px) 16.6%,calc(100% - 0.1px) 20.9%,calc(100% - 0.4px) 24.1%,calc(100% - 2.9px) 27.7%,calc(100% - 4.3px) 31.3%,calc(100% - 3.6px) 33.9%,calc(100% - 1.1px) 37.6%,calc(100% - 0.3px) 42.3%,calc(100% - 2.7px) 45.6%,calc(100% - 4.9px) 49.2%,calc(100% - 4.4px) 52.8%,calc(100% - 2.4px) 55.6%,calc(100% - 3.2px) 58.0%,calc(100% - 3.9px) 61.2%,calc(100% - 2.3px) 63.6%,calc(100% - 0.1px) 68.2%,calc(100% - 3.4px) 72.1%,calc(100% - 2.8px) 76.1%,calc(100% - 4.8px) 79.5%,calc(100% - 3.5px) 82.3%,calc(100% - 3.6px) 86.1%,calc(100% - 0.1px) 89.5%,calc(100% - 1.4px) 93.6%,calc(100% - 4.9px) 97.8%,100.0% calc(100% - 2.0px),95.6% calc(100% - 1.9px),92.7% calc(100% - 2.9px),88.9% calc(100% - 3.4px),85.4% calc(100% - 2.0px),81.3% calc(100% - 1.6px),77.6% calc(100% - 0.0px),75.2% calc(100% - 4.3px),72.6% calc(100% - 2.1px),70.4% calc(100% - 3.8px),67.5% calc(100% - 0.2px),64.7% calc(100% - 4.7px),60.6% calc(100% - 0.0px),56.0% calc(100% - 0.4px),52.6% calc(100% - 2.7px),48.4% calc(100% - 0.7px),44.1% calc(100% - 1.4px),40.1% calc(100% - 4.6px),36.4% calc(100% - 0.0px),32.6% calc(100% - 2.2px),28.6% calc(100% - 3.9px),26.2% calc(100% - 2.8px),22.4% calc(100% - 4.6px),18.7% calc(100% - 3.1px),14.6% calc(100% - 0.8px),10.2% calc(100% - 2.9px),6.5% calc(100% - 0.8px),3.0% calc(100% - 2.0px),0.4% calc(100% - 4.7px),2.3px 100.0%,4.9px 97.8%,2.5px 95.4%,4.3px 91.8%,3.0px 88.0%,4.9px 84.6%,1.8px 80.3%,4.7px 76.1%,0.4px 72.7%,4.8px 70.5%,4.0px 67.9%,1.1px 65.3%,4.1px 62.9%,2.4px 60.6%,2.6px 56.3%,0.1px 54.3%,1.5px 50.0%,2.6px 47.7%,1.5px 43.5%,0.9px 41.1%,3.9px 37.8%,3.8px 35.5%,2.8px 31.6%,0.2px 28.5%,2.1px 25.1%,0.3px 21.2%,0.1px 18.8%,0.3px 15.4%,2.2px 11.9%,1.0px 9.0%,2.4px 4.4%,2.9px 2.1%)}
.torn-s{clip-path:polygon(0.0% 2.2px,8.1% 2.2px,16.1% 0.3px,22.5% 1.3px,27.3% 2.6px,32.5% 2.9px,37.8% 1.7px,45.2% 2.3px,49.0% 2.2px,53.1% 1.0px,57.1% 1.8px,61.7% 0.6px,67.8% 1.3px,74.0% 1.6px,80.9% 2.7px,89.2% 1.8px,95.8% 1.8px,calc(100% - 2.3px) 0.0%,calc(100% - 2.8px) 4.2%,calc(100% - 2.3px) 10.1%,calc(100% - 0.2px) 17.0%,calc(100% - 1.2px) 22.6%,calc(100% - 2.2px) 26.8%,calc(100% - 2.0px) 32.4%,calc(100% - 2.8px) 36.2%,calc(100% - 2.5px) 41.8%,calc(100% - 0.3px) 49.1%,calc(100% - 2.1px) 56.3%,calc(100% - 2.3px) 63.7%,calc(100% - 1.8px) 68.6%,calc(100% - 0.7px) 76.8%,calc(100% - 1.4px) 82.2%,calc(100% - 2.3px) 88.5%,calc(100% - 1.9px) 93.9%,100.0% calc(100% - 0.1px),93.9% calc(100% - 0.3px),86.2% calc(100% - 1.7px),81.4% calc(100% - 2.4px),76.8% calc(100% - 1.0px),69.0% calc(100% - 2.0px),61.6% calc(100% - 0.2px),56.7% calc(100% - 2.4px),48.5% calc(100% - 1.0px),43.5% calc(100% - 1.8px),37.8% calc(100% - 1.6px),30.6% calc(100% - 2.6px),26.5% calc(100% - 0.8px),20.9% calc(100% - 0.2px),13.7% calc(100% - 0.6px),6.2% calc(100% - 1.0px),1.8px 100.0%,1.5px 94.4%,2.8px 86.8%,2.1px 81.4%,0.8px 73.2%,0.0px 66.0%,0.8px 61.2%,3.0px 56.0%,0.1px 51.9%,1.5px 45.0%,1.6px 38.5%,2.4px 33.8%,2.9px 26.0%,2.4px 21.0%,0.3px 13.2%,1.5px 6.6%,1.0px 1.4%)}

/* ───────── paper components ───────── */
.piece { position: relative; filter: var(--shadow); rotate: var(--r, 0deg); transition: rotate .5s cubic-bezier(.2,.8,.2,1), translate .5s cubic-bezier(.2,.8,.2,1), filter .5s; }
.paper { background: var(--sheet) var(--noise); padding: var(--pad, 10px); }
.paper > img { width: 100%; }
.paper--dark { background: #191919; }

.tape {
  position: absolute; z-index: 3; top: -13px; left: 50%;
  width: var(--tw, 92px); height: 26px;
  translate: -50% 0; rotate: var(--tr, -4deg);
  background: rgba(226, 214, 188, 0.74) var(--noise);
  clip-path: polygon(0 12%, 4% 0, 8% 14%, 12% 2%, 88% 0, 92% 12%, 96% 2%, 100% 10%, 100% 88%, 96% 100%, 92% 86%, 88% 98%, 12% 100%, 8% 88%, 4% 100%, 0 90%);
  pointer-events: none;
}
.tape--l { left: 14%; }
.tape--r { left: 86%; }

.deco { position: absolute; pointer-events: none; user-select: none; height: auto; max-width: none; }

.note {
  position: absolute; font: 400 clamp(15px, 1.25vw, 20px)/1.15 var(--f-hand); color: var(--pencil);
  white-space: nowrap; pointer-events: none;
}
.note svg { display: block; overflow: visible; }
.note path { fill: none; stroke: var(--pencil); stroke-width: 1.3; stroke-linecap: round; }

.kicker { display: inline-block; font: 400 clamp(17px, 1.4vw, 22px)/1.2 var(--f-hand); color: var(--red); rotate: -2deg; margin-bottom: .4em; }
.title { font: 400 clamp(40px, 6vw, 92px)/0.98 var(--f-display); letter-spacing: -0.02em; }
.title em { font-style: italic; color: var(--red); }

/* Pantone chip */
.chip { display: inline-flex; flex-direction: column; width: var(--cw, 112px); background: var(--sheet) var(--noise); padding: 7px 7px 10px; filter: var(--shadow); rotate: var(--r, 0deg); }
.chip__swatch { display: block; aspect-ratio: 1 / 0.92; background: var(--c); }
.chip__label { display: block; padding-top: 7px; font: 500 11px/1.25 var(--f-body); color: var(--ink); letter-spacing: .02em; }
.chip__label b { display: block; font: 400 13px/1.2 var(--f-display); }
.chip__label i { font-style: normal; color: var(--pencil); }
.chips { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }

/* woven label */
.label {
  display: inline-block; padding: 9px 16px; background: #f8f4ea; color: var(--red);
  font: 600 11.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid #ddd1b8; outline: 1px dashed rgba(165, 28, 36, .45); outline-offset: -5px;
  rotate: var(--r, 0deg); filter: drop-shadow(0 2px 3px rgba(60, 45, 25, .14));
}
.labels { display: flex; flex-wrap: wrap; gap: 12px 10px; }
a.label { text-decoration: none; transition: translate .3s, rotate .3s; }
a.label:hover { translate: 0 -2px; rotate: 0deg; }

.ph { font: 400 0.95em/1.2 var(--f-hand); color: var(--red); background: rgba(217, 162, 27, .22); padding: 0 .3em; white-space: normal; }

/* Opening screens stay hidden until motion.js has set their starting positions — otherwise the browser
   paints them fully visible for one frame, then they vanish and animate in (a flash on every load). */
@media (prefers-reduced-motion: no-preference) {
  .js:not(.motion-ready) .hero, .js:not(.motion-ready) .p-head, .js:not(.motion-ready) .z-head, .js:not(.motion-ready) .nav { visibility: hidden; }
}

/* ───────── navigation ───────── */
.nav {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px var(--gutter); pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav__home { font: 400 18px/1 var(--f-display); text-decoration: none; padding: 12px 14px; background: var(--sheet) var(--noise); filter: var(--shadow); rotate: -1.5deg; opacity: 0; transition: opacity .4s; }
.nav.is-scrolled .nav__home, .nav--solid .nav__home { opacity: 1; }
.nav__chips { display: none; gap: 10px; }
.navchip {
  display: inline-block; text-decoration: none; padding: 11px 18px 12px; min-height: 44px;
  font: 400 16px/1 var(--f-display); color: #fff; background: var(--c, var(--red)) var(--noise);
  filter: var(--shadow); rotate: var(--r, 0deg); transition: translate .3s, rotate .3s;
}
.navchip--light { color: var(--ink); }
.navchip:hover { translate: 0 -3px; rotate: 0deg; }
.nav .menu-btn { display: inline-block; }
@media (min-width: 640px) {
  .nav__chips { display: flex; }
  .nav .menu-btn { display: none; }
}

.menu { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; padding: 80px var(--gutter) 40px; background: var(--paper) var(--noise); }
.menu::backdrop { background: rgba(29, 36, 51, .3); }
.menu[open] { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.menu .navchip { font-size: 30px; padding: 16px 26px; }
.menu__close { position: absolute; top: 18px; right: var(--gutter); font: 400 20px/1 var(--f-hand); min-height: 44px; min-width: 44px; }

/* ───────── thread ───────── */
.thread { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; pointer-events: none; overflow: visible; }
.thread__line { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-dasharray: 11 8; stroke-linecap: round; }
.thread__needle { fill: #9a9a9a; }

/* ───────── hero ───────── */
.hero { position: relative; height: max(100vh, 760px); height: max(100svh, 760px); overflow: hidden; }
@media (min-width: 640px) { .hero { height: max(100vh, 640px); height: max(100svh, 640px); } }
.hero > .hp, .hero > .deco, .hero > .note, .hero > .hero__block { position: absolute; }
.hp { left: var(--x); top: var(--y); width: var(--w); }
.hero__block { left: var(--x); top: var(--y); width: var(--w); text-align: center; z-index: 4; }
.hero__name { font: 400 var(--fs, 13vw)/0.92 var(--f-display); letter-spacing: -0.025em; color: var(--ink); }
@media (min-width: 640px) { .hero__name { white-space: nowrap; } }
.hero__name span { display: inline-block; }
.hero__underline { display: block; width: 72%; height: 22px; margin: 4px auto 0; overflow: visible; }
.hero__underline path { fill: none; stroke: var(--red); stroke-width: 3.4; stroke-linecap: round; }
.hero__tag { margin: 10px 0 0; font: 400 clamp(16px, 1.5vw, 24px)/1.3 var(--f-hand); color: var(--ink); }
.hero__rann { display: grid; grid-template-columns: 1.15fr 1fr; gap: 6px; aspect-ratio: 1.22; }
.hero__rann img { min-height: 0; }
.hero__rann img { width: 100%; height: 100%; object-fit: cover; }
.hero__rann img:first-child { grid-row: span 2; }
.hero__sanjhi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero__sanjhi .piece:nth-child(2) { margin-top: 18%; }
.hero__sanjhi .piece:nth-child(3) { margin-top: -12%; }
.hero__sanjhi .piece .paper { --pad: 6px; }
.hero .chips { --cw: clamp(84px, 7vw, 116px); gap: 0; }
.hero .chips .chip:nth-child(2) { margin-left: 4px; margin-top: 10px; }
.hero .chips .chip:nth-child(3) { margin-left: 4px; }

/* phone (base) */
.hp-sketch, .hp-swatch, .hp-kraft-1, .hp-kraft-2, .hp-red, .hp-fl-2, .hp-fl-3, .hp-fl-4, .hero .note, .hp-final { display: none; }
.hero__block { --x: 4%; --y: 88px; --w: 92%; --fs: 17vw; }
.hp-lineup { --x: 6%; --y: 37%; --w: 88%; --r: -2deg; }
.hp-rann { --x: 57%; --y: 60%; --w: 38%; --r: 4deg; }
.hp-rann .hero__rann { grid-template-columns: 1fr; }
.hp-rann .hero__rann img:not(:first-child) { display: none; }
.hp-sanjhi { --x: 7%; --y: 61%; --w: 30%; --r: -4deg; }
.hero .chip__label { font-size: 9px; }
.hero .chip__label b { font-size: 11px; }
@media (min-width: 640px) { .hero .hp-chips { --cw: clamp(84px, 7vw, 116px); } .hero .chip__label { font-size: 11px; } .hero .chip__label b { font-size: 13px; } }
.hp-sanjhi .piece:not(:first-child) { display: none; }
.hp-sanjhi .hero__sanjhi { grid-template-columns: 1fr; }
.hp-chips { --x: 27%; --y: auto; bottom: 16px; --r: 0deg; }
.hero .hp-chips { --cw: 60px; }
.hp-fl-1 { --x: 80%; --y: 30%; width: 56px; rotate: 18deg; }

/* tablet portrait */
@media (min-width: 640px) {
  .hp-final, .hp-swatch, .hp-fl-2 { display: block; }
  .hp-sanjhi .piece:nth-child(2) { display: block; }
  .hp-sanjhi .hero__sanjhi { grid-template-columns: 1fr 1fr; }
  .hero__block { --x: 4%; --y: 50%; --w: 92%; --fs: 10.5vw; }
  .hp-lineup { --x: 5%; --y: 10%; --w: 56%; --r: -2deg; }
  .hp-rann { --x: 60%; --y: 13%; --w: 36%; --r: 3deg; }
  .hp-rann .hero__rann { grid-template-columns: 1.15fr 1fr; }
  .hp-rann .hero__rann img:not(:first-child) { display: block; }
  .hp-final { --x: 5%; --y: 70%; --w: 22%; --r: -4deg; }
  .hp-sanjhi { --x: 62%; --y: 70%; --w: 34%; --r: 2deg; }
  .hp-swatch { --x: 30%; --y: 74%; width: 13%; rotate: -8deg; }
  .hp-chips { --x: 30%; --y: auto; bottom: 26px; }
  .hp-fl-1 { --x: 1%; --y: 56%; width: 70px; }
  .hp-fl-2 { --x: 92%; --y: 46%; width: 60px; rotate: -12deg; }
}

/* laptop + desktop: the full pinboard (positions from the approved mockup) */
@media (min-width: 1024px) {
  .hp-sketch, .hp-kraft-1, .hp-kraft-2, .hp-red, .hp-fl-3, .hp-fl-4, .hero .note { display: block; }
  .hp-sanjhi .piece { display: block !important; }
  .hero__block { --x: 20%; --y: 64%; --w: 60%; --fs: clamp(72px, 7vw, 150px); }
  .hp-sketch { --x: 1.5%; --y: 10%; --w: 14%; --r: -3deg; }
  .hp-final { --x: 12.5%; --y: 15%; --w: 15%; --r: 3deg; }
  .hp-lineup { --x: 28%; --y: 8%; --w: 35%; --r: -1.5deg; }
  .hp-rann { --x: 66%; --y: 11%; --w: 24%; --r: 2.5deg; }
  .hp-sanjhi { --x: 78%; --y: 45%; --w: 18.5%; --r: -1.5deg; }
  .hp-swatch { --x: 8%; --y: 52%; width: 7%; rotate: -6deg; }
  .hp-chips { --x: 3.5%; --y: auto; bottom: 4%; }
  .hp-kraft-1 { --x: 0.5%; --y: 4%; width: 15%; rotate: 3deg; opacity: .9; }
  .hp-kraft-2 { --x: 70%; --y: 70%; width: 17%; rotate: -8deg; opacity: .85; }
  .hp-red { --x: 90.5%; --y: 30%; width: 9%; rotate: 72deg; }
  .hp-fl-1 { --x: 0%; --y: 19%; width: 60px; rotate: -14deg; }
  .hp-fl-2 { --x: 10%; --y: 47%; width: 56px; rotate: 10deg; }
  .hp-fl-3 { --x: 0%; --y: 76%; width: 82px; rotate: 20deg; }
  .hp-fl-4 { --x: 91%; --y: 13%; width: 70px; rotate: -18deg; }
  .note--drape { left: 1.5%; top: 41%; }
  .note--placket { left: 59%; top: 57%; }
  .note--stencil { left: 67%; top: 78%; }
}
.hero .deco.hp-kraft-1, .hero .deco.hp-kraft-2, .hero .deco.hp-red { z-index: 0; }
.hero .deco[class*="hp-fl"] { z-index: 5; }
.hp-chips, .hp-swatch { z-index: 4; }

/* ───────── sections ───────── */
.section { padding: clamp(80px, 12vw, 180px) var(--gutter); }
.section__head { max-width: 1200px; margin: 0 auto clamp(40px, 6vw, 80px); }
.section__head p { max-width: 34em; margin-top: 18px; color: #3b4152; }

/* work cards */
.work-grid { display: grid; grid-template-columns: 1fr; gap: 56px 32px; max-width: 1320px; margin: 0 auto; }
.card { display: block; text-decoration: none; position: relative; }
.card .piece { --r: var(--cr, 0deg); }
.card .paper { --pad: 12px 12px 16px; }
.card__img { overflow: hidden; aspect-ratio: var(--ar, 4 / 3); background: #e9e3d6; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s cubic-bezier(.2,.8,.2,1); }
.card__img--row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: none; }
.card__img--row img { object-position: 50% 18%; }
.card__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 12px; }
.card__title { font: 400 clamp(22px, 2vw, 30px)/1.1 var(--f-display); }
.card__sub { margin: 4px 0 0; font: 400 15px/1.3 var(--f-hand); color: var(--pencil); }
.dots { display: flex; gap: 4px; flex: none; }
.dots i { width: 14px; height: 14px; background: var(--c); display: block; border-radius: 2px; }
.card__open { display: inline-block; margin-top: 10px; font: 400 18px/1 var(--f-hand); color: var(--red); }
@media (hover: hover) and (pointer: fine) {
  .card__open { position: absolute; right: 16px; bottom: -30px; opacity: 0; translate: 0 6px; transition: opacity .35s, translate .35s; }
  .card:hover .piece, .card:focus-visible .piece { rotate: 0deg; translate: 0 -8px; filter: var(--shadow-lift); }
  .card:hover .card__img img { scale: 1.04; }
  .card:hover .card__open, .card:focus-visible .card__open { opacity: 1; translate: 0 0; }
}
@media (min-width: 640px) {
  .work-grid { grid-template-columns: 1fr 1fr; }
  .card--wide { grid-column: span 2; }
}
@media (min-width: 1024px) {
  .work-grid { grid-template-columns: repeat(12, 1fr); gap: 72px 40px; }
  .card { grid-column: span var(--span, 4); margin-top: var(--cy, 0); }
  .card--wide { grid-column: span var(--span, 7); }
}

/* industry */
.industry { padding-left: 0; padding-right: 0; overflow: hidden; overflow: clip; }
.industry .section__head { padding: 0 var(--gutter); width: 100%; }
.brand-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.industry__track {
  display: flex; gap: clamp(20px, 3vw, 48px); padding: 24px var(--gutter) 40px;
  padding-left: max(var(--gutter), calc((100vw - 1200px) / 2 + var(--gutter)));
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.industry__track::-webkit-scrollbar { display: none; }
.sheet { flex: none; width: min(82vw, 520px); scroll-snap-align: center; text-align: left; position: relative; text-decoration: none; }
.sheet .piece { --r: var(--sr, 0deg); }
.sheet .paper { --pad: 8px; }
.sheet__brand { display: block; margin-top: 12px; font: 400 16px/1.2 var(--f-hand); color: var(--pencil); }
.sheet__brand b { font-weight: 400; color: var(--red); }
.industry__more { display: inline-block; margin: 8px var(--gutter) 0; font: 400 20px/1 var(--f-hand); color: var(--red); }
@media (min-width: 640px) { .sheet { width: min(44vw, 560px); } }
@media (min-width: 1024px) { .sheet { width: min(38vw, 620px); } }
@media (hover: hover) and (pointer: fine) { .sheet:hover .piece { rotate: 0deg; translate: 0 -8px; filter: var(--shadow-lift); } }

/* sideways strips: the page pins the strip and vertical scrolling slides it (every screen size).
   Items are capped by viewport height so the whole strip fits while pinned. Reduced motion keeps native swipe. */
@media (prefers-reduced-motion: no-preference) {
  .industry__track, .boards { overflow: visible; width: max-content; scroll-snap-type: none; }
  .industry__track .sheet { max-width: calc((100vh - 220px) * 1.72); max-width: calc((100svh - 220px) * 1.72); }
  .board { max-width: calc((100vh - 220px) * 1.38); max-width: calc((100svh - 220px) * 1.38); }
}

/* about */
.about__grid { display: grid; gap: 48px; max-width: 1200px; margin: 0 auto; align-items: start; }
.polaroid .paper { --pad: 14px 14px 56px; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font: 400 18px/1 var(--f-hand); color: var(--pencil); }
.portrait-ph { aspect-ratio: 4 / 5; display: grid; place-items: center; align-content: center; background: #eee7d8; color: var(--pencil); text-align: center; font: 400 17px/1.3 var(--f-hand); padding: 20px; }
.portrait-ph svg { width: 46%; height: auto; margin-bottom: 8px; }
.about__lead { font: 400 clamp(22px, 2.3vw, 32px)/1.35 var(--f-display); margin-bottom: 1em; }
.about__facts { display: grid; gap: 6px; margin: 28px 0; font-size: 15px; }
.about__facts span { font-family: var(--f-hand); color: var(--red); font-size: 17px; margin-right: 8px; }
@media (min-width: 640px) { .about__grid { grid-template-columns: minmax(220px, 0.8fr) 1.2fr; gap: clamp(40px, 6vw, 100px); } .polaroid { margin-top: 30px; } }

/* contact */
.contact { text-align: center; padding-bottom: 60px; }
.contact .title { font-size: clamp(46px, 8vw, 128px); }
.tag-wrap { position: relative; width: 210px; margin: 40px auto 30px; transform-origin: 50% 0; }
.tag-wrap .deco { position: relative; width: 100%; }
.tag-text { position: absolute; left: 12%; right: 12%; top: 46%; font: 400 15px/1.35 var(--f-hand); color: var(--ink); word-break: break-word; }
.tag-text a { color: var(--ink); text-decoration-color: var(--red); }
.contact .labels { justify-content: center; }
.footer { padding: 60px var(--gutter) 30px; font-size: 13px; color: var(--pencil); text-align: center; }

/* ───────── project page ───────── */
.p-head { position: relative; padding: clamp(110px, 14vw, 170px) var(--gutter) clamp(50px, 8vw, 100px); max-width: 1320px; margin: 0 auto; display: grid; gap: 40px; align-items: center; }
.p-back { display: inline-block; margin-bottom: 26px; font: 400 18px/1 var(--f-hand); color: var(--red); text-decoration: none; }
.p-title { font: 400 clamp(46px, 7.5vw, 120px)/0.95 var(--f-display); letter-spacing: -0.025em; }
.p-sub { margin-top: 14px; font: 400 clamp(19px, 1.8vw, 26px)/1.3 var(--f-hand); color: var(--pencil); }
.p-meta { margin-top: 26px; }
.p-cover .paper { --pad: 12px; }
@media (min-width: 1024px) { .p-head { grid-template-columns: 1fr 1fr; gap: 60px; } }

.blk { padding: clamp(56px, 9vw, 130px) var(--gutter); max-width: 1320px; margin: 0 auto; position: relative; }
.blk__head { margin-bottom: clamp(26px, 4vw, 48px); }
.blk__title { font: 400 clamp(30px, 4vw, 58px)/1.02 var(--f-display); letter-spacing: -0.015em; }

.blk--text .blk__body { display: grid; gap: 28px; }
.blk--text .lead { font: 400 clamp(21px, 2.1vw, 30px)/1.4 var(--f-display); }
.blk--text .body { columns: 1; max-width: 40em; color: #333a4a; }
.blk--text .margin-note { font: 400 19px/1.35 var(--f-hand); color: var(--red); rotate: -2deg; max-width: 16em; }
@media (min-width: 1024px) { .blk--text .blk__body { grid-template-columns: 1.15fr 1fr; gap: 60px; } }

.insp { display: flex; flex-wrap: wrap; gap: 22px 18px; align-items: flex-start; }
.insp .piece { width: clamp(120px, 22vw, 210px); }
.insp .piece:nth-child(3n+2) { margin-top: 24px; }
.insp .paper { --pad: 6px; }
.insp__cap { margin-top: 18px; font: 400 16px/1.3 var(--f-hand); color: var(--pencil); }

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 28px 22px; max-width: 980px; }
.swatch { text-align: center; }
.swatch__img { aspect-ratio: 1; overflow: hidden; clip-path: polygon(0 4%, 4% 0, 8% 4%, 12% 0, 16% 4%, 20% 0, 24% 4%, 28% 0, 32% 4%, 36% 0, 40% 4%, 44% 0, 48% 4%, 52% 0, 56% 4%, 60% 0, 64% 4%, 68% 0, 72% 4%, 76% 0, 80% 4%, 84% 0, 88% 4%, 92% 0, 96% 4%, 100% 0, 96% 8%, 100% 12%, 96% 16%, 100% 20%, 96% 24%, 100% 28%, 96% 32%, 100% 36%, 96% 40%, 100% 44%, 96% 48%, 100% 52%, 96% 56%, 100% 60%, 96% 64%, 100% 68%, 96% 72%, 100% 76%, 96% 80%, 100% 84%, 96% 88%, 100% 92%, 96% 96%, 100% 100%, 96% 96%, 92% 100%, 88% 96%, 84% 100%, 80% 96%, 76% 100%, 72% 96%, 68% 100%, 64% 96%, 60% 100%, 56% 96%, 52% 100%, 48% 96%, 44% 100%, 40% 96%, 36% 100%, 32% 96%, 28% 100%, 24% 96%, 20% 100%, 16% 96%, 12% 100%, 8% 96%, 4% 100%, 0 96%, 4% 92%, 0 88%, 4% 84%, 0 80%, 4% 76%, 0 72%, 4% 68%, 0 64%, 4% 60%, 0 56%, 4% 52%, 0 48%, 4% 44%, 0 40%, 4% 36%, 0 32%, 4% 28%, 0 24%, 4% 20%, 0 16%, 4% 12%, 0 8%); }
.swatch__img img { width: 100%; height: 100%; object-fit: cover; }
.swatch .label { margin-top: 12px; }
.swatch .piece { filter: var(--shadow); }

.reveal { position: relative; }
.reveal__stage { position: relative; width: min(100%, 980px, calc(76vh * var(--ar, 1.33))); width: min(100%, 980px, calc(76svh * var(--ar, 1.33))); margin: 0 auto; }
.reveal__frame { position: relative; aspect-ratio: var(--ar, 1.33); background: var(--sheet) var(--noise); overflow: hidden; }
.reveal__frame img { position: absolute; inset: 4%; width: 92%; height: 92%; object-fit: contain; }
.reveal__final { clip-path: inset(0 0 0 0); }
.reveal__edge { position: absolute; top: 0; bottom: 0; left: 100%; width: 2px; background: repeating-linear-gradient(var(--pencil) 0 6px, transparent 6px 10px); opacity: 0; }
.reveal__labels { display: flex; justify-content: space-between; margin-top: 12px; font: 400 18px/1 var(--f-hand); color: var(--pencil); }
.reveal__labels span:last-child { color: var(--red); }

.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 18px; align-items: start; }
.gallery .piece { cursor: zoom-in; }
.gallery .paper { --pad: 8px; }
.gallery figcaption { margin-top: 8px; font: 400 15px/1.3 var(--f-hand); color: var(--pencil); }
.gallery > :nth-child(odd) { --r: -1.4deg; }
.gallery > :nth-child(even) { --r: 1.6deg; margin-top: 20px; }
.gallery--wide { grid-template-columns: 1fr; }
@media (min-width: 640px) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 34px 26px; } .gallery--wide { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .gallery--4 { grid-template-columns: repeat(4, 1fr); } }
.gallery button { display: block; width: 100%; text-align: left; }

.vid .paper { --pad: 10px; }
/* custom film player: poster + "play film" sticker; controls sit below the picture, never over it */
.player__screen { position: relative; background: #000; }
.player video { display: block; width: 100%; height: auto; cursor: pointer; }
.player__big {
  position: absolute; left: clamp(12px, 2.5vw, 28px); bottom: clamp(12px, 2.5vw, 28px); rotate: -2deg; /* corner, over dark sky — never over her artwork's text */
  background: var(--z-black); color: #fff; padding: 16px 26px; min-height: 44px;
  font: 700 clamp(15px, 1.6vw, 20px)/1 var(--f-type); letter-spacing: .04em;
  filter: var(--shadow); transition: opacity .3s, rotate .3s, scale .3s;
}
.player__big:hover { rotate: 0deg; scale: 1.05; }
.player.is-playing .player__big { opacity: 0; pointer-events: none; }
.player__bar { display: flex; align-items: center; gap: clamp(10px, 1.5vw, 18px); padding: 12px 4px 4px; font: 400 14px/1 var(--f-type); color: var(--z-black); }
.player__btn { min-height: 44px; min-width: 44px; padding: 0 14px; background: var(--z-black); color: #fff; font: 700 13px/1 var(--f-type); letter-spacing: .04em; rotate: -1deg; }
.player__btn:hover { background: var(--z-red); }
.player__time { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* progress = the red running stitch: filled part red, the rest pencil grey */
.player__seek { flex: 1; min-width: 60px; height: 44px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.player__seek::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, var(--z-red) var(--p, 0%), #b9b4aa var(--p, 0%)); -webkit-mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 16px); mask: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 16px); }
.player__seek::-moz-range-track { height: 3px; background: repeating-linear-gradient(90deg, #b9b4aa 0 10px, transparent 10px 16px); }
.player__seek::-moz-range-progress { height: 3px; background: repeating-linear-gradient(90deg, var(--z-red) 0 10px, transparent 10px 16px); }
.player__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5.5px; border-radius: 50%; background: var(--z-red); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.player__seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--z-red); border: 2px solid #fff; }
.player:fullscreen { display: flex; flex-direction: column; justify-content: center; background: #000; }
.player:fullscreen .player__bar { color: #fff; padding: 12px 20px; }
@media (max-width: 639px) { .player__fs { display: none; } .player__time { font-size: 12px; } .player__big { display: none; } } /* phone: the bar's play button and a tap on the film are enough; keep the poster clear */
.vid { max-width: 1040px; margin: 0 auto; }

.boards { display: flex; gap: clamp(20px, 3vw, 44px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 20px 4px 40px; scrollbar-width: none; }
.boards::-webkit-scrollbar { display: none; }
.board { flex: none; width: min(84vw, 760px); scroll-snap-align: center; }
.board figcaption { margin-top: 10px; font: 400 16px/1.3 var(--f-hand); color: var(--pencil); }
.blk--boards { max-width: none; padding-left: 0; padding-right: 0; overflow: hidden; overflow: clip; }
.blk--boards .blk__head, .blk--boards .boards { padding-left: max(var(--gutter), calc((100vw - 1320px) / 2 + var(--gutter))); padding-right: var(--gutter); }

.brand-group + .brand-group { margin-top: 64px; }
.brand-group h3 { margin-bottom: 22px; }
.sheets { display: grid; grid-template-columns: 1fr; gap: 26px; }
.sheets .sheet { width: auto; }
@media (min-width: 640px) { .sheets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .sheets { grid-template-columns: repeat(3, 1fr); } }

.next { display: block; max-width: 760px; margin: 0 auto; padding: 60px var(--gutter) 120px; text-decoration: none; text-align: center; }
.next .kicker { display: block; width: max-content; margin: 0 auto 10px; font-size: 22px; }
.next__title { display: block; }
.next__title { font: 400 clamp(40px, 6vw, 96px)/1 var(--f-display); letter-spacing: -0.02em; transition: color .3s; }
.next:hover .next__title { color: var(--red); }

.notfound { min-height: 80vh; min-height: 80svh; display: grid; place-items: center; text-align: center; padding: 120px var(--gutter); }

/* ───────── lightbox ───────── */
.lb { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(239, 232, 218, .97) var(--noise); }
.lb[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lb::backdrop { background: rgba(29, 36, 51, .4); }
.lb__stage { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: 64px 12px 8px; min-height: 0; touch-action: pan-y pinch-zoom; }
.lb__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: var(--shadow); background: var(--sheet); padding: 8px; }
.lb__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px var(--gutter) 18px; font: 400 17px/1.3 var(--f-hand); color: var(--pencil); }
.lb__btn { min-width: 44px; min-height: 44px; font: 400 22px/1 var(--f-hand); color: var(--red); }
.lb__close { position: absolute; top: 12px; right: var(--gutter); }

/* ───────── page transition ───────── */
.wipe {
  position: fixed; z-index: 100; inset: -40px 0; background: var(--kraft) var(--noise);
  pointer-events: none; translate: 0 -105%;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 26px), 96% 100%, 91% calc(100% - 14px), 85% 100%, 78% calc(100% - 20px), 71% 100%, 63% calc(100% - 10px), 55% 100%, 48% calc(100% - 22px), 40% 100%, 33% calc(100% - 12px), 25% 100%, 18% calc(100% - 24px), 10% 100%, 4% calc(100% - 12px), 0 100%);
}
.js .wipe { animation: wipe-out .75s cubic-bezier(.7, 0, .2, 1) .05s both; }
.wipe.is-in { animation: wipe-in .5s cubic-bezier(.7, 0, .2, 1) both; }
@keyframes wipe-out { from { translate: 0 0; } to { translate: 0 -105%; } }
@keyframes wipe-in { from { translate: 0 105%; } to { translate: 0 0; } }

/* ───────── zine theme (Rannsutra) ───────── */
[data-theme="zine"] body, body[data-theme="zine"] {
  background-color: var(--z-white);
  background-image: var(--noise), url("../assets/deco/zine-grain.svg");
  background-size: 260px 260px, 300px 300px;
  color: var(--z-black);
}
body[data-theme="zine"] .thread__line { stroke: var(--z-red); }
body[data-theme="zine"] .paper { background: #fff var(--noise); }
body[data-theme="zine"] .kicker, body[data-theme="zine"] .p-back, body[data-theme="zine"] .next .kicker { font-family: var(--f-type); font-weight: 700; color: var(--z-red); rotate: 0deg; text-transform: uppercase; letter-spacing: .06em; font-size: 15px; }
body[data-theme="zine"] .blk__title, body[data-theme="zine"] .next__title { font-family: var(--f-cond); text-transform: uppercase; letter-spacing: .01em; }
body[data-theme="zine"] .lead { font-family: var(--f-type); }
body[data-theme="zine"] .margin-note { font-family: var(--f-type); color: var(--z-red); }
body[data-theme="zine"] .label { color: var(--z-black); outline-color: rgba(17,17,17,.4); background: #fff; font-family: var(--f-type); }
body[data-theme="zine"] figcaption, body[data-theme="zine"] .reveal__labels { font-family: var(--f-type); }

.z-head { position: relative; padding: 96px var(--gutter) 40px; display: grid; gap: clamp(24px, 4vw, 48px); max-width: 1320px; margin: 0 auto; }
.z-head .p-back { justify-self: start; }
.z-frame { background: #fff var(--noise); padding: 8px; filter: var(--shadow); }
.z-frame img { width: 100%; height: 100%; object-fit: cover; }
/* photos in true colour, near their real (small) size so they stay sharp */
.z-prints { display: grid; gap: 36px; justify-items: center; align-items: center; }
.z-photo, .z-photo-2 { position: relative; margin: 0; }
.z-photo { width: min(80%, 400px); rotate: -2deg; }
.z-photo-2 { width: min(70%, 340px); rotate: 2.5deg; }
.z-photo .z-frame { aspect-ratio: 371 / 558; }
.z-photo-2 .z-frame { aspect-ratio: 370 / 558; }
.z-notes { display: grid; gap: 22px; justify-items: center; max-width: 26em; }
@media (min-width: 640px) {
  .z-prints { grid-template-columns: 1fr 1fr; }
  .z-notes { grid-column: 1 / -1; grid-row: 2; }
  .z-photo { width: min(100%, 400px); }
  .z-photo-2 { width: min(100%, 340px); }
}
@media (min-width: 1024px) {
  .z-prints { grid-template-columns: 1fr auto 1fr; }
  .z-notes { grid-column: auto; grid-row: auto; }
  .z-photo { width: min(100%, 360px); }
  .z-photo-2 { width: min(100%, 320px); }
}
.cutout { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 2px; margin: 0; }
.cut {
  display: inline-block; padding: .06em .12em .02em; line-height: .95; font-size: clamp(50px, 9.6vw, 136px);
  font-family: var(--cf); background: var(--cb) var(--noise); color: var(--cc); rotate: var(--r, 0deg);
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.25)); text-transform: uppercase;
}
.cut-break { flex-basis: 100%; height: 0; }
@media (min-width: 640px) { .cut-break { display: none; } }
.z-strip { position: relative; z-index: 3; max-width: 32em; background: #fff var(--noise); padding: 14px 20px; font: 400 clamp(15px, 1.4vw, 19px)/1.5 var(--f-type); rotate: -1deg; filter: var(--shadow); }
.z-staple { position: absolute; z-index: 4; width: 54px; }
.z-gaffer { position: absolute; z-index: 4; width: 150px; }
.z-sticker { position: relative; z-index: 3; background: var(--z-black); color: #fff; padding: 12px 18px; font: 700 15px/1 var(--f-type); text-decoration: none; rotate: 1.5deg; }

}

/* ───────── reduced motion ───────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  .js .wipe { animation: none; display: none; }
}