/* Touch of Connection — site styles
   Monochrome, like the studio's own site: black, warm white, and light as the only colour.
   Layout concept: one dark room; photos sit in "windows" that move at their own depth. */
:root {
  color-scheme: dark;
  --bg: #0a0a0a;
  --bg-2: #121212;
  --ink: #f3efe8;
  --muted: #8f8b84;
  --line: rgba(243, 239, 232, 0.12);
  --light: #fff1d6;                 /* the lamp's light, used for glow only */

  --font: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;       /* the brand grotesk */
  --font-head: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 80px);
  --measure: 52ch;
  --radius: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(15px, 0.8vw + 11px, 17px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 400; --wght: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1.08; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); font-weight: 300; --wght: 300; line-height: 1.06; }
h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); }
h4 { font-size: 1.1rem; }
p { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }
.lede { font-size: clamp(1.05rem, 1.4vw, 1.35rem); }
.muted { color: var(--muted); }
.eyebrow {
  font-family: var(--font-head);
  font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 1.4rem;
}

.wrap { padding-inline: var(--gutter); max-width: 1500px; margin-inline: auto; }
.section { padding-block: clamp(90px, 14vw, 200px); position: relative; }
@media (max-width: 720px) { .section { padding-block: clamp(56px, 16vw, 96px); } .canvas-stage { margin-bottom: 64px; } .collab-intro { margin-bottom: 28px; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.95em 1.7em; border-radius: 999px;
  font-family: var(--font-head); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.02em;
  border: 1px solid rgba(243,239,232,0.35); color: var(--ink); background: transparent;
  cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-primary:hover { background: #fff; border-color: #fff; }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--gutter);
  transition: background .4s var(--ease);
}
.site-header.is-scrolled {
  background: linear-gradient(180deg, rgba(10,10,10,.9), rgba(10,10,10,.5));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.site-header .logo { width: clamp(60px, 5.5vw, 80px); height: auto; }
.site-header nav { display: flex; gap: clamp(16px, 2.4vw, 36px); align-items: center; }
.site-header nav a { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: .8; }
.site-header nav a:hover { opacity: 1; }
.site-header .btn { padding: 0.7em 1.3em; font-size: 0.78rem; text-transform: none; letter-spacing: 0.02em; opacity: 1; }
.cart-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid rgba(243,239,232,0.35); color: var(--ink); border-radius: 999px; padding: 0.6em 1em; font-family: var(--font-head); font-size: .78rem; cursor: pointer; }
.cart-btn:hover { border-color: var(--ink); }
.cart-btn [data-cart-count] { min-width: 1.4em; height: 1.4em; display: inline-grid; place-items: center; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: .7rem; }
@media (max-width: 720px) {
  .site-header { padding: 12px var(--gutter); }
  .site-header nav a:not(.btn) { display: none; }
  .site-header .btn-primary { padding: .6em 1.05em; font-size: .74rem; }
  .cart-btn { padding: .55em .9em; }
}
.nowrap { white-space: nowrap; }

/* ---------- hero: a slow push-in ---------- */
.hero {
  min-height: 100svh; display: grid; align-items: end;
  position: relative; isolation: isolate; overflow: clip;
}
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-push { position: absolute; inset: 0; transform-origin: 62% 48%; will-change: transform; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; filter: brightness(.8); }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,.2) 0%, rgba(10,10,10,0) 40%, rgba(10,10,10,.9) 100%); }
/* the lamp inside the photo: a glow placed exactly over it by JS (--lx/--ly/--lr), driven by the press level */
.hero-lamp {
  --lx: 70%; --ly: 50%; --lr: 20vmin; --lit: 0;
  position: absolute; left: var(--lx); top: var(--ly); width: calc(var(--lr) * 2); height: calc(var(--lr) * 2);
  transform: translate(-50%, -50%); border-radius: 50%; z-index: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(255,241,214,.95) 0, rgba(255,241,214,.55) 36%, rgba(255,236,200,.18) 62%, rgba(255,236,200,0) 72%);
  opacity: calc(var(--lit) * 0.92);
  filter: blur(calc(var(--lr) * 0.06));
  mix-blend-mode: screen;
}
.hero-lamp::after {
  content: ""; position: absolute; inset: -120%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,236,200,.42) 0, rgba(255,236,200,.12) 30%, rgba(255,236,200,0) 60%);
  opacity: var(--lit);
}
.hero-lamp.breathe { animation: breathe 7s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { --lit: 0.06; } 50% { --lit: 0.16; } }
@property --lit { syntax: "<number>"; inherits: false; initial-value: 0; }
.hero-media img { transition: filter 1.2s var(--ease); }
.hero.is-lit .hero-media img { filter: brightness(1.02); }
/* the title wakes with a touch running through the letters */
@keyframes letterwave { 0% { font-variation-settings: "wght" 400; transform: none; } 45% { font-variation-settings: "wght" 740; transform: translateY(-4px); } 100% { font-variation-settings: "wght" 400; transform: none; } }
.hero h1.wave .l { animation: letterwave 1.1s cubic-bezier(.3,0,.2,1) both; animation-delay: calc(600ms + var(--i, 0) * 48ms); }
@media (prefers-reduced-motion: reduce) { .hero h1.wave .l { animation: none; } .hero-lamp.breathe { animation: none; } }
.hero-inner { width: 100%; padding-block: clamp(80px, 12vw, 140px) clamp(48px, 7vw, 90px); will-change: transform; }
.hero h1, .hero-caption { max-width: 44rem; }
.hero h1 { text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(2rem, 5vw, 4rem); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8rem; }
.scroll-hint { position: absolute; right: var(--gutter); bottom: 32px; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 12px; }
.scroll-hint i { display: block; width: 1px; height: 44px; background: var(--muted); animation: hint 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes hint { 0% { transform: scaleY(0); opacity: 0 } 40% { transform: scaleY(1); opacity: 1 } 100% { transform: translateY(44px) scaleY(0); opacity: 0 } }

/* ---------- the press light: hold anywhere and the page lights up from under your finger ---------- */
#press-light {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(255,236,200,0.62) 0, rgba(255,236,200,0.26) 16vmax, rgba(255,236,200,0.06) 34vmax, rgba(255,236,200,0) 52vmax);
  mix-blend-mode: plus-lighter;
}
@supports not (mix-blend-mode: plus-lighter) { #press-light { mix-blend-mode: screen; } }
#press-ring { position: fixed; left: 0; top: 0; z-index: 41; width: 64px; height: 64px; margin: -32px 0 0 -32px; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); }
#press-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
#press-ring circle { fill: none; stroke-width: 1; }
#press-ring .track { stroke: rgba(243,239,232,0.18); }
#press-ring .arc { stroke: var(--ink); stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.press-hint { position: absolute; right: var(--gutter); bottom: 32px; display: flex; align-items: center; gap: 12px; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.press-hint-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--muted); animation: pulse 2.6s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(243,239,232,.0); } 50% { box-shadow: 0 0 0 8px rgba(243,239,232,.08); } }
.press-readout { margin-left: 6px; font-variant-numeric: tabular-nums; color: var(--ink); opacity: 0; transition: opacity .3s; }
.hero[data-state="pressing"] .press-readout, .hero[data-state="lit"] .press-readout { opacity: 1; }
.hero-caption { position: relative; min-height: 3.4em; margin-bottom: .2em; }
.hero-caption .cap { position: absolute; inset: 0 auto auto 0; margin: 0; opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.hero[data-state="idle"] .cap[data-for="idle"], .hero[data-state="pressing"] .cap[data-for="pressing"], .hero[data-state="lit"] .cap[data-for="lit"], .hero[data-state="off"] .cap[data-for="off"] { opacity: 1; transform: none; }

/* ---------- touch type: letters swell under the pointer ---------- */
[data-touch-type] .w { display: inline-block; white-space: nowrap; }
[data-touch-type] .l { display: inline-block; font-variation-settings: "wght" var(--wght, 400); color: color-mix(in srgb, var(--ink), #fff1d6 calc(var(--press, 0) * 100%)); transition: font-variation-settings .25s ease-out, transform .25s ease-out; will-change: font-variation-settings; }

/* ---------- dim up: sections arrive the way the lamp does ---------- */
.dim { opacity: .14; filter: brightness(.45); transition: opacity 1.6s cubic-bezier(.3,.0,.2,1), filter 1.6s cubic-bezier(.3,.0,.2,1); }
.dim.lit { opacity: 1; filter: none; }
.dim [data-touch-type] .l { opacity: .12; transition: opacity .9s var(--ease); transition-delay: calc(var(--i, 0) * 28ms); }
.dim.lit [data-touch-type] .l { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .dim, .dim [data-touch-type] .l { opacity: 1 !important; filter: none !important; transition: none !important; } }

/* ---------- the button lamp: a fabric disc that behaves like the T.O.C. ---------- */
.lamp-demo {
  --lvl: 0; --dx: 50%; --dy: 50%;
  position: relative; width: min(78vw, 64svh, 560px); margin-inline: auto; aspect-ratio: 1; border-radius: 50%;
  cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; isolation: isolate;
  box-shadow: 0 0 0 1px rgba(243,239,232,.08), 0 40px 120px rgba(0,0,0,.6);
}
.lamp-demo:focus-visible { outline: 1px solid var(--ink); outline-offset: 10px; }
.demo-glow {
  position: absolute; inset: -40%; border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle at 50% 50%, rgba(255,241,214,.5) 0, rgba(255,241,214,.14) 32%, rgba(255,241,214,0) 62%);
  opacity: var(--lvl); transform: scale(calc(.7 + .4 * var(--lvl)));
}
.demo-fabric {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  filter: brightness(calc(.32 + 1.05 * var(--lvl))) saturate(calc(.6 + .5 * var(--lvl))) sepia(calc(.25 * var(--lvl)));
  transition: filter .1s linear;
}
.demo-fabric.next { opacity: 0; transition: opacity .9s var(--ease), filter .1s linear; }
.demo-fabric.next.show { opacity: 1; }
.demo-fabric::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at var(--dx) var(--dy), rgba(255,241,214,calc(.75 * var(--lvl))) 0, rgba(255,241,214,0) 46%),
              radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  mix-blend-mode: screen;
}
.demo-centre {
  position: absolute; inset: 18%; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), inset 0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.05);
  transform: scale(1); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.lamp-demo.is-touched .demo-centre { transform: scale(.975); box-shadow: inset 0 0 0 1px rgba(0,0,0,.45), inset 0 18px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05); }
