/* ────────────────────────────────────────────────────────────────────────
   AICHE — aiche.world
   The Art of Offline. Quiet editorial gallery.
   ──────────────────────────────────────────────────────────────────────── */

/* ───────── SUISSE INT'L — brand typeface ───────── */
/* Full family loaded: Thin (100) → Bold (700) + Book at 350 + Black Italic (900).  */
/* The brand book mentions Suisse Int'l Mono — we don't have it, so labels use      */
/* Suisse Int'l Regular set with wider tracking + uppercase to read as a label.    */

@font-face { font-family: 'Suisse Intl'; src: url('fonts/SuisseIntl-Thin.woff2')             format('woff2'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Suisse Intl'; src: url('fonts/SuisseIntl-ThinItalic.woff2')       format('woff2'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Suisse Intl'; src: url('fonts/SuisseIntl-Ultralight.woff2')       format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Suisse Intl'; src: url('fonts/SuisseIntl-UltralightItalic.woff2') format('woff2'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Suisse Intl'; src: url('fonts/SuisseIntl-Light.woff2')            format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Suisse Intl'; src: url('fonts/SuisseIntl-Book.woff2')             format('woff2'); font-weight: 350; font-style: normal; font-display: swap; }
@font-face { font-family: 'Suisse Intl'; src: url('fonts/SuisseIntl-Regular.woff2')          format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Suisse Intl'; src: url('fonts/SuisseIntl-RegularItalic.woff2')    format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Suisse Intl'; src: url('fonts/SuisseIntl-Medium.woff2')           format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Suisse Intl'; src: url('fonts/SuisseIntl-SemiBold.woff2')         format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Suisse Intl'; src: url('fonts/SuisseIntl-Bold.woff2')             format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Suisse Intl'; src: url('fonts/SuisseIntl-BlackItalic.woff2')      format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* Brand palette (default — primary) */
  --bg: #f9f9f2;            /* SAND */
  --ink: #1B1B1B;           /* SOFT BLACK */
  --accent: #5E7661;        /* AICHE GREEN */
  --ink-50: rgba(27,27,27,.50);
  --ink-30: rgba(27,27,27,.30);
  --ink-15: rgba(27,27,27,.15);
  --ink-08: rgba(27,27,27,.08);
  --rule: rgba(27,27,27,.18);

  /* Type */
  --sans: 'Suisse Intl', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --mono: 'Suisse Intl', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --track: -0.025em;        /* tracking -25 from the brand book */
  --track-label: 0.08em;    /* wider tracking for label/mono treatment */
  --track-mono: 0.08em;     /* alias kept for back-compat with older selectors */

  /* Layout */
  --pad: clamp(20px, 3vw, 48px);
  --gutter: clamp(16px, 2vw, 32px);
  --grain-amt: 1;   /* overlay-blended neutral grain (see .grain); presence also tuned via the noise-contrast slope */

  /* Motion — ONE brand curve reused everywhere (the "AICHE settle": a firm,
     over-damped ease-out that decelerates into rest, never a spring). §16. */
  --ease-aiche: cubic-bezier(.16, 1, .3, 1);
  --dur-settle: 1.15s;
  --dur-settle-slow: 1.6s;
}

* { box-sizing: border-box; }

/* Sand lives on the ROOT only. A `body` background would be painted AFTER (on top of)
   the z-index:-1 grain and bury it — keep body transparent so the grain shows through. */
html { background: var(--bg); overflow-x: hidden; }   /* belt-and-suspenders: no horizontal scroll on iOS */
html, body { margin: 0; padding: 0; color: var(--ink); max-width: 100%; }

/* Immersive: no visible scrollbars anywhere — scrolling still works
   (wheel / trackpad / touch / keyboard / drag). */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; }

/* Casual-save deterrent: no dragging images/videos out, no text-selection on them, and no
   iOS long-press "Save Image" callout. (Not real protection — see protect() in app.js.) */
img, video {
  -webkit-user-drag: none;
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;          /* Regular — brand book default */
  line-height: 1.45;
  letter-spacing: var(--track);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  cursor: none;
}

/* Restore native cursor on text inputs/touch contexts */
input, textarea, select { cursor: text; }
@media (hover: none) { body { cursor: auto; } #cursor { display: none; } }

/* Selection */
::selection { background: var(--ink); color: var(--bg); }

/* ───────── TYPE PRIMITIVES ───────── */
.mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-feature-settings: "tnum" 1;   /* tabular figures for HUDs / timecodes */
}
.dim   { color: var(--ink-50); }
.just  { text-align: justify; text-justify: inter-word; text-wrap: pretty; hyphens: auto; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; letter-spacing: inherit; }

/* Section titles */
.section-title {
  margin: 0;
  font-size: clamp(44px, 8vw, 128px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.92;
  display: flex;
  align-items: baseline;
  gap: 0.6em;
}
.section-title__no {
  font-size: 11px;
  letter-spacing: var(--track-mono);
  color: var(--ink-50);
  align-self: flex-start;
  padding-top: 0.4em;
  white-space: nowrap;
  font-weight: 400;
}
.section-title--xl { font-size: clamp(48px, 9.5vw, 144px); }

.section-lede {
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.4;
  letter-spacing: -0.018em;
  max-width: 56ch;
  margin: 0;
}

.lede {
  font-size: clamp(13px, 1.05vw, 17px);
  line-height: 1.45;
  max-width: 40ch;
  margin: 0;
}

/* ───────── GLOBAL OVERLAYS ───────── */

/* Grain — animated film noise */
.grain {
  position: fixed; inset: -50%;
  pointer-events: none;
  z-index: -1;                 /* behind content → textures the sand canvas, not the images */
  opacity: var(--grain-amt);
  /* NEUTRAL grain: opaque grey noise, contrast-stretched around mid-grey (out = 3·(in−0.5)+0.5),
     blended with `overlay`. Grey is the overlay identity, so the speckle adds light AND dark in
     balance → texture WITHOUT shifting the sand's average brightness. (The old recipe was BLACK
     noise + `multiply`, which only ever subtracts light, so it visibly tinted the whole canvas
     ~6% darker. soft-light is neutral too but vanishes on near-white sand; overlay keeps bite.)
     Presence levers: `--grain-amt` (opacity, currently maxed at 1) and the colorMatrix slope
     below (3 = punchy specks; raise it for more, lower for less — it stays brightness-neutral). */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='3 0 0 0 -1  3 0 0 0 -1  3 0 0 0 -1  0 0 0 0 1'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-8%, 6%); }
  40%  { transform: translate(5%, -4%); }
  60%  { transform: translate(-3%, -6%); }
  80%  { transform: translate(6%, 3%); }
  100% { transform: translate(0, 0); }
}

/* Custom cursor */
.cursor {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode: difference;
  color: #fff;
  transform: translate(-50%, -50%);
  transition: transform .12s ease-out, opacity .2s;
}
.cursor__ring {
  width: 28px; height: 28px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), border-radius .2s, opacity .2s;
}
.cursor__dot {
  position: absolute; left: 50%; top: 50%;
  width: 3px; height: 3px;
  background: currentColor; border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: opacity .2s ease;
}
/* The AICHE monogram — revealed on click in place of the ring. */
.cursor__logo {
  position: absolute; left: 50%; top: 50%;
  width: 34px; height: 34px;
  background: currentColor;
  -webkit-mask: url("media/logo-monogram.png") no-repeat center / contain;
          mask: url("media/logo-monogram.png") no-repeat center / contain;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.5);
  transition: opacity .2s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
.cursor[data-mode="hover"] .cursor__ring { transform: scale(2.4); }
.cursor[data-mode="image"] .cursor__ring { transform: scale(3.2); border-radius: 2px; }

