/* ═══════════════════════════════════════════════════════════
   SNATTE™ — storefront design system
   ---------------------------------------------------------------
   1  Tokens & reset          8  Manifesto
   2  Type & primitives       9  Category explorer
   3  Chrome (grain, cursor,  10 Shop the look
      loader, header)         11 Fashion meets art
   4  Buttons & links         12 Print edit gallery
   5  Hero                    13 Philosophy / reviews / join
   6  Product card            14 Footer
   7  Rails & grids           15 Menu / search / bag / sheets
                              16 PDP · collection · pages
                              17 Responsive & reduced motion
   ═══════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ─────────────────────────────────────────────── */
:root {
  /* environment — interpolated at runtime by js/motion.js */
  --bg:   rgb(250 247 241);
  --fg:   rgb(20 17 15);
  --dim:  rgb(122 116 106);
  --line: rgba(20 17 15 / 0.13);

  /* fixed palette */
  --paper:  #faf7f1;
  --ivory:  #efe8dc;
  --ink:    #14110f;
  --black:  #09090a;
  --stone:  #c9c1b5;
  --clay:   #b8846b;   /* controlled warm accent */
  --azure:  #6f86a8;   /* controlled cool accent */

  /* type */
  --display: 'Syne', 'Helvetica Neue', Arial, sans-serif;
  --ui: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --editorial: 'Cormorant Garamond', Georgia, serif;

  /* fluid scale */
  --step--1: clamp(0.72rem, 0.70rem + 0.12vw, 0.80rem);
  --step-0:  clamp(0.92rem, 0.88rem + 0.20vw, 1.05rem);
  --step-1:  clamp(1.10rem, 1.00rem + 0.50vw, 1.40rem);
  --step-2:  clamp(1.45rem, 1.20rem + 1.20vw, 2.20rem);
  --step-3:  clamp(2.00rem, 1.40rem + 2.80vw, 3.60rem);
  --step-4:  clamp(2.60rem, 1.30rem + 6.00vw, 6.20rem);
  --step-5:  clamp(3.40rem, 0.60rem + 12.0vw, 11.0rem);
  --step-6:  clamp(4.20rem, -1.0rem + 20.0vw, 17.0rem);

  /* rhythm */
  --gut: clamp(1.15rem, 0.6rem + 2.4vw, 3.25rem);
  --sec: clamp(5rem, 3rem + 8vw, 12rem);
  --rule: 1px;

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.66, 0, 0.34, 1);
  --slow: 1.05s;
  --mid: 0.62s;
  --fast: 0.28s;

  --header: clamp(58px, 4.4vw, 76px);
  color-scheme: light dark;
}

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
}
html.is-locked { overflow: hidden; }

body {
  font-family: var(--ui);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 0.9s linear, color 0.9s linear;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
svg { fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; }
s { text-decoration-thickness: 1px; }

::selection { background: var(--fg); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 1px;
}

.sr-only, .sr-only:not(:focus):not(:active) {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: fixed; inset-inline-start: 50%; top: 0.5rem; z-index: 400;
  translate: -50% -220%;
  padding: 0.7rem 1.2rem; background: var(--fg); color: var(--bg);
  font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase;
  transition: translate var(--fast) var(--ease);
}
.skip:focus { translate: -50% 0; }

/* ── 2. TYPE & PRIMITIVES ─────────────────────────────────── */
.label {
  font-size: var(--step--1);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dim);
  font-weight: 500;
}

.sec { padding: var(--sec) var(--gut); position: relative; }

.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--gut); flex-wrap: wrap;
  padding-bottom: clamp(2rem, 4vw, 4rem);
  border-bottom: var(--rule) solid var(--line);
  margin-bottom: clamp(2.4rem, 5vw, 5rem);
}
.sec-title {
  font-family: var(--display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.sec-title em {
  font-family: var(--editorial);
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.sec-head-main .label { margin-bottom: 0.9rem; }
.sec-note { color: var(--dim); font-size: var(--step--1); margin-top: 0.85rem; max-width: 34ch; }

/* monumental centred type */
.mono-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-5);
  line-height: 0.86;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}

/* kinetic line: masked, drifts on scroll */
.k-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.04em;
}
.k-line > span {
  display: block;
  translate: var(--kx, 0) 105%;
  transition: translate 1.15s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: translate;
}
.is-in .k-line > span,
.k-line.is-in > span { translate: var(--kx, 0) 0; }
.k-line.is-offset { padding-inline-start: clamp(0.5rem, 6vw, 8rem); }

/* reveals */
[data-reveal] {
  opacity: 0;
  translate: 0 clamp(14px, 2vw, 30px);
  transition: opacity var(--slow) var(--ease), translate var(--slow) var(--ease);
  will-change: opacity, translate;
}
[data-reveal].is-in { opacity: 1; translate: 0 0; }

/* lazy media */
img[data-fade] { opacity: 0; transition: opacity 0.75s var(--ease); }
img[data-fade].is-loaded, img[data-fade].is-error { opacity: 1; }

/* parallax / zoom carriers */
[data-parallax] > img, [data-parallax] > * { translate: 0 var(--py, 0); }
[data-zoom] img, img[data-zoom] { scale: var(--pz, 1); transition: scale 0.1s linear; }

/* ── 3. CHROME ────────────────────────────────────────────── */
.grain {
  position: fixed; inset: -50%; z-index: 300; pointer-events: none;
  opacity: 0.05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(6) infinite;
}
html[data-tone="dark"] .grain { mix-blend-mode: screen; opacity: 0.055; }
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 1%); }
}

/* cursor */
#cursor { display: none; }
html.has-cursor #cursor { display: block; }
html.has-cursor * { cursor: none !important; }
#cursor-dot, #cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 320; pointer-events: none;
  border-radius: 50%;
}
#cursor-dot { width: 6px; height: 6px; background: var(--fg); mix-blend-mode: difference; }
#cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid var(--fg);
  transition: width 0.4s var(--ease), height 0.4s var(--ease),
              background-color 0.4s var(--ease), border-color 0.4s var(--ease);
  display: grid; place-items: center;
}
#cursor-label {
  font-family: var(--ui); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bg); opacity: 0; transition: opacity var(--fast);
  white-space: nowrap;
}
#cursor-ring[data-mode="link"] { width: 46px; height: 46px; background: rgb(from var(--fg) r g b / 0.08); }
#cursor-ring[data-mode="view"],
#cursor-ring[data-mode="shop"],
#cursor-ring[data-mode="drag"],
#cursor-ring[data-mode="play"],
#cursor-ring[data-mode="explore"] {
  width: 88px; height: 88px; background: var(--fg); border-color: transparent;
}
#cursor-ring[data-mode="view"] #cursor-label,
#cursor-ring[data-mode="shop"] #cursor-label,
#cursor-ring[data-mode="drag"] #cursor-label,
#cursor-ring[data-mode="play"] #cursor-label,
#cursor-ring[data-mode="explore"] #cursor-label { opacity: 1; }
#cursor-ring.is-press { scale: 0.82; }

/* loader */
#loader {
  position: fixed; inset: 0; z-index: 350;
  background: var(--paper); color: var(--ink);
  display: grid; place-content: center; gap: 1.6rem;
  transition: opacity 0.7s var(--ease), visibility 0.7s;
}
#loader.is-done { opacity: 0; visibility: hidden; }
.loader-mark {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 7vw, 4.4rem);
  letter-spacing: 0.16em; text-transform: uppercase;
  overflow: hidden;
}
.loader-mark span { display: block; animation: rise 1.1s var(--ease) both; }
@keyframes rise { from { translate: 0 108%; } to { translate: 0 0; } }
.loader-bar { width: min(240px, 42vw); height: 1px; background: rgb(20 17 15 / 0.16); overflow: hidden; }
.loader-bar i { display: block; height: 100%; background: var(--ink); animation: fill 2.4s var(--ease-io) infinite; transform-origin: left; }
@keyframes fill { 0% { scale: 0 1; } 55% { scale: 1 1; } 100% { scale: 1 1; opacity: 0.2; } }

/* header */
#header {
  position: fixed; inset: 0 0 auto; z-index: 200;
  height: var(--header);
  display: flex; align-items: center;
  padding-inline: var(--gut);
  color: var(--fg);
  transition: translate var(--mid) var(--ease), background-color var(--mid) linear,
              backdrop-filter var(--mid), border-color var(--mid);
  border-bottom: var(--rule) solid transparent;
}
#header.is-past {
  background: rgb(from var(--bg) r g b / 0.72);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom-color: var(--line);
}
#header.is-hidden { translate: 0 -102%; }

.hd-inner {
  width: 100%;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem;
}
.hd-btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.5rem 0; position: relative;
}
.hd-btn-text { position: relative; }
.hd-btn-text::after {
  content: ''; position: absolute; inset: auto 0 -3px; height: 1px;
  background: currentColor; scale: 0 1; transform-origin: left;
  transition: scale var(--fast) var(--ease);
}
.hd-btn:hover .hd-btn-text::after { scale: 1 1; }
.hd-ico { width: 17px; height: 17px; }
.hd-menu-lines { display: grid; gap: 4px; width: 22px; }
.hd-menu-lines i { display: block; height: 1px; background: currentColor; transition: transform var(--fast) var(--ease); }
.hd-menu:hover .hd-menu-lines i:first-child { transform: translateX(4px); }
.hd-menu:hover .hd-menu-lines i:last-child { transform: translateX(-4px); }

