/* ──────────────────────────────────────────────────────────────
   IL MANO — Summer 2026
   System: editorial luxe × kinetic interaction
   ────────────────────────────────────────────────────────────── */

:root {
  /* Surface palette — warm off-white default */
  --bg:           #f5f4f0;
  --bg-elev:      #ebe8e0;
  --ink:          #0a0a0a;
  --ink-soft:     #1a1a1a;
  --mid:          #8c8780;
  --mid-soft:     #b8b3a8;
  --line:         rgba(10, 10, 10, 0.10);
  --line-strong:  rgba(10, 10, 10, 0.22);
  --tobacco:      #8b6f47;
  --tobacco-deep: #5c4628;
  --cream:        #efeadd;

  /* Type */
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-sans:    "Inter Tight", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* Motion */
  --ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.7, 0, 1, 1);

  /* Layout */
  --pad-x:    clamp(20px, 4vw, 56px);
  --max-w:    1680px;
  --nav-h:    62px;
}

/* Dark surface variant */
body[data-surface="dark"] {
  --bg:          #0a0a0a;
  --bg-elev:     #141414;
  --ink:         #f5f4f0;
  --ink-soft:    #ebe8e0;
  --mid:         #6a6660;
  --mid-soft:    #4a4640;
  --line:        rgba(245, 244, 240, 0.10);
  --line-strong: rgba(245, 244, 240, 0.22);
  --cream:       #1a1612;
}

body[data-surface="cream"] {
  --bg:    #efeadd;
  --bg-elev: #e3dccb;
  --cream: #f7f2e6;
}

body[data-surface="stark"] {
  --bg:    #ffffff;
  --bg-elev: #f4f4f4;
  --cream: #fafafa;
  --line:  rgba(0,0,0,0.08);
}

/* ─── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
button, a { -webkit-tap-highlight-color: transparent; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 350;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.005em;
  /* clip (not hidden): hidden turns body into a scroll container and breaks position: sticky */
  overflow-x: hidden;
  overflow-x: clip;
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
  letter-spacing: inherit;
}
input { font-family: inherit; }

/* ─── Type primitives ──────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 400;
}
.editorial {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 0.96;
}
.editorial em, .editorial i {
  font-style: italic;
  font-weight: 300;
}
.kinetic {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ─── Intro loader (markup lives in index.html; driven by html.intro* classes) ─ */
.intro-loader { display: none; }
html.intro:not(.intro-done), html.intro:not(.intro-done) body { overflow: hidden; }
html.intro:not(.intro-done) body { overscroll-behavior: none; touch-action: none; }
html.intro .intro-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: #ECE8E2;
  pointer-events: none;
}
.intro-loader__group {
  display: flex; flex-direction: column; align-items: center;
  gap: 28px; max-width: 100vw;
}
.intro-loader__word {
  display: flex; align-items: flex-start;
  font-family: var(--font-display); font-weight: 400;
  font-size: min(64px, 11vw); line-height: 1.2;
  color: #15120F;
  margin-right: -0.5em; /* cancel trailing tracking so the word is optically centred */
}
.intro-loader__word .l {
  display: block; overflow: hidden;
  padding-bottom: 0.12em; margin-bottom: -0.12em; /* keep descender room inside the mask */
  margin-right: 0.5em;                            /* 0.5em tracking, per letter */
}
.intro-loader__word .l i { display: block; font-style: normal; transform: translateY(105%); }
.intro-loader__word .gap { display: block; width: 0.5em; } /* the single IL / MANO space */
.intro-loader__rule {
  width: min(360px, 70vw); height: 1px;
  background: rgba(21,18,15,0.45);
  transform: scaleX(0);
}
.intro-loader__tag {
  font-family: "DM Mono", var(--font-mono); font-size: 11px;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: #6A6158; margin-right: -0.34em;
  opacity: 0; transform: translateY(10px);
}
/* timeline t=0 is html.intro-run */
html.intro-run .intro-loader__word .l i { animation: introLetter 0.95s cubic-bezier(.2,.75,.1,1) both; }
html.intro-run .intro-loader__word .l:nth-child(1) i { animation-delay: 0s; }
html.intro-run .intro-loader__word .l:nth-child(2) i { animation-delay: 0.07s; }
html.intro-run .intro-loader__word .l:nth-child(4) i { animation-delay: 0.14s; }
html.intro-run .intro-loader__word .l:nth-child(5) i { animation-delay: 0.21s; }
html.intro-run .intro-loader__word .l:nth-child(6) i { animation-delay: 0.28s; }
html.intro-run .intro-loader__word .l:nth-child(7) i { animation-delay: 0.35s; }
html.intro-run .intro-loader__rule { animation: introRule 0.8s cubic-bezier(.65,0,.35,1) 0.55s both; }
html.intro-run .intro-loader__tag  { animation: introTag 0.7s var(--ease) 0.85s both; }
html.intro-run .intro-loader__group { animation: introGroupOut 0.6s var(--ease-io) 1.75s both; }
html.intro-hero .intro-loader { background: transparent; }
@keyframes introLetter   { to { transform: translateY(0); } }
@keyframes introRule     { to { transform: scaleX(1); } }
@keyframes introTag      { to { opacity: 1; transform: translateY(0); } }
@keyframes introGroupOut { to { opacity: 0; transform: translateY(-28px); } }

/* ─── Cookie notice ────────────────────────────────────────── */
.cookie-notice {
  position: fixed; left: var(--pad-x); bottom: 24px; z-index: 90;
  width: min(380px, calc(100vw - 2 * var(--pad-x)));
  padding: 20px 22px 18px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  animation: fadeUp10 0.8s var(--ease) 0.4s backwards;
}
html.intro:not(.intro-done) .cookie-notice { display: none; }
.cookie-notice__eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--mid);
  margin-bottom: 10px;
}
.cookie-notice p { font-size: 13px; line-height: 1.55; font-weight: 350; }
.cookie-notice p a { text-decoration: underline; text-underline-offset: 3px; }
.cookie-notice__btn {
  margin-top: 16px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 11px 20px; border: 1px solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.cookie-notice__btn:hover { background: var(--ink); color: var(--bg); }

/* ─── Newsletter slide-in ──────────────────────────────────── */
.news-slide {
  position: fixed; right: var(--pad-x); bottom: 24px; z-index: 89;
  width: min(340px, calc(100vw - 2 * var(--pad-x)));
  padding: 20px 22px 18px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  animation: fadeUp10 0.8s var(--ease) backwards;
}
.news-slide__eyebrow {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--mid);
  margin-bottom: 10px;
}
.news-slide__title {
  font-family: var(--font-display); font-size: 22px; line-height: 1.2; font-weight: 400;
}
.news-slide__close {
  position: absolute; top: 10px; right: 14px;
  font-size: 18px; line-height: 1; color: var(--mid); cursor: pointer;
}
.news-slide__close:hover { color: var(--ink); }
.news-slide__form {
  display: flex; align-items: center; margin-top: 14px;
  border-bottom: 1px solid var(--line-strong); padding: 4px 0;
}
.news-slide__form input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--ink); font-size: 13px; letter-spacing: 0.04em; padding: 6px 0;
}
.news-slide__form input::placeholder { color: var(--mid); }
.news-slide__form button {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--ink); padding: 6px 0 6px 14px; cursor: pointer;
}
.news-slide__form button:disabled { opacity: 0.6; cursor: default; }
html.intro:not(.intro-done) .news-slide { display: none; }
@media (max-width: 640px) { .news-slide { bottom: 16px; } }