/* Click: the ring + dot give way to the AICHE monogram. */
.cursor[data-mode="active"] .cursor__ring { opacity: 0; transform: scale(.55); }
.cursor[data-mode="active"] .cursor__dot  { opacity: 0; }
.cursor[data-mode="active"] .cursor__logo { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cursor__label {
  position: absolute;
  left: 22px; top: 18px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .2s;
  white-space: nowrap;
}
.cursor[data-label]:not([data-label=""]) .cursor__label { opacity: 1; }

/* ───────── PRELOADER ───────── */
.preloader {
  position: fixed; inset: 0; z-index: 11000;
  background: var(--bg); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease, visibility .5s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader__inner {
  width: min(560px, 90vw);
  display: grid; gap: 32px;
}
.preloader__mark { display: flex; justify-content: center; }
.preloader__logo {
  width: clamp(180px, 24vw, 280px);
  height: auto;
  display: block;
}
.preloader__labels { display: grid; gap: 6px; }
.preloader__labels .mono { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-50); }
.preloader__bar {
  height: 1px; background: var(--ink-15); overflow: hidden;
}
.preloader__bar i {
  display: block; height: 100%; width: 0%;
  background: var(--ink);
  transition: width .1s linear;
}

/* ───────── ARCHIVE INTRO — the gallery's black/sand "flip" preloader ───────── */
.archive-intro {
  position: fixed; inset: 0; z-index: 11500;
  background: var(--ink);                  /* flipped: soft-black field … */
  color: var(--bg);                        /* … with sand type/mark */
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .75s var(--ease-aiche), visibility .75s var(--ease-aiche);
}
/* snap on instantly (so the archive never flashes underneath); only the exit fades */
.archive-intro.is-playing { opacity: 1; visibility: visible; transition: none; }
.archive-intro__inner {
  --ai-w: clamp(154px, 22vw, 264px);       /* logo · quote · bar share one width → a tidy column */
  display: grid; gap: clamp(18px, 2.4vw, 28px); justify-items: center; text-align: center;
}
.archive-intro__mark {
  width: var(--ai-w);
  aspect-ratio: 2925 / 569;
  background-color: var(--bg);             /* sand logo via the wordmark mask */
  -webkit-mask: url("media/logo-black.png") no-repeat center / contain;
          mask: url("media/logo-black.png") no-repeat center / contain;
}
.archive-intro__quote {
  margin: 0; width: var(--ai-w);
  font-size: clamp(13px, 1.4vw, 18px);
  letter-spacing: var(--track);
  color: var(--bg);
  text-align: justify; text-align-last: justify;   /* spread the words to the logo's width */
}
.archive-intro__bar { width: var(--ai-w); height: 1px; background: rgba(249, 248, 238, .22); overflow: hidden; }
.archive-intro__bar i { display: block; height: 100%; width: 0%; background: var(--bg); }
/* staggered "settle" entrance — develops in, never pops */
.archive-intro__mark, .archive-intro__quote, .archive-intro__bar {
  opacity: 0; transform: translateY(10px);
  transition: opacity .7s var(--ease-aiche), transform .7s var(--ease-aiche);
}
.archive-intro.is-playing .archive-intro__mark  { opacity: 1; transform: none; transition-delay: .14s; }
.archive-intro.is-playing .archive-intro__quote { opacity: 1; transform: none; transition-delay: .30s; }
.archive-intro.is-playing .archive-intro__bar   { opacity: 1; transform: none; transition-delay: .44s; }
@media (prefers-reduced-motion: reduce) {
  .archive-intro__mark, .archive-intro__quote, .archive-intro__bar { transition: none; transform: none; opacity: 1; }
}

/* ───────── TOP NAV ───────── */
.topnav {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px var(--pad) 14px;
  gap: 24px;
  background: linear-gradient(180deg, var(--bg) 0%, color-mix(in oklab, var(--bg) 70%, transparent) 70%, transparent 100%);
}
.topnav__col { display: flex; align-items: baseline; gap: 14px; }
.topnav__col--c { gap: 28px; justify-content: center; }
.topnav__col--r { justify-content: flex-end; gap: 18px; }
/* Split-flap clock: a fixed-pitch row of cells, each flipping on its own X axis
   (departures-board / stock-ticker). Fixed cell width keeps the row from jittering
   as glyphs roll. */
.clock { display: inline-flex; white-space: nowrap; perspective: 340px; }
.clock .fc {
  display: inline-block;
  width: 0.86em;
  text-align: center;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.clock .fc.is-flipping { animation: fc-roll 92ms linear infinite; }
@keyframes fc-roll { 0%, 100% { transform: rotateX(0deg); } 50% { transform: rotateX(-60deg); } }
.wordmark {
  display: inline-block;
  height: clamp(13px, 1.2vw, 18px);
  aspect-ratio: 2925 / 569;
  background-color: currentColor;
  -webkit-mask: url("media/logo-black.png") no-repeat center / contain;
          mask: url("media/logo-black.png") no-repeat center / contain;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
}
/* The view tabs ARE the navigation. A quiet underline marks the active view. */
.navtab {
  appearance: none; background: transparent; border: none; cursor: none;
  font-family: var(--mono); font-size: 11px; font-weight: 400;
  letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--ink-50); padding: 4px 1px;
  position: relative; transition: color .3s var(--ease-aiche);
}
.navtab::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -3px;
  height: 1px; background: currentColor;
  transition: right .3s var(--ease-aiche);
}
.navtab:hover { color: var(--ink); }
.navtab.is-active { color: var(--ink); }
.navtab:hover::after,
.navtab.is-active::after { right: 0; }
/* The wordmark is a <button>; its mask is filled with `currentColor`. Inherit the nav's
   color so it follows the light↔dark flip — a button's UA `color` is black and does NOT
   inherit, which left the logo stuck black over both the dark hero and the light canvas. */
.wordmark { appearance: none; border: none; padding: 0; cursor: none; color: inherit; }
@media (max-width: 760px) {
  /* The tabs are the only navigation → keep them; drop to a second, centered row. */
  .topnav {
    grid-template-columns: 1fr auto;
    grid-template-areas: "wm clock" "tabs tabs";
    row-gap: 9px; padding-top: 12px; padding-bottom: 10px; gap: 12px;
  }
  .topnav__col--l { grid-area: wm; }
  .topnav__col--r { grid-area: clock; }
  .topnav__col--c { grid-area: tabs; display: flex; justify-content: center; gap: 28px; }
  .wordmark { height: clamp(8px, 2.4vw, 12px); }   /* smaller + scales with the screen on phones */
}

/* ───────── VIEW TABS — swap views in place (only one shown) ───────── */
.view { display: none; }
.view.is-active { display: block; }

/* ───────── SECTION SCAFFOLD ───────── */
section { position: relative; }

.corner {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10.5px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-50);
  z-index: 5;
}
.corner--tl { top: var(--pad); left: var(--pad); }
.corner--tr { top: var(--pad); right: var(--pad); text-align: right; }
.corner--bl { bottom: var(--pad); left: var(--pad); }
.corner--br { bottom: var(--pad); right: var(--pad); text-align: right; }

.corner--tl, .corner--tr, .corner--bl, .corner--br { padding-top: 56px; }
.corner--bl, .corner--br { padding-top: 0; padding-bottom: 0; }

@media (max-width: 760px) {
  .corner { font-size: 9.5px; }
  .corner--tl, .corner--tr { padding-top: 64px; }
}

.corner-inline {
  display: flex;
  gap: 16px;
  font-size: 10.5px;
}