.hd-mark {
  justify-self: center;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1rem, 1.9vw, 1.45rem);
  letter-spacing: 0.3em; text-transform: uppercase;
  display: inline-flex; align-items: flex-start; gap: 0.1em;
  padding-inline-start: 0.3em;
}
.hd-mark sup { font-family: var(--ui); font-size: 0.34em; letter-spacing: 0; translate: 0 0.35em; }

.hd-right { justify-self: end; display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 2rem); }
.hd-badge {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600; letter-spacing: 0;
  border-radius: 999px; background: var(--fg); color: var(--bg);
}
.hd-badge[data-empty="1"] { opacity: 0; }
.hd-bag { gap: 0.5rem; }

#app { padding-top: var(--header); min-height: 70vh; }
html[data-route="home"] #app { padding-top: 0; }

/* transition layer + scrim */
#transition {
  position: fixed; inset: 0; z-index: 260; pointer-events: none;
  background: var(--bg); opacity: 0;
}
#transition.is-out { opacity: 1; transition: opacity 0.2s linear; }
#transition.is-in { opacity: 0; transition: opacity 0.28s var(--ease); }

#scrim {
  position: fixed; inset: 0; z-index: 210;
  background: rgb(9 9 10 / 0.42);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--mid) var(--ease), visibility var(--mid);
}
#scrim.is-open { opacity: 1; visibility: visible; }

/* ── 4. BUTTONS & LINKS ───────────────────────────────────── */
.btn {
  --pad: 1.05rem 2rem;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem; padding: var(--pad);
  font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  translate: var(--mx, 0) var(--my, 0);
  transition: translate 0.18s linear, color var(--fast) var(--ease), background-color var(--fast) var(--ease), border-color var(--fast);
  overflow: hidden; isolation: isolate;
}
.btn > span { position: relative; z-index: 2; }
.btn-sm { --pad: 0.7rem 1.2rem; }
.btn-block { width: 100%; }

.btn-solid { background: var(--fg); color: var(--bg); }
.btn-solid::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--clay); scale: 1 0; transform-origin: bottom;
  transition: scale 0.5s var(--ease);
}
.btn-solid:hover::before { scale: 1 1; }
.btn-solid:disabled { opacity: 0.4; pointer-events: none; }

.btn-line { border: var(--rule) solid var(--fg); }
.btn-line::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--fg); scale: 1 0; transform-origin: bottom;
  transition: scale 0.45s var(--ease);
}
.btn-line:hover { color: var(--bg); }
.btn-line:hover::before { scale: 1 1; }
.btn-line:disabled, .btn-line.is-disabled { opacity: 0.4; pointer-events: none; }

.btn-quiet { padding-inline: 0; border-bottom: var(--rule) solid var(--line); }
.btn-quiet:hover { border-bottom-color: var(--fg); }

.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: var(--rule) solid var(--line); border-radius: 50%;
  transition: background-color var(--fast), color var(--fast), border-color var(--fast);
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.85rem;
  font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase;
  padding-bottom: 0.3rem; border-bottom: var(--rule) solid var(--line);
  transition: border-color var(--fast), gap var(--fast) var(--ease);
}
.link-arrow svg { width: 26px; height: 12px; transition: translate var(--fast) var(--ease); }
.link-arrow:hover { border-bottom-color: var(--fg); gap: 1.3rem; }
.link-arrow:hover svg { translate: 4px 0; }
.link-arrow--sm { font-size: 0.68rem; gap: 0.5rem; }
.link-arrow--sm svg { width: 18px; }

.crumbs {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  font-size: var(--step--1); color: var(--dim); letter-spacing: 0.1em;
  text-transform: uppercase;
}
.crumbs a:hover { color: var(--fg); }
.crumbs i { opacity: 0.5; font-style: normal; }
.crumbs [aria-current] { color: var(--fg); }

/* ── 5. HERO ──────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; align-items: end;
  padding: calc(var(--header) + 3vh) var(--gut) clamp(2rem, 5vh, 4rem);
  overflow: clip;
  isolation: isolate;
}
.hero-plate { position: absolute; inset: 0; z-index: -1; overflow: clip; }
.hero-figure { position: absolute; inset: -6% -4%; }
.hero-figure img {
  width: 100%; height: 100%; object-fit: cover;
  translate: calc(var(--mx, 0) * -18px) calc(var(--ty, 0%) + var(--my, 0) * -18px);
  scale: var(--sc, 1.02);
  transition: translate 0.9s var(--ease);
  will-change: translate, scale;
}
/* Legibility scrim. The hero stacks ink-coloured type over the
   photograph, so the band beneath it has to be lifted toward paper —
   but only that band. Anchored to the bottom and eased, so the top
   third of the frame (faces, wall, the shadow diagonal) reads at full
   strength and the lift is steep enough to look like a deliberate base
   rather than a low-alpha wash over the whole image. */
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgb(from var(--paper) r g b / 0.96) 0%,
    rgb(from var(--paper) r g b / 0.93) 10%,
    rgb(from var(--paper) r g b / 0.85) 18%,
    rgb(from var(--paper) r g b / 0.68) 27%,
    rgb(from var(--paper) r g b / 0.47) 36%,
    rgb(from var(--paper) r g b / 0.30) 45%,
    rgb(from var(--paper) r g b / 0.16) 53%,
    rgb(from var(--paper) r g b / 0.05) 62%,
    transparent 70%);
}

.hero-content { position: relative; opacity: var(--fade, 1); }
.hero-label { margin-bottom: clamp(1rem, 3vh, 2.2rem); }

/* the signature: the wordmark is a window onto the campaign image */
.hero-mark {
  position: relative;
  font-family: var(--display); font-weight: 800;
  font-size: var(--step-6);
  line-height: 0.78;
  letter-spacing: calc(-0.045em + var(--spread, 0) * 1em);
  text-transform: uppercase;
  translate: 0 var(--ty, 0);
  will-change: letter-spacing, translate;
}
.hero-mark-fill {
  display: block;
  background-image: var(--hero-img);
  background-size: 118% auto;
  background-position: 50% 42%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0.4px rgb(from var(--ink) r g b / 0.25);
}
.hero-mark-line {
  position: absolute; inset: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgb(from var(--ink) r g b / 0.22);
  translate: calc(var(--mx, 0) * 10px) calc(var(--my, 0) * 10px);
  pointer-events: none;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-mark-fill { color: var(--ink); }
  .hero-mark-line { display: none; }
}

.hero-say {
  margin-top: clamp(1rem, 2.4vh, 2rem);
  font-family: var(--display); font-weight: 500;
  font-size: var(--step-2);
  line-height: 1.02; letter-spacing: -0.03em; text-transform: uppercase;
  max-width: 22ch;
}
.hero-say-line:nth-child(2) {
  font-family: var(--editorial); font-style: italic; text-transform: none;
  font-weight: 400; letter-spacing: -0.01em;
}

.hero-foot {
  margin-top: clamp(2rem, 6vh, 4.5rem);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--gut); flex-wrap: wrap;
}
.hero-meta { display: flex; gap: clamp(1.4rem, 4vw, 4rem); flex-wrap: wrap; }
.hero-meta dt { font-size: var(--step--1); letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.hero-meta dd { font-family: var(--display); font-size: var(--step-1); letter-spacing: -0.02em; margin-top: 0.35rem; }
.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; }

.hero-cue {
  position: absolute; bottom: clamp(1rem, 3vh, 2rem); right: var(--gut);
  display: grid; justify-items: center; gap: 0.8rem;
  font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim);
  writing-mode: vertical-rl;
}
.hero-cue i { display: block; width: 1px; height: clamp(38px, 7vh, 74px); background: var(--line); overflow: hidden; position: relative; }
.hero-cue i::after {
  content: ''; position: absolute; inset: 0; background: var(--fg);
  animation: cue 2.4s var(--ease-io) infinite;
}
@keyframes cue { 0% { translate: 0 -100%; } 60%, 100% { translate: 0 100%; } }

/* ── TICKER ───────────────────────────────────────────────── */
.ticker {
  border-block: var(--rule) solid var(--line);
  overflow: clip; padding: 1.1rem 0;
  font-family: var(--display); font-size: var(--step-1);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.tick-track { display: flex; align-items: center; gap: 2.5rem; width: max-content; }
.ticker.is-running .tick-track { animation: slide 42s linear infinite; }
@keyframes slide { to { translate: -33.33% 0; } }
.tick-item { white-space: nowrap; }
.tick-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--clay); flex: none; }

/* ── 6. PRODUCT CARD ──────────────────────────────────────── */
.card { position: relative; display: grid; grid-template-rows: auto auto auto; }
.card-media { display: block; position: relative; overflow: clip; }
.card-frame {
  position: relative;
  aspect-ratio: var(--ratio, 4/5);
  overflow: clip;
  background: rgb(from var(--fg) r g b / 0.04);
}
.card-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: scale 1.1s var(--ease), opacity 0.7s var(--ease);
}
.card-img--b { opacity: 0; }
.card:hover .card-img--a { scale: 1.05; opacity: 0; }
.card:hover .card-img--b { opacity: 1; scale: 1.05; }
.card--dark .card-frame { background: rgb(from var(--bg) r g b / 0.5); }

.card-flag {
  position: absolute; top: 0.85rem; left: 0.85rem; z-index: 2;
  padding: 0.35rem 0.65rem;
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--bg); color: var(--fg);
}
.card-flag--out { background: var(--fg); color: var(--bg); }