/* ─── Nav ──────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--pad-x);
  background: transparent;
  color: #f5f4f0;
  transition: transform 0.6s var(--ease), background 0.45s var(--ease), color 0.45s var(--ease),
              border-color 0.45s var(--ease), backdrop-filter 0.45s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav--hidden { transform: translateY(-100%); }
.nav.scrolled,
.nav.solid {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  color: var(--ink);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.nav__group {
  display: flex; align-items: center; gap: 28px;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 450;
}
.nav__group--right { justify-content: flex-end; }
.nav__link {
  position: relative;
  padding: 6px 0;
  display: inline-flex; align-items: center; gap: 6px;
}
.nav__link::after {
  content: ""; position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width 0.4s var(--ease);
}
.nav__link:hover::after { width: 100%; }
.nav__wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nav__burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 32px; height: 32px;
}
.nav__burger span {
  display: block; width: 20px; height: 1px; background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

.nav-drawer {
  position: fixed; inset: 0; z-index: 99;
  background: var(--bg); color: var(--ink);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + 24px) var(--pad-x) 40px;
  transform: translateY(-100%);
  transition: transform 0.45s var(--ease);
  visibility: hidden;
}
.nav-drawer.is-open { transform: translateY(0); visibility: visible; }
.nav-drawer__links {
  display: flex; flex-direction: column; gap: 22px;
  font-family: var(--font-display); font-size: clamp(28px, 8vw, 44px);
}
.nav-drawer__links a { width: fit-content; }
.nav-drawer__foot {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mid);
}

.nav__bag-count {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.7;
}

/* ─── Hero ─────────────────────────────────────────────────── */
.hero {
  /* reveal offsets — repeat visits start at the headline (no loader/image/nav choreography) */
  --t-head-1: 0.05s; --t-head-2: 0.19s;
  --t-labels: 0.4s; --t-para: 0.55s; --t-cta: 0.7s; --t-scroll: 0.85s;
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #0a0a0a;
  color: #f5f4f0;
}
.hero__media {
  position: absolute; inset: 0;
  overflow: hidden;
}
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  animation: heroZoom 16s var(--ease) 0.4s forwards;
}
@keyframes heroZoom {
  to { transform: scale(1.0); }
}
.hero__veil {
  position: absolute; left: 0; right: 0; bottom: 0; height: 480px;
  background: linear-gradient(to bottom,
    rgba(22,17,13,0) 0%,
    rgba(22,17,13,0.013) 8.1%,
    rgba(22,17,13,0.049) 15.5%,
    rgba(22,17,13,0.104) 22.5%,
    rgba(22,17,13,0.175) 29%,
    rgba(22,17,13,0.259) 35.3%,
    rgba(22,17,13,0.352) 41.2%,
    rgba(22,17,13,0.45) 47.1%,
    rgba(22,17,13,0.55) 52.9%,
    rgba(22,17,13,0.648) 58.8%,
    rgba(22,17,13,0.741) 64.7%,
    rgba(22,17,13,0.825) 71%,
    rgba(22,17,13,0.896) 77.5%,
    rgba(22,17,13,0.951) 84.5%,
    rgba(22,17,13,0.987) 91.9%,
    rgba(22,17,13,1) 100%);
}
.hero__inner {
  position: relative;
  height: 100svh; min-height: 100svh;
  display: grid;
  grid-template-rows: auto;
  align-content: end;
  padding: calc(var(--nav-h) + 32px) var(--pad-x) 48px;
}
.hero__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: end;
  gap: 48px;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(56px, 11vw, 178px);
  line-height: 0.86;
  letter-spacing: -0.018em;
}
.hero__title .line {
  display: block;
  overflow: hidden;
  /* pad the mask so ascenders/descenders don't clip, offset so layout is unchanged */
  padding: 0.14em 0 0.2em;
  margin: -0.14em 0 -0.2em;
}
.hero__title .line > span {
  display: inline-block;
  transform: translateY(140%);
  animation: heroLine 1.1s var(--ease) forwards;
}
.hero__title .line:nth-child(1) > span { animation-delay: var(--t-head-1); }
.hero__title .line:nth-child(2) > span { animation-delay: var(--t-head-2); font-style: italic; font-weight: 300; color: #efeadd; }
@keyframes heroLine {
  to { transform: translateY(0); }
}
.hero__meta {
  display: flex; flex-direction: column; gap: 18px;
  max-width: 360px;
  margin-bottom: 6px;
}
.hero__meta p { animation: fadeUp10 0.8s var(--ease) var(--t-para) backwards; }
.hero__cta    { animation: fadeUp10 0.8s var(--ease) var(--t-cta) backwards; }
.hero__meta p {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(245,244,240,0.78);
  font-weight: 350;
}
.hero__cta {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  align-self: flex-start;
  padding: 14px 22px 14px 24px;
  border: 1px solid rgba(245,244,240,0.45);
  border-radius: 999px;
  background: rgba(245,244,240,0.04);
  backdrop-filter: blur(6px);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.4s var(--ease);
}
.hero__cta:hover {
  background: #f5f4f0;
  color: #0a0a0a;
  border-color: #f5f4f0;
}
.hero__cta .arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease);
}
.hero__cta:hover .arrow { transform: translateX(4px); }