/* Reveal-on-scroll */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s var(--ease-aiche), transform .9s var(--ease-aiche);
  transition-delay: var(--rev-delay, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ───────── 01 HERO ───────── */
.hero {
  min-height: 100svh;
  padding: 96px var(--pad) calc(var(--pad) + 80px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 60px;
  position: relative;
  overflow: hidden;
}

/* Fullscreen hero photograph — the page loads on this. */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;   /* JS overrides per random hero (smart-cropped to the head) */
  z-index: 0;
}
/* AICHE monogram, white, small — on the RIGHT, vertically centred. Holds that spot on every
   screen (right = the content pad, vertical = 50%); sized in vmin so it stays proportional. */
.hero__mono {
  position: absolute; top: 50%; right: var(--pad); transform: translateY(-50%);
  z-index: 2; pointer-events: none;
  width: clamp(44px, 7vmin, 78px);
  aspect-ratio: 1 / 1;
  background-color: #fff;
  -webkit-mask: url("media/logo-monogram.png") no-repeat center / contain;
          mask: url("media/logo-monogram.png") no-repeat center / contain;
  filter: drop-shadow(0 3px 18px rgba(0, 0, 0, .45));
  opacity: .96;
}
.hero__meta { position: relative; z-index: 2; }

.hero__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  max-width: 1100px;
}
.hero__meta-col {
  display: grid;
  gap: 10px;
}
.hero__meta-col--right { justify-self: end; text-align: right; }
.hero__meta-col--right .lede { margin-left: auto; }

@media (max-width: 900px) {
  /* The headline leads on mobile; the film sits below it, modest in scale. */
  .hero { justify-content: flex-end; gap: clamp(30px, 8vw, 56px); }
  .hero__meta { grid-template-columns: 1fr; gap: 18px; }
  .hero__meta-col--right { justify-self: stretch; text-align: left; }
  .hero__meta-col--right .lede { margin-left: 0; }
}

/* Buttons */
.btn {
  appearance: none;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 14px 22px;
  cursor: none;
  transition: background .25s, color .25s, transform .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn--filled {
  background: var(--bg); color: var(--ink); border-color: var(--bg);
}
.btn--filled:hover { background: transparent; color: var(--bg); }
.btn--ghost { background: transparent; }
.btn--wide { width: 100%; padding: 16px 22px; }

/* ───────── 05 PLEASURE CLUB ───────── */
.club {
  padding: clamp(80px, 12vw, 180px) var(--pad);
  background: transparent;
}
.club > .corner { display: none; }   /* the cinema's film HUD carries the section chrome now */

/* ═══════ PLEASURE CLUB — cinematic "edit bay" film hero (dark, full-bleed) ═══════ */
.club-cinema {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: calc(-1 * clamp(80px, 12vw, 180px));   /* eat the section's top padding → starts at the top */
  height: min(92vh, 860px);
  min-height: 520px;
  background: #0b0a07;            /* near-black film field */
  overflow: hidden;
  isolation: isolate;
}
.club-cinema__film {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.66) contrast(1.12) saturate(.82);   /* dark cinematic grade */
}
.club-cinema__grade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(125% 95% at 50% 38%, transparent 42%, rgba(0, 0, 0, .5) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, transparent 24%, transparent 58%, rgba(0, 0, 0, .82) 100%);
}
.club-cinema__bar {
  position: absolute; left: 0; right: 0; z-index: 4; height: clamp(26px, 5vh, 56px);
  background: #000; pointer-events: none;
}
.club-cinema__bar--t { top: 0; }
.club-cinema__bar--b { bottom: 0; }

/* camera-readout HUD */
.club-cinema__hud { position: absolute; inset: 0; z-index: 5; pointer-events: none; color: var(--bg); }
.cin-hud {
  position: absolute; font-size: 10px; letter-spacing: var(--track-label);
  color: rgba(249, 248, 238, .8); line-height: 1.5;
}
/* top labels sit below the fixed nav line (~55px) so they never tuck under it */
.cin-hud--tl { top: clamp(62px, 9vh, 82px); left: clamp(44px, 5.5vw, 70px); }
.cin-hud--tr { top: clamp(62px, 9vh, 82px); right: clamp(44px, 5.5vw, 70px); text-align: right; }
.cin-rec { color: #e2584c; font-style: normal; font-weight: 400; animation: cin-blink 1.7s steps(1, end) infinite; }
@keyframes cin-blink { 0%, 58% { opacity: 1; } 59%, 100% { opacity: .25; } }
#cin-tc, #cin-tc2 { font-variant-numeric: tabular-nums; }
.cin-bracket { position: absolute; width: 20px; height: 20px; z-index: 5; border: 1px solid rgba(249, 248, 238, .5); }
.cin-bracket--tl { top: clamp(62px, 9vh, 82px); left: clamp(16px, 2.5vw, 34px); border-right: 0; border-bottom: 0; }
.cin-bracket--tr { top: clamp(62px, 9vh, 82px); right: clamp(16px, 2.5vw, 34px); border-left: 0; border-bottom: 0; }
.cin-bracket--bl { bottom: clamp(58px, 9vh, 80px); left: clamp(16px, 2.5vw, 34px); border-right: 0; border-top: 0; }
.cin-bracket--br { bottom: clamp(58px, 9vh, 80px); right: clamp(16px, 2.5vw, 34px); border-left: 0; border-top: 0; }

/* exterior establishing shot → reference monitor */
.club-cinema__monitor {
  position: absolute; z-index: 6; margin: 0;
  right: clamp(16px, 2.5vw, 34px); bottom: clamp(70px, 11vh, 104px);
  width: clamp(148px, 19vw, 264px); aspect-ratio: 16 / 9;
  border: 1px solid rgba(249, 248, 238, .5);
  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, .85);
  background: #000; overflow: hidden;
}
.club-cinema__monitor-v {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: brightness(.76) contrast(1.08) saturate(.85);
}
.club-cinema__monitor figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; justify-content: space-between; gap: 8px;
  padding: 5px 7px; font-size: 8.5px; letter-spacing: var(--track-label);
  color: rgba(249, 248, 238, .85); background: linear-gradient(transparent, rgba(0, 0, 0, .85));
}

/* placard → title card (light card on dark film = the brand's contrast spine) */
.club-cinema__card {
  position: absolute; z-index: 6;
  left: clamp(16px, 2.6vw, 44px); bottom: clamp(64px, 10vh, 104px);
  max-width: min(380px, 72vw);
}
.placard--film { width: min(380px, 100%); box-shadow: 0 26px 80px -30px rgba(0, 0, 0, .9); }