.card-save {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 3;
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%;
  background: rgb(from var(--bg) r g b / 0.72);
  backdrop-filter: blur(6px);
  opacity: 0; translate: 0 -4px;
  transition: opacity var(--fast), translate var(--fast) var(--ease), background-color var(--fast);
}
.card:hover .card-save, .card-save:focus-visible, .card-save.is-saved { opacity: 1; translate: 0 0; }
.card-save svg { width: 17px; height: 16px; }
.card-save.is-saved svg { fill: var(--clay); stroke: var(--clay); }
.card-save.is-pulse { animation: pulse 0.45s var(--ease); }
@keyframes pulse { 40% { scale: 1.24; } }

.card-body {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding-top: 1.05rem;
}
.card-series { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); }
.card-name {
  font-family: var(--display); font-weight: 500;
  font-size: var(--step-0); letter-spacing: -0.015em;
  margin-top: 0.3rem; line-height: 1.2;
}
.card-name a { background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--fast) var(--ease); }
.card:hover .card-name a { background-size: 100% 1px; }
.card-price { font-size: var(--step-0); white-space: nowrap; font-variant-numeric: tabular-nums; }
.card-price s { color: var(--dim); margin-right: 0.35rem; }
.card-price em { font-style: normal; color: var(--dim); }

.card-meta { min-height: 1.4rem; padding-top: 0.5rem; }
.swatches { display: flex; gap: 0.35rem; }
.swatches i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--line); display: block; }
.card-note { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }

.card-quick {
  position: absolute; inset: auto 0 auto 0; z-index: 2;
  top: calc(100% - 5.9rem);
  display: grid; place-items: center;
  opacity: 0; translate: 0 8px; pointer-events: none;
  transition: opacity var(--fast), translate var(--fast) var(--ease);
}
.card:hover .card-quick { opacity: 1; translate: 0 0; pointer-events: auto; }
.card-add {
  padding: 0.7rem 1.5rem;
  background: var(--bg); color: var(--fg);
  font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase;
  border: var(--rule) solid var(--fg);
  transition: background-color var(--fast), color var(--fast);
}
.card-add:hover { background: var(--fg); color: var(--bg); }
.card.is-soldout .card-frame { opacity: 0.72; }

/* ── 7. GRIDS & RAILS ─────────────────────────────────────── */
.ed-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.6rem, 3vw, 4rem) var(--gut);
  align-items: start;
}
.ed-cell { grid-column: span 4; }
.ed-cell.is-wide { grid-column: span 6; }
.ed-cell.is-tall { grid-column: span 4; padding-top: clamp(0rem, 4vw, 5rem); }

.grid-uniform {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(200px, 22vw, 320px), 1fr));
  gap: clamp(1.6rem, 3vw, 3.5rem) var(--gut);
}

.rail-wrap { position: relative; }
.rail {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity;
  margin-inline: calc(var(--gut) * -1);
  padding-inline: var(--gut);
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.rail-track { display: flex; gap: var(--gut); padding-block: 0.25rem; }
.rail-item { flex: 0 0 clamp(190px, 24vw, 340px); scroll-snap-align: start; }
.rail-label { font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin-bottom: 1.4rem; }
.rail-label span { color: var(--fg); }
.rail-end { flex: 0 0 clamp(160px, 18vw, 240px); display: grid; align-items: center; }
.rail-end-link {
  display: grid; gap: 1.2rem; align-content: center; justify-items: start;
  aspect-ratio: 4/5; padding: 1.4rem;
  border: var(--rule) solid var(--line);
  font-family: var(--display); font-size: var(--step-1); letter-spacing: -0.02em; text-transform: uppercase;
  transition: background-color var(--mid) var(--ease), color var(--mid);
}
.rail-end-link svg { width: 34px; height: 20px; }
.rail-end-link:hover { background: var(--fg); color: var(--bg); }
.rail-bar { height: 1px; background: var(--line); margin-top: clamp(1.4rem, 3vw, 2.4rem); overflow: hidden; }
.rail-bar i { display: block; height: 100%; width: 28%; background: var(--fg); translate: calc(var(--p, 0) * 257%) 0; }

/* skeletons */
.is-skeleton .sk-card { display: grid; gap: 0.9rem; }
.sk-media { aspect-ratio: 4/5; }
.sk-media, .sk-line {
  background: linear-gradient(100deg, rgb(from var(--fg) r g b / 0.05) 30%, rgb(from var(--fg) r g b / 0.10) 50%, rgb(from var(--fg) r g b / 0.05) 70%);
  background-size: 220% 100%;
  animation: shimmer 1.5s linear infinite;
}
.sk-line { height: 12px; width: 65%; }
.sk-line--short { width: 32%; }
@keyframes shimmer { to { background-position: -220% 0; } }

/* empty state */
.empty { padding: clamp(3rem, 9vw, 7rem) 0; display: grid; gap: 1.2rem; justify-items: center; text-align: center; }
.empty-mark { font-family: var(--display); font-size: var(--step-2); letter-spacing: -0.03em; text-transform: uppercase; }
.empty-copy { color: var(--dim); max-width: 42ch; }

/* ── ARRIVALS ─────────────────────────────────────────────── */
.arrivals-stage {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--gut);
  align-items: start;
}
.lead { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); }
.lead-media { display: block; overflow: clip; aspect-ratio: 5/6; position: relative; }
.lead-media img { width: 100%; height: 100%; object-fit: cover; }
.lead-body { display: grid; gap: 0.9rem; justify-items: start; max-width: 48ch; }
.lead-name { font-family: var(--display); font-weight: 600; font-size: var(--step-2); line-height: 1; letter-spacing: -0.035em; text-transform: uppercase; }
.lead-price { font-size: var(--step-1); font-variant-numeric: tabular-nums; }
.lead-copy { color: var(--dim); }
.arrivals-pair { display: grid; gap: clamp(2rem, 4vw, 4rem); padding-top: clamp(0rem, 6vw, 7rem); }
.arrivals-rail { margin-top: clamp(3.5rem, 8vw, 8rem); }

/* ── 8. MANIFESTO ─────────────────────────────────────────── */
.manifesto {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--gut);
  align-items: end;
}
.manifesto-type .mono-title { font-size: var(--step-5); }
.manifesto-aside { display: grid; gap: 1.4rem; justify-items: start; padding-bottom: 0.6rem; }
.manifesto-body { color: var(--dim); max-width: 40ch; }
.manifesto-creed { font-family: var(--editorial); font-style: italic; font-size: var(--step-1); }

/* ── 9. CATEGORY EXPLORER ─────────────────────────────────── */
.explorer-body { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--gut); align-items: start; }
.explorer-list { border-top: var(--rule) solid var(--line); }
.ex-row { border-bottom: var(--rule) solid var(--line); }
.ex-row a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(0.8rem, 2vw, 2rem);
  padding: clamp(0.9rem, 2vw, 1.7rem) 0;
  transition: opacity var(--mid) var(--ease), padding var(--mid) var(--ease);
}
.ex-index { font-size: 0.64rem; letter-spacing: 0.2em; color: var(--dim); }
.ex-name {
  font-family: var(--display); font-weight: 700;
  font-size: var(--step-3); line-height: 0.9;
  letter-spacing: -0.045em; text-transform: uppercase;
  transition: translate var(--mid) var(--ease);
}
.ex-meta { display: grid; justify-items: end; gap: 0.25rem; }
.ex-note { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.ex-count { font-family: var(--display); font-size: var(--step-0); }
.ex-count--soon { color: var(--dim); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; }
.explorer-list:hover .ex-row:not(.is-active) { opacity: 0.38; }
.ex-row.is-active a { padding-inline-start: clamp(0.4rem, 1.4vw, 1.6rem); }

.explorer-stage {
  position: sticky; top: calc(var(--header) + 2rem);
  aspect-ratio: 4/5; overflow: clip;
  translate: calc(var(--dx, 0) * -22px) calc(var(--dy, 0) * -22px);
  transition: translate 0.9s var(--ease);
}
.explorer-stage canvas, .explorer-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.explorer-stage img { transition: opacity 0.55s var(--ease); }
.explorer-stage[data-gl="1"] img { opacity: 0; }
.explorer-stage[data-gl="1"] canvas { opacity: 1; }
.explorer-stage canvas { opacity: 0; }
.explorer-frame { position: absolute; inset: 0.7rem; border: 1px solid rgb(255 255 255 / 0.3); pointer-events: none; }

/* ── 10. SHOP THE LOOK ────────────────────────────────────── */
.look-stage {
  position: relative;
  aspect-ratio: 16/10;
  background: linear-gradient(150deg, var(--ivory), var(--paper));
  overflow: clip;
}
.look-backdrop { position: absolute; inset: 0; }
.look-backdrop img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; translate: 0 var(--py, 0); }
.look-item {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--w);
  translate: -50% -50%;
  filter: drop-shadow(0 26px 44px rgb(20 17 15 / 0.22));
}
.look-item img { mix-blend-mode: multiply; width: 100%; }