@keyframes fadeUp10 {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Hero intro choreography (first visit; t=0 is html.intro-hero, 1.95s into intro) ─ */
html.intro .hero {
  background: #ECE8E2;
  --t-head-1: 0.85s; --t-head-2: 0.99s;
  --t-labels: 1.2s; --t-para: 1.35s; --t-cta: 1.5s; --t-scroll: 1.65s;
}
html.intro .hero__media,
html.intro .hero__veil { animation: heroWipe 1.25s cubic-bezier(.76,0,.24,1) 0s both; }
html.intro .hero__media img {
  transform-origin: 50% 100%;
  animation: heroImgIn 2.6s cubic-bezier(.16,1,.3,1) 0s both;
}
/* everything waits (paused inside its delay) until the curtain hands off */
html.intro:not(.intro-hero) .hero *,
html.intro:not(.intro-hero) .hero { animation-play-state: paused; }
@keyframes heroWipe  { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes heroImgIn { from { transform: scale(1.14); } to { transform: scale(1); } }

/* ─── Hero → page fade ─────────────────────────────────────── */
.hero-fade {
  height: clamp(80px, 14vw, 180px);
  margin-top: -1px;
  background: linear-gradient(to bottom, rgb(22,17,13) 0%, color-mix(in srgb, rgb(22,17,13) 55%, var(--bg)) 35%, var(--bg) 100%);
}

/* ─── Section scaffolding ──────────────────────────────────── */
.section {
  padding: clamp(64px, 8vw, 120px) var(--pad-x);
  position: relative;
}
.section__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.section__index {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 14px;
}
.section__index::before {
  content: ""; width: 28px; height: 1px;
  background: var(--mid);
}
.section__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.96;
  letter-spacing: -0.015em;
  max-width: 14ch;
}
.section__title em { font-style: italic; }
.section__action {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-strong);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.section__action:hover { color: var(--ink); border-color: var(--ink); }

/* ─── Categories ───────────────────────────────────────────── */
.categories {
  background: var(--bg);
}
.categories__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(340px, 40vw, 580px); /* every row the same height, so cards in a row line up */
  gap: 12px;
}
.cat {
  height: 100%;
  position: relative;
  overflow: hidden;
  background: var(--bg-elev);
  cursor: pointer;
  isolation: isolate;
}
.cat--lg { grid-column: span 7; }
.cat--md { grid-column: span 5; }
.cat--sm { grid-column: span 4; }
.cat__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter 0.6s var(--ease);
  filter: brightness(0.88) saturate(0.95);
}
.cat:hover .cat__img {
  transform: scale(1.05);
  filter: brightness(0.92) saturate(1);
}
.cat__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
}
.cat__label {
  position: absolute;
  left: 28px; bottom: 28px;
  color: #f5f4f0;
  z-index: 2;
  display: flex; flex-direction: column; gap: 6px;
}
.cat__num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  opacity: 0.7;
}
.cat__name {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.005em;
}
.cat__count {
  position: absolute;
  right: 28px; bottom: 28px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(245,244,240,0.7);
  text-transform: uppercase;
}
.cat__arrow {
  position: absolute;
  top: 28px; right: 28px; z-index: 2;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(245,244,240,0.55);
  display: flex; align-items: center; justify-content: center;
  color: #f5f4f0;
  transform: translateY(-6px);
  opacity: 0;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background 0.3s var(--ease);
}
.cat:hover .cat__arrow {
  opacity: 1; transform: translateY(0);
}
.cat:hover .cat__arrow:hover { background: #f5f4f0; color: #0a0a0a; }

/* ─── Collection ───────────────────────────────────────────── */
.collection {
  background: var(--bg-elev);
}
.collection__controls {
  display: flex; gap: 8px; align-items: center;
}
.chip {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--mid);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip.is-active { color: var(--bg); background: var(--ink); border-color: var(--ink); }

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.5vw, 56px) clamp(16px, 2vw, 28px);
}
.card {
  cursor: pointer;
  display: flex; flex-direction: column;
}
.card__media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--cream);
  isolation: isolate;
}
.card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 0.5s var(--ease), transform 0.9s var(--ease);
  will-change: transform, opacity;
}
.card__media img.is-secondary {
  opacity: 0;
}
.card:hover .card__media img.is-primary { opacity: 0; }
.card:hover .card__media img.is-secondary { opacity: 1; transform: scale(1.02); }
.card__badge {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--bg);
  padding: 5px 10px;
  border-radius: 999px;
}
.card__wishlist {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(245,244,240,0.85);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  z-index: 3;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), color 0.2s;
}
.card:hover .card__wishlist { opacity: 1; transform: translateY(0); }
.card__wishlist.is-active { color: #b3492f; opacity: 1; }
.card__quickadd {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  z-index: 3;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  height: 42px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.card:hover .card__quickadd { opacity: 1; transform: translateY(0); }

.card__info {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  padding-top: 14px;
}
.card__name {
  font-family: var(--font-sans);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.card__price {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.card__sub {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
  display: flex; gap: 10px; align-items: center;
}
.card__swatches {
  grid-column: 1 / -1;
  display: flex; gap: 7px;
  padding-top: 6px;
}
.swatch-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  position: relative;
}
.swatch-dot:hover { transform: scale(1.18); }
.swatch-dot.is-active { box-shadow: 0 0 0 1px var(--bg), 0 0 0 2px var(--ink); }

/* ─── Lookbook (parallax editorial) ─────────────────────────── */
.lookbook {
  background: var(--bg);
  padding: 0;
  overflow: hidden;
}
.lookbook__inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  padding: clamp(64px, 8vw, 120px) var(--pad-x);
  align-items: start;
}
.lookbook__media {
  grid-column: span 7;
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--cream);
}
.lookbook__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
.lookbook__copy {
  grid-column: 9 / span 4;
  padding-top: 48px;
  display: flex; flex-direction: column; gap: 28px;
  position: sticky; top: calc(var(--nav-h) + 40px);
}
.lookbook__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(30px, 3.5vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.01em;
}
.lookbook__body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 36ch;
  font-weight: 350;
}
.lookbook__stat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.lookbook__stat-val {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 36px;
  line-height: 1;
}
.lookbook__stat-lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mid);
  margin-top: 6px;
}

/* ─── Story / manifesto ────────────────────────────────────── */
.story {
  background: var(--ink);
  color: var(--bg);
  padding: clamp(80px, 10vw, 160px) var(--pad-x);
  position: relative;
  overflow: hidden;
}
.story__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245,244,240,0.5);
  margin-bottom: 28px;
}
.story__statement {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(40px, 5.4vw, 78px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 22ch;
}
.story__statement em { font-style: italic; opacity: 0.9; }
.story__statement .word {
  display: inline-block;
  opacity: 0.18;
  transition: opacity 0.6s var(--ease), color 0.6s var(--ease);
}
.story__statement .word.is-lit { opacity: 1; }
.story__footer {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.story__pillar h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245,244,240,0.5);
  margin-bottom: 14px;
  font-weight: 400;
}
.story__pillar p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(245,244,240,0.85);
  max-width: 32ch;
}

/* ─── Footer ───────────────────────────────────────────────── */
.footer {
  background: var(--ink);
  color: var(--bg);
  padding: clamp(56px, 7vw, 96px) var(--pad-x) 28px;
}
.footer__megabrand {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(80px, 18vw, 280px);
  line-height: 0.85;
  letter-spacing: 0.04em;
  text-align: center;
  border-bottom: 1px solid rgba(245,244,240,0.12);
  padding-bottom: clamp(36px, 5vw, 64px);
  margin-bottom: clamp(36px, 5vw, 60px);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
  gap: 40px;
  margin-bottom: 60px;
}
.footer__col h5 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245,244,240,0.5);
  font-weight: 400;
  margin-bottom: 18px;
}
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer__col a {
  font-size: 13px;
  color: rgba(245,244,240,0.78);
  letter-spacing: 0.01em;
  transition: color 0.2s;
}
.footer__col a:hover { color: var(--bg); }
.footer__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 22px;
  line-height: 1.3;
  color: rgba(245,244,240,0.85);
  max-width: 24ch;
  margin-bottom: 24px;
}
.newsletter {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(245,244,240,0.22);
  padding: 10px 0;
  margin-top: 8px;
}
.newsletter input {
  flex: 1;
  background: none; border: none; outline: none;
  color: var(--bg);
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 6px 0;
}
.newsletter input::placeholder { color: rgba(245,244,240,0.35); }
.newsletter button {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(245,244,240,0.7);
  padding: 6px 0 6px 14px;
}
.newsletter button:hover { color: var(--bg); }
.newsletter button:disabled { opacity: 0.6; cursor: default; }
.newsletter__msg {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  margin-top: 10px; color: var(--tobacco);
}