.demo-ringbox { position: absolute; inset: -14px; pointer-events: none; }
.demo-ring { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.demo-ring circle { fill: none; stroke-width: .5; }
.demo-track { stroke: rgba(243,239,232,.14); }
.demo-arc { stroke: var(--ink); stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.demo-readout { position: absolute; left: 50%; top: calc(100% + 28px); transform: translateX(-50%); font-size: .68rem; letter-spacing: .22em; color: var(--muted); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .3s var(--ease); }
.lamp-demo.is-on .demo-readout, .lamp-demo.is-touched .demo-readout { opacity: 1; }
.demo-hint { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); opacity: .85; pointer-events: none; transition: opacity .6s var(--ease); animation: pulse 2.6s var(--ease) infinite; border-radius: 999px; padding: 8px 14px; }
.demo-hint.is-gone { opacity: 0; }

/* ---------- band: a full-width window onto a photo ---------- */
.band { position: relative; height: min(92svh, 860px); overflow: clip; display: grid; align-items: end; isolation: isolate; }
.band-media { position: absolute; inset: 0; z-index: -1; }
.band-media img { width: 100%; height: 100%; object-fit: cover; object-position: 22% 45%; filter: brightness(.7); will-change: transform; }
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,10,10,.75) 0%, rgba(10,10,10,0) 35%, rgba(10,10,10,.85) 100%); }
.band-text { width: 100%; padding-block: clamp(48px, 8vw, 100px); will-change: transform; }