.hot {
  position: absolute; left: var(--x); top: var(--y); z-index: 3;
  translate: -50% -50%;
  width: 42px; height: 42px; display: grid; place-items: center;
}
.hot-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgb(250 247 241 / 0.85);
  background: rgb(9 9 10 / 0.18);
  backdrop-filter: blur(3px);
  transition: scale var(--fast) var(--ease), background-color var(--fast);
}
.hot-ring::after {
  content: ''; position: absolute; inset: -8px; border-radius: 50%;
  border: 1px solid rgb(250 247 241 / 0.5);
  animation: ping 2.6s var(--ease-io) infinite;
}
@keyframes ping { 0% { scale: 0.7; opacity: 0.9; } 70%, 100% { scale: 1.25; opacity: 0; } }
.hot-num { position: relative; font-size: 0.62rem; letter-spacing: 0.1em; color: #faf7f1; }
.hot:hover .hot-ring, .hot:focus-visible .hot-ring { scale: 1.18; background: rgb(9 9 10 / 0.5); }

.hot-pop {
  position: absolute; left: var(--x); top: var(--y); z-index: 4;
  translate: -50% calc(-100% - 26px);
  width: min(320px, 74vw);
  background: var(--paper); color: var(--ink);
  box-shadow: 0 30px 70px rgb(9 9 10 / 0.26);
  opacity: 0; scale: 0.96;
  transition: opacity var(--fast) var(--ease), scale var(--fast) var(--ease);
}
.hot-pop.is-open { opacity: 1; scale: 1; }
.hot-card { display: grid; grid-template-columns: 88px 1fr; gap: 1rem; padding: 1rem; }
.hot-card-media img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.hot-card-body { display: grid; gap: 0.35rem; align-content: start; }
.hot-card-name { font-family: var(--display); font-size: var(--step-0); letter-spacing: -0.02em; }
.hot-card-price { font-size: var(--step--1); }
.hot-card-actions { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }

.look-legend {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px; margin-top: clamp(1.6rem, 3vw, 3rem);
  border-top: var(--rule) solid var(--line);
}
.look-legend button {
  width: 100%; text-align: left;
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.9rem; align-items: baseline;
  padding: 1.1rem 0.2rem;
  border-bottom: var(--rule) solid var(--line);
  transition: padding-inline-start var(--fast) var(--ease);
}
.look-legend button:hover { padding-inline-start: 0.7rem; }
.look-legend-num { font-size: 0.62rem; color: var(--dim); letter-spacing: 0.16em; }
.look-legend-name { font-family: var(--display); font-size: var(--step-0); letter-spacing: -0.02em; }
.look-legend-price { font-size: var(--step--1); color: var(--dim); }

/* ── 11. FASHION MEETS ART ────────────────────────────────── */
.fma { position: relative; }
.fma-label {
  position: sticky; top: calc(var(--header) + 1.4rem); z-index: 2;
  padding-inline: var(--gut); mix-blend-mode: difference; color: #f4f0e9;
}
.fma-chapter {
  position: relative; min-height: 128svh;
  display: grid; place-items: center;
  padding: var(--gut);
}
.fma-media { position: sticky; top: 0; height: 100svh; width: 100%; overflow: clip; display: grid; place-items: center; }
.fma-media img {
  width: 100%; height: 100%; object-fit: cover;
  scale: var(--sc, 1); opacity: var(--op, 1);
  translate: 0 var(--ty, 0);
  will-change: scale, opacity;
}
.fma-text {
  position: absolute; inset: auto 0 clamp(4rem, 12vh, 9rem);
  display: grid; justify-items: center; gap: 1.3rem; text-align: center;
  padding-inline: var(--gut);
  opacity: var(--op, 1); translate: 0 var(--ty, 0);
  color: #faf7f1;
  text-shadow: 0 2px 40px rgb(9 9 10 / 0.45);
}
.fma-word {
  font-family: var(--display); font-weight: 800;
  font-size: var(--step-5); line-height: 0.84;
  letter-spacing: -0.05em; text-transform: uppercase;
}
.fma-copy { max-width: 40ch; color: rgb(250 247 241 / 0.82); }
.fma-text .btn-line { border-color: rgb(250 247 241 / 0.6); color: #faf7f1; }
.fma-text .btn-line::before { background: #faf7f1; }
.fma-text .btn-line:hover { color: var(--black); }
.fma-progress { position: sticky; bottom: 0; height: 2px; background: rgb(from var(--fg) r g b / 0.14); }
.fma-progress i { display: block; height: 100%; background: var(--fg); scale: var(--p, 0) 1; transform-origin: left; }

/* ── 12. THE PRINT EDIT — dark exhibition ─────────────────── */
.gallery { position: relative; background: var(--black); color: #f4f0e9; }
.gallery-sticky {
  position: sticky; top: 0; height: 100svh;
  display: grid; grid-template-rows: auto 1fr; align-content: center;
  gap: clamp(1.5rem, 4vh, 3.5rem);
  padding: calc(var(--header) + 4vh) 0 6vh;
  overflow: clip;
}
.gallery-head { padding-inline: var(--gut); display: grid; gap: 0.8rem; }
.gallery-title {
  font-family: var(--display); font-weight: 700;
  font-size: var(--step-3); line-height: 0.92;
  letter-spacing: -0.04em; text-transform: uppercase;
}
.gallery-caption { font-size: var(--step--1); color: rgb(244 240 233 / 0.55); letter-spacing: 0.06em; }
.gallery-track {
  display: flex; align-items: center; gap: clamp(1.6rem, 4vw, 5rem);
  padding-inline: var(--gut);
  width: max-content;
  will-change: transform;
}
.gallery.is-native .gallery-sticky { position: static; height: auto; }
.gallery.is-native .gallery-track {
  width: auto; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 1rem;
}
.gallery.is-native .gallery-track::-webkit-scrollbar { display: none; }
.gallery.is-native .art { scroll-snap-align: center; }

.art { flex: 0 0 clamp(230px, 30vw, 430px); display: grid; gap: 1.1rem; }
.art-media { display: block; overflow: clip; box-shadow: 0 40px 80px rgb(0 0 0 / 0.45); }
.art-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: scale 1.2s var(--ease); }
.art:hover .art-media img { scale: 1.05; }
.art-cap { display: grid; gap: 0.3rem; justify-items: start; }
.art-id { font-size: 0.62rem; letter-spacing: 0.24em; color: rgb(244 240 233 / 0.5); }
.art-name { font-family: var(--display); font-size: var(--step-1); letter-spacing: -0.025em; }
.art-price { font-size: var(--step--1); color: rgb(244 240 233 / 0.6); }
.art-cap .link-arrow { border-color: rgb(244 240 233 / 0.25); margin-top: 0.4rem; }
.art-end { flex: 0 0 clamp(220px, 24vw, 340px); }
.art-end a { display: grid; gap: 0.8rem; align-content: center; aspect-ratio: 4/5; padding: 1.6rem; border: 1px solid rgb(244 240 233 / 0.22); transition: background-color var(--mid); }
.art-end a:hover { background: rgb(244 240 233 / 0.06); }
.art-end-mark { font-family: var(--display); font-size: var(--step-2); letter-spacing: -0.035em; text-transform: uppercase; }
.art-end .link-arrow { border-color: rgb(244 240 233 / 0.3); }

/* ── 13. PHILOSOPHY / REVIEWS / JOIN ──────────────────────── */
.philosophy { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--gut); align-items: end; }
.philo-quote {
  font-family: var(--display); font-weight: 600;
  font-size: var(--step-3); line-height: 0.98;
  letter-spacing: -0.04em; text-transform: uppercase;
  display: grid;
}
.philo-quote em { font-family: var(--editorial); font-style: italic; text-transform: none; font-weight: 400; }
.philo-body { display: grid; gap: 1.2rem; justify-items: start; color: var(--dim); max-width: 46ch; }

.reviews .rail-track { align-items: stretch; }
.review {
  flex: 0 0 clamp(250px, 30vw, 400px);
  display: grid; gap: 1.2rem; align-content: space-between;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border: var(--rule) solid var(--line);
}
.review-quote { font-family: var(--editorial); font-style: italic; font-size: var(--step-1); line-height: 1.35; }
.review footer { display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; font-size: var(--step--1); }
.review-author { letter-spacing: 0.14em; text-transform: uppercase; }
.review-badge { padding: 0.2rem 0.5rem; border: 1px solid var(--line); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.review-product { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }

.join { display: grid; place-items: center; text-align: center; }
.join-inner { display: grid; gap: 1.2rem; justify-items: center; max-width: 44rem; }
.join-title {
  font-family: var(--display); font-weight: 700;
  font-size: var(--step-4); line-height: 0.88;
  letter-spacing: -0.05em; text-transform: uppercase;
}
.join-copy { color: var(--dim); }
.join-form {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 0.6rem; width: min(30rem, 100%); margin-top: 1rem;
  border-bottom: var(--rule) solid var(--fg);
  padding-bottom: 0.5rem;
}
.join-form input {
  border: 0; background: none; padding: 0.6rem 0;
  font-size: var(--step-0); letter-spacing: 0.02em;
}
.join-form input::placeholder { color: var(--dim); }
.join-form input:focus { outline: none; }
.join-form.is-invalid { border-bottom-color: var(--clay); }
.join-submit {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase;
  translate: var(--mx, 0) var(--my, 0);
}
.join-submit svg { width: 24px; height: 12px; transition: translate var(--fast) var(--ease); }
.join-submit:hover svg { translate: 4px 0; }
.join-msg { grid-column: 1 / -1; font-size: var(--step--1); color: var(--dim); min-height: 1.2rem; text-align: left; }
.join-form.is-sent { border-bottom-color: var(--azure); }
.join-form.is-sent .join-msg { color: var(--fg); }

/* ── 14. FOOTER ───────────────────────────────────────────── */
.ft { background: var(--black); color: #f4f0e9; padding: clamp(4rem, 8vw, 8rem) var(--gut) clamp(1.5rem, 3vw, 3rem); overflow: clip; }
.ft-top { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--gut); padding-bottom: clamp(3rem, 7vw, 6rem); }
.ft-say { display: grid; gap: 1rem; justify-items: start; align-content: start; }
.ft-say-copy { font-family: var(--editorial); font-style: italic; font-size: var(--step-2); line-height: 1.15; max-width: 22ch; }
.ft-say .btn-line { border-color: rgb(244 240 233 / 0.4); }
.ft-say .btn-line::before { background: #f4f0e9; }
.ft-say .btn-line:hover { color: var(--black); }

.ft-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gut); }
.ft-col-title { font-size: 0.64rem; letter-spacing: 0.24em; text-transform: uppercase; color: rgb(244 240 233 / 0.45); margin-bottom: 1.2rem; }
.ft-col li + li { margin-top: 0.6rem; }
.ft-col a { font-size: var(--step-0); position: relative; }
.ft-col a::after { content: ''; position: absolute; inset: auto 0 -2px; height: 1px; background: currentColor; scale: 0 1; transform-origin: left; transition: scale var(--fast) var(--ease); }
.ft-col a:hover::after { scale: 1 1; }

.ft-mark {
  display: block; text-align: center;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(4rem, 21vw, 22rem);
  line-height: 0.76; letter-spacing: -0.045em; text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgb(244 240 233 / 0.28);
  transition: color 0.9s var(--ease);
  margin-block: clamp(1rem, 3vw, 3rem);
}
.ft-mark:hover { color: rgb(244 240 233 / 0.06); }

.ft-base {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid rgb(244 240 233 / 0.16);
  padding-top: 1.4rem;
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgb(244 240 233 / 0.55);
}

/* ── 15a. MEGA MENU ───────────────────────────────────────── */
#menu { position: fixed; inset: 0; z-index: 240; }
.mm {
  position: absolute; inset: 0;
  background: var(--paper); color: var(--ink);
  display: grid; grid-template-rows: auto 1fr auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.72s var(--ease);
}
#menu.is-open .mm { clip-path: inset(0 0 0 0); }
.mm-top { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem var(--gut); border-bottom: var(--rule) solid rgb(20 17 15 / 0.12); }
.mm-mark { font-family: var(--display); font-weight: 700; font-size: var(--step-1); letter-spacing: 0.28em; text-transform: uppercase; }
.mm-body { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--gut); padding: clamp(1.5rem, 4vw, 3.5rem) var(--gut); overflow-y: auto; }

.mm-list { align-self: start; }
.mm-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: clamp(0.8rem, 2vw, 2rem);
  padding: clamp(0.45rem, 1.4vw, 1.05rem) 0;
  border-bottom: 1px solid rgb(20 17 15 / 0.1);
  opacity: 0; translate: 0 26px;
  transition: opacity 0.6s var(--ease), translate 0.6s var(--ease), padding-inline-start var(--fast) var(--ease);
  transition-delay: calc(var(--i) * 42ms + 160ms);
}
#menu.is-open .mm-row { opacity: 1; translate: 0 0; }
.mm-row.is-dim { opacity: 0.34; }
.mm-row:hover { padding-inline-start: clamp(0.4rem, 1.2vw, 1.3rem); }
.mm-row-num { font-size: 0.62rem; letter-spacing: 0.2em; color: rgb(20 17 15 / 0.45); }
.mm-row-label { font-family: var(--display); font-weight: 700; font-size: var(--step-3); line-height: 0.92; letter-spacing: -0.045em; text-transform: uppercase; }
.mm-row-meta { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(20 17 15 / 0.45); }