.footer__socials { display: flex; gap: 18px; margin-top: 28px; }
.footer__socials a { color: rgba(245,244,240,0.6); display: inline-flex; transition: color 0.2s, transform 0.2s; }
.footer__socials a:hover { color: var(--bg); transform: translateY(-2px); }

.footer__legal {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: rgba(245,244,240,0.42);
  text-transform: uppercase;
  padding-top: 24px;
  border-top: 1px solid rgba(245,244,240,0.08);
  flex-wrap: wrap;
  gap: 16px;
}
.footer__legal-group { display: flex; gap: 24px; flex-wrap: wrap; }

/* ─── Reveal animations ────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-clip > * {
  display: block;
  overflow: hidden;
}
.reveal-clip-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-in .reveal-clip-inner { transform: translateY(0); }

/* ─── PDP overlay ──────────────────────────────────────────── */
.pdp {
  position: fixed; inset: 0;
  z-index: 200;
  background: var(--bg);
  color: var(--ink);
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.7s var(--ease-io);
  display: flex; flex-direction: column;
}
.pdp.is-open { transform: translateY(0); }
.pdp__close {
  position: absolute;
  top: 22px; right: 28px;
  z-index: 5;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.pdp__close:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pdp__back {
  position: absolute;
  top: 28px; left: 28px;
  z-index: 5;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
.pdp__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 0;
  flex: 1;
}
.pdp__gallery {
  background: var(--cream);
  padding: 96px 32px 56px;
  display: flex; flex-direction: column; gap: 8px;
}
.pdp__main-img {
  aspect-ratio: 4/5;
  background: var(--bg-elev);
  overflow: hidden;
  position: relative;
}
.pdp__main-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity 0.5s var(--ease);
}
.pdp__main-img img.is-leaving { opacity: 0; }
.pdp__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.pdp__thumb {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-elev);
  cursor: pointer;
  opacity: 0.55;
  position: relative;
  transition: opacity 0.3s var(--ease);
}
.pdp__thumb.is-active { opacity: 1; }
.pdp__thumb.is-active::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid var(--ink);
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }

.pdp__info {
  padding: 96px clamp(28px, 4vw, 64px) 56px;
  display: flex; flex-direction: column;
  max-width: 600px;
}
.pdp__crumb {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 32px;
}
.pdp__name {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(38px, 4.5vw, 64px);
  line-height: 0.96;
  letter-spacing: -0.012em;
  margin-bottom: 14px;
}
.pdp__price-row {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 36px;
}
.pdp__price {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 400;
}
.pdp__rating {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--mid);
  display: flex; align-items: center; gap: 8px;
}

.opt-block { margin-bottom: 28px; }
.opt-block__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.opt-block__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mid);
}
.opt-block__value {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
}
.opt-block__link {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mid);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.opt-block__link:hover { color: var(--ink); border-color: var(--ink); }

.swatch-row { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch-square {
  width: 38px; height: 38px;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  position: relative;
  transition: transform 0.25s var(--ease);
}
.swatch-square:hover { transform: scale(1.06); }
.swatch-square.is-active { border-color: var(--ink); }
.swatch-square.is-active::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid var(--ink);
}

.size-row { display: flex; gap: 6px; flex-wrap: wrap; }
.size-btn {
  min-width: 52px; height: 48px; padding: 0 14px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  background: transparent;
  color: var(--ink);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.size-btn:hover:not(.is-disabled) { border-color: var(--ink); }
.size-btn.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.size-btn.is-disabled {
  opacity: 0.35; cursor: not-allowed; text-decoration: line-through;
}

.cta {
  width: 100%;
  height: 58px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
  position: relative; overflow: hidden;
}
.cta:hover {
  background: var(--tobacco-deep);
}
body[data-surface="dark"] .cta:hover { background: var(--tobacco); }
.cta--secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.cta--secondary:hover { background: var(--ink); color: var(--bg); }

.pdp__accordion {
  margin-top: 24px;
  border-top: 1px solid var(--line);
}
.acc-row { border-bottom: 1px solid var(--line); }
.acc-row__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0;
  cursor: pointer;
  user-select: none;
}
.acc-row__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0.01em;
}
.acc-row__icon {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  color: var(--ink);
}
.acc-row__icon::before, .acc-row__icon::after {
  content: ""; position: absolute;
  background: currentColor;
}
.acc-row__icon::before { width: 100%; height: 1px; top: 50%; left: 0; }
.acc-row__icon::after { width: 1px; height: 100%; top: 0; left: 50%;
  transition: transform 0.4s var(--ease); }
.acc-row.is-open .acc-row__icon::after { transform: scaleY(0); }
.acc-row__body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.5s var(--ease);
}
.acc-row.is-open .acc-row__body { max-height: 600px; }
.acc-row__inner {
  padding: 0 0 24px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.acc-row__inner ul { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.acc-row__inner li {
  display: grid; grid-template-columns: 110px 1fr; gap: 16px;
  font-size: 12px;
}
.acc-row__inner li b {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 400;
  padding-top: 2px;
}

/* ─── Cart drawer ──────────────────────────────────────────── */
.scrim {
  position: fixed; inset: 0;
  background: rgba(10,10,10,0.5);
  backdrop-filter: blur(6px);
  z-index: 300;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s var(--ease);
}
.scrim.is-open { opacity: 1; pointer-events: auto; }

.cart {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(460px, 100vw);
  background: var(--bg);
  color: var(--ink);
  z-index: 310;
  transform: translateX(100%);
  transition: transform 0.55s var(--ease-io);
  display: flex; flex-direction: column;
  box-shadow: -30px 0 60px rgba(10,10,10,0.18);
}
.cart.is-open { transform: translateX(0); }
.cart__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px 28px 20px;
  border-bottom: 1px solid var(--line);
}
.cart__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 0.02em;
}
.cart__title span {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--mid);
  margin-left: 8px;
}
.cart__close {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: background 0.25s var(--ease);
}
.cart__close:hover { background: var(--bg-elev); }
.cart__body {
  flex: 1; overflow-y: auto;
  padding: 16px 28px;
}
.cart__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 80px 24px;
  gap: 16px;
  color: var(--mid);
}
.cart__empty h3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 28px;
  color: var(--ink);
}
.cart-line {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.cart-line__img {
  width: 88px; height: 110px;
  background: var(--bg-elev);
  overflow: hidden;
}
.cart-line__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__info {
  display: flex; flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.cart-line__name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.cart-line__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--mid);
  text-transform: uppercase;
}
.cart-line__bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: auto; padding-top: 8px;
}
.cart-qty {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
}
.cart-qty button {
  width: 22px; height: 22px;
  font-size: 14px;
  color: var(--mid);
  transition: color 0.2s;
}
.cart-qty button:hover { color: var(--ink); }
.cart-qty span {
  font-family: var(--font-mono);
  font-size: 11px;
  min-width: 14px; text-align: center;
}
.cart-line__price {
  font-family: var(--font-mono);
  font-size: 12px;
}
.cart-line__remove {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
  border-bottom: 1px solid transparent;
  margin-left: 14px;
  transition: color 0.2s, border-color 0.2s;
}
.cart-line__remove:hover { color: var(--ink); border-color: var(--ink); }