@media (max-width: 760px) {
  .club-cinema { height: 100svh; height: 100dvh; min-height: 460px; }   /* fullscreen film on phones */
  .club-cinema__monitor { width: clamp(116px, 34vw, 152px); right: clamp(12px, 3vw, 16px); top: clamp(62px, 11vh, 80px); bottom: auto; }
  .cin-hud--tr { display: none; }                 /* the monitor owns this corner on mobile */
  .club-cinema__card { left: 50%; transform: translateX(-50%); bottom: clamp(58px, 10vh, 82px); width: min(340px, 84vw); max-width: 84vw; }
  .placard--film { width: 100%; padding: 24px 26px 22px; }
  .cin-bracket { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cin-rec { animation: none; } }
.events {
  list-style: none;
  margin: clamp(48px, 7vw, 96px) auto 0;
  padding: 0;
  max-width: 1480px;
  border-top: 1px solid var(--rule);
}
.event {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  align-items: baseline;
  gap: clamp(16px, 3vw, 48px);
  padding: clamp(20px, 2.4vw, 36px) 0;
  border-bottom: 1px solid var(--rule);
  transition: padding-left .35s cubic-bezier(.2,.7,.2,1);
}
.event:hover { padding-left: 12px; }
.event__date {
  display: flex; gap: 10px; align-items: baseline;
  font-size: 13px;
  letter-spacing: var(--track-mono);
}
.event__date span:first-child { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; font-family: var(--sans); text-transform: none; }
.event__title h4 {
  margin: 0 0 4px;
  font-size: clamp(22px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.event__title p { margin: 0; }
.event__cta a {
  position: relative;
  font-size: 12px;
  letter-spacing: var(--track-mono);
}
.event__cta a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: currentColor;
  transform-origin: right;
  transform: scaleX(1);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.event:hover .event__cta a::after { transform: scaleX(0); transform-origin: left; animation: linewipe .7s ease forwards; }
@keyframes linewipe {
  0% { transform: scaleX(0); transform-origin: left; }
  60% { transform: scaleX(1); }
  100% { transform: scaleX(1); transform-origin: right; }
}
/* PFW showroom: just the address (not clickable) */
.event__addr { font-size: 11px; letter-spacing: var(--track-mono); color: var(--ink-50); white-space: nowrap; }
/* The other events are locked — a non-clickable padlock label (cursor reads "locked") */
.event__lock {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; letter-spacing: var(--track-mono); color: var(--ink-30);
  cursor: none; transition: color .3s var(--ease-aiche);
}
.event__lock svg { display: block; flex: none; }
.event:hover .event__lock { color: var(--ink-50); }   /* faint reveal on hover — still not clickable */

@media (max-width: 900px) {
  .event { grid-template-columns: 1fr; gap: 6px; padding-block: 22px; }
  .event__date span:first-child { font-size: 18px; }
}

/* Placard — reused as the cinema title card (.placard--film) */
.placard {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--ink);
  padding: 36px 40px 32px;
  width: min(420px, 100%);
  display: grid;
  gap: 18px;
}
.placard__top {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: var(--track-mono);
}
.placard__addr {
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -0.022em;
  line-height: 1.15;
  font-weight: 500;
}
.placard__hours { display: grid; gap: 6px; font-size: 11px; }
.placard__hours > div { display: flex; justify-content: space-between; }
.placard__seal {
  position: absolute;
  right: -28px; bottom: -28px;
  color: var(--accent);
  background: var(--bg);
  border-radius: 50%;
  padding: 4px;
  line-height: 0;          /* kill the inline line-box → the round box stays a true circle */
}
.placard__seal svg { display: block; }

/* ───────── 06 VISIT ───────── */
/* Dark "Private Viewing": the room's coordinates + an appointment slip with the green seal.
   Soft-black (distinct from the #1B1B1B footer) → the page closes into the dark. */
.visit {
  padding: clamp(96px, 13vw, 200px) var(--pad);
  background: #0d0c09;
  color: var(--bg);
  position: relative;
}
.visit .corner { color: rgba(249, 248, 238, .5); }   /* light corners over the dark */
.visit .section-title { color: var(--bg); }

.visit__grid {
  display: grid;
  grid-template-columns: 1fr minmax(340px, 480px);
  gap: clamp(40px, 6vw, 110px);
  max-width: 1480px;
  margin: 56px auto 0;
  align-items: center;
}
.visit__copy { display: grid; gap: clamp(26px, 3vw, 40px); }
.visit__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; color: rgba(249, 248, 238, .72); }
.visit__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .visit__dot { animation: visit-pulse 2.6s ease-out infinite; }
}
@keyframes visit-pulse {
  0% { box-shadow: 0 0 0 0 rgba(94, 118, 97, .55); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(94, 118, 97, 0); }
}

/* THE ROOM — coordinate rows */
.visit__room { display: grid; max-width: 540px; }
.visit__room > div {
  display: grid; grid-template-columns: clamp(86px, 9vw, 116px) 1fr; gap: 14px;
  padding: 12px 0; align-items: baseline;
  border-top: 1px solid rgba(249, 248, 238, .14);
}
.visit__room > div:last-child { border-bottom: 1px solid rgba(249, 248, 238, .14); }
.visit__room dt { color: rgba(249, 248, 238, .42); font-size: 10px; }
.visit__room dd { margin: 0; color: rgba(249, 248, 238, .9); font-size: 12px; letter-spacing: .01em; }

/* YOUR REQUEST — the appointment slip */
.visit__form {
  position: relative; display: grid; gap: 15px;
  padding: clamp(26px, 2.6vw, 38px);
  background: rgba(249, 248, 238, .035);
  border: 1px solid rgba(249, 248, 238, .2);
}
.visit__form-head {
  display: flex; justify-content: space-between; font-size: 10px;
  color: rgba(249, 248, 238, .55);
  padding-bottom: 18px; margin-bottom: 4px;
  border-bottom: 1px solid rgba(249, 248, 238, .16);
}
.field { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.visit .field > span { color: rgba(249, 248, 238, .5); }
.visit .field input, .visit .field select, .visit .field textarea {
  appearance: none; background: transparent; border: 0;
  border-bottom: 1px solid rgba(249, 248, 238, .28);
  padding: 10px 0 8px;
  font-family: var(--sans); font-size: 15px; letter-spacing: -0.015em;
  color: var(--bg); width: 100%; outline: none; border-radius: 0;
  color-scheme: dark;
  transition: border-color .3s var(--ease-aiche);
}
.visit .field input::placeholder, .visit .field textarea::placeholder { color: rgba(249, 248, 238, .38); }
.visit .field input:focus, .visit .field select:focus, .visit .field textarea:focus { border-bottom-color: var(--accent); }
.visit .field textarea { resize: vertical; min-height: 56px; }
.visit .field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23F9F8EE' d='M0 0h10L5 6z'/></svg>");
  background-repeat: no-repeat; background-position: right 4px center; padding-right: 24px;
}
.visit .field select option { color: var(--ink); }
.visit__fineprint { margin: 6px 0 0; font-size: 10px; color: rgba(249, 248, 238, .42); }
.visit__sent { margin: 6px 0 0; font-size: 11px; color: var(--accent); }

/* wax-stamp seal — green, hanging off the slip's top-right (echoes the placard seal) */
.visit__seal {
  position: absolute; top: -26px; right: -26px;
  color: var(--accent); background: #0d0c09; border-radius: 50%; padding: 5px; line-height: 0;
}
.visit__seal svg { display: block; }

/* the CTA inverts on the dark: sand fill, ink text */
.visit .btn--filled { background: var(--bg); color: var(--ink); border-color: var(--bg); margin-top: 4px; }
.visit .btn--filled:hover { background: transparent; color: var(--bg); }

@media (max-width: 900px) {
  .visit__grid { grid-template-columns: 1fr; gap: clamp(34px, 8vw, 52px); align-items: start; }
  .visit__seal { top: -20px; right: -12px; }
  .visit__form-head span:last-child { display: none; }   /* N° already on the corner; let the seal sit clear */
}

/* ───────── FOOTER ───────── */
.foot {
  padding: clamp(48px, 6vw, 80px) var(--pad) clamp(24px, 3vw, 40px);
  background: var(--ink);
  color: var(--bg);
  display: grid;
  gap: clamp(32px, 4vw, 60px);
}
.foot__wordmark {
  display: block;
  width: 385px;
  aspect-ratio: 385 / 75;
  height: auto;
  background-color: currentColor;
  -webkit-mask: url("media/logo-white.png") no-repeat center / contain;
          mask: url("media/logo-white.png") no-repeat center / contain;
  text-indent: -9999px;
  white-space: nowrap;
  overflow: hidden;
  margin: 0;
}
.foot__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  font-size: 10px;
  padding-top: 18px;
  border-top: 1px solid rgba(249,248,238,.18);
}
.foot__cols > div { display: flex; flex-direction: column; gap: 6px; }
.foot__cols > div:nth-child(2) { align-items: flex-end; text-align: right; }
.foot__cols > div:nth-child(2) a { padding: 2px 0; }
.foot .dim { color: rgba(249,248,238,.55); }
.foot a:hover { opacity: .7; }