.mm-side { display: grid; gap: clamp(1.2rem, 3vw, 2.4rem); align-content: start; }
.mm-stage { position: relative; aspect-ratio: 4/5; overflow: clip; background: var(--ivory); }
.mm-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s var(--ease), scale 1.4s var(--ease); scale: 1.04; }
.mm-stage img.is-on { opacity: 1; scale: 1; }
.mm-featured { display: grid; gap: 0.9rem; }
.mm-prod { display: grid; grid-template-columns: 56px 1fr; gap: 0.9rem; align-items: center; }
.mm-prod img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.mm-prod span { display: grid; gap: 0.15rem; }
.mm-prod b { font-family: var(--display); font-weight: 500; font-size: var(--step-0); letter-spacing: -0.02em; }
.mm-prod i { font-style: normal; font-size: var(--step--1); color: rgb(20 17 15 / 0.5); }
.mm-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; }
.mm-links a { border-bottom: 1px solid rgb(20 17 15 / 0.18); padding-bottom: 2px; }
.mm-links a:hover { border-bottom-color: var(--ink); }
.mm-foot {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem var(--gut); border-top: 1px solid rgb(20 17 15 / 0.12);
  font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(20 17 15 / 0.5);
}

/* ── 15b. SEARCH ──────────────────────────────────────────── */
#search { position: fixed; inset: 0; z-index: 250; }
.sr {
  position: absolute; inset: 0;
  background: rgb(from var(--paper) r g b / 0.97);
  backdrop-filter: blur(24px);
  color: var(--ink);
  display: grid; grid-template-rows: auto 1fr;
  opacity: 0; translate: 0 -1.5rem;
  transition: opacity var(--mid) var(--ease), translate var(--mid) var(--ease);
}
#search.is-open .sr { opacity: 1; translate: 0 0; }
.sr-bar {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center;
  padding: 1.1rem var(--gut);
  border-bottom: 1px solid rgb(20 17 15 / 0.14);
}
.sr-icon { width: 20px; height: 20px; color: rgb(20 17 15 / 0.5); }
.sr-bar input {
  border: 0; background: none; padding: 0.6rem 0;
  font-family: var(--display); font-size: var(--step-2); letter-spacing: -0.03em;
}
.sr-bar input:focus { outline: none; }
.sr-bar input::-webkit-search-cancel-button { display: none; }
.sr-body { overflow-y: auto; padding: clamp(1.4rem, 4vw, 3rem) var(--gut) 4rem; }
.sr-suggest, .sr-results { display: grid; grid-template-columns: 0.6fr 1.4fr; gap: var(--gut); }
.sr-col { display: grid; gap: 1rem; align-content: start; }
.sr-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sr-tags a { padding: 0.5rem 0.95rem; border: 1px solid rgb(20 17 15 / 0.18); font-size: var(--step--1); letter-spacing: 0.12em; text-transform: uppercase; transition: background-color var(--fast), color var(--fast); }
.sr-tags a:hover { background: var(--ink); color: var(--paper); }
.sr-hits { display: grid; gap: 0.4rem; }
.sr-hit { display: grid; grid-template-columns: 52px 1fr auto; gap: 1rem; align-items: center; padding: 0.55rem; transition: background-color var(--fast); }
.sr-hit:hover { background: rgb(20 17 15 / 0.05); }
.sr-hit img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.sr-hit-body { display: grid; gap: 0.1rem; }
.sr-hit-body b { font-family: var(--display); font-weight: 500; font-size: var(--step-0); letter-spacing: -0.02em; }
.sr-hit-body i { font-style: normal; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(20 17 15 / 0.5); }
.sr-hit-price { font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.sr-all { font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 1px solid rgb(20 17 15 / 0.3); justify-self: start; padding-bottom: 2px; }
.sr-empty { display: grid; gap: 0.8rem; max-width: 44ch; }
.sr-empty-mark { font-family: var(--display); font-size: var(--step-2); letter-spacing: -0.035em; }
.sr-empty p { color: rgb(20 17 15 / 0.55); }

/* ── 15c. BAG DRAWER ──────────────────────────────────────── */
#bag {
  position: fixed; inset: 0 0 0 auto; z-index: 230;
  width: min(30rem, 100vw);
  background: var(--paper); color: var(--ink);
  display: grid; grid-template-rows: auto 1fr auto;
  translate: 100% 0; visibility: hidden;
  transition: translate 0.62s var(--ease), visibility 0.62s;
  box-shadow: -30px 0 80px rgb(9 9 10 / 0.18);
}
#bag.is-open { translate: 0 0; visibility: visible; }
.bag-head { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem var(--gut); border-bottom: 1px solid rgb(20 17 15 / 0.12); }
#bag-body { overflow-y: auto; padding: 1.2rem var(--gut); }
#bag-foot { border-top: 1px solid rgb(20 17 15 / 0.12); padding: 1.2rem var(--gut) calc(1.2rem + env(safe-area-inset-bottom)); display: grid; gap: 0.9rem; }

.bag-empty { display: grid; gap: 0.8rem; padding: clamp(3rem, 12vh, 7rem) 0; text-align: center; }
.bag-empty-mark { font-family: var(--display); font-weight: 700; font-size: var(--step-3); letter-spacing: 0.08em; color: rgb(20 17 15 / 0.18); }
.bag-empty-copy { color: rgb(20 17 15 / 0.55); }