.cart__foot {
  padding: 24px 28px 28px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.cart__totals {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 18px;
}
.cart__row {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mid);
  text-transform: uppercase;
}
.cart__row--total {
  color: var(--ink);
  font-size: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  margin-top: 6px;
  letter-spacing: 0.1em;
}
.cart__note {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.12em;
  text-align: center;
  margin-top: 14px;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Fly-to-cart ghost */
.fly-ghost {
  position: fixed;
  z-index: 350;
  width: 90px; height: 110px;
  background: var(--cream);
  overflow: hidden;
  pointer-events: none;
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}
.fly-ghost img { width: 100%; height: 100%; object-fit: cover; }

/* ─── Checkout (Stripe-mocked) ─────────────────────────────── */
.checkout {
  position: fixed; inset: 0;
  z-index: 400;
  background: var(--bg);
  color: var(--ink);
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.65s var(--ease-io);
  display: flex; flex-direction: column;
}
.checkout.is-open { transform: translateY(0); }
.checkout__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px var(--pad-x);
  border-bottom: 1px solid var(--line);
}
.checkout__head-left, .checkout__head-right {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mid);
}
.checkout__head-right { justify-content: flex-end; }
.checkout__wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.32em;
}
.checkout__steps {
  display: flex; gap: 6px;
}
.checkout__step {
  display: flex; align-items: center; gap: 8px;
}
.checkout__step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  font-family: var(--font-mono);
}
.checkout__step.is-active .checkout__step-num { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.checkout__step.is-done .checkout__step-num { background: var(--bg-elev); color: var(--ink); }
.checkout__step-lbl { color: var(--mid); }
.checkout__step.is-active .checkout__step-lbl { color: var(--ink); }

.checkout__body {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  flex: 1;
}
.checkout__form {
  padding: clamp(40px, 6vw, 80px) clamp(28px, 5vw, 80px);
  max-width: 720px;
}
.checkout__form h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 3vw, 42px);
  margin-bottom: 32px;
  letter-spacing: -0.01em;
}
.field-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.field-row--single { grid-template-columns: 1fr; }
.field {
  position: relative;
}
.field input, .field select {
  width: 100%;
  height: 56px;
  padding: 22px 16px 8px;
  background: var(--bg-elev);
  border: 1px solid transparent;
  font-size: 14px;
  color: var(--ink);
  font-family: var(--font-sans);
  outline: none;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
  border-radius: 4px;
}
.field input:focus, .field select:focus {
  border-color: var(--ink);
  background: var(--bg);
}
.field label {
  position: absolute;
  top: 18px; left: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
  pointer-events: none;
  transition: top 0.2s var(--ease), font-size 0.2s var(--ease);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field select:focus + label,
.field select.has-val + label { top: 8px; font-size: 8.5px; }
.field input::placeholder { opacity: 0; }
.checkout__section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mid);
  margin: 36px 0 18px;
}
.method-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-bottom: 20px;
}
.method {
  height: 64px;
  border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  border-radius: 4px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
  position: relative;
}
.method.is-active {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.method.is-active::after {
  content: ""; position: absolute; inset: -4px;
  border: 1px solid var(--ink);
}
.method.is-disabled {
  opacity: 0.4; cursor: not-allowed;
}
.method.is-disabled.is-active {
  background: none; color: inherit; border-color: var(--line-strong);
}

.card-input {
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 8px 14px;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-elev);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
  height: 56px;
}
.card-input:focus-within { border-color: var(--ink); background: var(--bg); }
.card-input__brand {
  width: 38px; height: 26px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px;
  text-transform: uppercase;
}
.card-input input {
  background: transparent; border: none; outline: none;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  flex: 1;
  color: var(--ink);
}

.checkout__summary {
  background: var(--bg-elev);
  padding: clamp(40px, 6vw, 80px) clamp(28px, 4vw, 60px);
  border-left: 1px solid var(--line);
  position: relative;
}
.checkout__summary h3 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 24px;
}
.sum-line {
  display: grid; grid-template-columns: 76px 1fr auto;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.sum-line__img {
  width: 76px; height: 92px; overflow: hidden;
  background: var(--bg);
}
.sum-line__img img { width: 100%; height: 100%; object-fit: cover; }
.sum-line__name { font-size: 13px; font-weight: 500; }
.sum-line__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--mid);
  text-transform: uppercase;
  margin-top: 4px;
}
.sum-line__price {
  font-family: var(--font-mono);
  font-size: 12px;
}
.sum-totals {
  margin-top: 22px;
  display: flex; flex-direction: column; gap: 8px;
}
.sum-row {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mid);
  text-transform: uppercase;
}
.sum-row--total {
  color: var(--ink);
  font-size: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
  letter-spacing: 0.1em;
}