@media (max-width: 700px) {
  .foot__wordmark { width: 96px; }   /* 75% smaller than the desktop 385px */
  .foot__cols { grid-template-columns: 1fr; }
  .foot__cols > div:nth-child(2) { align-items: flex-start; text-align: left; }
}

/* ───────── ARCHIVE ───────── */
.archive {
  padding: clamp(80px, 12vw, 180px) 0 clamp(60px, 8vw, 120px);
  background: transparent;
  position: relative;
}
/* ═══════ COLLECTIONS — archive cabinet: folder tabs over an infinite drawer ═══════ */
:root { --coll-drawer: var(--bg); }   /* flipped: the gallery is now light (sand), not a dark light-table */

/* Folder tabs — a single horizontally-scrollable strip on the lip of the drawer */
.coll-tabbar {
  display: flex;
  align-items: flex-end;
  gap: clamp(3px, 0.4vw, 7px);
  padding: 0 var(--pad);
  max-width: 1680px;
  margin: 0 auto;
  min-width: 0;            /* let it shrink below the tab strip's width → .coll-tabs scrolls */
  position: relative;
  z-index: 3;
}
.coll-tabs {
  display: flex;
  flex-wrap: nowrap;                    /* one strip — never wraps */
  gap: clamp(3px, 0.4vw, 7px);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;                     /* …it scrolls sideways instead */
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.coll-tabs::-webkit-scrollbar { display: none; }
.coll-tab {
  flex: 0 0 auto;                        /* keep size → overflow scrolls */
  appearance: none;
  background: color-mix(in oklab, var(--bg) 86%, var(--ink));   /* manila */
  border: 1px solid var(--rule);
  border-bottom: none;
  color: var(--ink-50);
  cursor: none;
  padding: 9px 15px 11px;
  display: grid;
  gap: 1px;
  text-align: left;
  white-space: nowrap;
  transition: color .35s var(--ease-aiche), background .35s var(--ease-aiche), border-color .35s var(--ease-aiche);
}
.coll-tab__season { font-family: var(--mono); font-size: 11px; letter-spacing: var(--track-mono); }
.coll-tab__title { font-size: 12px; letter-spacing: -0.01em; color: var(--ink-30); transition: color .35s var(--ease-aiche); }
.coll-tab:hover { color: var(--ink); }
.coll-tab.is-active {                    /* sand fill flush with the drawer below = open folder */
  background: var(--coll-drawer);
  border-color: var(--rule);
  color: var(--ink);
}
.coll-tab.is-active .coll-tab__title { color: var(--ink-50); }

/* The drawer — a dark recessed well; the infinite grid lives inside it */
.coll-drawer {
  position: relative;
  max-width: 1680px;
  margin: 0 auto;
  height: clamp(460px, 66vh, 780px);
  background: var(--coll-drawer);
  overflow: hidden;
}

.coll-viewport {
  position: absolute; inset: 0;
  overflow: hidden;
  touch-action: none;                 /* the gallery owns the gesture — drag pans, not scroll */
  cursor: none;
}
.coll-viewport.is-dragging { cursor: none; }
.coll-plane { position: absolute; top: 0; left: 0; display: grid; will-change: transform; }
.coll-tile { display: grid; }

.coll-item {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: color-mix(in oklab, var(--bg) 92%, var(--ink));   /* faint warm placeholder behind a loading frame */
  outline: 1px solid rgba(27, 27, 27, .08);
  outline-offset: -1px;
}
.coll-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.82) brightness(.95);
  transition: filter .6s var(--ease-aiche), transform 1.1s var(--ease-aiche);
  user-select: none; -webkit-user-drag: none;
}
.coll-item:hover img { filter: saturate(1.05) brightness(1.02); transform: scale(1.05); }
.coll-item__no {
  position: absolute; top: 8px; left: 9px; z-index: 2;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: var(--track-label);
  color: rgba(249, 248, 238, .72);
  text-shadow: 0 1px 5px rgba(0, 0, 0, .65);
}
.coll-item__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 7px;
  padding: 24px 9px 9px;
  font-family: var(--mono); font-size: 9px;
  color: var(--bg);
  background: linear-gradient(transparent, rgba(0, 0, 0, .82));
  opacity: 0; transform: translateY(5px);
  transition: opacity .4s var(--ease-aiche), transform .4s var(--ease-aiche);
}
.coll-item:hover .coll-item__cap { opacity: 1; transform: none; }
.coll-item__k { flex: none; padding: 2px 5px 1px; background: var(--accent); color: var(--bg); letter-spacing: .05em; }
.coll-item--piece .coll-item__k { background: var(--bg); color: var(--ink); }
.coll-item--set .coll-item__k { background: var(--accent); color: var(--bg); }
.coll-item--lookbook .coll-item__k { background: transparent; color: var(--bg); box-shadow: inset 0 0 0 1px rgba(249, 248, 238, .6); }
.coll-item__l { letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Drawer overlays: meta label (top-left), hint (bottom-right), recess shadow */
.coll-meta {
  position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none;
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline;
  padding: 13px 18px 15px;
  max-width: 82%;
  font-size: 10.5px; color: rgba(27, 27, 27, .55);
  background: linear-gradient(108deg, rgba(249, 249, 242, .94) 45%, rgba(249, 249, 242, 0));
}
.coll-meta__t { color: var(--ink); font-size: 12px; letter-spacing: .01em; }
.coll-hint {
  position: absolute; right: 16px; bottom: 13px; z-index: 5; pointer-events: none;
  font-size: 9px; letter-spacing: var(--track-label); color: rgba(27, 27, 27, .5);
  text-shadow: 0 1px 4px rgba(249, 248, 238, .55);   /* stay legible over darker frames */
}
.coll-hint__mob { display: none; }
.coll-recess {                            /* flipped to light: just a faint inner hairline, no dark vignette */
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(27, 27, 27, .07);
}

/* ── Archive as its own tab: the cabinet fills the view, the drawer takes the height ──
   No scroll-into-fullscreen any more — the ARCHIVE view IS the gallery, so the stage just
   flex-fills the viewport below the header and the drawer claims the remaining space. */
html.is-archive .topnav { display: none; }   /* the gallery owns the screen — ✕ Close is the only way back */
.view--archive { height: 100vh; height: 100dvh; overflow: hidden; }
.view--archive .archive {
  height: 100%;
  padding: 0;
  display: flex; flex-direction: column;
}
.view--archive .corner { display: none; }
.coll-stage {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  padding-top: clamp(12px, 2vh, 20px);   /* compact — nav is hidden, so the gallery fills the screen */
}
.coll-stage .coll-tabbar { flex: 0 0 auto; max-width: none; width: 100%; min-width: 0; }   /* full-bleed; lock to stage width so .coll-tabs scrolls */
.coll-stage .coll-tabs { padding-right: clamp(78px, 9vw, 116px); }   /* keep the last tab clear of the fixed ✕ Close */
.coll-stage .coll-drawer {
  flex: 1 1 auto; min-height: 0;
  height: auto;
  max-width: none; width: 100%;            /* fill the screen edge-to-edge */
}

/* ✕ Close — fixed top-right, the only exit from the fullscreen gallery */
.coll-close {
  position: fixed; top: clamp(11px, 1.6vw, 18px); right: clamp(12px, 2vw, 24px); z-index: 1000;
  appearance: none; border: none; cursor: none;
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink-50);
  font-family: var(--mono); font-size: 11px; letter-spacing: var(--track-label);
  /* a faint sand chip keeps ✕ Close legible if a tab scrolls behind it */
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  padding: 7px 11px;
  transition: color .3s var(--ease-aiche), background .3s var(--ease-aiche);
}
.coll-close:hover { color: var(--ink); }
.coll-close__x { font-size: 15px; line-height: 1; }