.bag-lines { display: grid; gap: 1.1rem; }
.bag-line { display: grid; grid-template-columns: 84px 1fr; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid rgb(20 17 15 / 0.1); }
.bag-line-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.bag-line-body { display: grid; gap: 0.25rem; align-content: start; }
.bag-line-name { font-family: var(--display); font-weight: 500; font-size: var(--step-0); letter-spacing: -0.02em; }
.bag-line-variant { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(20 17 15 / 0.5); }
.bag-line-price { font-size: var(--step-0); font-variant-numeric: tabular-nums; }
.bag-line-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 0.5rem; }
.qty { display: inline-flex; align-items: center; border: 1px solid rgb(20 17 15 / 0.18); }
.qty button { width: 30px; height: 30px; display: grid; place-items: center; font-size: 0.9rem; }
.qty button:hover { background: rgb(20 17 15 / 0.06); }
.qty span { min-width: 26px; text-align: center; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.bag-line-remove { font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(20 17 15 / 0.5); border-bottom: 1px solid transparent; }
.bag-line-remove:hover { color: var(--ink); border-bottom-color: var(--ink); }

.bag-sum { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--step-1); }
.bag-sum-value { font-family: var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bag-note { font-size: 0.66rem; letter-spacing: 0.06em; color: rgb(20 17 15 / 0.5); }
.bag-ship { display: grid; gap: 0.45rem; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(20 17 15 / 0.55); }
.bag-ship-bar { height: 2px; background: rgb(20 17 15 / 0.12); overflow: hidden; }
.bag-ship-bar i { display: block; height: 100%; background: var(--ink); scale: var(--p, 0) 1; transform-origin: left; transition: scale 0.5s var(--ease); }
.bag-flash {
  position: absolute; inset: auto 0 100% 0;
  padding: 0.7rem var(--gut);
  background: var(--ink); color: var(--paper);
  font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
}
.bag-rec-name { font-family: var(--display); font-size: var(--step--1); letter-spacing: -0.01em; }
.bag-rec-price { font-size: 0.66rem; color: rgb(20 17 15 / 0.55); }

/* ── 15d. BOTTOM SHEET ────────────────────────────────────── */
.sheet { position: fixed; inset: 0; z-index: 270; }
.sheet-scrim { position: absolute; inset: 0; background: rgb(9 9 10 / 0.45); opacity: 0; transition: opacity var(--fast); }
.sheet.is-open .sheet-scrim { opacity: 1; }
.sheet-panel {
  position: absolute; inset: auto 0 0 0;
  background: var(--paper); color: var(--ink);
  padding: 0.7rem var(--gut) calc(1.6rem + env(safe-area-inset-bottom));
  display: grid; gap: 1rem;
  max-height: 86svh; overflow-y: auto;
  translate: 0 100%;
  transition: translate 0.42s var(--ease);
  border-radius: 4px 4px 0 0;
}
.sheet.is-open .sheet-panel { translate: 0 0; }
.sheet-grip { width: 44px; height: 3px; border-radius: 2px; background: rgb(20 17 15 / 0.2); justify-self: center; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.sheet-title { font-family: var(--display); font-size: var(--step-1); letter-spacing: -0.03em; margin-top: 0.3rem; }
.sheet-close { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid rgb(20 17 15 / 0.18); border-radius: 50%; }
.sheet-close svg { width: 11px; height: 11px; }
.sheet-hint { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(20 17 15 / 0.5); }
.sheet-options { display: grid; gap: 0.5rem; }
.sheet-options .opt {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.95rem 1.1rem; border: 1px solid rgb(20 17 15 / 0.16);
  font-size: var(--step-0); text-align: left;
  transition: background-color var(--fast), border-color var(--fast);
}
.sheet-options .opt:hover:not(:disabled) { border-color: var(--ink); background: rgb(20 17 15 / 0.04); }
.sheet-options .opt:disabled { opacity: 0.4; text-decoration: line-through; }
.opt-price { font-size: var(--step--1); color: rgb(20 17 15 / 0.55); }
.sheet-link { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px solid rgb(20 17 15 / 0.25); justify-self: start; padding-bottom: 2px; }
.sheet-foot { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; padding-top: 0.4rem; }

/* ── 16a. PDP ─────────────────────────────────────────────── */
.pdp { padding: clamp(1rem, 2vw, 2rem) var(--gut) 0; }
.pdp .crumbs { margin-bottom: clamp(1.2rem, 3vw, 2.4rem); }
.pdp-grid {
  display: grid;
  grid-template-columns: 63fr 37fr;
  gap: clamp(1.6rem, 4vw, 5rem);
  align-items: start;
}
.pdp-media-desktop { display: grid; gap: clamp(0.6rem, 1.4vw, 1.4rem); }
.pdp-media-mobile { display: none; }
.pdp-shot { overflow: clip; background: rgb(from var(--fg) r g b / 0.04); }
.pdp-shot img { width: 100%; aspect-ratio: 4/5; object-fit: cover; scale: var(--pz, 1); }
.pdp-shot.is-hero img { aspect-ratio: 4/4.6; }

.pdp-panel { position: relative; }
.pdp-panel-sticky {
  position: sticky; top: calc(var(--header) + clamp(1rem, 3vw, 2.4rem));
  display: grid; gap: 0.9rem; align-content: start;
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
.pdp-series { margin-bottom: 0.2rem; }
.pdp-name {
  font-family: var(--display); font-weight: 700;
  font-size: var(--step-3); line-height: 0.92;
  letter-spacing: -0.045em; text-transform: uppercase;
}
.pdp-fulltitle { font-size: 0.66rem; letter-spacing: 0.1em; color: var(--dim); }
.pdp-price { font-family: var(--display); font-size: var(--step-1); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; display: flex; gap: 0.7rem; align-items: baseline; }
.pdp-price s { font-family: var(--ui); font-size: var(--step-0); color: var(--dim); }
.pdp-lead { color: var(--dim); max-width: 46ch; }

.pdp-options { display: grid; gap: 1.2rem; margin-top: 0.6rem; }
.opt-legend { display: flex; justify-content: space-between; gap: 1rem; width: 100%; font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); margin-bottom: 0.6rem; }
.opt-legend b { color: var(--fg); font-weight: 500; }
.opt-row { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.opt-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-width: 3rem; padding: 0.65rem 0.95rem;
  border: var(--rule) solid var(--line);
  font-size: var(--step--1); letter-spacing: 0.08em;
  transition: border-color var(--fast), background-color var(--fast), color var(--fast);
}
.opt-chip:hover { border-color: var(--fg); }
.opt-chip.is-on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.opt-chip.is-out { opacity: 0.42; text-decoration: line-through; }
.chip-swatch { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--line); }
.opt-row--swatch .opt-chip { padding-inline: 0.7rem; }

.pdp-stock { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.pdp-stock[data-state="out"] { color: var(--clay); }
.pdp-buy { display: grid; gap: 0.6rem; margin-top: 0.4rem; }
.pdp-save.is-saved { border-color: var(--clay); color: var(--clay); }
.pdp-save.is-saved::before { background: var(--clay); }
.pdp-trust { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-top: 0.4rem; }
.pdp-trust li { display: flex; align-items: center; gap: 0.45rem; }
.pdp-trust li::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--clay); }

.pdp-accordions { margin-top: 1.2rem; border-top: var(--rule) solid var(--line); }
.acc { border-bottom: var(--rule) solid var(--line); }
.acc summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem 0; cursor: pointer; list-style: none;
  font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary i { position: relative; width: 11px; height: 11px; }
.acc summary i::before, .acc summary i::after {
  content: ''; position: absolute; inset: 50% 0 auto; height: 1px; background: currentColor;
  transition: rotate var(--fast) var(--ease), opacity var(--fast);
}
.acc summary i::after { rotate: 90deg; }
.acc[open] summary i::after { opacity: 0; rotate: 0deg; }
.acc-body { overflow: hidden; }
.acc[open] .acc-body { animation: open 0.42s var(--ease); }
@keyframes open { from { opacity: 0; translate: 0 -6px; } }
.acc-body-inner { padding-bottom: 1.3rem; color: var(--dim); display: grid; gap: 0.8rem; }
.acc-body-inner a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.spec { display: grid; gap: 0.4rem; }
.spec li { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dotted var(--line); padding-bottom: 0.35rem; }
.spec li span:first-child { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.62rem; }
.spec li span:last-child { color: var(--fg); text-align: right; }
.spec-note { font-size: var(--step--1); }

/* mobile gallery */
.pdp-swipe-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; margin-inline: calc(var(--gut) * -1);
}
.pdp-swipe-track::-webkit-scrollbar { display: none; }
.pdp-slide { flex: 0 0 100%; scroll-snap-align: center; }
.pdp-slide img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.pdp-counter { font-size: 0.64rem; letter-spacing: 0.22em; color: var(--dim); margin-top: 0.7rem; font-variant-numeric: tabular-nums; }
.pdp-dots { display: flex; gap: 5px; margin-top: 0.5rem; }
.pdp-dots i { width: 16px; height: 2px; background: var(--line); transition: background-color var(--fast); }
.pdp-dots i.is-on { background: var(--fg); }

/* sticky purchase bar */
.pdp-bar {
  position: fixed; inset: auto 0 0 0; z-index: 190;
  display: none; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.8rem var(--gut) calc(0.8rem + env(safe-area-inset-bottom));
  background: rgb(from var(--bg) r g b / 0.94);
  backdrop-filter: blur(18px);
  border-top: var(--rule) solid var(--line);
  translate: 0 110%;
  transition: translate var(--mid) var(--ease);
}
.pdp-bar.is-up { translate: 0 0; }
.pdp-bar-info { display: grid; }
.pdp-bar-name { font-family: var(--display); font-size: var(--step-0); letter-spacing: -0.02em; }
.pdp-bar-price { font-size: var(--step--1); color: var(--dim); }
.pdp-bar .btn { --pad: 0.85rem 1.6rem; }

/* PDP story + recommendations */
.story { margin-top: clamp(4rem, 9vw, 9rem); padding-inline: 0; }
.story-rail { display: grid; gap: clamp(3rem, 9vw, 9rem); }
.story-step { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); align-items: center; padding-inline: var(--gut); }
.story-step:nth-child(even) .story-media { order: 2; }
.story-media { overflow: clip; }
.story-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; translate: 0 var(--py, 0); }
.story-text { display: grid; gap: 1rem; max-width: 34ch; }
.story-line { font-family: var(--editorial); font-style: italic; font-size: var(--step-2); line-height: 1.2; }
.story-close { display: grid; gap: 1.2rem; justify-items: center; text-align: center; padding: clamp(3rem, 8vw, 7rem) var(--gut) 0; }
.story-close-name { font-family: var(--display); font-weight: 700; font-size: var(--step-3); letter-spacing: -0.045em; text-transform: uppercase; }