/* ---------- models ---------- */
.models { display: grid; gap: clamp(24px, 4vw, 64px); grid-template-columns: 1fr; }
@media (min-width: 760px) { .models { grid-template-columns: 1fr 1fr; align-items: start; } .model:nth-child(2) { margin-top: clamp(40px, 8vw, 140px); } }
.model { display: grid; gap: 16px; will-change: transform; }
.model .photo { aspect-ratio: 4 / 5; }
.model header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 8px; }
.model h3 { margin: 0; }
.model .price { font-size: 1.1rem; font-weight: 300; }
.model .price small { font-size: .7rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.model > p { color: var(--muted); margin: 0; }
.spec summary { cursor: pointer; list-style: none; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); padding: 12px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; }
.spec summary::-webkit-details-marker { display: none; }
.spec summary::after { content: "+"; font-size: 1.1rem; line-height: 1; }
.spec[open] summary::after { content: "–"; }
.spec dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; font-size: .88rem; margin: 6px 0 12px; }
.spec dt { color: var(--muted); }
.spec dd { margin: 0; }
.model .btn { justify-self: start; }

figure { margin: 0; }
.photo { border-radius: var(--radius); overflow: hidden; background: var(--bg-2); }
.photo img, .photo video { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.photo.tall { aspect-ratio: 3 / 4; }
figcaption { font-size: .8rem; color: var(--muted); margin-top: 12px; line-height: 1.5; }
figcaption b { font-weight: 400; color: var(--ink); }

/* ---------- beats: one question per screen, in the studio's own words ---------- */
.beat { padding-block: clamp(90px, 12vw, 180px) clamp(24px, 4vw, 56px); }
.beat .wrap, .events > .wrap:first-child { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 32px); }
.beat-inner { grid-column: 1 / -1; will-change: transform; }
@media (min-width: 900px) { .beat-inner { grid-column: 1 / span 8; } }
.beat-inner h2, .band-text h2 { font-size: clamp(2.4rem, 5.6vw, 5.4rem); letter-spacing: -0.03em; line-height: 1.0; max-width: 12ch; margin: 0 0 .45em; }
.beat-inner .lede, .band-text .lede { font-weight: 300; max-width: 34ch; font-size: clamp(1.1rem, 1.5vw, 1.4rem); }
.beat-inner .lede { color: var(--muted); }
.band-text .lede { color: var(--ink); opacity: .9; }
.beat-inner .eyebrow, .band-text .eyebrow { margin-bottom: 2rem; }