/* Placeholder shown for seasons whose pictures aren't in yet */
.coll-empty {
  position: absolute; inset: 0; z-index: 3;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: clamp(12px, 1.6vw, 20px); padding: var(--pad);
}
.coll-drawer.is-empty .coll-empty { display: flex; }
.coll-drawer.is-empty .coll-viewport,
.coll-drawer.is-empty .coll-meta,
.coll-drawer.is-empty .coll-hint { display: none; }
.coll-empty__season { font-family: var(--mono); font-size: 11px; letter-spacing: var(--track-label); color: var(--ink-50); }
.coll-empty__title {
  margin: 0; font-weight: 600; text-transform: uppercase;
  font-size: clamp(30px, 5.5vw, 72px); line-height: .96; letter-spacing: -0.035em;
  max-width: 18ch; color: var(--ink);
}
.coll-empty__note { font-family: var(--mono); font-size: 10.5px; letter-spacing: var(--track-label); color: var(--ink-30); }

/* ── Lightbox (click a picture → enlarge / fill the screen) ── */
.coll-lightbox {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(8, 7, 5, .95);
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--ease-aiche);
}
.coll-lightbox.is-open { opacity: 1; pointer-events: auto; }
.coll-lightbox__img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  box-shadow: 0 50px 130px -50px rgba(0, 0, 0, .9);
  transform: scale(.97);
  transition: transform .45s var(--ease-aiche);
}
.coll-lightbox.is-open .coll-lightbox__img { transform: scale(1); }
.coll-lightbox__close {
  position: fixed; top: clamp(10px, 1.6vw, 20px); right: clamp(12px, 1.8vw, 24px);
  z-index: 1102;
  appearance: none; background: transparent; border: none; cursor: none;
  color: var(--bg); font-size: 22px; line-height: 1; padding: 8px;
  opacity: .8; transition: opacity .3s var(--ease-aiche);
}
.coll-lightbox__close:hover { opacity: 1; }
.coll-lightbox__cap {
  position: fixed; left: 0; right: 0; bottom: clamp(16px, 3vw, 30px);
  z-index: 1102; text-align: center; pointer-events: none;
  font-size: 10.5px; letter-spacing: var(--track-label);
  color: rgba(249, 248, 238, .72);
}

/* "Develop, don't fade" entrance (CLAUDE.md §16) — grain/blur resolving to sharp */
@media (prefers-reduced-motion: no-preference) {
  .coll-plane .coll-item {
    opacity: 0;
    filter: blur(8px) saturate(.4);
    transform: translateY(10px) scale(.99);
  }
  .coll-plane.is-in .coll-item {
    opacity: 1; filter: none; transform: none;
    transition: opacity .8s var(--ease-aiche) var(--d, 0s),
                filter 1s var(--ease-aiche) var(--d, 0s),
                transform 1s var(--ease-aiche) var(--d, 0s);
  }
}

@media (max-width: 760px) {
  .archive .corner { display: none; }
  .coll-hint__pc { display: none; }
  .coll-hint__mob { display: inline; }
  .coll-meta { max-width: 92%; }
  .coll-item__cap { opacity: 1; transform: none; }   /* no hover on touch → always show */
}

/* ───────── 07 STOCKISTS — interactive dotted map ───────── */
.stockists {
  padding: clamp(64px, 8vw, 120px) var(--pad) clamp(60px, 8vw, 120px);
  background: transparent;
}
/* The heading sits over the map, top-left (editorial layered look). */
.stockists__head {
  position: absolute;
  top: clamp(2px, 1vw, 12px);
  left: clamp(2px, 1vw, 12px);
  z-index: 4;
  margin: 0;
  max-width: 64%;
  pointer-events: none;
}

.stockists__map {
  position: relative;
  max-width: 1480px;
  margin: 0 auto;
}
.map {
  display: block;
  width: 100%;
  height: auto;       /* outer <svg> clips to viewBox by default — keeps zoom framed */
}
.map__zoom {
  transform-box: view-box;
  transform-origin: 0 0;
  transition: transform 1.4s var(--ease-aiche);
}

/* World (default) layer: gray land dots + green retailers. */
.map__dot  { fill: rgba(27,27,27,.20); transition: opacity .7s var(--ease-aiche); }
.map__room { fill: var(--accent); transition: opacity .6s var(--ease-aiche); }

/* Vector outline map: hidden on the world view, fades in on a search/zoom. */
.map__vector {
  stroke: rgba(27,27,27,.5);
  stroke-width: 1;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 1s var(--ease-aiche);
}
/* On a result, the dots dissolve and the vector map + path resolve in. */
.stockists__map.has-result .map__dot    { opacity: .10; }
.stockists__map.has-result .map__room   { opacity: 0; }
.stockists__map.has-result .map__vector { opacity: 1; }

.map__path {
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.map__userdot { fill: var(--ink); }

/* Nearest-few retailer dots — clickable; the selected one pulses. */
.map__hit { fill: transparent; }
.map__resultdot-c {
  fill: var(--accent); opacity: .68;
  transform-box: fill-box; transform-origin: center;
  transition: opacity .25s var(--ease-aiche);
}
.map__resultdot:hover .map__resultdot-c { opacity: 1; }
.map__resultdot.is-sel .map__resultdot-c { opacity: 1; animation: room-pulse 1.9s ease-in-out infinite; }
@keyframes room-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.7); opacity: .6; }
}

/* Only the result markers take pointer events; the rest of the map ignores them. */
.map__dots, .map__vector, .map__rooms, .map__path, .map__labels { pointer-events: none; }
.map__resultdot { pointer-events: auto; cursor: none; }
/* Constant-size map labels (the parent <g> counter-scales the zoom). */
.map__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-anchor: middle;
  fill: var(--ink);
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 3.5px;
  stroke-linejoin: round;
}
.map__label--room { fill: var(--accent); }

/* The elevated search — floats centered over the map, rises to the top on a result. */
.stockfind {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, 86%);
  display: grid;
  gap: 10px;
  padding: clamp(18px, 2vw, 26px);
  background: color-mix(in oklab, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  border: 1px solid var(--rule);
  box-shadow: 0 28px 64px -34px rgba(27,27,27,.5);
  z-index: 5;
  transition: top .8s var(--ease-aiche), transform .8s var(--ease-aiche),
              width .8s var(--ease-aiche);
}
.stockfind__label { font-size: 10px; }
.stockfind__row { display: flex; gap: 8px; align-items: stretch; }
.stockfind__input {
  flex: 1; min-width: 0;
  border: 0; border-bottom: 1px solid var(--ink-30);
  background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: -0.02em; padding: 6px 2px;
}
.stockfind__input::placeholder { color: var(--ink-30); }
.stockfind__input:focus { outline: none; border-bottom-color: var(--accent); }
.stockfind__btn {
  flex: 0 0 auto;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--bg);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 0 18px; cursor: none;
  transition: background .25s, color .25s, opacity .2s;
}
.stockfind__btn:hover { background: transparent; color: var(--ink); }
.stockfind__btn[disabled] { opacity: .5; }
.stockfind__status { font-size: 10px; min-height: 13px; }

.stockists__map.has-result .stockfind {
  top: auto; bottom: clamp(14px, 2vw, 24px);
  left: auto; right: clamp(14px, 2vw, 24px);
  transform: none;
  width: min(360px, 86%);
}