.pdp-recs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(180px, 20vw, 280px), 1fr)); gap: clamp(1.4rem, 3vw, 3rem) var(--gut); }

.pdp-missing { padding: clamp(6rem, 16vh, 12rem) var(--gut); display: grid; gap: 1.4rem; justify-items: start; }
.pdp-missing-copy { color: var(--dim); max-width: 46ch; }
.pdp-missing-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }

/* ── 16b. COLLECTION ──────────────────────────────────────── */
.col-head {
  position: relative; min-height: clamp(56svh, 62svh, 82svh);
  display: grid; align-items: end;
  padding: calc(var(--header) + 4vh) var(--gut) clamp(2rem, 5vh, 4rem);
  overflow: clip; isolation: isolate;
}
.col-head-media { position: absolute; inset: 0; z-index: -1; }
.col-head-media img { width: 100%; height: 100%; object-fit: cover; scale: var(--pz, 1); }
.col-head-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(9 9 10 / 0.72), rgb(9 9 10 / 0.22) 55%, rgb(9 9 10 / 0.34));
}
.col-head-body { display: grid; gap: 1rem; justify-items: start; color: #faf7f1; position: relative; }
.col-head-body .crumbs { color: rgb(250 247 241 / 0.7); }
.col-head-body .crumbs [aria-current] { color: #faf7f1; }
.col-title {
  font-family: var(--display); font-weight: 700;
  font-size: var(--step-4); line-height: 0.86;
  letter-spacing: -0.05em; text-transform: uppercase;
}
.col-title .k-line > span { translate: 0 0; }
.col-desc { max-width: 52ch; color: rgb(250 247 241 / 0.82); }
.col-count { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(250 247 241 / 0.72); }
.col-scroll { position: absolute; bottom: 1.4rem; right: var(--gut); width: 1px; height: 46px; background: rgb(250 247 241 / 0.3); overflow: hidden; }
.col-scroll i { position: absolute; inset: 0; background: #faf7f1; animation: cue 2.4s var(--ease-io) infinite; }
.col-note { color: var(--dim); max-width: 60ch; margin-bottom: 2rem; font-size: var(--step--1); }

.filter-bar {
  position: sticky; top: var(--header); z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 0.85rem 0;
  margin-bottom: clamp(1.6rem, 3vw, 3rem);
  background: rgb(from var(--bg) r g b / 0.9);
  backdrop-filter: blur(14px);
  border-bottom: var(--rule) solid var(--line);
}
.filter-bar-left, .filter-bar-right { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.filter-bar [data-filter-open] { position: relative; }
.filter-bar [data-filter-count] { margin-left: 0.5rem; padding: 0.1rem 0.4rem; background: var(--fg); color: var(--bg); font-size: 0.58rem; }
.filter-total { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); font-variant-numeric: tabular-nums; }
.sort select {
  appearance: none; border: var(--rule) solid var(--line); background: none;
  padding: 0.55rem 2rem 0.55rem 0.8rem;
  font-size: var(--step--1); letter-spacing: 0.1em; text-transform: uppercase;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1rem center, right 0.7rem center;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.density { display: flex; gap: 2px; }
.density button { display: flex; gap: 2px; padding: 0.55rem 0.6rem; border: var(--rule) solid var(--line); }
.density i { width: 4px; height: 12px; background: var(--dim); display: block; }
.density button.is-on { border-color: var(--fg); }
.density button.is-on i { background: var(--fg); }

.chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.7rem; border: var(--rule) solid var(--line); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; }
.chip:hover { border-color: var(--fg); }
.chip i { font-style: normal; opacity: 0.6; }

.fdraw {
  position: fixed; inset: 0 0 0 auto; z-index: 220;
  width: min(24rem, 100vw);
  background: var(--bg); color: var(--fg);
  border-left: var(--rule) solid var(--line);
  display: grid; grid-template-rows: auto 1fr auto;
  translate: 100% 0;
  transition: translate 0.5s var(--ease);
  box-shadow: -24px 0 60px rgb(9 9 10 / 0.14);
}
.fdraw.is-open { translate: 0 0; }
.fdraw-head { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem var(--gut); border-bottom: var(--rule) solid var(--line); }
.fdraw-body { overflow-y: auto; padding: 1.2rem var(--gut); display: grid; gap: 1.8rem; }
.fdraw-foot { border-top: var(--rule) solid var(--line); padding: 1rem var(--gut); display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; }
.fgroup legend { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); margin-bottom: 0.8rem; }
.fgroup-row { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.fopt { position: relative; }
.fopt input { position: absolute; opacity: 0; inset: 0; }
.fopt span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.8rem; padding: 0.55rem 0.85rem;
  border: var(--rule) solid var(--line);
  font-size: var(--step--1); letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color var(--fast), color var(--fast), border-color var(--fast);
}
.fopt input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.fopt input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 3px; }

/* ── 16c. COLLECTIONS INDEX ───────────────────────────────── */
.idx { padding: calc(var(--header) + 6vh) var(--gut) var(--sec); }
.idx-list { border-top: var(--rule) solid var(--line); }
.idx-row {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: clamp(0.8rem, 2vw, 2.2rem);
  padding: clamp(1rem, 2.4vw, 2rem) 0;
  border-bottom: var(--rule) solid var(--line);
  transition: padding-inline var(--mid) var(--ease);
}
.idx-row:hover { padding-inline-start: clamp(0.5rem, 1.5vw, 1.6rem); }
.idx-num { font-size: 0.62rem; letter-spacing: 0.2em; color: var(--dim); }
.idx-name { font-family: var(--display); font-weight: 700; font-size: var(--step-3); line-height: 0.92; letter-spacing: -0.045em; text-transform: uppercase; }
.idx-count { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.idx-thumbs { display: flex; gap: 4px; }
.idx-thumbs img { width: clamp(34px, 4vw, 54px); aspect-ratio: 1; object-fit: cover; opacity: 0.9; }
.idx-cover {
  position: absolute; left: var(--px, 50%); top: var(--py, 50%); z-index: 5;
  width: clamp(180px, 18vw, 300px); aspect-ratio: 4/5;
  translate: -50% -50%;
  opacity: 0; scale: 0.94; pointer-events: none;
  transition: opacity var(--fast) var(--ease), scale var(--fast) var(--ease);
  overflow: clip;
}
.idx-cover img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (min-width: 861px) {
  .idx-row:hover .idx-cover { opacity: 1; scale: 1; }
  .idx-row:hover .idx-thumbs { opacity: 0; }
}

/* ── 16d. DOC / EDIT / SEARCH / 404 ───────────────────────── */
.doc { padding: calc(var(--header) + 6vh) var(--gut) var(--sec); max-width: 62rem; }
.doc-head { display: grid; gap: 1rem; padding-bottom: clamp(2rem, 5vw, 4rem); border-bottom: var(--rule) solid var(--line); margin-bottom: clamp(2rem, 5vw, 4rem); }
.doc-title { font-family: var(--display); font-weight: 700; font-size: var(--step-4); line-height: 0.88; letter-spacing: -0.05em; text-transform: uppercase; }
.doc-title .k-line > span { translate: 0 0; }
.doc-body { display: grid; gap: 1.2rem; max-width: 62ch; }
.doc-body h2 { font-family: var(--display); font-weight: 600; font-size: var(--step-1); letter-spacing: -0.02em; text-transform: uppercase; margin-top: 1.4rem; }
.doc-body p { color: var(--dim); }
.doc-body a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.doc-foot { margin-top: clamp(2.4rem, 5vw, 4rem); }

.edit-page { padding-top: calc(var(--header) + 6vh); }
.edit-count { font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dim); margin-bottom: 2rem; }
.search-page { padding-top: calc(var(--header) + 6vh); }

.nf {
  min-height: 100svh; background: var(--black); color: #f4f0e9;
  display: grid; align-content: center; gap: 1.4rem; justify-items: start;
  padding: calc(var(--header) + 8vh) var(--gut) 8vh;
}
.nf-title { font-size: var(--step-4); }
.nf-copy { color: rgb(244 240 233 / 0.62); max-width: 48ch; }
.nf-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 0.6rem; }
.nf .btn-solid { background: #f4f0e9; color: var(--black); }
.nf .btn-quiet { border-bottom-color: rgb(244 240 233 / 0.3); }
.nf-sug { width: 100%; margin-top: clamp(2.5rem, 6vw, 5rem); display: grid; gap: 1.4rem; }
.nf-sug-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--gut); }

/* ═══════════════════════════════════════════════════════════
   17. RESPONSIVE — six deliberate steps, mobile is its own
   design rather than a squeezed desktop.
   ═══════════════════════════════════════════════════════════ */

/* ── very large desktop: let the composition breathe ─────── */
@media (min-width: 1800px) {
  .sec, .idx, .doc { padding-inline: clamp(3rem, 6vw, 9rem); }
  .ed-cell { grid-column: span 3; }
  .ed-cell.is-wide { grid-column: span 6; }
  .ed-cell.is-tall { grid-column: span 3; }
  .rail-item { flex-basis: clamp(280px, 19vw, 400px); }
}

