/* ════════════════════════════════════════════════════════════════
   THE BROWN BROOM ARCHIVE
   chalk · bone · plaster · concrete · soot · muted brown · oxidized metal
   ════════════════════════════════════════════════════════════════ */
:root {
  --chalk: #efece6;
  --bone: #e4ded2;
  --plaster: #d8d2c6;
  --concrete: #b3aea5;
  --concrete-dk: #8c877f;
  --soot: #1b1a18;
  --soot-2: #2a2825;
  --brown: #6a4e3b;
  --rust: #8a5636;
  --oxide: #56645c;
  --oxide-lt: #8d9a91;
  --ink: #221f1b;
  --ink-2: #4a453e;

  --sans: 'Anybody', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Gloock', 'Didot', 'Times New Roman', serif;
  --mono: 'Martian Mono', ui-monospace, Menlo, monospace;
  --hand: 'Reenie Beanie', 'Bradley Hand', cursive;
  --stitch: 'BB Stitch', var(--sans);
  --thread: #efe5cf;
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-heavy: cubic-bezier(.65, 0, .15, 1);
  --gut: clamp(16px, 4vw, 56px);

  /* plaster: real relief, lit from the upper left */
  --tex-plaster: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='700'><filter id='p' x='0' y='0' width='1' height='1'><feTurbulence type='fractalNoise' baseFrequency='.0055' numOctaves='5' seed='11' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .36  0 0 0 0 .32  0 0 0 0 .27  1.1 0 0 0 -.48'/></filter><filter id='q' x='0' y='0' width='1' height='1'><feTurbulence type='fractalNoise' baseFrequency='.028' numOctaves='3' seed='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .98  0 0 0 0 .94  .9 0 0 0 -.43'/></filter><rect width='100%' height='100%' filter='url(%23p)'/><rect width='100%' height='100%' filter='url(%23q)'/></svg>");
  /* fine trowel marks */
  --tex-trowel: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='t' x='0' y='0' width='1' height='1'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .27  0 0 0 0 .23  0 0 0 .7 -.28'/></filter><rect width='100%' height='100%' filter='url(%23t)'/></svg>");
  /* concrete speckle + aggregate */
  --tex-speck: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='s' x='0' y='0' width='1' height='1'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .12  0 0 0 0 .11  0 0 0 0 .1  0 0 0 1.4 -.62'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>");
  /* water marks and mottling */
  --tex-mottle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='m' x='0' y='0' width='1' height='1'><feTurbulence type='fractalNoise' baseFrequency='.0045' numOctaves='4' seed='19' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .28  0 0 0 0 .25  0 0 0 0 .21  1.7 0 0 0 -.86'/></filter><rect width='100%' height='100%' filter='url(%23m)'/></svg>");
  /* board-formed concrete: plank seams + tie holes */
  --tex-board: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='360' height='300'><g fill='none' stroke='%23000' stroke-opacity='.09'><path d='M0 .5H360M0 75.5H360M0 150.5H360M0 225.5H360'/></g><g fill='none' stroke='%23fff' stroke-opacity='.22'><path d='M0 1.5H360M0 76.5H360M0 151.5H360M0 226.5H360'/></g><g fill='%23000' fill-opacity='.22'><circle cx='45' cy='113' r='4.5'/><circle cx='225' cy='113' r='4.5'/></g><g fill='%23fff' fill-opacity='.3'><circle cx='45.8' cy='114.4' r='4.5'/><circle cx='225.8' cy='114.4' r='4.5'/></g></svg>");
  /* paper grain */
  --tex-paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g' x='0' y='0' width='1' height='1'><feTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='2' seed='8' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .27  0 0 0 0 .22  0 0 0 .5 -.1'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  /* eroded letters (mask) */
  --erode: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='e' x='0' y='0' width='1' height='1'><feTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='3' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -4.4 0 0 0 3.25'/></filter><rect width='100%' height='100%' filter='url(%23e)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 64px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; color: var(--ink); background: var(--plaster);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.55; font-variation-settings: 'wdth' 94;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
h1, h2, h3 { font-weight: inherit; margin: 0; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mono { font-family: var(--mono); font-variation-settings: 'wdth' 87.5; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; line-height: 1.5; }
.display { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6.4vw, 110px); line-height: .94; letter-spacing: -.025em; }
.display em { font-style: normal; color: #6b645a; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 300; background: var(--soot); color: var(--chalk); padding: 10px 14px; font-family: var(--mono); font-size: 12px; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.link { background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; }

/* surfaces — texture belongs to a material, never laid over the whole screen */
.plaster {
  background-color: #d5cfc3;
  background-image: radial-gradient(120% 80% at 18% 0%, rgba(255,250,238,.5), transparent 60%), var(--tex-trowel), var(--tex-plaster);
}
.plaster-warm { background-color: #d9cfbf; }
.concrete {
  background-color: var(--concrete);
  background-image: var(--tex-speck), var(--tex-mottle), var(--tex-board), linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.08));
}

/* ───────────── embroidery: BB Stitch on cloth ───────────── */
.stitch {
  display: inline-block; font-family: var(--stitch); font-weight: 400; line-height: 1; letter-spacing: .05em; text-transform: uppercase;
  color: var(--thread);
  background: linear-gradient(168deg, color-mix(in srgb, var(--thread) 50%, #fff) 0%, var(--thread) 42%, color-mix(in srgb, var(--thread) 70%, #000) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1.2px 0 rgba(0,0,0,.55)) drop-shadow(0 0 .6px rgba(0,0,0,.4));
}
.twill {
  position: relative; background-color: #23211e;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 1.5px, transparent 1.5px 4.5px), repeating-linear-gradient(-45deg, rgba(0,0,0,.22) 0 1px, transparent 1px 6px);
}
/* running stitch around the edge */
.twill::before { content: ''; position: absolute; inset: 7px; border: 1.6px dashed color-mix(in srgb, var(--thread) 55%, transparent); border-radius: 2px; pointer-events: none; }

/* ───────────── header ───────────── */
.hd {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 56px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  padding: 0 var(--gut); color: var(--chalk);
  transition: background-color .5s, color .5s, border-color .5s;
  border-bottom: 1px solid transparent;
}
.hd.is-light { color: var(--ink); background: color-mix(in srgb, var(--bone) 86%, transparent); border-color: rgba(0,0,0,.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hd.is-dark { color: var(--chalk); background: color-mix(in srgb, var(--soot) 80%, transparent); border-color: rgba(255,255,255,.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hd-mark { font-weight: 800; font-variation-settings: 'wdth' 150; letter-spacing: .12em; font-size: 13px; text-decoration: none; }
.hd-room { margin: 0; text-align: center; opacity: .8; }
.hd-room [data-room-no] { opacity: .55; margin-right: 6px; }
.hd-nav { display: flex; justify-content: flex-end; align-items: center; gap: 4px; }
.hd-nav a, .hd-nav button { background: none; border: 0; padding: 12px 10px; text-decoration: none; letter-spacing: .09em; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.hd-nav a:hover, .hd-nav button:hover { text-decoration: underline; text-underline-offset: 4px; }
.count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border: 1px solid currentColor; font-size: 10px; padding: 0 4px; }
.count.bump { animation: bump .6s var(--ease); }
@keyframes bump { 30% { transform: translateY(-5px); background: currentColor; } }
.hd-index { border: 1px solid currentColor !important; padding: 8px 14px !important; min-height: 36px !important; margin-left: 6px; }

/* ════════════ 00 THRESHOLD ════════════ */
.threshold { --p: 0; position: relative; height: 210svh; background: var(--soot); }
.t-scene {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  --door-w: clamp(210px, 23vw, 400px);
  --door-top: 27svh;
  --floor: 84svh;
  --door-h: calc(var(--floor) - var(--door-top));
}
.t-beyond, .t-wall, .t-light, .t-fg { position: absolute; inset: 0; will-change: transform; }
.t-beyond { transform-origin: 50% 56%; transform: scale(calc(1 + var(--p) * .45)); }
.t-wall { transform-origin: 50% 56%; transform: scale(calc(1 + var(--p) * 1.9)); }
.t-fg { transform-origin: 50% 56%; transform: scale(calc(1 + var(--p) * 2.6)); }

/* the bright room through the door */
.t-beyond-wall {
  position: absolute; inset: 0 0 calc(100svh - var(--floor) - 4svh) 0;
  background-color: #e9e3d6;
  background-image: radial-gradient(60% 70% at 38% 30%, rgba(255,252,242,.9), rgba(255,252,242,0) 70%), var(--tex-trowel), var(--tex-plaster);
}
.t-beyond-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(100svh - var(--floor) + 4svh);
  background: linear-gradient(180deg, #a9a399, #cfc8bb 60%, #bcb5a8), var(--tex-speck);
}
.t-hang { position: absolute; left: 50%; top: calc(var(--door-top) + 9svh); width: min(calc(var(--door-w) * .78), 300px); translate: -50% 0; transform-origin: 50% -30svh; animation: sway 9s ease-in-out infinite alternate; }
.t-garment { width: 100%; filter: drop-shadow(14px 24px 18px rgba(50,40,28,.32)); }
.wire { position: absolute; bottom: 92%; width: 1px; height: 60svh; background: linear-gradient(rgba(30,28,25,.0), rgba(30,28,25,.55) 30%); }
.wire-l { left: 26%; } .wire-r { right: 26%; }
@keyframes sway { from { transform: rotate(-.7deg); } to { transform: rotate(.7deg); } }

/* front wall with the doorway cut out */
.slab-face, .t-wall::before {
  content: ''; position: absolute; inset: 0;
  background-color: #a9a49b;
  background-image: linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,0) 40%, rgba(0,0,0,.18)), var(--tex-speck), var(--tex-mottle), var(--tex-board);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% 100% no-repeat, linear-gradient(#000 0 0) 50% var(--door-top) / var(--door-w) var(--door-h) no-repeat;
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) 0 0 / 100% 100% exclude no-repeat, linear-gradient(#000 0 0) 50% var(--door-top) / var(--door-w) var(--door-h) no-repeat;
}
.slab { display: none; }
.slab-top { display: block; position: absolute; inset: 0 0 auto; height: var(--door-top); text-align: center; pointer-events: none; }
.inscription {
  position: absolute; left: 0; right: 0; top: 7svh;
  font-weight: 750; font-variation-settings: 'wdth' 150; font-size: clamp(36px, 5.4vw, 112px); line-height: 1; letter-spacing: .16em; padding-left: .2em;
  color: rgba(52,47,40,.34); mix-blend-mode: multiply;
  -webkit-mask: var(--erode); mask: var(--erode);
  text-shadow: 0 1px 0 rgba(255,255,255,.18);
}
.inscription-sub { position: absolute; left: 0; right: 0; bottom: 2.4svh; font-family: var(--mono); font-size: 10px; letter-spacing: .6em; color: rgba(30,28,25,.55); }
/* wall thickness inside the opening */
.reveal-edge { position: absolute; top: var(--door-top); height: var(--door-h); width: calc(var(--door-w) * .06); }
.reveal-l { left: calc(50% - var(--door-w) / 2); background: linear-gradient(90deg, #5b5750, #8d8880); }
.reveal-r { right: calc(50% - var(--door-w) / 2); background: linear-gradient(270deg, #3f3c37, #77736b); }
.slab-top::after { content: ''; position: absolute; left: calc(50% - var(--door-w) / 2); width: var(--door-w); bottom: 0; height: 2.2svh; translate: 0 100%; background: linear-gradient(#45423c, rgba(69,66,60,0)); pointer-events: none; }
.t-floor {
  position: absolute; left: 0; right: 0; top: var(--floor); bottom: 0;
  background: linear-gradient(180deg, #6f6b64, #8b867e 40%, #77736c), var(--tex-speck);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

/* daylight */
.t-light { pointer-events: none; mix-blend-mode: screen; opacity: calc(.75 + var(--p) * .25); }
.beam {
  position: absolute; inset: -10% -10% 0 -10%;
  background: linear-gradient(180deg, rgba(255,246,222,.36), rgba(255,246,222,.06) 75%);
  clip-path: polygon(9% 0, 21% 0, 63% 100%, 41% 100%);
  filter: blur(22px); animation: drift 22s ease-in-out infinite alternate;
}
.dust { position: absolute; inset: 0; }
.dust i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgba(255,248,230,.75); left: calc(18% + var(--x) * 1%); top: calc(10% + var(--y) * 1%); animation: mote var(--t) linear infinite; animation-delay: var(--d); opacity: 0; }
.dust i:nth-child(1) { --x: 4; --y: 10; --t: 14s; --d: -2s; } .dust i:nth-child(2) { --x: 9; --y: 30; --t: 18s; --d: -9s; }
.dust i:nth-child(3) { --x: 15; --y: 18; --t: 16s; --d: -4s; } .dust i:nth-child(4) { --x: 20; --y: 46; --t: 20s; --d: -12s; }
.dust i:nth-child(5) { --x: 24; --y: 60; --t: 15s; --d: -6s; } .dust i:nth-child(6) { --x: 30; --y: 38; --t: 19s; --d: -1s; }
.dust i:nth-child(7) { --x: 12; --y: 56; --t: 17s; --d: -14s; } .dust i:nth-child(8) { --x: 27; --y: 70; --t: 21s; --d: -3s; }
.dust i:nth-child(9) { --x: 6; --y: 40; --t: 13s; --d: -8s; } .dust i:nth-child(10) { --x: 34; --y: 76; --t: 18s; --d: -11s; }
.dust i:nth-child(11) { --x: 18; --y: 6; --t: 22s; --d: -5s; } .dust i:nth-child(12) { --x: 38; --y: 64; --t: 16s; --d: -7s; }
.dust i:nth-child(13) { --x: 10; --y: 22; --t: 19s; --d: -15s; } .dust i:nth-child(14) { --x: 31; --y: 52; --t: 14s; --d: -10s; }
@keyframes drift { from { transform: translateX(-1.5%) skewX(-1deg); opacity: .85; } to { transform: translateX(2%) skewX(1deg); opacity: 1; } }
@keyframes mote { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 85% { opacity: .6; } 100% { transform: translate(40px, -60px); opacity: 0; } }

/* out-of-focus columns closest to the visitor */
.col { position: absolute; top: -5%; bottom: -5%; width: 11vw; filter: blur(2px); background: linear-gradient(90deg, #2a2724, #5b5751 45%, #34312d); box-shadow: 0 0 60px rgba(0,0,0,.5); }
.col-l { left: -6vw; translate: calc(var(--p) * -24vw) 0; }
.col-r { right: -6vw; translate: calc(var(--p) * 24vw) 0; }

/* exhibition plaque */
.plaque { position: absolute; z-index: 5; right: calc(50% - var(--door-w) / 2 - min(30vw, 330px)); top: calc(var(--door-top) + 22svh); width: min(25vw, 280px);
  background: var(--chalk) var(--tex-paper); padding: 18px 18px 16px; box-shadow: 0 1px 0 rgba(0,0,0,.05), 6px 10px 22px -10px rgba(0,0,0,.6);
  opacity: calc(1 - var(--p) * 3); translate: 0 calc(var(--p) * -60px); }
.plaque-k { margin: 0 0 10px; color: var(--ink-2); }
.plaque-t { font-family: var(--serif); font-size: 28px; line-height: 1.02; margin-bottom: 10px; }
.plaque-d { font-size: 14px; line-height: 1.45; margin: 0 0 14px; color: var(--ink-2); }
.plaque-go { display: inline-flex; gap: 8px; padding: 10px 0 2px; border-top: 1px solid var(--ink); width: 100%; text-decoration: none; justify-content: space-between; }
.plaque-go:hover { color: var(--brown); }
.t-coords { position: absolute; left: var(--gut); bottom: 3svh; margin: 0; color: rgba(239,236,230,.55); opacity: calc(1 - var(--p) * 3); }
/* stepping through: the scene washes into the lit room */
.t-scene::after { content: ''; position: absolute; inset: 0; background: #e2dccf; opacity: clamp(0, calc((var(--p) - .62) * 2.8), 1); pointer-events: none; }

/* ════════════ shared room scaffolding ════════════ */
.room-head { padding: clamp(80px, 14vh, 160px) var(--gut) clamp(40px, 7vh, 80px); position: relative; z-index: 1; }
.room-k { margin: 0 0 18px; color: var(--ink-2); display: flex; gap: 14px; align-items: center; }
.room-k::before { content: ''; width: 18px; height: 18px; background:
  linear-gradient(currentColor 0 0) 50% 0 / 1px 100% no-repeat, linear-gradient(currentColor 0 0) 0 50% / 100% 1px no-repeat; opacity: .8; }
.room-sub { margin: 18px 0 0; color: var(--ink-2); }
.room-head-split { display: grid; grid-template-columns: 1fr minmax(260px, 420px); gap: 40px; align-items: end; }

/* museum label */
.museum-label { background: var(--chalk) var(--tex-paper); padding: 16px 18px 14px; width: min(100%, 290px); box-shadow: 0 1px 1px rgba(0,0,0,.06), 4px 8px 18px -12px rgba(0,0,0,.45); position: relative; }
.label-k { margin: 0 0 8px; color: var(--ink-2); }
.label-t { font-family: var(--serif); font-size: 23px; line-height: 1.05; margin-bottom: 8px; }
.label-m { font-size: 13.5px; line-height: 1.45; margin: 0 0 10px; color: var(--ink-2); }
.label-p { margin: 0 0 6px; color: var(--ink); }
.label-row { display: flex; gap: 16px; margin: 0; }
.label-go { background: none; border: 0; border-top: 1px solid currentColor; padding: 10px 0 2px; min-height: 40px; text-align: left; width: 100%; }
.label-row .label-go { width: auto; flex: 1; }
.label-go:hover { color: var(--brown); }
.sample { display: block; margin-top: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--rust); }

/* reveal choreography: work first, label after */
.js .reveal { clip-path: inset(0 0 calc(100% - 1px) 0); transition: clip-path 1.25s var(--ease-heavy); }
.js .reveal[data-reveal="side"] { clip-path: inset(0 calc(100% - 1px) 0 0); }
.js .reveal.in { clip-path: inset(-20% -20% -20% -20%); }
.js [data-label] { opacity: 0; translate: 0 10px; transition: opacity .7s ease .55s, translate .9s var(--ease) .55s; }
.js [data-label].in { opacity: 1; translate: 0 0; }

/* ════════════ 01 EXHIBITION ════════════ */
.exhibition { background: #e2dccf; position: relative; }
.bay { display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--gut); padding: 0 var(--gut) clamp(80px, 14vh, 180px); align-items: end; }
.bay-wall { position: relative; overflow: hidden; }
.bay-suspend .bay-wall { grid-column: 1 / span 9; height: min(112svh, 1020px); }
.bay-suspend .museum-label { grid-column: 10 / span 3; margin-bottom: 14vh; }
.bay-lean .bay-wall { grid-column: 4 / span 9; grid-row: 1; height: min(96svh, 880px); }
.bay-lean .museum-label { grid-column: 1 / span 3; grid-row: 1; margin-bottom: 22vh; justify-self: end; }
.bay-plinth .bay-wall { grid-column: 2 / span 7; height: min(100svh, 900px); }
.bay-plinth .museum-label { grid-column: 9 / span 3; margin-bottom: 30vh; }

.bay-suspend .bay-wall::after { content: ''; position: absolute; inset: 0; background: radial-gradient(42% 52% at 50% 44%, rgba(255,250,236,.5), transparent 70%); mix-blend-mode: soft-light; pointer-events: none; }
.rod { position: absolute; top: 9%; left: 18%; right: 18%; height: 7px; border-radius: 4px;
  background: linear-gradient(180deg, var(--oxide-lt), var(--oxide) 55%, #3a443e); box-shadow: 0 12px 14px -8px rgba(0,0,0,.35); }
.rod::before, .rod::after { content: ''; position: absolute; top: -9%; width: 3px; height: 900%; translate: 0 -100%; background: linear-gradient(#3a443e, var(--oxide)); }
.rod::before { left: 6%; } .rod::after { right: 6%; }
.suspended { position: absolute; left: 50%; top: 18%; width: min(54%, 620px); translate: -50% 0; transform-origin: 50% -12%; }
.suspended img { width: 100%; filter: drop-shadow(26px 40px 28px rgba(52,40,26,.38)); animation: sway 8s ease-in-out infinite alternate; transform-origin: 50% -12%; }
.suspended .wire { height: 12vh; bottom: 96%; }
.suspended .wire-l { left: 30%; } .suspended .wire-r { right: 30%; }
.wall-num { position: absolute; left: 4%; bottom: -3%; font-weight: 900; font-variation-settings: 'wdth' 150; font-size: clamp(120px, 20vw, 320px); line-height: .8; color: rgba(60,50,40,.07); -webkit-mask: var(--erode); mask: var(--erode); }

/* the full rail: a freestanding studio rack */
.bay-rack .bay-wall { grid-column: 1 / span 9; height: min(76svh, 700px); display: grid; align-items: start; }
.rack-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 15%; background: linear-gradient(180deg, #8a857c, #a49f95 30%, #948f86), var(--tex-speck); box-shadow: 0 -1px 0 rgba(255,255,255,.18); }
.rack { --rail-y: 12%; position: absolute; left: 4%; right: 4%; top: 0; bottom: 9%; z-index: 1; }
.rack-post { position: absolute; top: var(--rail-y); bottom: 3%; width: 7px; border-radius: 3px; background: linear-gradient(90deg, #3a443e, var(--oxide-lt) 45%, var(--oxide) 70%, #39423d); box-shadow: 4px 0 8px -3px rgba(0,0,0,.35); }
.rack-post-l { left: 1%; } .rack-post-r { right: 1%; }
.rack-base { position: absolute; left: -1%; right: -1%; bottom: 3%; height: 9px; border-radius: 4px; background: linear-gradient(180deg, var(--oxide-lt), var(--oxide) 60%, #39423d); box-shadow: 0 10px 14px -6px rgba(0,0,0,.45); }
.rack-base i { position: absolute; top: 100%; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #555b57, #1f2321 70%); }
.rack-base i:nth-child(1) { left: 1%; } .rack-base i:nth-child(2) { left: 4%; } .rack-base i:nth-child(3) { right: 4%; } .rack-base i:nth-child(4) { right: 1%; }
.rack-rail { --rw: clamp(130px, 13.4vw, 240px);
  list-style: none; margin: 0; padding: 0 calc(var(--rw) * .32); position: absolute; left: 0; right: 0; top: var(--rail-y);
  display: flex; justify-content: center; align-items: flex-start; }
.rack-rail::before { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 9px; border-radius: 5px; z-index: 3;
  background: linear-gradient(180deg, var(--oxide-lt), var(--oxide) 55%, #39423d); box-shadow: 0 10px 12px -8px rgba(0,0,0,.4); pointer-events: none; }
.rk { flex: 0 0 auto; width: var(--rw); margin: 0 calc(var(--rw) * -.31); position: relative; z-index: var(--i);
  translate: var(--sp, 0px) 0; transition: translate .55s var(--ease); }
.rk-hoodie { width: calc(var(--rw) * 1.14); z-index: 20; }
.rk-shorts { width: calc(var(--rw) * .8); margin: 0 calc(var(--rw) * -.1); }
.rk.is-reach { z-index: 30; }
.rk-hit { all: unset; position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; cursor: pointer; transform-origin: 50% 8px; will-change: transform; }
.rk-hit:focus-visible .rk-img { outline: 2px solid var(--ink); outline-offset: 4px; }
.rk-hook { width: 22px; height: 34px; flex: none; position: relative; z-index: 4; overflow: visible; }
.rk-hook path { fill: none; stroke: #4d5751; stroke-width: 2.4; stroke-linecap: round; }
.rk-img { width: 100%; margin-top: -6px; position: relative; z-index: 2; filter: drop-shadow(10px 18px 14px rgba(50,40,28,.32)); transition: scale .55s var(--ease), translate .55s var(--ease), filter .55s;
  transform-origin: 50% 0; animation: drape var(--dur, 7s) ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.83s); }
.rk:nth-child(3n) .rk-img { --dur: 8.5s; } .rk:nth-child(3n+1) .rk-img { --dur: 6.2s; }
@keyframes drape { from { rotate: -.5deg; } to { rotate: .5deg; } }
.rk.is-reach .rk-img { scale: 1.06; translate: 0 6px; filter: drop-shadow(18px 30px 22px rgba(50,40,28,.38)); }
.rk-clipbar { position: relative; z-index: 4; width: 76%; height: 5px; margin-top: -2px; border-radius: 3px; background: linear-gradient(180deg, var(--oxide-lt), var(--oxide)); }
.rk-clipbar::before, .rk-clipbar::after { content: ''; position: absolute; top: 2px; width: 9px; height: 18px; border-radius: 2px; background: linear-gradient(90deg, #39423d, var(--oxide-lt), #39423d); }
.rk-clipbar::before { left: 6%; } .rk-clipbar::after { right: 6%; }
.rk-shorts .rk-img { margin-top: 4px; }
/* swing tag: drops down when you reach for a piece */
.rk-tag { position: absolute; z-index: 5; left: 58%; top: 56%; display: grid; gap: 2px; width: max-content; max-width: 150px;
  background: #d9c79c var(--tex-paper); padding: 9px 10px 8px; box-shadow: 2px 4px 8px -3px rgba(0,0,0,.4);
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%, 0 14%); opacity: 0; translate: 0 -10px; rotate: 7deg; transform-origin: 10% 0;
  transition: opacity .3s, translate .5s var(--ease), rotate .6s var(--ease); pointer-events: none; }
.rk-tag b { font-family: var(--serif); font-weight: 400; font-size: 14px; line-height: 1.05; }
.rk-tag .mono { font-size: 9px; color: #4b3f2c; }
.rk.is-reach .rk-tag { opacity: 1; translate: 0 0; rotate: -3deg; }
.bay-lean .floor-line { position: absolute; left: 0; right: 0; bottom: 0; height: 17%; background: linear-gradient(180deg, #7d7870, #9a958c 30%, #8a857d), var(--tex-speck); box-shadow: 0 -1px 0 rgba(255,255,255,.15); }
.lean { position: absolute; z-index: 1; margin: 0; bottom: 14%; left: 10%; width: 46%; transform-origin: 50% 100%; transform: perspective(1400px) rotateX(5deg) rotate(-1.4deg); }
.lean-frame { background: #1d1b18; padding: 12px; box-shadow: 34px 30px 46px -18px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.06); }
.lean-frame img { background: var(--bone); padding: 8%; aspect-ratio: 1; width: 100%; object-fit: contain; }
.lean::after { content: ''; position: absolute; left: 4%; right: -6%; bottom: -3%; height: 5%; background: rgba(0,0,0,.35); filter: blur(8px); z-index: -1; }
.lean-small { left: auto; right: 12%; width: 22%; transform: perspective(1400px) rotateX(4deg) rotate(1.8deg); }
.lean-small .lean-frame { background: linear-gradient(135deg, #a9b0aa, #6f7a73); padding: 6px; }

.bay-plinth .bay-wall { display: grid; place-items: end center; }
.plinth-wrap { position: relative; width: min(52%, 300px); margin-bottom: 0; display: grid; justify-items: center; }
.statue { width: 78%; margin-bottom: -6px; position: relative; z-index: 2; transition: opacity .6s, translate .6s var(--ease); }
.statue .devil-svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(12px 10px 10px rgba(60,50,36,.25)); }
.statue.is-awake .devil-svg { animation: hopoff .9s var(--ease) forwards; }
@keyframes hopoff { 30% { transform: translateY(-30px) rotate(-6deg); } 100% { transform: translateY(40px) translateX(160px) rotate(12deg); opacity: 0; } }
.statue.is-gone { opacity: 0; }
.plinth-note { position: absolute; bottom: calc(clamp(220px, 40svh, 380px) + 6px); left: 50%; translate: -50% 0; margin: 0; z-index: 1; background: var(--chalk) var(--tex-paper); padding: 6px 9px; font-size: 9.5px; line-height: 1.4; text-align: center; box-shadow: 2px 3px 6px -2px rgba(0,0,0,.3); opacity: 0; transition: opacity .6s .3s; rotate: -2deg; }
.statue.is-gone + .plinth-note { opacity: 1; }
.plinth { position: relative; width: 100%; height: clamp(220px, 40svh, 380px); }
.plinth-top { position: absolute; inset: 0 0 auto; height: 18px; background: linear-gradient(180deg, #d7d1c5, #bdb7ab); clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%); }
.plinth-face { position: absolute; inset: 18px 0 0; display: grid; place-items: end start; padding: 14px; color: rgba(30,28,25,.55);
  background-color: #b9b3a9; background-image: linear-gradient(90deg, rgba(0,0,0,.08), transparent 30%, transparent 70%, rgba(0,0,0,.16)), var(--tex-speck), var(--tex-mottle); }

/* ════════════ 02 COLLECTION ════════════ */
.collection { position: relative; background: var(--bone); padding-bottom: clamp(80px, 14vh, 180px); overflow: hidden; }
.collection::before { content: ''; position: absolute; inset: 0; background-image: var(--tex-plaster); opacity: .45; pointer-events: none; }
.col-intro p { margin: 0 0 22px; max-width: 38ch; color: var(--ink-2); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters button { background: none; border: 1px solid rgba(34,31,27,.35); padding: 10px 14px; min-height: 40px; }
.filters button[aria-pressed="true"] { background: var(--ink); color: var(--chalk); border-color: var(--ink); }
.filters span { opacity: .55; margin-left: 4px; }
.wall-lettering { position: absolute; top: 5vh; right: var(--gut); font-weight: 900; font-variation-settings: 'wdth' 150; font-size: clamp(80px, 12vw, 230px); line-height: .8; letter-spacing: .02em; color: rgba(70,58,46,.06); white-space: nowrap; pointer-events: none; -webkit-mask: var(--erode); mask: var(--erode); }

.works { list-style: none; margin: 0; padding: 0 var(--gut); display: flex; flex-wrap: wrap; align-items: flex-start; position: relative; }
.work { --lit: 0; width: var(--w); margin-left: var(--ml); margin-top: calc(var(--mt) + 120px); position: relative; }
/* hung from the ceiling: a wire running up out of frame and a small oxidized clamp */
.w-wire { position: absolute; left: 50%; top: -120px; height: 120px; width: 1px; background: linear-gradient(rgba(40,36,30,0), rgba(40,36,30,.6) 55%); pointer-events: none; }
.w-wire i { position: absolute; left: 50%; bottom: -3px; width: 30px; height: 8px; translate: -50% 0; border-radius: 2px; background: linear-gradient(180deg, var(--oxide-lt), var(--oxide) 60%, #3a443e); box-shadow: 0 3px 4px -2px rgba(0,0,0,.4); }
.work-hit { transform-origin: 50% -120px; will-change: transform; }
/* raking light: the piece in front of you is lit, the rest of the wall falls back */
.mount::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: #2b2721; mix-blend-mode: multiply; opacity: calc((1 - var(--lit)) * .32); transition: opacity .4s ease; }
.work-label > * { opacity: calc(.42 + var(--lit) * .58); transition: opacity .4s ease; }
.work.is-focus .work-label { translate: 8px 0; }
.work-label { transition: translate .7s var(--ease); }
.rake { position: absolute; left: -10%; right: -10%; top: 0; height: 130vh; z-index: 2; pointer-events: none; will-change: transform;
  background: radial-gradient(42% 34% at 46% 50%, rgba(255,247,226,.55), rgba(255,247,226,.12) 55%, transparent 75%); mix-blend-mode: soft-light; }

/* filmstrip index */
.strip { position: fixed; z-index: 45; right: 14px; top: 50%; translate: 24px -50%; opacity: 0; visibility: hidden; pointer-events: none;
  background: #151413; padding: 10px 7px 12px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); transition: opacity .5s, translate .7s var(--ease), visibility 0s .7s; }
.strip.is-on { opacity: 1; visibility: visible; pointer-events: auto; translate: 0 -50%; transition: opacity .5s, translate .7s var(--ease); }
.strip::before, .strip::after { content: ''; position: absolute; top: 0; bottom: 0; width: 4px; background: repeating-linear-gradient(180deg, transparent 0 5px, rgba(226,220,207,.25) 5px 9px); }
.strip::before { left: 1px; } .strip::after { right: 1px; }
.strip-k { margin: 0 0 8px; color: #c9a77a; font-size: 8px; text-align: center; letter-spacing: .12em; }
.strip-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; position: relative; }
.strip-list button { display: block; position: relative; width: 38px; border: 0; padding: 0; background: var(--bone); cursor: pointer; opacity: .55; transition: opacity .3s; }
.strip-list button:hover, .strip-list button[aria-current] { opacity: 1; }
.strip-list img { width: 100%; aspect-ratio: 1; object-fit: cover; mix-blend-mode: multiply; }
.strip-list span { position: absolute; right: calc(100% + 6px); top: 50%; translate: 0 -50%; font-family: var(--mono); font-size: 9px; color: var(--ink); background: var(--chalk); padding: 2px 5px; opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap; }
.strip-list button:hover span, .strip-list button:focus-visible span { opacity: 1; }
.strip-ring { position: absolute; left: 3px; top: 0; width: 46px; height: 46px; border: 2.5px solid #b5452a; border-radius: 47% 53% 44% 56%; rotate: -8deg; pointer-events: none; transition: transform .6s var(--ease); }
.counter { position: fixed; z-index: 45; right: 12px; top: 64px; margin: 0; padding: 6px 10px; background: var(--soot); color: var(--chalk); opacity: 0; translate: 0 -8px; transition: opacity .4s, translate .5s var(--ease); pointer-events: none; display: none; }
.counter.is-on { opacity: 1; translate: 0 0; }
body.has-modal .strip, body.has-modal .counter { visibility: hidden; }
.work[hidden] { display: none; }
.work-hit { all: unset; display: block; width: 100%; cursor: pointer; }
.work-hit:focus-visible .mount { outline: 2px solid var(--ink); outline-offset: 4px; }
.mount { position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden; }
.mount img { width: 92%; aspect-ratio: 1; object-fit: cover; mix-blend-mode: multiply; transition: transform 1.1s var(--ease), filter 1.1s; }
.mount::after { content: ''; position: absolute; inset: 0; background: radial-gradient(70% 55% at var(--lx, 30%) 20%, rgba(255,252,240,.4), transparent 70%); mix-blend-mode: soft-light; transition: --lx 1s; pointer-events: none; }
@media (hover: hover) { .work-hit:hover .mount img { transform: scale(1.035) translateY(-1%); } }
/* fine registration marks at the mount corners */
.reg { position: absolute; inset: 10px; pointer-events: none; opacity: .5;
  background:
    linear-gradient(var(--ink) 0 0) 0 6px / 13px 1px, linear-gradient(var(--ink) 0 0) 6px 0 / 1px 13px,
    linear-gradient(var(--ink) 0 0) 100% 6px / 13px 1px, linear-gradient(var(--ink) 0 0) calc(100% - 6px) 0 / 1px 13px,
    linear-gradient(var(--ink) 0 0) 0 calc(100% - 6px) / 13px 1px, linear-gradient(var(--ink) 0 0) 6px 100% / 1px 13px,
    linear-gradient(var(--ink) 0 0) 100% calc(100% - 6px) / 13px 1px, linear-gradient(var(--ink) 0 0) calc(100% - 6px) 100% / 1px 13px;
  background-repeat: no-repeat; }
.work-no { position: absolute; top: 14px; left: 26px; z-index: 1; }
.work-label { margin-top: 14px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: start; max-width: 340px; }
.work-label .label-k { grid-column: 1 / -1; margin: 0 0 2px; }
.work-label .label-t { font-size: 20px; margin: 0; }
.work-label .label-m { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13px; }
.work-label .price { font-family: var(--mono); font-size: 12px; padding-top: 6px; }
.dots { display: flex; flex-wrap: wrap; gap: 4px; grid-column: 1 / -1; margin-top: 8px; }
.dot { width: 28px; height: 28px; border: 0; padding: 0; background: none; display: grid; place-items: center; }
.dot::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }
.dot[aria-pressed="true"]::before { box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 0 0 2px var(--bone), 0 0 0 3px var(--ink); }

/* ════════════ 03 STUDIO TABLE ════════════ */
.studio { position: relative; background: linear-gradient(180deg, var(--bone), #cfc8bb 30%); padding-bottom: clamp(60px, 10vh, 120px); }
.table {
  position: relative; margin: 0 var(--gut); height: clamp(760px, 92vh, 900px);
  background-color: #7b837e;
  background-image: radial-gradient(80% 60% at 30% 20%, rgba(255,255,255,.18), transparent 60%), var(--tex-speck), var(--tex-mottle), linear-gradient(135deg, #8a938d, #69716c);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), inset 0 0 80px rgba(0,0,0,.25), 0 30px 60px -30px rgba(0,0,0,.5);
}
.table::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 7px); pointer-events: none; }
.table-items { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.item { position: absolute; transform: rotate(var(--r)); transition: transform .7s var(--ease), filter .7s; filter: drop-shadow(4px 6px 5px rgba(0,0,0,.28)); z-index: 1; }
@media (hover: hover) { .item:not(.is-lifted):hover { transform: rotate(var(--r)) translateY(-6px); filter: drop-shadow(8px 16px 14px rgba(0,0,0,.3)); } }
.item.is-lifted { z-index: 20; transform: rotate(0deg) scale(var(--lift, 1.22)) translate(var(--lx2, 0), var(--ly2, 0)); filter: drop-shadow(26px 44px 36px rgba(0,0,0,.42)); }
.lift { position: absolute; inset: 0; z-index: 3; background: none; border: 0; padding: 0; cursor: zoom-in; }
.item.is-lifted .lift { cursor: zoom-out; inset: auto 0 0 auto; width: 44px; height: 44px; }
.item.is-lifted .lift::after { content: '✕'; font-family: var(--mono); font-size: 12px; display: grid; place-items: center; width: 100%; height: 100%; background: var(--chalk); border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.25); translate: 40% 40%; }

.item-contact { left: 4%; top: 7%; width: 36%; --lx2: 18%; --ly2: 10%; }
.item-sketch { left: 44%; top: 5%; width: 25%; --lx2: 0; --ly2: 14%; }
.item-print { left: 74%; top: 9%; width: 19%; --lift: 1.5; --lx2: -40%; --ly2: 20%; }
.item-swatch { left: 8%; top: 59%; width: 22%; --lx2: 20%; --ly2: -20%; }
.item-tag { left: 36%; top: 62%; width: 12%; --lift: 1.6; --lx2: 20%; --ly2: -25%; }
.item-flat { --lx2: -10%; --ly2: -18%; }

.paper { background: #ece6da var(--tex-paper); position: relative; }
.contact { background: #151413; padding: 12px 12px 14px; color: #c9a77a; }
.contact-k { margin: 0 0 8px; color: #b48d5c; font-size: 9.5px; }
.contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.frame { position: relative; border: 0; padding: 0 0 14px; background: none; text-align: left; }
.frame img { aspect-ratio: 1; object-fit: cover; width: 100%; filter: grayscale(.25) contrast(1.05); }
.frame span { position: absolute; left: 0; bottom: 0; font-family: var(--mono); font-size: 8.5px; letter-spacing: .1em; color: #c9a77a; }
.frame.circled::after { content: ''; position: absolute; inset: -10% -14% 4% -12%; border: 2.5px solid #b5452a; border-radius: 48% 52% 46% 54%; transform: rotate(-6deg); opacity: .9; pointer-events: none; }
.item:not(.is-lifted) .frame { pointer-events: none; }

.sketch { padding: 14px; aspect-ratio: 3 / 4; }
.sketch-art { width: 62%; margin: 8% auto 0; filter: url(#pencil); opacity: .85; }
.sketch-art .devil-svg { width: 100%; height: auto; overflow: visible; }
.sketch-art .d-shadow { display: none; }
.note { position: absolute; margin: 0; font-family: var(--hand); font-size: 21px; line-height: .95; color: #4b463f; }
.n1 { top: 5%; right: 6%; transform: rotate(6deg); } .n2 { top: 34%; left: 5%; transform: rotate(-8deg); }
.n3 { bottom: 13%; right: 5%; transform: rotate(-4deg); } .n4 { bottom: 4%; left: 6%; font-size: 18px; }

.photo { margin: 0; background: #f7f5f0; padding: 9px 9px 30px; position: relative; }
.photo img { width: 100%; filter: sepia(.25) contrast(.95); }
.photo figcaption { position: absolute; left: 10px; bottom: 9px; font-size: 9px; color: var(--ink-2); }
.stamp { position: absolute; right: -10px; bottom: 26px; border: 2px solid rgba(138,86,54,.8); color: rgba(138,86,54,.85); padding: 5px 8px; font-size: 9px; line-height: 1.25; transform: rotate(-14deg); border-radius: 3px; mix-blend-mode: multiply; -webkit-mask: var(--erode); mask: var(--erode); }

.swatch-card { padding: 12px; }
.swatch-card > p { margin: 0 0 10px; color: var(--ink-2); font-size: 9.5px; }
.swatches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.swatches li { aspect-ratio: 1; background: var(--c); position: relative;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 2px, transparent 2px 5px), repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 5px);
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 9px 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 9px 51% repeat-x;
          mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 9px 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 9px 51% repeat-x; }
.swatches span { position: absolute; left: 6px; bottom: 8px; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: #fff; mix-blend-mode: difference; }

.tag { background: #d6c194; background-image: var(--tex-paper); padding: 34px 12px 16px; clip-path: polygon(22% 0, 78% 0, 100% 12%, 100% 100%, 0 100%, 0 12%); text-align: center; }
.tag p { margin: 0 0 4px; font-size: 9px; color: #4b3f2c; }
.tag .tag-no { font-family: var(--serif); font-size: 34px; letter-spacing: 0; text-transform: none; margin: 8px 0; color: #2f271b; }
.tag-hole { position: absolute; top: 12px; left: 50%; width: 12px; height: 12px; translate: -50% 0; border-radius: 50%; background: #69716c; box-shadow: 0 0 0 3px #bfa977; }

.flat { padding: 14px 14px 30px; }
.flat-svg { width: 100%; filter: url(#pencil); }
.flat-svg path { fill: none; stroke: #4b463f; stroke-width: 1.4; stroke-linejoin: round; }
.f1 { top: 18%; right: 5%; transform: rotate(4deg); } .f2 { top: 52%; left: 4%; transform: rotate(-6deg); } .f3 { bottom: 12%; right: 10%; }
.flat-k { position: absolute; left: 14px; bottom: 10px; margin: 0; color: var(--ink-2); font-size: 9px; }

/* embroidery hoop */
.item-hoop { left: 80%; top: 54%; width: 17%; --lift: 1.45; --lx2: -35%; --ly2: -22%; }
.hoop { position: relative; aspect-ratio: 1; border-radius: 50%; padding: 9%;
  background: radial-gradient(circle, transparent 60%, rgba(0,0,0,.25) 61%, transparent 64%), conic-gradient(from 20deg, #c39565, #9c6d41, #c99d6c, #a77749, #c39565);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.18), inset 0 0 0 9px rgba(255,255,255,.07); }
.hoop-cloth { width: 100%; height: 100%; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 4px;
  background-color: #e7dfcf; background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px), var(--tex-paper);
  box-shadow: inset 0 3px 8px rgba(0,0,0,.25); }
.hoop-bb { --thread: #d81fe0; font-size: clamp(34px, 3.6vw, 60px); letter-spacing: .02em; }
.hoop-sub { --thread: #6a4e3b; font-size: clamp(14px, 1.3vw, 20px); letter-spacing: .12em; }
.hoop-screw { position: absolute; top: -5%; left: 50%; width: 14%; height: 9%; translate: -50% 0; background: linear-gradient(90deg, #8a8f8b, #d4d8d4, #7d827e); border-radius: 3px; }
.needle { position: absolute; right: -18%; bottom: 22%; width: 46%; height: 2px; background: linear-gradient(90deg, #d81fe0 0 55%, #c8ccc8 55%); rotate: -32deg; border-radius: 2px; }
.item-flat { left: 51%; top: 54%; width: 27%; }

/* ════════════ 04 STUDIO OFFICE ════════════ */
.office { position: relative; color: var(--chalk); background: linear-gradient(180deg, #cfc8bb 0, var(--soot-2) 22vh, var(--soot) 60vh); overflow: hidden; }
.office .room-k { color: rgba(239,236,230,.6); }
.office .room-head { padding-top: clamp(140px, 24vh, 260px); }
.lamp { position: absolute; left: 50%; top: 30vh; width: 120vw; height: 90vh; translate: -50% 0; background: radial-gradient(40% 45% at 50% 40%, rgba(255,214,160,.13), transparent 70%); pointer-events: none; }
.office-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); padding: 0 var(--gut) clamp(60px, 10vh, 120px); max-width: 1200px; }
.office-card { border-top: 1px solid rgba(239,236,230,.3); padding-top: 18px; }
.office-card h3 { margin: 0 0 14px; font-size: 12px; }
.office-card p { color: rgba(239,236,230,.78); margin: 0 0 18px; max-width: 40ch; }
.pending { color: #d1a77d !important; }
.txt-link { color: var(--chalk); text-underline-offset: 3px; }
.consent { font-size: 13px !important; color: rgba(239,236,230,.62) !important; margin: 0 0 14px !important; }
.consent a { color: inherit; }
.ft-legal { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.pd-terms { max-width: 420px; display: grid; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.pd-terms p { margin: 0; }
.pd-terms a { color: var(--ink); text-underline-offset: 3px; }
.pd-care summary { cursor: pointer; padding: 8px 0; min-height: 40px; display: flex; align-items: center; }
.pd-care ul { margin: 0; padding-left: 1.1em; }
.cart-note { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.cart-note a { color: var(--ink); }
.dir-foot a { color: inherit; padding: 12px 0; text-decoration: none; font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; align-self: center; }
.field { display: grid; gap: 6px; margin-bottom: 16px; max-width: 420px; }
.field input { font: 17px var(--sans); color: var(--chalk); background: transparent; border: 0; border-bottom: 1px solid rgba(239,236,230,.5); padding: 10px 0; border-radius: 0; }
.field input:focus-visible { outline: none; border-bottom-color: var(--chalk); box-shadow: 0 1px 0 var(--chalk); }
.form-msg { min-height: 1.5em; color: #d1a77d; margin: 14px 0 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 14px 22px; border: 1px solid currentColor; background: transparent; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; transition: background-color .25s, color .25s; }
.btn:hover:not(:disabled) { background: var(--ink); color: var(--chalk); border-color: var(--ink); }
.office .btn:hover:not(:disabled) { background: var(--chalk); color: var(--soot); border-color: var(--chalk); }
.cart-foot .btn:hover:not(:disabled) { background: var(--brown); border-color: var(--brown); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.patch-band { margin: 0 var(--gut) clamp(40px, 6vh, 70px); padding: clamp(22px, 3.4vw, 44px) clamp(16px, 3vw, 40px) clamp(18px, 3vw, 38px); display: flex; justify-content: center; overflow: hidden; background-color: #2a2824; box-shadow: 0 20px 34px -20px rgba(0,0,0,.9); rotate: -.6deg; }
.patch-band .stitch { font-size: clamp(40px, 10.4vw, 168px); white-space: nowrap; }
.ft { position: relative; padding: 28px var(--gut) 40px; border-top: 1px solid rgba(239,236,230,.14); color: rgba(239,236,230,.6); display: grid; gap: 18px; }
.ft nav { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.ft a { text-decoration: none; padding: 6px 0; }
.ft a:hover { color: var(--chalk); }
.ft-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: center; }
.ft .link { font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--chalk); min-height: 40px; }

/* ════════════ dialogs ════════════ */
dialog { padding: 0; border: 0; color: var(--ink); max-width: none; max-height: none; }
dialog::backdrop { background: rgba(20,19,17,.55); }
body.has-modal { overflow: hidden; }

/* directory */
.dir { inset: 0; width: 100%; height: 100%; margin: 0; background: var(--soot); color: var(--chalk); }
.dir[open] { animation: wallDown .75s var(--ease-heavy); }
@keyframes wallDown { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.dir-inner { min-height: 100%; display: flex; flex-direction: column; padding: 16px var(--gut) 28px;
  background-image: radial-gradient(90% 60% at 80% 0%, rgba(255,240,215,.06), transparent 60%), var(--tex-speck); }
.dir-top { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(239,236,230,.18); min-height: 56px; }
.dir-top h2 { font-size: 11px; }
.dir-top button, .cart-top button, .pd-close { background: none; border: 0; padding: 12px 0 12px 12px; min-height: 44px; font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.dir-list { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.dir-list a { display: grid; grid-template-columns: 70px 1fr auto; align-items: baseline; gap: 12px; padding: clamp(8px, 1.6vh, 18px) 0; border-bottom: 1px solid rgba(239,236,230,.12); text-decoration: none; }
.dir-list b { font-weight: 800; font-variation-settings: 'wdth' 140; font-size: clamp(28px, 5.6vw, 88px); line-height: .92; letter-spacing: -.01em; text-transform: uppercase; transition: color .3s, translate .5s var(--ease); }
.dir-list i { font-style: normal; color: rgba(239,236,230,.5); }
.dir-list a:hover b, .dir-list a:focus-visible b { color: #c9a77a; translate: 14px 0; }
.dir[open] .dir-list li { animation: rowIn .8s var(--ease) both; }
.dir[open] .dir-list li:nth-child(2) { animation-delay: .06s; } .dir[open] .dir-list li:nth-child(3) { animation-delay: .12s; }
.dir[open] .dir-list li:nth-child(4) { animation-delay: .18s; } .dir[open] .dir-list li:nth-child(5) { animation-delay: .24s; }
@keyframes rowIn { from { opacity: 0; translate: 0 30px; } }
.dir-foot { display: flex; justify-content: space-between; gap: 16px; padding-top: 18px; }
.dir-foot button { background: none; border: 1px solid rgba(239,236,230,.4); padding: 12px 16px; min-height: 44px; font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; }

/* product detail */
.pd { inset: 0; width: 100%; height: 100%; margin: 0; background: var(--bone); overflow: auto; }
.pd::backdrop { background: rgba(226,220,207,.6); }
.pd-inner { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); }
.pd-inner > * { min-width: 0; }
.btn-buy:disabled { opacity: 1; background: #9a9286; border-color: #9a9286; color: var(--chalk); }
.pd-close { position: fixed; top: 6px; right: var(--gut); z-index: 3; }
.pd-media { padding: 64px 0 24px var(--gut); display: flex; flex-direction: column; gap: 14px; }
.pd-stage { position: relative; aspect-ratio: 1; width: min(100%, calc(100svh - 240px)); display: grid; place-items: center; overflow: hidden; }
.pd-stage.plaster { background: none; }
.pd-stage::before { content: ''; position: absolute; inset: 0; background-color: #d5cfc3; background-image: radial-gradient(120% 80% at 18% 0%, rgba(255,250,238,.5), transparent 60%), var(--tex-trowel), var(--tex-plaster); transition: opacity .6s ease .15s; }
.pd.is-entering .pd-stage::before { opacity: 0; }
.pd { transition: background-color .5s ease; }
.pd.is-entering { background-color: rgba(228,222,210,0); }
.pd-stage img { position: relative;  width: 92%; aspect-ratio: 1; object-fit: cover; mix-blend-mode: multiply; transform-origin: 0 0; }
.pd-sheet { display: flex; gap: 10px; background: #151413; padding: 8px 10px 22px; width: max-content; }
.pd-sheet button { position: relative; width: 88px; border: 0; padding: 0; background: var(--bone); opacity: .6; transition: opacity .3s; }
.pd-sheet button[aria-pressed="true"] { opacity: 1; outline: 2px solid #c9a77a; outline-offset: 2px; }
.pd-sheet img { aspect-ratio: 1; object-fit: cover; width: 100%; mix-blend-mode: multiply; }
.pd-sheet span { position: absolute; left: 0; top: calc(100% + 4px); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; color: #c9a77a; text-transform: uppercase; }
.pd-info { padding: 76px var(--gut) 40px clamp(20px, 3vw, 48px); display: flex; flex-direction: column; gap: 16px; }
.pd-k { margin: 0; color: var(--ink-2); }
.neck-label { align-self: flex-start; display: inline-grid; justify-items: center; gap: 6px; padding: 18px 26px 14px; rotate: -1.4deg; box-shadow: 2px 4px 10px -4px rgba(0,0,0,.45); }
.neck-label .nl-main { font-size: 30px; }
.neck-label .nl-sub { font-size: 17px; letter-spacing: .24em; --thread: #c9a77a; }
.pd-name { font-family: var(--serif); font-size: clamp(36px, 4vw, 64px); line-height: .96; letter-spacing: -.02em; }
.pd-note { margin: 0; max-width: 42ch; color: var(--ink-2); }
.pd-spec { margin: 4px 0 0; border-top: 1px solid rgba(34,31,27,.25); }
.pd-spec div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(34,31,27,.14); }
.pd-spec dt { color: var(--ink-2); } .pd-spec dd { margin: 0; text-transform: none; letter-spacing: .02em; font-size: 12px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 8px; color: var(--ink-2); }
.pd .dots { margin: 0; gap: 6px; }
.pd .dot { width: 44px; height: 44px; } .pd .dot::before { width: 24px; height: 24px; }
.sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; max-width: 420px; }
.sizes button { min-height: 46px; border: 1px solid rgba(34,31,27,.4); background: transparent; font-family: var(--mono); font-size: 12px; }
.sizes button[aria-pressed="true"] { background: var(--ink); color: var(--chalk); border-color: var(--ink); }
.btn-buy { background: var(--ink); color: var(--chalk); border-color: var(--ink); max-width: 420px; width: 100%; min-height: 56px; }
.btn-buy:hover:not(:disabled) { background: var(--brown); border-color: var(--brown); color: var(--chalk); }
.pd-fine { margin: 0; color: var(--ink-2); }
.pd.is-entering .pd-info > *, .pd.is-entering .pd-sheet, .pd.is-entering .pd-close { opacity: 0; translate: 0 10px; }
.pd .pd-info > *, .pd .pd-sheet, .pd .pd-close { transition: opacity .5s ease .25s, translate .7s var(--ease) .25s; }

/* cart */
.cart { margin: 0 0 0 auto; height: 100%; width: min(460px, 100%); background: var(--chalk) var(--tex-paper); }
.cart[open] { animation: slideIn .5s var(--ease); }
@keyframes slideIn { from { translate: 100% 0; } }
.cart-inner { height: 100%; display: flex; flex-direction: column; }
.cart-top { display: flex; justify-content: space-between; align-items: center; padding: 6px 22px; border-bottom: 1px solid rgba(34,31,27,.2); min-height: 56px; }
.cart-top h2 { font-size: 11px; }
.cart-lines { flex: 1; overflow: auto; }
.line { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; padding: 16px 22px; border-bottom: 1px solid rgba(34,31,27,.12); }
.line img { width: 76px; aspect-ratio: 1; object-fit: cover; mix-blend-mode: multiply; background: var(--bone); }
.line h3 { font-family: var(--serif); font-size: 18px; line-height: 1.05; margin-bottom: 4px; }
.line p { margin: 0; }
.qty { display: inline-flex; align-items: center; border: 1px solid rgba(34,31,27,.4); margin-top: 10px; }
.qty button { width: 40px; height: 36px; border: 0; background: none; font-size: 16px; }
.qty span { min-width: 30px; text-align: center; font-family: var(--mono); font-size: 12px; }
.line-r { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.line-r .link { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; min-height: 32px; }
.empty { padding: 48px 22px; display: grid; gap: 14px; justify-items: start; color: var(--ink-2); }
.empty .devil-svg { width: 80px; transform: rotate(-10deg); }
.cart-foot { padding: 18px 22px 24px; border-top: 1px solid rgba(34,31,27,.2); display: grid; gap: 12px; }
.cart-foot .row { display: flex; justify-content: space-between; margin: 0; font-size: 12px; }
.cart-foot .btn { background: var(--ink); color: var(--chalk); border-color: var(--ink); }
.cart-msg { margin: 0; color: var(--rust); min-height: 1.5em; text-transform: none; letter-spacing: .02em; font-size: 12px; }

/* ════════════ docent + toast ════════════ */
.docent { position: fixed; left: 0; right: 0; bottom: 0; height: 130px; z-index: 40; pointer-events: none; }
.docent[hidden] { display: none; }
body.has-modal .docent { visibility: hidden; }
.devil { position: absolute; left: 0; bottom: 6px; width: 58px; height: 86px; pointer-events: auto; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; }
.devil.held { cursor: grabbing; }
.devil .devil-svg { width: 100%; height: 100%; overflow: visible; }
.devil .devil-svg g, .statue .devil-svg g, .sketch-art .devil-svg g { transform-box: view-box; }
.devil-bubble { position: absolute; left: 0; bottom: 100px; translate: -50% 0; background: var(--chalk); border: 1px solid var(--ink); padding: 6px 10px; font-family: var(--mono); font-size: 11px; white-space: nowrap; opacity: 0; scale: .7; transform-origin: 50% 100%; transition: opacity .2s, scale .25s var(--ease); pointer-events: none; }
.devil-bubble.show { opacity: 1; scale: 1; }
.toast { position: fixed; left: 50%; bottom: 24px; translate: -50% 20px; z-index: 120; margin: 0; background: var(--soot); color: var(--chalk); padding: 12px 18px; opacity: 0; pointer-events: none; transition: opacity .25s, translate .35s var(--ease); max-width: calc(100% - 32px); }
.toast.show { opacity: 1; translate: -50% 0; }

/* ════════════ mobile: recomposed, not shrunk ════════════ */
@media (max-width: 860px) {
  body { font-size: 16px; }
  .hd { grid-template-columns: auto 1fr; }
  .hd-room { display: none; }
  .hd-nav a { display: none; }
  .threshold { height: 175svh; }
  .t-scene { --door-w: 46vw; --door-top: 22svh; --floor: 80svh; }
  .inscription { top: auto; bottom: auto; left: 3.5vw; right: auto; top: 50svh; writing-mode: vertical-rl; rotate: 180deg; translate: 0 -50%; font-size: 9.5vw; letter-spacing: .14em; padding: 0; white-space: nowrap; }
  .slab-top { height: 100%; }
  .inscription-sub { bottom: auto; top: calc(var(--door-top) - 3.4svh); letter-spacing: .4em; font-size: 9px; }
  .t-hang { width: calc(var(--door-w) * .82); }
  .plaque { left: var(--gut); right: var(--gut); width: auto; top: auto; bottom: 3svh; padding: 14px 16px; }
  .plaque-t { font-size: 26px; } .plaque-d { display: none; }
  .t-coords { display: none; }
  .col { width: 16vw; }

  .room-head-split { grid-template-columns: 1fr; gap: 20px; }
  .bay { display: block; padding-bottom: 80px; }
  .bay-wall { height: auto !important; aspect-ratio: 4 / 5; margin: 0 calc(var(--gut) * -1); }
  .bay-lean .bay-wall { aspect-ratio: 3 / 4; }
  .bay .museum-label { margin: -40px 0 0 auto !important; width: 86%; z-index: 2; }
  .bay-lean .museum-label { margin: -40px auto 0 0 !important; }
  .suspended { width: 76%; top: 16%; }
  .bay-rack .bay-wall { aspect-ratio: auto; height: 500px !important; }
  .rack { left: 0; right: 0; bottom: 12%; }
  .rack-post, .rack-base { display: none; }
  .rack-rail { --rw: 44vw; justify-content: flex-start; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; padding: 0 28vw 120px; bottom: 0; overscroll-behavior-x: contain; scrollbar-width: none; }
  .rack-rail::-webkit-scrollbar { display: none; }
  .rack-rail::before { position: absolute; left: 0; right: auto; width: calc(10 * 44vw + 56vw); }
  .rk { margin: 0 calc(var(--rw) * -.12); scroll-snap-align: center; }
  .rk-tag { opacity: 1; translate: 0 0; rotate: -3deg; left: 46%; top: 82%; max-width: 116px; padding: 7px 8px 6px; }
  .rk-tag b { font-size: 12.5px; }
  .rod { left: 8%; right: 8%; }
  .lean { width: 64%; left: 5%; } .lean-small { width: 30%; left: auto; right: 4%; }
  .plinth-wrap { width: 62%; }
  .plinth { height: 30svh; }
  .plinth-note { bottom: calc(30svh + 6px); }

  .wall-lettering { font-size: 30vw; top: 2vh; }
  .works { padding: 0 var(--gut); }
  .work { width: var(--mw); margin-left: var(--mml); margin-top: calc(var(--mmt) + 90px); }
  .w-wire { top: -90px; height: 90px; }
  .work-hit { transform-origin: 50% -90px; }
  .strip { display: none; }
  .counter { display: block; }

  .table { height: auto; margin: 0; padding: 30px 0 40px; }
  .table-items { position: static; display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 30px 12vw 40px; overscroll-behavior-x: contain; }
  .item { position: relative; left: auto !important; top: auto !important; flex: 0 0 72vw; max-width: 340px; scroll-snap-align: center; align-self: center; }
  .item-tag { flex-basis: 40vw; } .item-print { flex-basis: 58vw; }
  .item.is-lifted { transform: rotate(0) scale(1.04); }

  .office-grid { grid-template-columns: 1fr; }
  .pd-inner { grid-template-columns: 1fr; }
  .pd-media { padding: 56px var(--gut) 0; }
  .pd-stage { width: 100%; }
  .pd-sheet { width: 100%; }
  .pd-info { padding: 20px var(--gut) 110px; }
  .pd-name { font-size: 38px; overflow-wrap: break-word; }
  .pd-close { background: color-mix(in srgb, var(--bone) 85%, transparent); padding-right: 10px; }
  .btn-buy { position: sticky; bottom: 14px; z-index: 2; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); }
  .dir-list a { grid-template-columns: 44px 1fr; }
  .dir-list i { grid-column: 2; }
  .devil { width: 46px; height: 68px; }
  .devil-bubble { bottom: 80px; }
}

/* ════════════ reduced motion: everything still, everything visible ════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .threshold { height: auto; }
  .t-scene { position: relative; }
  .t-beyond, .t-wall, .t-fg { transform: none !important; }
  .col-l, .col-r { translate: none !important; }
  .t-scene::after { display: none; }
  .js .reveal { clip-path: none !important; }
  .js [data-label] { opacity: 1 !important; translate: none !important; }
  .dust { display: none; }
  .work-hit, .rk-hit { transform: none !important; }
}