/* Result card — a dark "viewing booth" that develops in over the map. */
.stockcard {
  position: absolute;
  left: clamp(14px, 2vw, 28px);
  bottom: clamp(14px, 2vw, 28px);
  width: min(330px, 82%);
  background: var(--ink);
  color: var(--bg);
  padding: clamp(20px, 2vw, 28px);
  display: grid;
  gap: 12px;
  z-index: 6;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .6s var(--ease-aiche), transform .6s var(--ease-aiche);
}
.stockists__map.has-result .stockcard { opacity: 1; transform: none; pointer-events: auto; }
.stockcard__close {
  position: absolute; top: 12px; right: 12px;
  background: transparent; border: 0; color: var(--bg);
  font-size: 12px; cursor: none; opacity: .55;
}
.stockcard__close:hover { opacity: 1; }
.stockcard__top {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 10px; color: rgba(249,248,238,.55); padding-right: 18px;
}
.stockcard__status.is-open   { color: var(--accent); }
.stockcard__status.is-closed { color: rgba(249,248,238,.5); }
.stockcard__name {
  margin: 0; font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600; letter-spacing: -0.03em; line-height: 1;
}
.stockcard__where { margin: 0; font-size: 10px; }
.stockcard__addr {
  margin: 0; font-size: 13px; line-height: 1.45;
  color: rgba(249,248,238,.82); max-width: 36ch;
}
.stockcard__meta { display: grid; gap: 8px; margin: 4px 0 0; }
.stockcard__meta > div { display: grid; grid-template-columns: 60px 1fr; gap: 10px; align-items: baseline; }
.stockcard__meta dt { font-size: 10px; color: rgba(249,248,238,.5); margin: 0; }
.stockcard__meta dd { font-size: 12px; margin: 0; color: var(--bg); letter-spacing: .02em; }

.stockists__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
  margin: clamp(64px, 8vw, 120px) auto 0;
  border-top: 1px solid var(--rule);
  max-width: 1480px;
}

/* ── Mobile: stack heading → search → map → card so nothing overlaps the
      map. The panels no longer float over a tiny map; each gets its own row,
      and the map stays fully visible (and zooms into the result). ── */
@media (max-width: 900px) {
  .stockists { padding-top: clamp(72px, 16vw, 110px); }
  .stockists .corner { display: none; }          /* corner labels crowd the heading here */

  .stockists__map { display: flex; flex-direction: column; }

  .stockists__head {
    position: static; order: 0;
    max-width: none; margin: 0 0 clamp(16px, 4vw, 24px);
    pointer-events: auto;
  }

  .stockfind {
    position: static; order: 1; transform: none;
    inset: auto; width: 100%;
    margin: 0 0 clamp(18px, 5vw, 26px);
  }
  .stockists__map.has-result .stockfind {
    position: static; inset: auto; transform: none; width: 100%;
  }

  /* Stacked layout: the map gets its own generous height instead of a thin
     ~2:1 strip. The SVG is `slice` so the (Europe-centred) content fills the
     taller box rather than letterboxing — the search result reads far bigger. */
  .map { order: 2; width: 100%; height: clamp(380px, 64vh, 560px); }

  .stockcard {
    order: 3; position: static; inset: auto;
    width: auto; margin: clamp(18px, 5vw, 26px) 0 0;
    opacity: 1; transform: none; pointer-events: auto;
    display: none;                                /* shown only once there's a result */
  }
  .stockists__map.has-result .stockcard { display: grid; }
}

/* ───────── DENSITY / VARIANTS (driven by tweaks) ───────── */
:root[data-density="sparse"]  { --pad: clamp(28px, 4.5vw, 72px); }
:root[data-density="dense"]   { --pad: clamp(14px, 2vw, 28px); }
:root[data-density="dense"] section { padding-block: clamp(60px, 8vw, 120px); }

/* ═══════════════════════════════════════════════════════════════════════
   HERO ENTRANCE — "develop + boot"  (signature motion, see CLAUDE.md §16)
   The hero is above the fold, so this is an on-LOAD sequence (not
   scroll-driven). It plays once when the preloader finishes and adds
   `html.is-ready`. Everything rides the single --ease-aiche curve and is
   fully gated behind prefers-reduced-motion; if JS never marks ready (or
   the user prefers reduced motion) the hero simply renders visible.
   ═══════════════════════════════════════════════════════════════════════ */