.checkout__success {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 64px var(--pad-x);
  gap: 18px;
}
.checkout__success-mark {
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.checkout__success h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(44px, 5vw, 72px);
  letter-spacing: -0.01em;
}
.checkout__success p { max-width: 38ch; color: var(--mid); }
.checkout__success-meta {
  margin-top: 28px;
  display: flex; gap: 36px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.checkout__success-meta b {
  display: block;
  color: var(--mid);
  font-weight: 400;
  font-size: 9.5px;
  margin-bottom: 4px;
}

/* ─── Magnetic cursor target ───────────────────────────────── */
[data-magnet] { transition: transform 0.3s var(--ease); will-change: transform; }

/* ─── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .hero__media img { transform: scale(1); }
}

/* ─── Info / legal / FAQ pages ─────────────────────────────── */
.info-page {
  max-width: 780px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 64px) var(--pad-x) 120px;
}
.info-page--404 {
  min-height: 70vh;
  display: flex; flex-direction: column; justify-content: center;
  text-align: left;
}
.info-page__head { margin-bottom: 56px; }
.info-page__intro {
  margin-top: 18px; color: var(--mid);
  font-size: 15px; line-height: 1.65; max-width: 56ch;
}
.info-page__section { padding: 32px 0; border-top: 1px solid var(--line); }
.info-page__section:first-child { border-top: none; }
.info-page__section h2 {
  font-family: var(--font-display); font-size: 22px; font-weight: 400; margin-bottom: 14px;
}
.info-page__section > p { color: var(--ink-soft); line-height: 1.7; max-width: 62ch; }
.info-page__qa { margin-top: 20px; }
.info-page__qa h3 { font-size: 14px; font-weight: 550; margin-bottom: 6px; }
.info-page__qa p { color: var(--mid); line-height: 1.7; max-width: 62ch; }

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .pdp__grid { grid-template-columns: 1fr; }
  .pdp__gallery { padding: 88px 24px 32px; }
  .pdp__info { padding: 32px 24px 56px; max-width: 100%; }
  .checkout__body { grid-template-columns: 1fr; }
  .checkout__summary { border-left: none; border-top: 1px solid var(--line); }
  .lookbook__inner { grid-template-columns: 1fr; }
  .lookbook__media { grid-column: 1 / -1; }
  .lookbook__copy { grid-column: 1 / -1; position: static; padding-top: 24px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .story__footer { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 820px) {
  :root { --nav-h: 56px; }
  .nav__group { gap: 16px; font-size: 10px; }
  .nav__group--left { display: none; }
  .nav__burger { display: flex; grid-column: 1; grid-row: 1; justify-self: start; }
  .nav__wordmark, .nav__group--right { grid-row: 1; }
  .nav__bag-label { display: none; }
  .nav__bag .icon, .nav__bag svg { width: 20px; height: 20px; }
  /* Mobile: menu lines pinned left, logo locked to the true centre, bag icon pinned right. */
  .nav { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .nav__wordmark { grid-column: 2; justify-self: center; font-size: 18px; letter-spacing: 0.28em; padding-left: 0.28em; }
  .nav__group--right { grid-column: 3; }
  .hero__bottom { grid-template-columns: 1fr; gap: 28px; }
  .hero__meta { max-width: 100%; }
  .categories__grid { grid-auto-rows: auto; }
  .cat--lg, .cat--md, .cat--sm { grid-column: span 12; aspect-ratio: 1; height: auto; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
  .section__head { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .method-row { grid-template-columns: 1fr; }
  .checkout__head { grid-template-columns: 1fr; gap: 14px; text-align: center; }
  .checkout__head-left, .checkout__head-right { justify-content: center; }
  .footer__megabrand { font-size: clamp(56px, 18vw, 120px); }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 420px) {
  .nav__group { gap: 12px; }
  .nav__wordmark { font-size: 16px; letter-spacing: 0.22em; padding-left: 0.22em; }
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr; }
  .pdp__close { top: 16px; right: 16px; width: 36px; height: 36px; }
  .pdp__back { top: 22px; left: 16px; }
  .cart { width: 100vw; }
}

/* ─── Gallery (scroll-driven stage) ────────────────────────── */
.gal { position: relative; height: 300vh; background: #F3EFE8; color: #16110d; }
.gal__stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  background: #F3EFE8;
}
.gal__piece {
  position: absolute; left: 50%; top: 50%;
  width: min(56vw, 68vh); height: auto;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform, filter;
  user-select: none; pointer-events: none;
}
.is-blend { mix-blend-mode: multiply; }
.gal__captions { position: absolute; left: var(--pad-x); bottom: clamp(40px, 9vh, 96px); width: min(560px, 70vw); height: 170px; }
.gal__cap { position: absolute; left: 0; bottom: 0; opacity: 0; will-change: transform, opacity; }
.gal__idx, .gal__meta, .gal__counter, .gal__hint, .gal__static-head {
  font-family: "DM Mono", var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.26em; font-size: 10.5px;
}
.gal__idx { color: #8c8780; margin-bottom: 12px; }
.gal__title {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: 64px; line-height: 1; letter-spacing: -0.01em; margin: 0;
}
.gal__meta { margin-top: 14px; color: #5c564d; letter-spacing: 0.24em; }
.gal__counter {
  position: absolute; right: var(--pad-x); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.gal__counter span { opacity: 0.3; }
.gal__track { width: 1px; height: 96px; margin-top: 6px; background: rgba(22,17,13,0.16); position: relative; overflow: hidden; }
.gal__track i { position: absolute; inset: 0; background: #16110d; transform: scaleY(0); transform-origin: top; }
.gal__pill {
  position: absolute; right: var(--pad-x); bottom: clamp(40px, 9vh, 96px);
  font-family: "Hanken Grotesk", var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  padding: 16px 28px; border-radius: 999px; background: #16110d; color: #F3EFE8;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.gal__pill.is-on { opacity: 1; transform: none; pointer-events: auto; }
.gal__pill span { display: inline-block; margin-left: 6px; transition: transform 0.3s var(--ease); }
.gal__pill:hover span { transform: translateX(4px); }
.gal__hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  color: #8c8780; transition: opacity 0.4s var(--ease);
}
.gal__hint::after { content: ""; display: block; width: 1px; height: 28px; margin: 10px auto 0; background: linear-gradient(#8c8780, transparent); }
.gal__hint.is-off { opacity: 0; }

@media (max-width: 720px) {
  .gal { height: 250vh; }
  .gal__piece { width: 84vw; }
  .gal__title { font-size: 40px; }
  .gal__captions { bottom: 96px; }
  .gal__counter { gap: 10px; }
  .gal__pill { right: auto; left: 50%; margin-left: 0; transform: translate(-50%, 10px); bottom: 28px; white-space: nowrap; }
  .gal__pill.is-on { transform: translate(-50%, 0); }
  .gal__hint { display: block; }
}

/* reduced motion: static stacked list, no scroll effect */
.gal--static { height: auto; padding: clamp(64px, 8vw, 120px) var(--pad-x); }
.gal__static-head { color: #8c8780; margin-bottom: 32px; }
.gal__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 64px; }
.gal__list img { width: min(520px, 100%); height: auto; display: block; margin-bottom: 20px; }
.gal--static .gal__pill { position: static; display: inline-block; margin-top: 56px; }

/* ─── Our Story page ───────────────────────────────────────── */
.os { --espresso: #16110D; --ivory: #F3EFE8; background: var(--espresso); color: var(--ivory); }
.os em { font-style: italic; }
.os-mono {
  font-family: "DM Mono", var(--font-mono); text-transform: uppercase;
  letter-spacing: 0.26em; font-size: 11px;
}

/* Vision */
.os-vision { height: 140vh; position: relative; }
.os-vision__panel {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--nav-h) var(--pad-x) 0; max-width: 1320px; margin: 0 auto;
}
.os-vision__label { color: rgba(243,239,232,0.55); margin-bottom: 28px; }
.os-vision__text {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(38px, 5.7vw, 82px); line-height: 1.08; letter-spacing: -0.01em;
}
.os-word { opacity: 0.16; display: inline-block; will-change: opacity; }
.os-word.is-em { font-style: italic; }

/* Mission */
.os-mission {
  position: relative; z-index: 1;
  background: var(--ivory); color: var(--espresso);
  box-shadow: 0 -40px 80px rgba(22,17,13,0.4);
  padding: clamp(72px, 10vw, 140px) var(--pad-x) clamp(56px, 7vw, 100px);
}
.os-mission__top {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px);
  max-width: 1320px; margin: 0 auto; align-items: start;
}
.os-mission__title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(40px, 5.4vw, 80px); line-height: 1.02; letter-spacing: -0.01em;
}
.os-mission__copy p, .os-inspo__copy p { font-size: 16px; line-height: 1.7; font-weight: 350; color: rgba(22,17,13,0.78); }
.os-mission__copy p + p, .os-inspo__copy p + p { margin-top: 1.1em; }
.os-values {
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  max-width: 1320px; margin: clamp(56px, 8vw, 110px) auto 0;
  border-top: 1px solid rgba(22,17,13,0.18);
}
.os-values li { padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.os-values .os-mono { color: rgba(22,17,13,0.5); }
.os-values__label { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(24px, 2.6vw, 36px); }

/* Hands */
.os-hands { height: 180vh; position: relative; background: var(--espresso); }
.os-hands__stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 56px;
  padding-top: var(--nav-h);
}
.os-hands__row { position: relative; width: 100%; height: clamp(150px, 26vw, 300px); }
/* One image, cut at the fingertips into two halves that slide together. The crop is
   x 24–52%, y 35–55% of creation-of-adam.jpg; the seam sits at x 38%, so at offset 0
   the halves are pixel-identical to the original (no gap, no inner fade). */
.os-hands__row { width: min(1120px, 92vw); margin: 0 auto; height: auto; aspect-ratio: 672 / 216; }
.os-hand {
  position: absolute; top: 0; width: 50%; height: 100%;
  background-image: url("assets/creation-of-adam.jpg");
  background-size: 714.3% auto; background-repeat: no-repeat;
  filter: sepia(0.85) contrast(1.05) brightness(0.92);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent), linear-gradient(var(--mdir), transparent, #000 28%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent), linear-gradient(var(--mdir), transparent, #000 28%);
  mask-composite: intersect;
  will-change: transform;
}
.os-hand--l { left: 0; background-position: 27.9% 43.9%; --mdir: to right; }
.os-hand--r { right: 0; background-position: 44.2% 43.9%; --mdir: to left; }
.os-hands__glow {
  position: absolute; left: 50%; top: 10%; height: 80%; width: 1px; margin-left: -0.5px;
  background: linear-gradient(to bottom, transparent, rgba(243,239,232,0.9), transparent);
  box-shadow: 0 0 18px 2px rgba(243,239,232,0.35);
  opacity: 0;
}
.os-hands__line {
  font-family: var(--font-display); font-weight: 300; text-align: center;
  font-size: clamp(30px, 4.4vw, 64px); line-height: 1.12; opacity: 0; padding: 0 var(--pad-x);
  will-change: transform, opacity;
}

/* Inspiration */
.os-inspo { background: var(--ivory); color: var(--espresso); padding: clamp(72px, 10vw, 140px) 0 0; }
.os-inspo__top {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px);
  padding: 0 var(--pad-x); max-width: 1320px; margin: 0 auto clamp(48px, 7vw, 96px); align-items: start;
}
.os-inspo__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(38px, 4.8vw, 72px); line-height: 1.04; letter-spacing: -0.01em; }
.os-inspo__fig { margin: 0; }
.os-inspo__fig img { width: 100%; height: 520px; object-fit: cover; object-position: 50% 42%; }
.os-inspo__fig figcaption { padding: 18px var(--pad-x) 28px; color: rgba(22,17,13,0.55); font-size: 10px; }

/* Closing */
.os-close { background: var(--espresso); color: var(--ivory); padding: clamp(80px, 11vw, 160px) var(--pad-x) 32px; text-align: center; }
.os-close__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 6.4vw, 96px); line-height: 1.02; letter-spacing: -0.01em; }
.os-close__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 48px; }
.os-pill {
  font-family: "Hanken Grotesk", var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
  padding: 16px 30px; border-radius: 999px; border: 1px solid rgba(243,239,232,0.5); color: var(--ivory);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.os-pill:hover { background: var(--ivory); color: var(--espresso); border-color: var(--ivory); }
.os-pill--solid { background: var(--ivory); color: var(--espresso); border-color: var(--ivory); }
.os-pill--solid:hover { background: transparent; color: var(--ivory); }
.os-close__foot {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: clamp(72px, 10vw, 140px); padding-top: 22px; border-top: 1px solid rgba(243,239,232,0.14);
  color: rgba(243,239,232,0.45); font-size: 10px;
}

/* reduced motion: end state, no scroll effects */
.os--still .os-word { opacity: 1; }
.os--still .os-vision, .os--still .os-hands { height: auto; }
.os--still .os-vision__panel, .os--still .os-hands__stage { position: static; height: auto; min-height: 80vh; }
.os--still .os-hand { transform: none; }
.os--still .os-hands__glow { opacity: 1; }
.os--still .os-hands__line { opacity: 1; transform: none; }

@media (max-width: 720px) {
  .os-mission__top, .os-inspo__top { grid-template-columns: 1fr; }
  .os-values { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .os-inspo__fig img { height: 300px; object-position: 28% 50%; }
  .os-hands__stage { gap: 36px; }
}

/* ─── Gallery exhibitions (index on /gallery + /piece) ──────────
   Colours come from the surface tokens, so the Catalogue layout just sets
   body[data-surface="dark"] and everything (nav and footer included) follows. */
.exh { background: var(--bg); padding-top: calc(var(--nav-h) + clamp(48px, 6vw, 96px)); }
.exh__count, .exh-card__meta, .pc-label, .pc-note, .pc-stage__tag, .pc-stage__hint,
.pc-thumb span, .pc-stats dt, .pc-strip figcaption, .pc-crumb a, .pc-pill, .pc-play {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
}
.exh__count { color: var(--mid); }
.exh-lead {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px); align-items: center;
  border-top: 1px solid var(--line); padding-top: clamp(28px, 4vw, 48px);
}
.exh-lead__media, .exh-card__media { background: #fff; overflow: hidden; aspect-ratio: 4 / 5; }
.exh-lead__media img, .exh-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease);
}
.exh-lead:hover img, .exh-card:hover img { transform: scale(1.035); }
.exh-lead__text { display: flex; flex-direction: column; gap: 18px; max-width: 520px; }
.exh-card__meta { display: flex; align-items: center; gap: 14px; color: var(--mid); }
.exh-badge { padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); }
.exh-card__artist { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; }
.exh-lead__title {
  font-family: var(--font-display); font-weight: 300; line-height: 0.95;
  font-size: clamp(48px, 7vw, 104px); letter-spacing: -0.02em;
}
.exh-lead__title em, .exh-card__title em { font-style: italic; }
.exh-lead__body { font-size: 15px; line-height: 1.65; color: var(--ink-soft); }
.exh-card__go {
  align-self: flex-start; margin-top: 8px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 500; padding-bottom: 4px; border-bottom: 1px solid var(--line-strong);
}
.exh-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: clamp(20px, 3vw, 40px); margin-top: clamp(48px, 6vw, 96px);
}
.exh-card { display: flex; flex-direction: column; gap: 12px; }
.exh-card__title { font-family: var(--font-display); font-weight: 300; font-size: 32px; line-height: 1.05; }
@media (max-width: 720px) { .exh-lead { grid-template-columns: 1fr; } }

