/* VOLUME — contemporary art. White cube, black type; all colour comes from the works. */
:root {
  --ink: #0d0d0d; --paper: #f4f3f0; --wall: #f1efea; --wh: #fff; --g: #74726d; --ln: rgba(0,0,0,.13);
  --pad: clamp(16px, 2.4vw, 36px); --max: 1800px;
  --e: cubic-bezier(.16,1,.3,1); --io: cubic-bezier(.76,0,.24,1);
  --f: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif; --m: "DM Mono", ui-monospace, Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; overflow-x: clip; }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font-family: var(--f); font-size: 16px; line-height: 1.45; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, p, blockquote, figure { margin: 0; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.mono { font-family: var(--m); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.45; }
.dim { color: var(--g); }
.lead { font-size: clamp(17px, 1.3vw, 21px); line-height: 1.45; }
.sec { padding: clamp(80px, 11vw, 170px) 0; position: relative; }
.iv { background: #e9e7e2; }
.h2 { font-size: clamp(40px, 6vw, 120px); font-weight: 750; font-stretch: 80%; letter-spacing: -.045em; line-height: .88; }
.hd { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 18px 40px; margin-bottom: 54px; } .hd .mono:first-child { grid-column: 1 / -1; }
.btns { display: flex; gap: 8px; flex-wrap: wrap; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 24px; background: var(--ink); color: var(--wh); border: 1px solid var(--ink); font-size: 14px; font-weight: 600; transition: background .35s, color .35s; white-space: nowrap; }
.btn:hover { background: transparent; color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--wh); }
.btn--w { background: var(--wh); color: var(--ink); border-color: var(--wh); } .btn--w:hover { background: transparent; color: var(--wh); }
.btn--wg { background: transparent; color: var(--wh); border-color: rgba(255,255,255,.6); } .btn--wg:hover { background: var(--wh); color: var(--ink); }
.btn--full { width: 100%; } .btn--s { padding: 10px 14px; font-size: 13px; }
.ch { display: flex; gap: 2px; flex-wrap: wrap; } .ch button { padding: 11px 16px; border: 1px solid currentColor; font-weight: 600; font-size: 14px; opacity: .55; transition: opacity .3s, background .3s, color .3s; } .ch button:hover { opacity: 1; } .ch button.on { background: var(--ink); color: #fff; border-color: var(--ink); opacity: 1; }

/* ---------- loader: a spirit level ---------- */
.pre { position: fixed; inset: 0; z-index: 9999; background: var(--wall); display: grid; place-items: center; align-content: center; gap: 16px; }
html:not(.js) .pre { display: none; }
.pre__lv { position: relative; width: min(360px, 70vw); height: 34px; border: 2px solid var(--ink); border-radius: 20px; background: linear-gradient(90deg, transparent calc(50% - 26px), var(--ink) calc(50% - 26px) calc(50% - 25px), transparent calc(50% - 25px) calc(50% + 25px), var(--ink) calc(50% + 25px) calc(50% + 26px), transparent calc(50% + 26px)); transform: rotate(var(--tilt, -6deg)); }
.pre__lv i { position: absolute; top: 5px; left: calc(var(--bx, 10%) - 20px); width: 40px; height: 20px; border-radius: 10px; background: #c8e85a; box-shadow: inset 0 0 0 2px var(--ink); }
.pre__n { font-size: clamp(70px, 11vw, 190px); font-weight: 750; font-stretch: 75%; letter-spacing: -.05em; line-height: .85; font-variant-numeric: tabular-nums; }
body.ready .pre { clip-path: inset(0 0 100% 0); transition: clip-path .9s var(--io) .1s; }

/* ---------- transition: the wall is repainted ---------- */
.rp { position: fixed; inset: 0; z-index: 9000; pointer-events: none; visibility: hidden; }
.rp__w { position: absolute; inset: 0; background: var(--wall); transform: scaleX(0); transform-origin: left; }
.rp__r { position: absolute; top: 0; bottom: 0; left: 0; width: 22px; margin-left: -11px; background: linear-gradient(90deg, #d8d4cc, #fff 40%, #d8d4cc); box-shadow: 0 0 30px rgba(0,0,0,.25); opacity: 0; }
.rp__t { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; text-align: center; padding: 0 var(--pad); opacity: 0; }
.rp__t b { font-size: clamp(56px, 10vw, 200px); font-weight: 750; font-stretch: 78%; letter-spacing: -.05em; line-height: .86; }
body.leaving .rp, body.arriving .rp { visibility: visible; pointer-events: auto; }
body.leaving .rp__w { transform: scaleX(1); transition: transform .8s var(--io); } body.leaving .rp__r { opacity: 1; left: 100%; transition: left .8s var(--io); } body.leaving .rp__t { opacity: 1; transition: opacity .3s .55s; }
body.arriving .rp__w { transform: scaleX(1); } body.arriving .rp__t { opacity: 1; }
body.arrived .rp__w { transform: scaleX(0); transform-origin: right; transition: transform .85s var(--io); } body.arrived .rp__t { opacity: 0; transition: opacity .25s; }

/* ---------- nav ---------- */
.nv { position: fixed; left: 0; right: 0; top: 0; z-index: 600; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 18px var(--pad); color: #fff; mix-blend-mode: difference; }
.nv__lg { font-size: 24px; font-weight: 800; font-stretch: 75%; letter-spacing: -.03em; line-height: 1; }
.nv__c { display: flex; gap: 22px; } .nv__c b { font-weight: 500; }
.nv__r { justify-self: end; display: flex; align-items: center; gap: 22px; font-size: 14px; font-weight: 600; }
.nv__m { display: flex; align-items: center; gap: 10px; } .nv__m i { position: relative; width: 26px; height: 20px; border: 1.5px solid currentColor; transform: rotate(-4deg); transition: transform .5s var(--e); } .nv__m i::before { content: ""; position: absolute; left: 50%; top: -9px; width: 12px; height: 8px; margin-left: -6px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 6px 6px 0 0; } .nv__m:hover i { transform: none; }

/* ---------- menu: a salon hang ---------- */
.sa { position: fixed; inset: 0; z-index: 800; background: var(--wall); display: grid; grid-template-rows: auto 1fr auto; overflow: auto; clip-path: inset(0 0 0 100%); visibility: hidden; transition: clip-path .85s var(--io), visibility 0s .85s; }
.sa.open { clip-path: inset(0); visibility: visible; transition: clip-path .85s var(--io); }
body.menu-open, body.eq-open { overflow: hidden; }
.sa__head, .sa__f2 { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 22px; }
.sa__x { padding: 10px 16px; border: 1px solid var(--ink); font: 600 14px var(--f); background: var(--wall); }
.sa__wall { align-self: center; }
.sa__in { position: relative; width: min(100%, 150vh); aspect-ratio: 16 / 8; margin: 0 auto; }
.sa__f { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); display: grid; grid-template-rows: 1fr auto; gap: 8px; opacity: 0; transform: translateY(-30px) rotate(calc(var(--i) * 1.3deg - 4deg)); transform-origin: 50% 0; }
.sa.open .sa__f { opacity: 1; transform: rotate(0); transition: opacity .5s calc(.25s + var(--i) * .06s), transform 1.2s cubic-bezier(.34,1.56,.64,1) calc(.25s + var(--i) * .06s); }
.sa__img { position: relative; display: block; min-height: 0; border: 6px solid var(--ink); background: #fff; padding: 8px; box-shadow: 0 14px 30px rgba(0,0,0,.18); transition: box-shadow .4s, transform .5s var(--e); } .sa__img img { width: 100%; height: 100%; object-fit: cover; }
.sa__img::before { content: ""; position: absolute; left: -20%; right: -20%; top: -60%; height: 80%; background: radial-gradient(50% 60% at 50% 100%, rgba(255,240,200,.75), transparent 70%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.sa__f:hover .sa__img, .sa__f.on .sa__img { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(0,0,0,.28); } .sa__f:hover .sa__img::before { opacity: 1; }
.sa__lb { display: grid; gap: 0; } .sa__lb b { font-size: clamp(18px, 2vw, 36px); font-weight: 700; font-stretch: 80%; letter-spacing: -.03em; line-height: 1; transition: font-stretch .4s var(--e); } .sa__f:hover .sa__lb b, .sa__f.on .sa__lb b { font-stretch: 100%; }
.sa__f, .sa__f * { cursor: pointer; } .sa__lb, .sa__img img { pointer-events: none; }

/* ---------- enquiry modal ---------- */
.eq { position: fixed; inset: 0; z-index: 820; background: rgba(13,13,13,.6); display: grid; place-items: center; padding: 20px; visibility: hidden; opacity: 0; transition: opacity .4s, visibility 0s .4s; }
.eq.open { visibility: visible; opacity: 1; transition: opacity .4s; }
.eq__in { position: relative; width: min(980px, 100%); max-height: calc(100vh - 40px); overflow: auto; display: grid; grid-template-columns: 1fr 1.1fr; background: var(--wall); }
.eq__x { position: absolute; right: 14px; top: 14px; z-index: 2; } .eq__ph { background: #e3e0da; padding: 30px; display: grid; place-items: center; } .eq__ph img { max-height: 60vh; box-shadow: 0 20px 40px rgba(0,0,0,.25); }
.eq__f { padding: 60px 30px 30px; } .eq__t { font-size: 34px; font-weight: 750; font-stretch: 80%; letter-spacing: -.03em; line-height: 1; }

/* ---------- 01 · HERO: paint to reveal ---------- */
.pr { position: relative; height: 200vh; background: #0b0b0b; color: #fff; }
.pr__st { position: sticky; top: 0; height: 100vh; min-height: 600px; overflow: hidden; }
.pr__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pr__w { position: absolute; left: var(--pad); right: var(--pad); top: 50%; transform: translateY(-50%); margin: 0; pointer-events: none; mix-blend-mode: difference; }
.pr__w svg { width: 100%; height: auto; display: block; overflow: visible; }
.pr__w text { transition: fill .5s; font: 800 210px var(--f); font-stretch: 75%; fill: rgba(255,255,255,var(--wf, 0)); stroke: #fff; stroke-width: 2.4; stroke-dasharray: 2600; stroke-dashoffset: calc(2600 * (1 - var(--wd, 0))); }
.pr__cur { position: absolute; left: 0; top: 0; pointer-events: none; transform: translate(var(--cx, -200px), var(--cy, -200px)); opacity: var(--co, 0); transition: opacity .4s; }
.pr__cur i { position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border: 1.5px solid rgba(255,255,255,.9); border-radius: 50%; }
.pr__cur span { position: absolute; left: 56px; top: -8px; white-space: nowrap; padding: 3px 7px; background: #fff; color: #000; }
.pr__top { position: absolute; left: 0; right: 0; top: 78px; display: flex; justify-content: space-between; opacity: var(--bo, 1); }
.pr__bot { position: absolute; left: 0; right: 0; bottom: 30px; display: flex; justify-content: space-between; align-items: end; gap: 30px; opacity: var(--bo, 1); pointer-events: var(--be, auto); } .pr__l { max-width: 470px; font-size: 17px; }
.pr__cap { position: absolute; left: var(--pad); top: calc(50% + 12vw); opacity: var(--bo, 1); } .pr__cap b { font-weight: 500; }

/* ---------- type windows: the works inside the letters ---------- */
.tw { position: relative; height: 260vh; background: #0b0b0b; color: #fff; }
.tw__st { position: sticky; top: 0; height: 100vh; min-height: 600px; overflow: hidden; display: grid; align-content: center; gap: 0; }
.tw__k { position: absolute; top: 80px; left: 0; right: 0; }
.tw__r { white-space: nowrap; transform: translateX(var(--tx, 0px)); }
.tw__r b { display: inline-block; font-size: 21vh; font-weight: 800; font-stretch: 75%; letter-spacing: -.04em; line-height: .86; color: transparent; -webkit-background-clip: text; background-clip: text; background-size: 60vw auto; background-position: var(--bx, 0px) 50%; -webkit-text-stroke: 1px rgba(255,255,255,.15); }

/* ---------- step inside: the white cube ---------- */
.wc { position: relative; height: 300vh; background: var(--wall); }
.wc__st { position: sticky; top: 0; height: 100vh; min-height: 600px; overflow: hidden; }
.wc__room { position: absolute; inset: 0; perspective: var(--P, 900px); perspective-origin: 50% 46%; }
.wc__cam { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: translateZ(var(--cz, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.wc__face { position: absolute; transform-style: preserve-3d; backface-visibility: hidden; }
.wc__back { left: calc(var(--W) / -2); top: calc(var(--H) / -2); width: var(--W); height: var(--H); background: #f6f5f1; transform: translateZ(var(--bz, 0px)); }
.wc__left, .wc__right { top: calc(var(--H) / -2); width: var(--D); height: var(--H); }
.wc__left { left: calc(var(--W) / -2); transform-origin: 0 50%; transform: rotateY(var(--fold, 0deg)); background: linear-gradient(90deg, #e4e1db, #efede8 70%, #f2f0eb); }
.wc__right { left: calc(var(--W) / 2 - var(--D)); transform-origin: 100% 50%; transform: rotateY(calc(var(--fold, 0deg) * -1)); background: linear-gradient(270deg, #e4e1db, #efede8 70%, #f2f0eb); }
.wc__floor { left: calc(var(--W) / -2); top: calc(var(--H) / 2 - var(--D)); width: var(--W); height: var(--D); transform-origin: 50% 100%; transform: rotateX(var(--fold, 0deg)); background: linear-gradient(0deg, #bdb7ad, #d7d2c9 60%, #e2ddd5); }
.wc__floor::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(var(--W) / 6 - 1px), rgba(0,0,0,.06) calc(var(--W) / 6 - 1px) calc(var(--W) / 6)); }
.wc__ceil { left: calc(var(--W) / -2); top: calc(var(--H) / -2); width: var(--W); height: var(--D); transform-origin: 50% 0; transform: rotateX(calc(var(--fold, 0deg) * -1)); background: #fbfbf9; }
.wc__ceil i { position: absolute; top: 0; bottom: 0; left: calc(18% + var(--k) * 21%); width: 4px; background: #2a2a2a; opacity: .22; }
.wc__w { position: absolute; top: 24%; height: 44%; aspect-ratio: 3 / 4; left: calc(10% + var(--k) * 30%); margin: 0; box-shadow: 0 18px 30px rgba(0,0,0,.18); filter: brightness(var(--wb, .45)); transition: filter .9s; }
.wc__w.lit { --wb: 1; }
.wc__w img { width: 100%; height: 100%; object-fit: cover; }
.wc__spot { position: absolute; left: -40%; right: -40%; top: -45%; height: 160%; background: radial-gradient(45% 50% at 50% 30%, rgba(255,246,225,.65), transparent 72%); mix-blend-mode: soft-light; opacity: 0; transition: opacity .8s; pointer-events: none; }
.wc__w.lit .wc__spot { opacity: 1; }
.wc__main { left: 50%; top: 26%; height: 58%; transform: translateX(-50%); }
.wc__vinyl { position: absolute; left: 0; right: 0; top: 7%; display: grid; justify-items: center; font-size: calc(var(--H) * .085); font-weight: 750; font-stretch: 80%; letter-spacing: -.04em; line-height: 1; color: var(--ink); } .wc__vinyl small { font: 500 calc(var(--H) * .018) var(--m); letter-spacing: .08em; text-transform: uppercase; margin-top: .6em; }
.wc__full { position: absolute; inset: 0; clip-path: inset(var(--ft, 50%) var(--fr, 50%) var(--fb, 50%) var(--fl, 50%)); visibility: var(--fv, hidden); } .wc__full img { width: 100%; height: 100%; object-fit: cover; }
.wc__word { position: absolute; left: 0; right: 0; top: 64px; display: flex; justify-content: center; font-size: 15.5vw; font-weight: 800; font-stretch: 75%; letter-spacing: -.05em; line-height: .8; color: var(--ink); pointer-events: none; opacity: var(--wo, 1); }
.wc__word span { display: block; opacity: 0; transform: translateY(-40px) rotate(calc(var(--i) * 2deg - 5deg)); transition: opacity .5s calc(.9s + var(--i) * .07s), transform 1.1s cubic-bezier(.34,1.56,.64,1) calc(.9s + var(--i) * .07s); }
.ready .wc__word span { opacity: 1; transform: none; }
.wc__top { position: absolute; left: 0; right: 0; top: 78px; display: flex; justify-content: space-between; opacity: var(--wo, 1); }
.wc__bot { position: absolute; left: 0; right: 0; bottom: 28px; display: flex; justify-content: space-between; align-items: end; gap: 30px; opacity: var(--bo, 1); pointer-events: var(--be, auto); } .wc__l { max-width: 440px; font-size: 17px; }
.wc__end { position: absolute; left: 0; right: 0; bottom: 50px; display: flex; justify-content: space-between; align-items: end; gap: 30px; color: #fff; opacity: var(--eo, 0); pointer-events: var(--ee, none); text-shadow: 0 4px 30px rgba(0,0,0,.35); } .wc__end > div { display: grid; gap: 14px; }
.wc__eh { font-size: clamp(56px, 8vw, 160px); font-weight: 800; font-stretch: 75%; letter-spacing: -.05em; line-height: .84; }

/* ---------- 02 · palette ---------- */
.pa { position: relative; height: 260vh; background: var(--wh); }
.pa__st { position: sticky; top: 0; height: 100vh; min-height: 620px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; overflow: hidden; }
.pa__art { position: relative; justify-self: center; height: 78vh; aspect-ratio: var(--ar, .75); display: grid; grid-template-columns: repeat(10, 1fr); }
.pa__s { position: relative; display: block; background-size: 1000% 100%; background-position: calc(var(--i) * 11.111%) 0; transform: translateY(var(--ty, 0px)); transition: background-image .01s; }
.pa__s::after { content: ""; position: absolute; inset: 0; background: var(--c, transparent); opacity: var(--cv, 0); }
.pa__t { display: grid; gap: 20px; align-content: center; justify-items: start; }
.pa__h { font-size: clamp(40px, 5vw, 100px); font-weight: 750; font-stretch: 80%; letter-spacing: -.045em; line-height: .9; } .pa__h em { font-style: normal; font-stretch: 112%; font-weight: 300; }
.pa__sw { display: flex; width: 100%; max-width: 560px; height: 90px; } .pa__sw span { position: relative; flex: var(--wt) 1 0; background: var(--c); transition: flex .8s var(--e); } .pa__sw span b { position: absolute; left: 6px; bottom: -22px; font: 500 10px var(--m); text-transform: uppercase; white-space: nowrap; }
.pa__n { margin-top: 14px; font-size: 22px; font-weight: 650; font-stretch: 85%; }
.pa__b { display: flex; gap: 6px; } .pa__b button { width: 56px; height: 70px; padding: 3px; border: 1.5px solid transparent; } .pa__b button.on { border-color: var(--ink); } .pa__b img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 03 · exhibitions: each work opens from its frame ---------- */
.exs { position: relative; background: var(--wall); }
.exs__hd { padding-top: clamp(80px, 10vw, 150px); padding-bottom: 30px; }
.ex { position: relative; display: block; height: 150vh; }
.ex > * { pointer-events: auto; }
.ex__ph { position: sticky; top: 0; display: block; height: 100vh; overflow: hidden; clip-path: inset(var(--gy, 16%) var(--gx, 30%)); }
.ex__ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--gs, 1.15)); }
.ex__t { position: sticky; bottom: 0; margin-top: -100vh; height: 100vh; display: grid; align-content: end; gap: 10px; padding-bottom: 46px; color: #fff; opacity: var(--go, 0); text-shadow: 0 4px 30px rgba(0,0,0,.4); }
.ex__t b { font-size: clamp(60px, 10vw, 200px); font-weight: 800; font-stretch: 75%; letter-spacing: -.05em; line-height: .84; } .ex__a { font-size: clamp(20px, 2vw, 34px); font-weight: 600; }
.ex::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100vh; background: linear-gradient(0deg, rgba(0,0,0,.45), transparent 45%); opacity: var(--go, 0); pointer-events: none; }

/* ---------- artists ---------- */
.ars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 50px 2px; }
.ar { display: grid; gap: 12px; } .ar__ph { position: relative; overflow: hidden; aspect-ratio: 3 / 4; } .ar__ph img { width: 100%; height: 100%; object-fit: cover; transition: opacity .6s, transform 1.2s var(--e); } .ar__h { position: absolute; inset: 0; opacity: 0; } .ar:hover .ar__h { opacity: 1; } .ar:hover img { transform: scale(1.04); }
.ar__b { display: grid; gap: 2px; padding: 0 10px; } .ar__b b { font-size: clamp(26px, 2.4vw, 46px); font-weight: 750; font-stretch: 78%; letter-spacing: -.04em; line-height: .95; transition: font-stretch .5s var(--e); } .ar:hover .ar__b b { font-stretch: 100%; }

/* ---------- works & labels ---------- */
.wks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 70px 3vw; align-items: end; }
.wk { display: grid; gap: 18px; } .wk.off { display: none; }
.wk > img { width: 100%; max-height: 60vh; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 18px 24px rgba(0,0,0,.2)); cursor: zoom-in; transition: transform .8s var(--e); } .wk:hover > img { transform: translateY(-6px); }
.wk figcaption { display: flex; justify-content: space-between; align-items: end; gap: 14px; }
.lbl { display: block; font-size: 15px; line-height: 1.35; } .lbl b, .lbl > .mono, .lbl__p { display: block; } .lbl b { font-weight: 700; } .lbl i { font-style: italic; } .lbl__p { font-weight: 600; margin-top: 4px; }
.flt { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 40px; }

/* ---------- scale widget ---------- */
.scl { display: grid; grid-template-columns: 1.5fr 1fr; gap: 4vw; align-items: center; }
.scl__room { position: relative; aspect-ratio: 600 / 400; }
.scl__wall { position: absolute; left: 0; right: 0; top: 0; height: 90%; background: var(--wall); box-shadow: inset 0 -30px 40px -30px rgba(0,0,0,.15); }
.scl__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 10%; background: linear-gradient(#c9c3b9, #ddd8cf); }
.scl__art { position: absolute; left: 50%; bottom: calc(150 / 360 * 100% - var(--ah) / 2); width: var(--aw); height: var(--ah); transform: translateX(-60%); transition: width .8s var(--e), height .8s var(--e), bottom .8s var(--e); box-shadow: 0 16px 30px rgba(0,0,0,.25); }
.scl__art img { width: 100%; height: 100%; object-fit: cover; }
.scl__man { position: absolute; bottom: 0; right: 10%; height: calc(180 / 360 * 100%); fill: #2b2b2b; }
.scl__bench { position: absolute; bottom: 0; left: 18%; width: 22%; height: calc(45 / 360 * 100%); background: #3a2d22; border-radius: 2px; }
.scl__dim { position: absolute; left: 50%; top: 100%; margin-top: 10px; transform: translateX(-50%); }
.scl__ui { display: grid; gap: 14px; } .scl__t { font-size: clamp(30px, 3vw, 56px); font-weight: 750; font-stretch: 80%; letter-spacing: -.04em; line-height: 1; }
.scl__opts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .scl__opts button { aspect-ratio: 1; padding: 3px; border: 1.5px solid transparent; } .scl__opts button.on { border-color: var(--ink); } .scl__opts img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- in the rooms: photo collage ---------- */
.rm { padding: clamp(80px, 9vw, 150px) 0 clamp(120px, 12vw, 200px); background: var(--wall); overflow: hidden; }
.rm__g { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 7vw; gap: 14px; }
.rm figure { position: relative; margin: 0; overflow: hidden; } .rm figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--e); } .rm figure:hover img { transform: scale(1.05); }
.rm figcaption { position: absolute; left: 12px; bottom: 10px; padding: 3px 7px; background: #fff; }
.rm__t { grid-column: 1 / 5; grid-row: 1 / 6; display: grid; gap: 20px; align-content: start; justify-items: start; padding-right: 2vw; }
.rm__a { grid-column: 5 / 13; grid-row: 1 / 6; } .rm__b { grid-column: 1 / 5; grid-row: 6 / 10; } .rm__c { grid-column: 5 / 9; grid-row: 6 / 11; } .rm__d { grid-column: 9 / 13; grid-row: 6 / 10; }

/* ---------- installation band, programme ---------- */
.ins { position: relative; height: 110vh; min-height: 640px; overflow: hidden; color: #fff; background: #000; display: grid; align-items: end; }
.ins__img { position: absolute; inset: 0; } .ins__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--rs, 1.15)); }
.ins__t { position: relative; display: grid; gap: 18px; justify-items: start; padding-bottom: 70px; } .ins__h { font-size: clamp(60px, 10vw, 200px); font-weight: 800; font-stretch: 75%; letter-spacing: -.05em; line-height: .84; } .ins .lead { max-width: 440px; }
.evs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } .evt { display: grid; gap: 8px; } .evt img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .evt__d { font-size: clamp(40px, 4vw, 76px); font-weight: 800; font-stretch: 75%; letter-spacing: -.05em; line-height: .9; } .evt b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; } .evt > span, .evt > b { padding: 0 10px; }
.evl { display: grid; border-top: 2px solid var(--ink); }
.evl__i { display: grid; grid-template-columns: 120px 180px 1fr 120px auto; align-items: center; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--ln); } .evl__i img { width: 120px; aspect-ratio: 1; object-fit: cover; } .evl__d { font-size: clamp(36px, 3.4vw, 64px); font-weight: 800; font-stretch: 75%; letter-spacing: -.05em; line-height: .9; } .evl__i > span:nth-child(3) { display: grid; gap: 2px; } .evl__i b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.evl__i .btn.done { background: var(--ink); color: #fff; }

/* ---------- journal / band ---------- */
.jr__g { display: grid; grid-template-columns: 1.3fr 1fr; gap: 4vw; }
.jr__f, .jr__i { display: grid; gap: 10px; align-content: start; } .jr__f b { font-size: clamp(28px, 3vw, 56px); font-weight: 750; font-stretch: 80%; letter-spacing: -.04em; line-height: .95; }
.jr__ph { display: block; overflow: hidden; } .jr__ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1.2s var(--e); } a:hover .jr__ph img { transform: scale(1.05); }
.jr__l { display: grid; gap: 40px; align-content: start; } .jr__i { grid-template-columns: 1fr 1.2fr; gap: 6px 20px; } .jr__i .jr__ph { grid-row: span 2; } .jr__i b { font-size: clamp(20px, 1.8vw, 32px); font-weight: 750; font-stretch: 85%; letter-spacing: -.03em; line-height: 1; } .jr__i .jr__ph img { aspect-ratio: 1; }
.jl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px 2vw; } .jl .jr__f b { font-size: clamp(24px, 2.4vw, 44px); }
.jft { position: relative; display: block; height: 100vh; min-height: 600px; overflow: hidden; color: #fff; background: #000; }
.jft__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: transform 1.6s var(--e); } .jft:hover img { transform: scale(1.04); }
.jft__t { position: absolute; inset: auto 0 60px; display: grid; gap: 14px; } .jft__t b { font-size: clamp(40px, 6vw, 120px); font-weight: 800; font-stretch: 78%; letter-spacing: -.05em; line-height: .88; max-width: 14ch; } .jft__t .lead { max-width: 560px; }
.jn { width: min(460px, 100%); border-color: var(--ink) !important; }
.rb { position: relative; height: 100vh; min-height: 620px; overflow: hidden; color: #fff; background: #000; }
.rb__img { position: absolute; inset: 0; } .rb__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--rs, 1.15)); }
.rb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), transparent 60%); }
.rb__t { position: absolute; inset: 0; z-index: 1; display: grid; align-content: end; justify-items: start; gap: 20px; padding-bottom: 80px; }
.rb__h { font-size: clamp(56px, 8.6vw, 172px); font-weight: 800; font-stretch: 75%; letter-spacing: -.05em; line-height: .84; }

/* ---------- page head: framed on the wall, then opened ---------- */
.ph { position: relative; height: 180vh; background: var(--wall); }
.ph__st { position: sticky; top: 0; height: 100vh; min-height: 600px; overflow: hidden; }
.ph__ph { position: absolute; inset: 0; clip-path: inset(var(--py, 15vh) var(--px, 28vw) var(--pb, 30vh)); } .ph__ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--s, 1.08)); }
.ph__st::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.5), transparent 50%); opacity: var(--po, 0); pointer-events: none; }
.ph__t { position: absolute; left: 0; right: 0; bottom: 40px; z-index: 1; display: grid; gap: 16px; color: var(--tc, var(--ink)); }
.ph__h { font-size: clamp(56px, 10vw, 200px); font-weight: 800; font-stretch: var(--hs, 75%); letter-spacing: -.05em; line-height: .84; max-width: 14ch; }
.ph__row { display: flex; justify-content: space-between; align-items: end; gap: 30px; } .ph__l { max-width: 480px; font-size: 17px; }

/* ---------- exhibition page ---------- */
.st2 { display: grid; grid-template-columns: 1fr 2fr; gap: 30px 5vw; } .st2 .mono { grid-row: span 2; }
.st2__t { font-size: clamp(26px, 2.8vw, 52px); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; }
.n4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } .n4 div { display: grid; gap: 8px; padding: 24px 0; border-top: 2px solid var(--ink); } .n4 b { font-size: clamp(32px, 4vw, 80px); font-weight: 800; font-stretch: 75%; letter-spacing: -.05em; line-height: .9; }
.hg { position: relative; height: 320vh; background: var(--wall); }
.hg__st { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding-top: 90px; }
.hg__hd { display: flex; justify-content: space-between; }
.hg__wall { display: flex; align-items: center; gap: 12vw; padding: 0 20vw 0 14vw; will-change: transform; min-width: 0; background: linear-gradient(0deg, #d8d3ca 0 8%, transparent 8%); }
.hg__w { flex: 0 0 auto; display: grid; gap: 18px; height: 62vh; } .hg__w img { height: 100%; width: auto; max-width: 60vw; object-fit: cover; box-shadow: 0 24px 40px rgba(0,0,0,.2); }
.hg__room img { max-width: 70vw; aspect-ratio: 3 / 2; }
.aq { position: relative; height: 110vh; min-height: 640px; overflow: hidden; color: #fff; background: #000; display: grid; align-items: end; }
.aq__ph { position: absolute; inset: 0; } .aq__ph img { width: 100%; height: 100%; object-fit: cover; opacity: .75; }
.aq__q { position: relative; display: grid; gap: 18px; padding-bottom: 80px; font-size: clamp(34px, 4.6vw, 92px); font-weight: 750; font-stretch: 80%; letter-spacing: -.045em; line-height: .98; max-width: 20ch; margin-left: 0; }
.nx { position: relative; display: block; height: 90vh; overflow: hidden; background: #000; color: #fff; } .nx__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: transform 1.4s var(--e); } .nx:hover .nx__ph img { transform: scale(1.04); }
.nx__t { position: absolute; inset: auto 0 50px; z-index: 1; display: grid; gap: 10px; text-shadow: 0 4px 30px rgba(0,0,0,.35); } .nx__t b { font-size: clamp(60px, 10vw, 200px); font-weight: 800; font-stretch: 75%; letter-spacing: -.05em; line-height: .84; }
.gw { display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: auto auto; gap: 40px 3vw; align-items: end; } .gw__i { display: grid; gap: 10px; } .gw__i img { width: 100%; object-fit: cover; box-shadow: 0 18px 30px rgba(0,0,0,.18); } .gw__i--0 { grid-row: span 2; } .gw__i--3 { grid-column: 2 / 4; } .gw__i--3 img { aspect-ratio: 16 / 9; }
.tl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } .tl div { display: grid; gap: 4px; padding-top: 14px; border-top: 2px solid var(--ink); } .tl b { font-size: clamp(36px, 3.4vw, 64px); font-weight: 800; font-stretch: 75%; letter-spacing: -.05em; }
.sv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 2px; } .sv__i { display: grid; gap: 10px; align-content: start; } .sv__i img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .sv__i b { font-size: clamp(22px, 2vw, 34px); font-weight: 750; font-stretch: 85%; letter-spacing: -.035em; padding: 0 10px; } .sv__i p { padding: 0 10px; max-width: 380px; }
.sp { display: grid; grid-template-columns: 1.2fr 1fr; min-height: 90vh; } .sp--r { grid-template-columns: 1fr 1.2fr; } .sp--r .sp__ph { order: 2; } .sp:nth-child(even) { background: #e9e7e2; }
.sp__ph { position: relative; overflow: hidden; } .sp__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp__b { display: grid; align-content: center; justify-items: start; gap: 18px; padding: 60px clamp(24px, 4vw, 80px); }
.sp__t { font-size: clamp(50px, 6vw, 120px); font-weight: 800; font-stretch: 75%; letter-spacing: -.05em; line-height: .86; } .sp__tz { font-family: var(--m); font-size: clamp(54px, 5vw, 100px); font-weight: 400; letter-spacing: -.06em; line-height: .9; }
.tbw { overflow-x: auto; } .tb { width: 100%; border-collapse: collapse; min-width: 620px; } .tb th { text-align: left; font: 500 11px var(--m); letter-spacing: .06em; text-transform: uppercase; color: var(--g); padding: 10px 8px; border-bottom: 2px solid var(--ink); } .tb td { padding: 18px 8px; border-bottom: 1px solid var(--ln); font-size: 17px; } .tb td b { font-size: 22px; font-weight: 750; font-stretch: 85%; }

/* ---------- forms / faq / article / 404 ---------- */
.br { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; } .br__w, .br .btn, .br__ok { grid-column: 1 / -1; }
.br label { display: grid; gap: 8px; } .br input, .br select, .br textarea { width: 100%; padding: 12px 0; border: 0; border-bottom: 1.5px solid currentColor; background: transparent; font-size: 18px; outline: none; border-radius: 0; }
.br__ok, .ft__ok { display: none; } .sent .br__ok, .sent .ft__ok { display: block; }
.faq__g { display: grid; grid-template-columns: .8fr 1.2fr; gap: 6vw; }
.fq { border-top: 1px solid var(--ln); } .fq:last-child { border-bottom: 1px solid var(--ln); }
.fq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 50px 1fr 30px; align-items: center; gap: 10px; padding: 26px 0; font-size: clamp(20px, 1.7vw, 30px); font-weight: 650; letter-spacing: -.02em; } .fq summary::-webkit-details-marker { display: none; }
.fq summary i { position: relative; width: 22px; height: 22px; } .fq summary i::before, .fq summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: currentColor; transition: transform .4s var(--e); } .fq summary i::after { transform: rotate(90deg); } .fq[open] summary i::after { transform: none; }
.fq p { margin: 0 0 26px 60px; max-width: 620px; font-size: 17px; color: var(--g); }
.ar__g { display: grid; grid-template-columns: 1.5fr 1fr; gap: 6vw; } .ar__b p { font-size: clamp(20px, 1.6vw, 26px); line-height: 1.5; margin-bottom: 1.2em; } .ar__b p:first-child::first-letter { float: left; font-size: 5.2em; line-height: .8; font-weight: 800; font-stretch: 75%; margin: .04em .08em 0 0; }
.ar__s { display: grid; gap: 14px; align-content: start; position: sticky; top: 100px; } .ar__f img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; position: sticky; top: 100px; }
.nf { position: relative; min-height: 100vh; background: var(--wall); display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.nf__wall { display: grid; place-items: center; } .nf__frame { width: min(36vw, 420px); aspect-ratio: 3 / 4; border: 2px dashed rgba(0,0,0,.25); display: grid; place-items: end center; padding: 14px; background: linear-gradient(#e7e4de, #e7e4de) center / 70% 80% no-repeat; }
.nf__t { display: grid; gap: 22px; justify-items: start; } .nf__h { font-size: clamp(50px, 7vw, 140px); font-weight: 800; font-stretch: 75%; letter-spacing: -.05em; line-height: .86; max-width: 10ch; }

/* ---------- footer: the letters hang crooked, then level ---------- */
.ft { background: var(--ink); color: #fff; padding: clamp(80px, 9vw, 150px) 0 0; overflow: hidden; --g: #9b9891; }
.ft__g { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 4vw; }
.ft__l { display: grid; gap: 20px; align-content: start; } .ft__h { font-size: clamp(24px, 2.2vw, 40px); font-weight: 650; font-stretch: 85%; letter-spacing: -.03em; line-height: 1.05; max-width: 18ch; }
.ft__form { display: flex; border-bottom: 1.5px solid #fff; max-width: 460px; } .ft__form input { flex: 1; background: none; border: 0; padding: 16px 0; font-size: 18px; outline: none; } .ft__form button { font-weight: 700; }
.ft__c { display: grid; gap: 10px; align-content: start; } .ft__c a { font-size: 15px; transition: opacity .3s; } .ft__c a:hover { opacity: .6; }
.ft__w { display: flex; justify-content: center; padding: 70px var(--pad) 0; margin: 0 auto; font-size: 27vw; font-weight: 800; font-stretch: 75%; letter-spacing: -.05em; line-height: .8; }
.ft__w span { display: block; transform-origin: 50% -40%; transform: rotate(calc(var(--r) * (1 - var(--lv, 0)))); transition: color .3s; } .ft__w span:hover { color: #c8e85a; }
.ft__b { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 30px; padding-bottom: 30px; color: var(--g); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .nv__c, .nv__b { display: none; } .nv { grid-template-columns: 1fr auto; }
  .sa__in { aspect-ratio: 3 / 4; width: 100%; } .wc__bot { flex-direction: column; align-items: start; } .wc__end { flex-direction: column; align-items: start; }
  .pa__st { grid-template-columns: 1fr; grid-template-rows: 1fr auto; padding: 80px 0 24px; gap: 16px; } .pa__art { height: 46vh; } .pa__h { font-size: 9vw; } .pa__t .lead { display: none; }
  .ars, .evs { grid-template-columns: 1fr 1fr; } .wks, .sv, .jl { grid-template-columns: 1fr; } .scl, .jr__g, .faq__g, .ar__g, .ft__g, .st2, .eq__in, .nf { grid-template-columns: 1fr; }
  .evl__i { grid-template-columns: 80px 1fr auto; } .evl__i img { width: 80px; } .evl__i .mono { display: none; } .evl__d { grid-column: 2; grid-row: 1; font-size: 28px; } .evl__i > span:nth-child(3) { grid-column: 2; } .evl__i .btn { grid-column: 3; grid-row: 1 / 3; }
  .gw { grid-template-columns: 1fr 1fr; } .gw__i--0 { grid-row: auto; grid-column: 1 / -1; } .gw__i--3 { grid-column: 1 / -1; } .tl, .n4 { grid-template-columns: 1fr 1fr; }
  .sp, .sp--r { grid-template-columns: 1fr; } .sp--r .sp__ph { order: 0; } .sp__ph { min-height: 56vh; }
  .ar__s, .ar__f img { position: static; } .hd { grid-template-columns: 1fr; } .hg__w { height: 50vh; }
  .ph__ph { --px: 10vw; }
}
@media (max-width: 600px) {
  .h2, .ph__h, .sp__t, .nf__h, .rb__h, .jft__t b, .ins__h { font-size: 11vw; } .nx__t b, .ex__t b { font-size: 13vw; } .aq__q { font-size: 7.4vw; } .wc__eh { font-size: 12vw; }
  .br { grid-template-columns: 1fr; } .fq summary { grid-template-columns: 36px 1fr 26px; } .fq p { margin-left: 46px; } .ph__row { flex-direction: column; align-items: start; }
  .ars > *, .evs > *, .n4 > *, .tl > * { min-width: 0; } .ar__b b { font-size: 6vw; } .wk figcaption { flex-direction: column; align-items: start; }
  .sa__lb b { font-size: 4.4vw; } .sa__lb .mono { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
@media (max-width: 1000px) { .rm__g { grid-auto-rows: auto; gap: 8px; } .rm__t { grid-column: 1 / -1; grid-row: auto; padding-bottom: 30px; } .rm figure { transform: none !important; } .rm__a { grid-column: 1 / -1; grid-row: auto; height: 62vw; } .rm__b, .rm__c { grid-column: span 6; grid-row: auto; height: 48vw; } .rm__d { grid-column: 1 / -1; grid-row: auto; height: 50vw; } }
@media (max-width: 600px) { .wc__top span:last-child, .pr__top span:last-child { display: none; } .pr__cap { top: auto; bottom: 230px; } .pr__bot { flex-direction: column; align-items: start; } .tw__r b { font-size: 15vh; } }