/* ── laptop ──────────────────────────────────────────────── */
@media (max-width: 1280px) {
  .ed-cell { grid-column: span 6; }
  .ed-cell.is-wide { grid-column: span 6; }
  .ed-cell.is-tall { grid-column: span 6; padding-top: 0; }
  .explorer-body { grid-template-columns: 1fr 0.8fr; }
}

/* ── tablet ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .manifesto, .philosophy { grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); }
  .arrivals-stage { grid-template-columns: 1fr; }
  .arrivals-pair { grid-template-columns: 1fr 1fr; padding-top: 0; }
  .ft-top { grid-template-columns: 1fr; }
  .mm-body { grid-template-columns: 1fr 0.7fr; }
  .sr-suggest, .sr-results { grid-template-columns: 1fr; }
  .pdp-grid { grid-template-columns: 1fr; }
  .pdp-panel-sticky { position: static; }
  .story-step { grid-template-columns: 1fr; }
  .story-step:nth-child(even) .story-media { order: 0; }
}

/* ── the mobile experience ───────────────────────────────── */
@media (max-width: 860px) {
  :root { --header: 56px; --rule: 1px; }

  .hd-btn-text { display: none; }
  .hd-menu .hd-btn-text, .hd-bag .hd-btn-text { display: inline; }
  .hd-edit .hd-ico { width: 19px; height: 19px; }
  .hd-right { gap: 1.15rem; }

  /* hero: full-bleed image, type stacked over it */
  .hero { min-height: 100svh; padding-bottom: 3.2rem; }
  .hero-mark { font-size: clamp(3.2rem, 22vw, 8rem); }
  .hero-say { font-size: var(--step-1); max-width: 100%; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 1.6rem; }
  .hero-meta { gap: 1.4rem 2.2rem; }
  .hero-actions { width: 100%; }
  .hero-actions .btn-solid { flex: 1; }
  .hero-cue { display: none; }

  /* cards: two-up, no hover dependency — quick add is always visible */
  .ed-grid { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1rem; }
  .ed-cell, .ed-cell.is-wide, .ed-cell.is-tall { grid-column: span 1; padding-top: 0; }
  .ed-cell.is-wide { grid-column: span 2; }
  .card-save { opacity: 1; translate: 0 0; width: 34px; height: 34px; }
  .card-quick { position: static; opacity: 1; translate: 0 0; pointer-events: auto; margin-top: 0.7rem; justify-items: stretch; }
  .card-add { width: 100%; padding-block: 0.8rem; }
  .card:hover .card-img--a { scale: 1; opacity: 1; }
  .card:hover .card-img--b { opacity: 0; }

  .grid-uniform { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1rem; }
  .arrivals-pair { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .lead-media { aspect-ratio: 4/5; }

  .explorer-body { grid-template-columns: 1fr; }
  .explorer-stage { display: none; }
  .ex-name { font-size: var(--step-2); }

  /* shop the look: taller stage, tap-only hotspots */
  .look-stage { aspect-ratio: 4/5; }
  .hot { width: 36px; height: 36px; }
  .look-legend { grid-template-columns: 1fr; }

  .fma-chapter { min-height: 106svh; }
  .fma-word { font-size: clamp(2.6rem, 16vw, 5rem); }
  .fma-media { height: 88svh; }

  .gallery-sticky { height: auto; padding-block: 4rem 3rem; }
  .art { flex-basis: 74vw; }

  .join-form { grid-template-columns: 1fr; }
  .join-submit { justify-content: flex-start; }

  .ft-cols { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
  .ft-base { flex-direction: column; gap: 0.5rem; }

  /* menu becomes a single full-screen column */
  .mm-body { grid-template-columns: 1fr; padding-block: 1.4rem 2.4rem; }
  .mm-side { display: none; }
  .mm-row-label { font-size: var(--step-2); }
  .mm-foot span:last-child { display: none; }

  .sr-bar input { font-size: var(--step-1); }

  #bag { width: 100vw; }

  /* PDP: swipe gallery + sticky bar, desktop stack hidden */
  .pdp { padding-inline: var(--gut); }
  .pdp-media-desktop { display: none; }
  .pdp-media-mobile { display: block; }
  .pdp-name { font-size: var(--step-2); }
  .pdp-bar { display: flex; }
  .pdp-recs-grid { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 1rem; }
  .pdp-trust { flex-direction: column; gap: 0.35rem; }

  .col-head { min-height: 64svh; }
  .filter-bar { padding-block: 0.7rem; }
  .filter-bar-right { width: 100%; justify-content: space-between; }
  .density { display: none; }
  .fdraw { display: none; }   /* small screens use the bottom sheet */

  .idx-row { grid-template-columns: auto 1fr auto; }
  .idx-thumbs, .idx-cover { display: none; }
  .idx-name { font-size: var(--step-2); }

  .story-line { font-size: var(--step-1); }
  .nf-sug-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── small phones ────────────────────────────────────────── */
@media (max-width: 480px) {
  .ed-grid, .grid-uniform, .arrivals-pair { grid-template-columns: 1fr; }
  .ed-cell.is-wide { grid-column: span 1; }
  .sec-head { flex-direction: column; align-items: flex-start; }
  .hero-mark { letter-spacing: -0.03em; }
  .ft-cols { grid-template-columns: 1fr; }
  .pdp-recs-grid, .nf-sug-grid { grid-template-columns: 1fr 1fr; }
  .hot-card { grid-template-columns: 72px 1fr; }
}

/* touch: nothing important hides behind hover */
@media (hover: none) {
  .card-save, .card-quick { opacity: 1; translate: 0 0; pointer-events: auto; }
  .card-img--b { display: none; }
  #cursor { display: none !important; }
  html.has-cursor * { cursor: auto !important; }
}

/* ── reduced motion: everything still works, nothing moves ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .grain { animation: none; }
  [data-reveal] { opacity: 1; translate: none; }
  .k-line > span { translate: none !important; }
  .hero-figure img, .card-img, .art-media img, .col-head-media img,
  .pdp-shot img, .story-media img, .fma-media img { scale: 1 !important; translate: none !important; }
  .fma-media, .fma-text { opacity: 1 !important; }
  .fma-chapter { min-height: auto; }
  .fma-media { position: static; height: auto; }
  .gallery-sticky { position: static; height: auto; }
  .gallery-track { width: auto; overflow-x: auto; }
  .hero-cue i::after, .col-scroll i { animation: none; }
  .loader-bar i { animation: none; scale: 1 1; }
  .hot-ring::after { animation: none; opacity: 0; }
  .ticker .tick-track { animation: none; }
}

/* View Transition API — a soft cross-fade, never a slide */
@media not (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: vt-out 0.24s var(--ease-io) both; }
  ::view-transition-new(root) { animation: vt-in 0.34s var(--ease) both; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ═══════════════════════════════════════════════════════════
   18. DETAIL RULES — states and wrappers used by the modules
   ═══════════════════════════════════════════════════════════ */

/* boot / capability flags on <html> */
html.is-ready #app { opacity: 1; }
html:not(.is-ready) #app { opacity: 0; }
#app { transition: opacity 0.5s var(--ease); }
html.is-soft #app { transition: none; opacity: 1; }
html.is-touch .card-quick { position: static; opacity: 1; translate: none; padding-top: 0.7rem; }
html.is-touch .card-save { opacity: 1; }

/* product card text column */
.card-text { min-width: 0; }

/* bottom sheet body */
.sheet-body { display: grid; gap: 0.9rem; }

/* purchase-panel option groups */
.opt-group { display: grid; }
.opt-group + .opt-group { margin-top: 1.1rem; }

/* bag: checkout total inside the button, line removal, busy state */
.btn-ghost-value { margin-left: 0.7rem; opacity: 0.62; font-variant-numeric: tabular-nums; }
.bag-line.is-leaving { opacity: 0; translate: 1.4rem 0; transition: opacity 0.2s var(--ease), translate 0.2s var(--ease); }
.btn.is-busy { pointer-events: none; opacity: 0.7; }
.btn.is-busy > span:first-child::after {
  content: ''; display: inline-block; width: 0.5em; height: 0.5em; margin-left: 0.55em;
  border-radius: 50%; background: currentColor; animation: pulse-dot 0.9s var(--ease-io) infinite;
}
@keyframes pulse-dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

/* collection results block */
.col-body { padding-top: clamp(1.4rem, 4vh, 2.6rem); }

/* fashion-meets-art wrapper + focused chapter */
.fma-inner { position: relative; }
.fma-chapter.is-live .fma-text { text-shadow: 0 2px 46px rgb(9 9 10 / 0.6); }
.fma-chapter.is-live .fma-word { letter-spacing: -0.04em; transition: letter-spacing 0.7s var(--ease); }

/* the original script logo, composited onto the near-black ground */
.ft-logo {
  width: clamp(74px, 8vw, 104px); height: auto; align-self: center;
  mix-blend-mode: screen; opacity: 0.92;
}

/* footer baseline */
.ft-place { color: rgb(244 240 233 / 0.8); }
.ft-creed { font-family: var(--editorial); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 0.9rem; color: rgb(244 240 233 / 0.62); }
.ft-copy { color: rgb(244 240 233 / 0.42); }

@media (prefers-reduced-motion: reduce) {
  #app { transition: none; opacity: 1; }
  html:not(.is-ready) #app { opacity: 1; }
  .btn.is-busy > span:first-child::after { animation: none; }
  .bag-line.is-leaving { transition: none; }
}

/* print: the catalogue, legibly */
@media print {
  .grain, #cursor, #header, #menu, #search, #bag, #scrim, .pdp-bar, .ticker, #loader { display: none !important; }
  body { background: #fff; color: #000; }
  #app { padding-top: 0; }
}