/* ---------- shop media crops ---------- */
.shop-card:nth-child(1) .shop-media video, .shop-card:nth-child(1) .shop-media img { object-position: 62% 50%; }
.shop-card:nth-child(2) .shop-media video, .shop-card:nth-child(2) .shop-media img { object-position: 22% 50%; }

/* ---------- shop head ---------- */
.shop-intro { margin-bottom: clamp(40px, 6vw, 88px); will-change: transform; }
.shop-intro h2 { font-size: clamp(2.4rem, 5.6vw, 5.4rem); letter-spacing: -0.03em; line-height: 1.0; max-width: 12ch; margin: 0 0 .45em; }
.shop-intro .lede { color: var(--muted); font-weight: 300; max-width: 34ch; font-size: clamp(1.1rem, 1.5vw, 1.4rem); }
.shop-intro .muted { max-width: 34ch; margin-top: 1.2rem; font-size: .92rem; }
.shop-intro .eyebrow { margin-bottom: 2rem; }

#canvas { overflow: clip; }
/* ---------- canvas: the button lamp and its covers, then the collaborations ---------- */
.canvas-stage { display: grid; gap: clamp(40px, 6vw, 96px); grid-template-columns: 1fr; align-items: center; margin-bottom: clamp(90px, 13vw, 200px); }
@media (min-width: 900px) { .canvas-stage { grid-template-columns: minmax(20rem, 27rem) minmax(0, 1.05fr); } }
.canvas-lamp { display: grid; place-items: center; padding: clamp(24px, 4vw, 48px) 0 56px; will-change: transform; }
.canvas-head { will-change: transform; }
.canvas-head h2 { font-size: clamp(2.2rem, 4.4vw, 4rem); letter-spacing: -0.03em; }
.canvas-head .lede { color: var(--muted); font-weight: 300; max-width: 30ch; }
.fabric-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2.4rem; }
.fabric { position: relative; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.fabric img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: brightness(.7) saturate(.85); transition: filter .45s var(--ease), transform .45s var(--ease); }
.fabric::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid transparent; transition: border-color .35s var(--ease), transform .35s var(--ease); transform: scale(.9); }
.fabric:hover img { filter: brightness(1); transform: scale(1.05); }
.fabric[aria-checked="true"] img { filter: brightness(1); }
.fabric[aria-checked="true"]::after { border-color: var(--ink); transform: none; }
.fabric:focus-visible { outline: none; }
.fabric:focus-visible::after { border-color: var(--ink); }
.fabric span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.fabric-name { margin: 1.1rem 0 0; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 420px) { .fabric { width: 44px; height: 44px; } .fabric-row { gap: 12px; } }
.collab-intro { max-width: 40rem; margin-bottom: clamp(36px, 5vw, 72px); }
.collab-intro .lede { color: var(--muted); font-weight: 300; }
@media (max-width: 640px) {
  .band-media img { object-position: 28% 50%; }
  .band { height: 78svh; }
  .hero-media img { object-position: 74% 50%; }
}
.collabs { display: grid; gap: clamp(20px, 3vw, 48px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .collabs { grid-template-columns: 1.1fr 0.9fr 0.8fr; } .collab:nth-child(2) { margin-top: clamp(40px, 8vw, 120px); } .collab-cta { align-self: end; padding-bottom: 2rem; } }
.collab { will-change: transform; }
.collab-cta p { font-family: var(--font-head); font-size: 1.3rem; font-weight: 400; margin-bottom: 1rem; }

/* ---------- events ---------- */
.partners { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(22px, 4vw, 64px); margin-top: clamp(48px, 7vw, 100px); }
.partners .eyebrow { margin: 0; }
.partners img { height: clamp(22px, 2.6vw, 34px); width: auto; filter: invert(1) grayscale(1) brightness(1.3); opacity: .55; }
.gallery-drag {
  --vel: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(72vw, 400px); gap: clamp(16px, 2vw, 28px);
  overflow-x: auto; overscroll-behavior-x: contain;
  padding: clamp(24px, 4vw, 56px) 0 16px;
  cursor: grab; user-select: none; -webkit-user-select: none; scrollbar-width: none;
}
.gallery-drag::-webkit-scrollbar { display: none; }
.gallery-drag.is-dragging { cursor: grabbing; }
.gallery-drag figure { --near: 0; transform: skewX(calc(var(--vel) * -4deg)) scale(calc(.92 + .08 * var(--near))); transition: transform .5s var(--ease); }
.gallery-drag .photo { aspect-ratio: 4 / 5; position: relative; }
.gallery-drag .photo img { filter: brightness(calc(.28 + .82 * var(--near))) saturate(calc(.6 + .4 * var(--near))); transition: filter .6s var(--ease); pointer-events: none; }
.gallery-drag figcaption { opacity: calc(.25 + .75 * var(--near)); transition: opacity .6s var(--ease); }
.gallery-hint { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 8px auto 0; text-align: center; }

/* ---------- preorder ---------- */
.preorder { border-top: 1px solid var(--line); }
.split { display: grid; gap: clamp(32px, 6vw, 100px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.facts { list-style: none; margin: 1.6rem 0 0; padding: 0; color: var(--muted); font-size: .9rem; }
.facts li { padding: 10px 0; border-top: 1px solid var(--line); }
.form { display: grid; gap: 16px; }
.form .row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 0; border-radius: 0;
  background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid rgba(243,239,232,.25);
  font: inherit; font-weight: 300;
}
.field select option { background: var(--bg-2); }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--ink); outline: none; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .85rem; color: var(--muted); }
.check input { margin-top: 5px; accent-color: var(--ink); }
.form-status { font-size: .9rem; min-height: 1.4em; color: var(--muted); }
.form-status.err { color: #e07a6a; }
.form .btn { justify-self: start; margin-top: 8px; }

/* ---------- footer ---------- */
.site-footer { padding: 56px var(--gutter) 48px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--muted); }
.site-footer .cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); max-width: 1500px; margin-inline: auto; }
.site-footer a:hover { color: var(--ink); }
.site-footer .logo { width: 64px; height: auto; opacity: .8; margin-bottom: 12px; }
.hero h1 { position: relative; z-index: 1; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .chapter > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .scroll-hint i { animation: none; }
}