@keyframes aiche-headline {        /* type resolves: rises out of a soft blur */
  from { opacity: 0; transform: translateY(.18em); filter: blur(10px); }
  to   { opacity: 1; transform: translateY(0);     filter: blur(0); }
}
@keyframes aiche-develop {         /* "develop, don't fade": film clears from grain */
  from { opacity: 0; filter: blur(16px) saturate(.5) contrast(.92) brightness(1.05); transform: scale(1.06); }
  55%  { opacity: 1; }
  to   { opacity: 1; filter: blur(0) saturate(1) contrast(1) brightness(1); transform: scale(1); }
}
@keyframes aiche-mono-in {         /* hero monogram fades in with the print (opacity only) */
  from { opacity: 0; }
  to   { opacity: .96; }
}
@keyframes aiche-hud {             /* viewfinder readout boots: wide+soft, then tightens */
  from { opacity: 0; transform: translateY(-6px); letter-spacing: .16em; filter: blur(3px); }
  to   { opacity: 1; transform: translateY(0);    letter-spacing: .04em; filter: blur(0); }
}
@keyframes aiche-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes aiche-nav-drop {        /* the menu bar descends from above the screen, last */
  from { opacity: 0; transform: translateY(-110%); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  /* Prime: assign each element its animation but hold it paused on the first
     frame (fill-mode: both renders the hidden "from" state) until ready. */
  .topnav,
  .hero .corner--tr,
  .hero .corner--bl,
  .hero .corner--br,
  .hero__bg,
  .hero__mono,
  .hero__meta {
    animation-fill-mode: both;
    animation-play-state: paused;
    animation-timing-function: var(--ease-aiche);
  }
  .hero__bg { will-change: filter, transform, opacity; }

  html.is-ready .topnav,
  html.is-ready .hero .corner--tr,
  html.is-ready .hero .corner--bl,
  html.is-ready .hero .corner--br,
  html.is-ready .hero__bg,
  html.is-ready .hero__mono,
  html.is-ready .hero__meta {
    animation-play-state: running;
  }

  /* Choreography — delays are relative to .is-ready (the loader dissolving). */
  /* The fullscreen photograph develops in first … */
  .hero__bg {
    animation-name: aiche-develop; animation-duration: 2.1s; animation-delay: .1s;
  }
  /* The monogram develops in with the photograph (pure opacity — keeps its
     translateY(-50%) centring + drop-shadow intact). */
  .hero__mono { animation-name: aiche-mono-in; animation-duration: 1.7s; animation-delay: .3s; }
  /* … then the viewfinder HUD boots, then the meta block settles in. */
  .hero .corner--tr { animation-name: aiche-hud; animation-duration: var(--dur-settle); animation-delay: .9s; }
  .hero .corner--bl { animation-name: aiche-hud; animation-duration: var(--dur-settle); animation-delay: 1.0s; }
  .hero .corner--br { animation-name: aiche-hud; animation-duration: var(--dur-settle); animation-delay: 1.1s; }
  .hero__meta { animation-name: aiche-rise; animation-duration: var(--dur-settle); animation-delay: 1.25s; }
  /* The menu bar drops in from above — last, once the hero has settled. */
  .topnav { animation-name: aiche-nav-drop; animation-duration: var(--dur-settle); animation-delay: 2.3s; }
}

/* ═══════════════════════════════════════════════════════════════════════
   INTRO CONTRAST — nav + hero meta are light over the dark hero intro, then
   flip to dark from the Studio onward. The nav is fixed, so JS toggles
   `.topnav--on-dark` by scroll position; the hero meta only ever sits over
   the photo, so it's simply light.
   ═══════════════════════════════════════════════════════════════════════ */
.topnav { transition: color .35s ease; }
.topnav--on-dark {
  color: var(--bg);
  background: linear-gradient(180deg, rgba(27,27,27,.5) 0%, rgba(27,27,27,.12) 58%, transparent 100%);
}
.topnav--on-dark .dim { color: rgba(249,248,238,.62); }
.topnav--on-dark .navtab { color: rgba(249,248,238,.6); }
.topnav--on-dark .navtab:hover,
.topnav--on-dark .navtab.is-active { color: var(--bg); }

.hero__meta { color: var(--bg); }
.hero__meta .dim { color: rgba(249,248,238,.62); }

/* Bottom scrim so the light meta + bottom corners read over the photo's lower band. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(27,27,27,.55) 0%, rgba(27,27,27,.16) 16%, transparent 32%);
}
.hero .corner--bl, .hero .corner--br { color: rgba(249,248,238,.65); }

/* ═══════════════════════════════════════════════════════════════════════
   SS27 — passcode gate INSIDE the Archive. A `locked` collection (SS27) shows
   this over the drawer until unlocked (collections() toggles .coll-drawer.is-locked).
   ═══════════════════════════════════════════════════════════════════════ */
.coll-gate {
  position: absolute; inset: 0; z-index: 6; display: none;
  align-items: center; justify-content: center; text-align: center; padding: var(--pad);
  background: var(--bg);
}
.coll-drawer.is-locked .coll-gate { display: flex; }
.coll-drawer.is-locked .coll-viewport,
.coll-drawer.is-locked .coll-meta,
.coll-drawer.is-locked .coll-hint { display: none; }
.coll-gate__inner { width: min(440px, 100%); display: grid; gap: clamp(13px, 1.8vw, 20px); justify-items: center; }
.coll-gate__eyebrow { font-size: 11px; }
.coll-gate__title {
  margin: 0; font-weight: 600; text-transform: uppercase;
  font-size: clamp(40px, 8vw, 92px); line-height: .92; letter-spacing: -0.04em; color: var(--ink);
}
.coll-gate__lede { margin: 0; font-size: 11px; }
.coll-gate__form { display: flex; width: min(360px, 100%); border: 1px solid var(--ink); margin-top: 6px; }
.coll-gate__input {
  flex: 1 1 auto; min-width: 0; appearance: none; background: transparent; border: 0;
  padding: 14px 16px; font-family: var(--mono); font-size: 12px; letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--ink);
}
.coll-gate__input::placeholder { color: var(--ink-30); }
.coll-gate__input:focus { outline: none; }
.coll-gate__btn {
  flex: 0 0 auto; appearance: none; cursor: none; border: 0; border-left: 1px solid var(--ink);
  background: var(--ink); color: var(--bg); padding: 14px 18px;
  font-size: 11px; letter-spacing: var(--track-label); text-transform: uppercase;
  transition: background .3s var(--ease-aiche), color .3s var(--ease-aiche);
}
.coll-gate__btn:hover { background: transparent; color: var(--ink); }
.coll-gate__err { min-height: 1em; font-size: 10.5px; letter-spacing: var(--track-label); color: var(--ink-50); }
.coll-gate.is-wrong .coll-gate__inner { animation: coll-gate-shake .42s var(--ease-aiche); }
@keyframes coll-gate-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); } 40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(3px); }
}

/* Unlock confirmation — "You're in." develops in over the gate, then the gallery reveals. */
.coll-gate__welcome {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-content: center; gap: clamp(12px, 1.6vw, 18px);
  text-align: center; padding: var(--pad);
  opacity: 0; pointer-events: none;
}
.coll-gate__welcome-mark { font-size: 11px; color: var(--accent); }
.coll-gate__welcome-line {
  font-weight: 600; text-transform: uppercase;
  font-size: clamp(40px, 8vw, 92px); line-height: .92; letter-spacing: -0.04em; color: var(--ink);
}
/* Static fallback (also reduced-motion): swap instantly, no transform/blur. */
.coll-gate.is-unlocked .coll-gate__inner   { opacity: 0; }
.coll-gate.is-unlocked .coll-gate__welcome { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .coll-gate.is-unlocked .coll-gate__inner   { animation: gate-dismiss .5s var(--ease-aiche) forwards; }
  .coll-gate.is-unlocked .coll-gate__welcome { animation: gate-welcome 1.15s var(--ease-aiche) .15s both; }
}
@keyframes gate-dismiss { to { opacity: 0; transform: translateY(-6px); } }
@keyframes gate-welcome {
  from { opacity: 0; filter: blur(8px); transform: translateY(10px) scale(.985); }
  55%  { opacity: 1; }
  to   { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════
   SHOP — the "we're offline, on purpose" shutdown gimmick. Click SHOP → the
   screen powers off (CRT collapse), then the AICHE mark + message develop in.
   z-index sits BELOW the custom cursor (10000) so the brand cursor still works.
   ═══════════════════════════════════════════════════════════════════════ */
.shutdown {
  position: fixed; inset: 0; z-index: 9500;
  background: #000; color: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(28px, 6vw, 72px);
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--ease-aiche), visibility .5s var(--ease-aiche);
}
.shutdown.is-on { opacity: 1; visibility: visible; }
.shutdown__crt { position: absolute; inset: 0; background: #fff; transform-origin: center; opacity: 0; pointer-events: none; }
.shutdown__panel {
  position: relative; z-index: 2; max-width: 640px; opacity: 0;
  display: grid; justify-items: center; gap: clamp(22px, 3vw, 34px); text-align: center;
}
.shutdown__mark {
  width: clamp(150px, 22vw, 250px); aspect-ratio: 2925 / 569; background-color: var(--bg);
  -webkit-mask: url("media/logo-black.png") no-repeat center / contain;
          mask: url("media/logo-black.png") no-repeat center / contain;
}
.shutdown__msg { margin: 0; font-size: clamp(15px, 1.7vw, 22px); line-height: 1.5; letter-spacing: var(--track); }
.shutdown__msg .dim { color: rgba(249, 248, 238, .6); }
.shutdown__back {
  appearance: none; background: transparent; border: 1px solid rgba(249, 248, 238, .4); cursor: none;
  color: rgba(249, 248, 238, .82); padding: 11px 18px;
  font-size: 11px; letter-spacing: var(--track-label); text-transform: uppercase;
  transition: color .3s var(--ease-aiche), border-color .3s var(--ease-aiche);
}
.shutdown__back:hover { color: var(--bg); border-color: var(--bg); }
@media (prefers-reduced-motion: no-preference) {
  .shutdown.is-on .shutdown__crt  { animation: crt-off .55s cubic-bezier(.6, 0, .2, 1) forwards; }
  .shutdown.is-on .shutdown__panel { animation: shutdown-in .9s var(--ease-aiche) .58s both; }
}
@keyframes crt-off {
  0%   { opacity: .95; transform: scaleY(1)     scaleX(1); }
  50%  { opacity: 1;   transform: scaleY(0.004) scaleX(1); }       /* collapse to a bright line */
  82%  { opacity: 1;   transform: scaleY(0.004) scaleX(0.015); }   /* line → a dot */
  100% { opacity: 0;   transform: scaleY(0.004) scaleX(0); }       /* dot vanishes into black */
}
@keyframes shutdown-in {
  from { opacity: 0; filter: blur(8px); transform: translateY(6px); }
  to   { opacity: 1; filter: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .shutdown__panel { opacity: 1; }
  .shutdown__crt { display: none; }
}