/* ── /piece shared ── */
.pc-crumb { padding: calc(var(--nav-h) + 20px) var(--pad-x) 0; background: var(--bg); }
.pc-crumb a { color: var(--mid); }
.pc-crumb a:hover { color: var(--ink); }
.pc { background: var(--bg); color: var(--ink); }
.pc-wrap { max-width: 1440px; margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.pc-label { color: var(--mid); }
.pc-body { font-size: 15px; line-height: 1.65; }
.pc-body--soft { color: var(--ink-soft); opacity: 0.8; }
.pc-note { color: var(--mid); }
.pc-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pc-btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 28px;
  border-radius: 999px; background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
  font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
}
.pc-btn:hover { background: var(--tobacco-deep); border-color: var(--tobacco-deep); color: #f5f4f0; }
.pc-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.pc-btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.pc-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
}
.pc-stats > div { padding: 22px 20px 22px 0; display: flex; flex-direction: column; gap: 10px; }
.pc-stats dt { color: var(--mid); }
.pc-stats dd { font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 3vw, 40px); line-height: 1; }
.pc-missing { min-height: 60vh; padding-top: calc(var(--nav-h) + 80px); }

/* ── Layout A · Vault ── */
.pc--vault { padding: 32px var(--pad-x) clamp(64px, 8vw, 120px); }
.pc-vault {
  max-width: 1440px; margin: 0 auto; display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start;
}
.pc-vault__media { position: sticky; top: calc(var(--nav-h) + 16px); display: flex; flex-direction: column; gap: 12px; }
.pc-stage { position: relative; aspect-ratio: 3 / 4; max-height: calc(100vh - var(--nav-h) - 160px); background: #fff; overflow: hidden; cursor: zoom-in; }
.pc-stage img, .pc-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pc-stage video { background: #0a0a0a; cursor: default; }
.pc-stage__tag { position: absolute; top: 18px; left: 18px; color: #0a0a0a; pointer-events: none; }
.pc-stage__hint {
  position: absolute; left: 18px; bottom: 18px; padding: 10px 16px; border-radius: 999px;
  background: rgba(245, 244, 240, 0.85); color: #0a0a0a; pointer-events: none;
}
@media (hover: none) { .pc-stage__hint { display: none; } .pc-stage { cursor: default; } }
.pc-lens {
  position: absolute; pointer-events: none; border-radius: 50%; background-repeat: no-repeat;
  border: 1px solid rgba(10, 10, 10, 0.25); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.pc-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pc-thumb { display: flex; flex-direction: column; gap: 8px; text-align: left; opacity: 0.55; transition: opacity 0.3s var(--ease); }
.pc-thumb:hover, .pc-thumb.is-active { opacity: 1; }
.pc-thumb img, .pc-thumb i { width: 100%; aspect-ratio: 1; object-fit: cover; background: #fff; display: block; }
.pc-thumb.is-active img, .pc-thumb.is-active i { outline: 1px solid var(--ink); outline-offset: 3px; }
.pc-thumb i { display: grid; place-items: center; background: #0a0a0a; color: #f5f4f0; }
.pc-vault__text { display: flex; flex-direction: column; gap: 28px; padding-top: 8px; }
.pc-head { display: flex; flex-direction: column; gap: 4px; }
.pc-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(44px, 5vw, 72px); line-height: 1; letter-spacing: -0.015em; }
.pc-title em { font-style: italic; }
.pc-sub { margin-top: 14px; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 24px; line-height: 1.25; color: var(--mid); }
.pc-specs { border-top: 1px solid var(--line-strong); }
.pc-specs > div { border-bottom: 1px solid var(--line-strong); }
.pc-specs button {
  width: 100%; min-height: 56px; display: flex; justify-content: space-between; align-items: center; text-align: left;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.pc-specs p { padding-bottom: 20px; font-size: 14px; line-height: 1.65; color: var(--ink-soft); opacity: 0.8; }
@media (max-width: 900px) {
  .pc-vault { grid-template-columns: 1fr; }
  .pc-vault__media { position: static; }
  .pc-stage { max-height: none; }
}

/* ── Layout B · Catalogue ── */
.pc-hero { display: flex; flex-wrap: wrap; min-height: min(86vh, 820px); }
.pc-hero__text {
  flex: 1 1 440px; min-width: 0; padding: 32px var(--pad-x) 48px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
}
.pc-hero__body { display: flex; flex-direction: column; gap: 26px; }
.pc-hero__body p { max-width: 420px; font-size: 15px; line-height: 1.65; opacity: 0.85; }
.pc-pill { align-self: flex-start; padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: 999px; }
.pc-hero__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(64px, 9vw, 136px); line-height: 0.9; letter-spacing: -0.02em; }
.pc-hero__title em { font-style: italic; color: #efeadd; }
.pc-play { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--ink); }
.pc-play i { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line-strong); display: grid; place-items: center; }
.pc-play:hover i { background: var(--ink); color: var(--bg); }
.pc-hero__media { flex: 1.3 1 520px; min-width: 0; min-height: 560px; position: relative; background: #fff; }
.pc-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.pc-concept {
  display: grid; grid-template-columns: minmax(160px, 1fr) minmax(0, 3fr); gap: 48px;
  padding-top: clamp(72px, 9vw, 128px); padding-bottom: 48px;
}
.pc-concept > div:last-child { display: flex; flex-direction: column; gap: 24px; }
.pc-quote { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(26px, 3vw, 38px); line-height: 1.25; }
.pc-film {
  display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px);
  align-items: center; padding-top: 32px; padding-bottom: clamp(72px, 9vw, 112px);
}
.pc-film video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #1a1a1a; display: block; }
.pc-film > div { display: flex; flex-direction: column; gap: 22px; }
.pc-film__head { font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 5vw, 64px); line-height: 1.02; letter-spacing: -0.015em; }
.pc-film__head em { font-style: italic; color: #efeadd; }
.pc-prod { position: relative; margin-bottom: clamp(72px, 9vw, 112px); }
.pc-prod video { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; object-position: center 40%; background: #1a1a1a; display: block; }
.pc-prod__cap { position: absolute; left: calc(var(--pad-x) + 24px); bottom: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.pc-prod__cap > * { background: #0a0a0a; color: #f5f4f0; padding: 8px 14px; }
.pc-prod__cap > span:last-child { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(22px, 2.6vw, 36px); line-height: 1.1; }
.pc-plates { padding-bottom: 64px; }
.pc-plates__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.pc-plates__nav { display: flex; gap: 8px; }
.pc-plates__nav button { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink); display: grid; place-items: center; }
.pc-plates__nav button:hover { background: var(--ink); color: var(--bg); }
.pc-strip { display: flex; gap: 12px; overflow-x: auto; padding: 0 var(--pad-x); scroll-snap-type: x mandatory; scrollbar-width: none; }
.pc-strip::-webkit-scrollbar { display: none; }
.pc-strip figure { flex: 0 0 min(420px, 80vw); scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; }
.pc-strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #fff; display: block; }
.pc-strip figcaption { color: var(--mid); }
.pc-close { display: flex; flex-direction: column; gap: 48px; padding-bottom: clamp(72px, 9vw, 128px); }
.pc-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; }
.pc-notes > div { display: flex; flex-direction: column; gap: 10px; }
.pc-notes p { font-size: 14px; line-height: 1.65; opacity: 0.85; }
.pc-close__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
@media (max-width: 720px) {
  .pc-concept, .pc-film { grid-template-columns: 1fr; }
  .pc-film video { max-width: 360px; }
  .pc-prod video { aspect-ratio: 4 / 5; }
  .pc-hero__media { min-height: 120vw; }
}