/* =====================================================
   WEALTH CLUB MEDIA — Luxury Showroom
   Quiet luxury. Mirror surfaces. Black + Off White.
   Mobile-first (iPhone 390/430) → desktop 1440+
   ===================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Core ink + bone palette (premium, restrained) */
  --ink:        #070707;        /* near-black */
  --ink-2:      #0d0d0d;        /* panel */
  --ink-3:      #161616;        /* lifted panel */
  --ink-line:   rgba(236, 230, 214, 0.14);
  --ink-line-2: rgba(236, 230, 214, 0.06);
  --bone:       #ece6d6;        /* off-white / cream */
  --bone-2:     #d6d0bf;
  --bone-mute:  rgba(236, 230, 214, 0.62);
  --bone-soft:  rgba(236, 230, 214, 0.42);
  --bone-faint: rgba(236, 230, 214, 0.22);

  /* Accent — restrained dusty blue */
  --blue:       #586d83;

  /* Type */
  --f-serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --f-sans:  "Satoshi", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Spacing */
  --gut: clamp(20px, 4.5vw, 56px);
  --max: 1440px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--f-sans);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 1px solid var(--bone); outline-offset: 3px; border-radius: 1px; }
hr { border: 0; border-top: 1px solid var(--ink-line); margin: 0; }
[hidden] { display: none !important; }

.ico { width: 18px; height: 18px; display: inline-block; vertical-align: middle; }
em { font-style: italic; }

/* ---------- Typography classes ---------- */
.eyebrow,
.section-head__eyebrow {
  font-family: var(--f-sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--bone-mute);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7,7,7,0.78);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--ink-line-2);
}
.site-header__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px var(--gut);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.site-header__menu {
  justify-self: start;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  color: var(--bone);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-header__menu:hover { border-color: var(--bone-faint); background: rgba(236,230,214,0.04); }
@media (min-width: 900px) { .site-header__menu { display: none; } }

.site-header__brand {
  justify-self: center;
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--bone);
}
.site-header__crest {
  height: 36px; width: auto;
  filter: drop-shadow(0 1px 0 rgba(236,230,214,0.05));
}
.site-header__wordmark {
  font-family: var(--f-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--bone);
}
@media (max-width: 480px) {
  .site-header__crest { height: 30px; }
  .site-header__wordmark { font-size: 11.5px; letter-spacing: 0.26em; }
}

.site-header__nav {
  display: none;
  gap: 28px;
}
.site-header__nav a {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-mute);
  transition: color .3s var(--ease);
  position: relative;
  padding: 4px 0;
}
.site-header__nav a:hover { color: var(--bone); }
.site-header__nav a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--bone);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.site-header__nav a:hover::after { transform: scaleX(1); }
@media (min-width: 900px) {
  .site-header__inner { grid-template-columns: 1fr auto 1fr; }
  .site-header__nav { display: inline-flex; justify-self: start; grid-column: 1; }
  .site-header__brand { grid-column: 2; }
}

.site-header__bag {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 10px;
  height: 40px; padding: 0 14px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-header__bag:hover { border-color: var(--bone-faint); background: rgba(236,230,214,0.04); }
.site-header__bag-count {
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px;
  background: var(--bone); color: var(--ink);
  font-size: 10.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 0;
}
.site-header__bag-label { display: none; }
@media (min-width: 520px) { .site-header__bag-label { display: inline; } }

/* ---------- Mobile menu ---------- */
.menu { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.menu[aria-hidden="false"] { pointer-events: auto; }
.menu__scrim {
  position: absolute; inset: 0;
  background: rgba(7,7,7,0.7);
  opacity: 0; transition: opacity .35s var(--ease);
  z-index: 0;
}
.menu[aria-hidden="false"] .menu__scrim { opacity: 1; }
.menu__panel {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: min(86vw, 360px);
  background: var(--ink-2);
  border-right: 1px solid var(--ink-line);
  padding: 20px 28px 28px;
  transform: translateX(-101%);
  transition: transform .42s var(--ease-out);
  display: flex; flex-direction: column;
  z-index: 1;
}
.menu[aria-hidden="false"] .menu__panel { transform: translateX(0); }
.menu__head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--ink-line);
}
.menu__brand {
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.32em; text-transform: uppercase;
}
.menu__close {
  width: 40px; height: 40px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.menu__nav { display: flex; flex-direction: column; gap: 4px; }
.menu__nav a {
  font-family: var(--f-serif);
  font-size: 28px;
  line-height: 1.1;
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-line-2);
  color: var(--bone);
}
.menu__nav a:last-child { border-bottom: 0; }
.menu__foot {
  margin-top: auto;
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 18px; border-top: 1px solid var(--ink-line);
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bone-soft);
}
.menu__line { font-family: var(--f-serif); text-transform: none; letter-spacing: 0.02em; font-style: italic; font-size: 13px; color: var(--bone-mute); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;
  height: 52px; padding: 0 22px;
  font-family: var(--f-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  border: 1px solid var(--bone);
  background: var(--bone);
  color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  position: relative;
  overflow: hidden;
}
.btn:hover { background: transparent; color: var(--bone); }
.btn .ico { width: 16px; height: 16px; }
.btn--ghost {
  background: transparent; color: var(--bone);
  border-color: var(--ink-line);
}
.btn--ghost:hover { border-color: var(--bone-faint); background: rgba(236,230,214,0.04); color: var(--bone); }
.btn--block { display: flex; width: 100%; }

/* ---------- Section heads ---------- */
.section-head {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut);
}
.section-head--center { text-align: center; }
.section-head__eyebrow { display: inline-block; }
.section-head__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(34px, 6.4vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 14px 0 0;
}
.section-head__sub {
  margin: 16px 0 0;
  max-width: 60ch;
  color: var(--bone-mute);
  font-size: 15px;
  line-height: 1.6;
}
.section-head--center .section-head__sub { margin-left: auto; margin-right: auto; }

/* ====================================================
   SHOWROOM HERO
   ==================================================== */
.showroom {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(28px, 6vw, 72px) var(--gut) clamp(28px, 5vw, 56px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  min-height: calc(100vh - 70px);
}
@media (min-width: 960px) {
  .showroom {
    grid-template-columns: 1fr 1.05fr;
    min-height: 78vh;
    padding-top: 3.2vw; padding-bottom: 3.2vw;
  }
}
.showroom__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--bone-mute);
}
.showroom__eyebrow .dot {
  width: 3px; height: 3px; border-radius: 999px;
  background: var(--bone-soft);
}
.showroom__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(44px, 8.2vw, 98px);
  line-height: 0.96;
  letter-spacing: -0.015em;
  margin: 18px 0 0;
}
.showroom__title .line { display: block; }
.showroom__title em { font-style: italic; color: var(--bone); }
.showroom__sub {
  margin: 22px 0 0;
  max-width: 44ch;
  color: var(--bone-mute);
  font-size: 16px;
  line-height: 1.6;
}
.showroom__ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 22px;
}
.showroom__meta {
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--ink-line);
  max-width: 480px;
}
.showroom__meta div { display: block; }
.showroom__meta dt {
  font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--bone-soft);
}
.showroom__meta dd {
  margin: 6px 0 0;
  font-family: var(--f-serif);
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--bone);
}

/* Stage — mirror showroom */
.showroom__pane--stage {
  position: relative;
  min-height: 50vh;
}
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(236,230,214,0.06), rgba(7,7,7,0) 60%),
    linear-gradient(180deg, #0e0e0e 0%, #0a0a0a 52%, #050505 100%);
  border: 1px solid var(--ink-line-2);
  border-radius: 2px;
  overflow: hidden;
  isolation: isolate;
}
.stage::before {
  /* faint vertical light reflection */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(236,230,214,0) 38%, rgba(236,230,214,0.045) 50%, rgba(236,230,214,0) 62%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
}
.stage::after {
  /* horizon line between floor and back wall */
  content: "";
  position: absolute; left: 0; right: 0; top: 62%;
  height: 1px;
  background: linear-gradient(90deg, rgba(236,230,214,0), rgba(236,230,214,0.18) 50%, rgba(236,230,214,0));
  z-index: 1;
}
.stage__floor {
  position: absolute; left: 0; right: 0; top: 62%; bottom: 0;
  background:
    linear-gradient(180deg, rgba(20,20,20,0.6), rgba(5,5,5,0.95)),
    radial-gradient(80% 60% at 50% 0%, rgba(236,230,214,0.05), rgba(0,0,0,0) 70%);
  z-index: 0;
}
.stage__hero {
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 90%;
  margin: 0;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.stage__hero img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 58%;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.6));
}
.stage__mirror {
  position: absolute;
  left: 50%; top: 78%;
  transform: translateX(-50%) scaleY(-1);
  width: 100%; height: 18%;
  margin: 0;
  opacity: 0.18;
  filter: blur(1.2px);
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0) 80%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 30%, rgba(0,0,0,0) 80%);
  z-index: 1;
  display: flex; align-items: flex-start; justify-content: center;
}
.stage__mirror img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.stage__caption {
  position: absolute; left: 18px; bottom: 16px;
  font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--bone-soft);
  z-index: 3;
}

/* ====================================================
   SIGNATURE — product / conversion
   ==================================================== */
.signature {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) var(--gut);
}
.signature .section-head { padding: 0; margin: 0 0 clamp(28px, 4vw, 48px); }
.signature .section-head__title em { color: var(--bone); }

.product {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 40px);
}
@media (min-width: 880px) {
  .product { grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 5vw, 80px); align-items: start; }
}

.product__gallery { position: relative; }
.product__main {
  position: relative;
  width: 100%;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(236,230,214,0.05), rgba(0,0,0,0) 65%),
    linear-gradient(180deg, #0f0f0f 0%, #0a0a0a 60%, #050505 100%);
  border: 1px solid var(--ink-line-2);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  isolation: isolate;
}
.product__main::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(236,230,214,0) 42%, rgba(236,230,214,0.04) 50%, rgba(236,230,214,0) 58%);
  mix-blend-mode: screen; pointer-events: none; z-index: 2;
}
.product__main > img {
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 96%;
  height: 86%;
  object-fit: contain;
  z-index: 3;
  filter: drop-shadow(0 24px 30px rgba(0,0,0,0.55));
  transition: opacity .4s var(--ease);
}
.product__main.is-detail-view > img {
  top: 0;
  width: 100%;
  height: 90%;
}
.product__reflection {
  position: absolute;
  left: 50%; top: 78%;
  transform: translateX(-50%) scaleY(-1);
  width: 96%; height: 18%;
  opacity: 0.18;
  filter: blur(1px);
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0) 85%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0) 85%);
  z-index: 1;
  pointer-events: none;
}
.product__reflection img { width: 100%; height: 100%; object-fit: contain; }
.product__main.is-detail-view .product__reflection {
  top: 82%;
  width: 100%;
  height: 14%;
  opacity: 0.12;
}

.product__views {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.view {
  position: relative;
  display: flex; flex-direction: column;
  border: 1px solid var(--ink-line-2);
  background: var(--ink-2);
  padding: 8px 8px 8px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
  text-align: center;
}
.view img {
  width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: center;
  opacity: 0.78; transition: opacity .3s var(--ease);
}
.view span {
  margin-top: 8px;
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--bone-mute);
}
.view:hover { border-color: var(--bone-faint); }
.view.is-active {
  border-color: var(--bone);
  background: var(--ink-3);
}
.view.is-active img { opacity: 1; }
.view.is-active span { color: var(--bone); }

/* Product info column */
.product__info { display: flex; flex-direction: column; gap: 22px; }

.product__head { display: flex; flex-direction: column; gap: 6px; }
.product__house {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--bone-soft);
  margin: 0;
}
.product__name {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  margin: 0;
}
.product__price {
  margin: 6px 0 0;
  font-family: var(--f-serif);
  font-size: 22px;
  letter-spacing: 0.01em;
}
.product__price-unit {
  font-family: var(--f-sans);
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--bone-soft);
  margin-left: 8px;
}

.product__group {
  border: 0; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.product__group-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--bone-mute);
}
.product__group-value { color: var(--bone); letter-spacing: 0.18em; }
.product__group-link {
  color: var(--bone-mute);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--ink-line);
  letter-spacing: 0.22em;
  font-size: 10px;
  text-transform: uppercase;
}
.product__group-link:hover { color: var(--bone); }

/* Swatches */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  background: rgba(255,255,255,0.01);
  transition: border-color .3s var(--ease), background .3s var(--ease);
  min-height: 44px;
}
.swatch:hover { border-color: var(--bone-faint); }
.swatch.is-active {
  border-color: var(--bone);
  background: rgba(236,230,214,0.05);
}
.swatch__chip {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--c, #000);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -2px 6px rgba(0,0,0,0.35),
    0 0 0 1px var(--cr, var(--ink-line));
  position: relative;
}
.swatch__chip::after {
  content: ""; position: absolute; inset: 2px;
  border-radius: 999px;
  background: radial-gradient(120% 80% at 30% 15%, rgba(255,255,255,0.22), rgba(255,255,255,0) 55%);
  pointer-events: none;
}
.swatch__name {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bone);
}

/* Sizes */
.sizes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 8px;
}
.size {
  height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--ink-line);
  color: var(--bone-mute);
  transition: border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.size:hover { border-color: var(--bone-faint); color: var(--bone); }
.size.is-active {
  border-color: var(--bone); background: var(--bone); color: var(--ink);
}

.product__assurance {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 12px; color: var(--bone-mute);
  letter-spacing: 0.02em;
}
.product__assurance li {
  position: relative; padding-left: 18px;
}
.product__assurance li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 8px; height: 1px; background: var(--bone-faint);
}

.product__details {
  border-top: 1px solid var(--ink-line);
  padding-top: 14px;
}
.product__details summary {
  list-style: none;
  cursor: pointer;
  font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--bone);
  display: flex; justify-content: space-between; align-items: center;
}
.product__details summary::-webkit-details-marker { display: none; }
.product__details summary::after {
  content: "+";
  font-size: 14px;
  color: var(--bone-mute);
  transition: transform .3s var(--ease);
}
.product__details[open] summary::after { content: "–"; }
.product__details ul {
  list-style: none; padding: 0; margin: 14px 0 0;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; color: var(--bone-mute);
  font-family: var(--f-serif);
  line-height: 1.45;
}

/* ====================================================
   RAIL — three colourways
   ==================================================== */
.rail {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) var(--gut);
  border-top: 1px solid var(--ink-line);
}
.rail__grid {
  margin-top: clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 32px);
}
@media (min-width: 720px) {
  .rail__grid { grid-template-columns: repeat(3, 1fr); }
}
.rail__item { display: flex; flex-direction: column; gap: 14px; }
.rail__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(236,230,214,0.04), rgba(0,0,0,0) 65%),
    linear-gradient(180deg, #0e0e0e 0%, #060606 100%);
  border: 1px solid var(--ink-line-2);
}
.rail__figure::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
  z-index: 2; pointer-events: none;
}
.rail__figure img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  transition: transform 1s var(--ease-out);
}
.rail__item:hover .rail__figure img { transform: scale(1.03); }
.rail__num {
  position: absolute; top: 14px; left: 14px;
  font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--bone-soft); z-index: 3;
}
.rail__name {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 22px;
  margin: 0;
  letter-spacing: 0.005em;
}
.rail__note {
  margin: 0;
  font-size: 13px;
  color: var(--bone-mute);
  line-height: 1.55;
  max-width: 36ch;
}

/* ====================================================
   THE STANDARD
   ==================================================== */
.standard {
  position: relative;
  background:
    radial-gradient(80% 60% at 50% 10%, rgba(236,230,214,0.045), rgba(0,0,0,0) 70%),
    linear-gradient(180deg, #060606 0%, #0a0a0a 50%, #060606 100%);
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  padding: clamp(56px, 9vw, 128px) 0;
  overflow: hidden;
}
.standard::before {
  /* soft reflective horizon */
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(236,230,214,0), rgba(236,230,214,0.18), rgba(236,230,214,0));
  pointer-events: none;
}
.standard__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gut);
  text-align: center;
  position: relative; z-index: 1;
}
.standard__title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(40px, 7.2vw, 96px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 14px 0 0;
}
.standard__title em { color: var(--bone); }
.standard__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: clamp(36px, 5vw, 64px);
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
}
@media (min-width: 720px) {
  .standard__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .standard__grid { grid-template-columns: repeat(4, 1fr); }
}
.standard__note {
  background: var(--ink);
  padding: clamp(28px, 3.6vw, 44px) clamp(22px, 3vw, 32px);
  text-align: left;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 220px;
}
.standard__num {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 32px;
  color: var(--bone-soft);
  line-height: 1;
}
.standard__note h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 22px;
  margin: 0;
  letter-spacing: 0.005em;
}
.standard__note p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--bone-mute);
  max-width: 36ch;
}
.standard__sign {
  margin: clamp(36px, 5vw, 56px) 0 0;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--bone-mute);
  letter-spacing: 0.01em;
}

/* ====================================================
   THE HOUSE — product detail story
   ==================================================== */
.house {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) var(--gut);
}
.house__lede {
  margin: clamp(28px, 4vw, 48px) auto 0;
  max-width: 64ch;
  text-align: center;
}
.house__lede p {
  font-family: var(--f-serif);
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.55;
  color: var(--bone);
  letter-spacing: 0.005em;
  margin: 0;
}
.house__grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 32px);
}
@media (min-width: 720px) {
  .house__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .house__grid { grid-template-columns: repeat(4, 1fr); }
}
.house__cell {
  display: flex; flex-direction: column; gap: 14px;
}
.house__cell figure {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--ink-line-2);
  position: relative;
}
.house__cell figure::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}
.house__cell figure img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform 1s var(--ease-out);
}
.house__cell:hover figure img { transform: scale(1.04); }
.house__cell-text { display: flex; flex-direction: column; gap: 4px; }
.house__cell-tag {
  font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--bone-soft);
}
.house__cell h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 20px;
  margin: 0;
}
.house__cell p {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--bone-mute);
  max-width: 32ch;
}

/* ====================================================
   PACKAGING
   ==================================================== */
.packaging {
  background: linear-gradient(180deg, #060606 0%, #0a0a0a 100%);
  border-top: 1px solid var(--ink-line);
  padding: clamp(56px, 7vw, 96px) 0;
}
.packaging .section-head { padding-left: var(--gut); padding-right: var(--gut); }
.packaging__grid {
  max-width: var(--max);
  margin: clamp(28px, 4vw, 48px) auto 0;
  padding: 0 var(--gut);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: clamp(14px, 2vw, 22px);
}
@media (min-width: 720px) {
  .packaging__grid {
    grid-template-columns: 1.05fr 1fr 1fr;
    grid-auto-rows: minmax(0, 1fr);
  }
  .packaging__cell--tall { grid-row: span 2; }
  .packaging__cell--wide { grid-column: span 2; }
}
.packaging__cell {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--ink-line-2);
  aspect-ratio: 4 / 5;
}
.packaging__cell--tall { aspect-ratio: 4 / 9; }
.packaging__cell--wide { aspect-ratio: 16 / 7; }
@media (max-width: 719px) {
  .packaging__cell, .packaging__cell--tall, .packaging__cell--wide { aspect-ratio: 4 / 5; }
}
.packaging__cell img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: transform 1.2s var(--ease-out);
}
.packaging__cell:hover img { transform: scale(1.03); }
.packaging__cell figcaption {
  position: absolute; left: 16px; bottom: 14px;
  display: flex; align-items: baseline; gap: 10px;
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--bone);
  background: rgba(7,7,7,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 10px;
}
.packaging__cell figcaption span {
  font-family: var(--f-serif);
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--bone-mute);
  text-transform: none;
}

/* ====================================================
   CLOSING LINE
   ==================================================== */
.closing {
  padding: clamp(64px, 8vw, 120px) var(--gut);
  text-align: center;
  background: var(--ink);
  border-top: 1px solid var(--ink-line);
}
.closing__line {
  font-family: var(--f-serif);
  font-size: clamp(28px, 5vw, 56px);
  letter-spacing: -0.005em;
  color: var(--bone);
  margin: 0;
}
.closing__line em { color: var(--bone); }

/* ====================================================
   FOOTER
   ==================================================== */
.site-footer {
  background: #050505;
  border-top: 1px solid var(--ink-line-2);
  padding: clamp(40px, 5vw, 64px) 0 24px;
}
.site-footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
}
@media (min-width: 720px) {
  .site-footer__inner { grid-template-columns: 1fr 1.4fr; align-items: start; }
}
.site-footer__brand { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.site-footer__brand img { height: 56px; width: auto; }
.site-footer__name {
  font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--bone); margin: 0;
}
.site-footer__tag {
  font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--bone-soft); margin: 0;
}
.site-footer__nav {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px;
}
.site-footer__nav h4 {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--bone-soft);
  font-weight: 500;
  margin: 0 0 14px;
}
.site-footer__nav a {
  display: block;
  font-size: 13px;
  padding: 6px 0;
  color: var(--bone-mute);
  transition: color .3s var(--ease);
}
.site-footer__nav a:hover { color: var(--bone); }
.site-footer__legal {
  grid-column: 1 / -1;
  border-top: 1px solid var(--ink-line-2);
  padding-top: 22px;
  margin: 22px 0 0;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-soft);
}
.site-footer__legal em {
  text-transform: none; letter-spacing: 0.01em;
  font-family: var(--f-serif); font-size: 13px; color: var(--bone-mute);
}

/* ====================================================
   CART DRAWER
   ==================================================== */
.cart { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.cart[aria-hidden="false"] { pointer-events: auto; }
.cart__scrim {
  position: absolute; inset: 0;
  background: rgba(7,7,7,0.7);
  opacity: 0;
  transition: opacity .35s var(--ease);
  z-index: 0;
}
.cart[aria-hidden="false"] .cart__scrim { opacity: 1; }
.cart__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  background: var(--ink-2);
  border-left: 1px solid var(--ink-line);
  transform: translateX(101%);
  transition: transform .42s var(--ease-out);
  display: flex; flex-direction: column;
  z-index: 1;
}
.cart[aria-hidden="false"] .cart__panel { transform: translateX(0); }
.cart__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 22px;
  border-bottom: 1px solid var(--ink-line);
}
.cart__head h2 {
  margin: 0;
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 22px;
}
.cart__close {
  width: 40px; height: 40px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cart__body { flex: 1; overflow-y: auto; padding: 8px 22px; }
.cart__empty {
  height: 100%;
  min-height: 280px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; text-align: center;
  padding: 32px 12px;
}
.cart__empty img { opacity: 0.6; }
.cart__empty p {
  font-family: var(--f-serif);
  font-size: 22px;
  margin: 0;
}
.cart__empty span {
  font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--bone-soft);
}
.cart__list { list-style: none; padding: 0; margin: 0; }
.cart__item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ink-line-2);
}
.cart__item-img {
  width: 80px; height: 100px;
  background: var(--ink-3);
  border: 1px solid var(--ink-line-2);
  object-fit: contain;
  object-position: center;
  padding: 6px;
}
.cart__item-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cart__item-name {
  font-family: var(--f-serif);
  font-size: 16px;
  line-height: 1.2;
  margin: 0;
}
.cart__item-meta {
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bone-soft);
}
.cart__item-qty {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: auto;
  border: 1px solid var(--ink-line);
  height: 32px;
  width: fit-content;
}
.cart__item-qty button {
  width: 28px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bone-mute);
  transition: color .3s var(--ease);
}
.cart__item-qty button:hover { color: var(--bone); }
.cart__item-qty span {
  min-width: 24px; text-align: center;
  font-size: 12px;
}
.cart__item-end {
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.cart__item-price {
  font-family: var(--f-serif);
  font-size: 15px;
}
.cart__item-remove {
  font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--bone-soft);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--ink-line);
}
.cart__item-remove:hover { color: var(--bone); }

.cart__foot {
  padding: 18px 22px 22px;
  border-top: 1px solid var(--ink-line);
  display: flex; flex-direction: column; gap: 12px;
}
.cart__line {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
}
.cart__line span:last-child { font-family: var(--f-serif); letter-spacing: 0.01em; text-transform: none; font-size: 16px; }
.cart__line--muted { color: var(--bone-soft); }
.cart__line--muted span:last-child { color: var(--bone-mute); font-size: 11px; text-transform: uppercase; font-family: var(--f-sans); letter-spacing: 0.18em; }
.cart__note {
  text-align: center;
  font-size: 9.5px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--bone-soft);
  margin: 4px 0 0;
}

/* ====================================================
   MODAL — size guide
   ==================================================== */
.modal { position: fixed; inset: 0; z-index: 100; pointer-events: none; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal[aria-hidden="false"] { pointer-events: auto; }
.modal__scrim {
  position: absolute; inset: 0;
  background: rgba(7,7,7,0.78);
  opacity: 0; transition: opacity .35s var(--ease);
  z-index: 0;
}
.modal[aria-hidden="false"] .modal__scrim { opacity: 1; }
.modal__panel {
  position: relative;
  z-index: 1;
  width: min(620px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--ink-2);
  border: 1px solid var(--ink-line);
  padding: 24px 22px 26px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .35s var(--ease), transform .42s var(--ease-out);
}
.modal[aria-hidden="false"] .modal__panel { opacity: 1; transform: translateY(0); }
.modal__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.modal__head h2 {
  margin: 0;
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 22px;
}
.modal__close {
  width: 36px; height: 36px;
  border: 1px solid var(--ink-line);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.modal__sub {
  margin: 0 0 18px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bone-soft);
}
.modal__table-wrap { overflow-x: auto; }
.modal__table {
  width: 100%;
  border-collapse: collapse;
}
.modal__table th, .modal__table td {
  padding: 10px 6px;
  border-bottom: 1px solid var(--ink-line-2);
  text-align: center;
  font-size: 12px;
  color: var(--bone);
}
.modal__table thead th {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-soft);
  font-weight: 500;
  padding-bottom: 12px;
}
.modal__table tbody th {
  font-family: var(--f-serif);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--bone);
  font-weight: 400;
}
.modal__note {
  margin: 16px 0 0;
  font-size: 11.5px;
  color: var(--bone-mute);
  font-family: var(--f-serif);
  font-style: italic;
  text-align: center;
}

/* ====================================================
   TOAST
   ==================================================== */
.toast {
  position: fixed;
  left: 50%; top: 84px;
  transform: translateX(-50%) translateY(-12px);
  background: var(--bone); color: var(--ink);
  padding: 12px 18px;
  font-size: 10.5px; letter-spacing: 0.26em; text-transform: uppercase;
  border: 1px solid var(--bone);
  z-index: 110;
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease), transform .42s var(--ease-out);
  max-width: calc(100vw - 32px);
  text-align: center;
  white-space: nowrap;
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ====================================================
   Body lock when overlay open
   ==================================================== */
body.is-locked { overflow: hidden; }

/* ====================================================
   Mobile fine-tuning — iPhone 390 / 430
   ==================================================== */
@media (max-width: 720px) {
  body { font-size: 14.5px; }
  .site-header__inner { padding: 12px var(--gut); }
  .site-header__bag { padding: 0 12px; height: 38px; }

  .showroom { padding-top: 24px; min-height: auto; }
  .showroom__title { font-size: 48px; line-height: 0.98; }
  .showroom__sub { font-size: 14.5px; }
  .showroom__meta { grid-template-columns: 1fr 1fr; gap: 14px 18px; }
  .showroom__meta div:last-child { grid-column: 1 / -1; }

  /* SIGNATURE: tighten section head + product spacing on mobile so
     image → price → color → size → CTA reads with minimal friction. */
  .signature { padding-top: 36px; padding-bottom: 48px; }
  .signature .section-head { margin-bottom: 14px; }
  .signature .section-head__title { font-size: 25px; line-height: 1.04; }
  .signature .section-head__sub { font-size: 13px; margin-top: 8px; }

  .product { gap: 16px; }

  /* Smaller, more upright product image on mobile (less scroll). */
  .product__main { aspect-ratio: 4 / 3.35; }
  .product__main > img { top: 0; width: 98%; height: 90%; }
  .product__main.is-detail-view > img { top: 0; width: 100%; height: 92%; }
  .product__reflection { top: 80%; width: 98%; height: 16%; opacity: 0.1; }

  .product__views { margin-top: 8px; gap: 6px; }
  .view {
    min-height: 44px;
    padding: 0 8px;
    align-items: center;
    justify-content: center;
  }
  .view img { display: none; }
  .view span { font-size: 9px; letter-spacing: 0.2em; margin-top: 0; }

  .product__info { gap: 11px; }
  .product__head { gap: 3px; }
  .product__house { display: none; }
  .product__name { font-size: 18px; line-height: 1.04; }
  .product__price { font-size: 18px; margin-top: 2px; }

  .product__group { gap: 7px; }
  .swatches { gap: 8px; }
  .swatch { padding: 6px 10px 6px 6px; min-height: 39px; gap: 8px; }
  .swatch__chip { width: 19px; height: 19px; }
  .swatch__name { font-size: 10px; letter-spacing: 0.15em; }

  .sizes { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .size { height: 42px; font-size: 11.5px; }

  .btn { height: 48px; font-size: 10.5px; letter-spacing: 0.2em; }
  .btn--block { width: 100%; }

  .product__assurance { font-size: 11.5px; gap: 6px; }
  .product__details summary { font-size: 10px; }

  .standard__title { font-size: 40px; }
  .standard__note { min-height: auto; padding: 22px 20px; }
  .closing__line { font-size: 30px; }

  .modal { padding: 16px; }
  .modal__panel { padding: 22px 18px; }
  .modal__table th, .modal__table td { padding: 9px 4px; font-size: 11.5px; }
  .modal__table thead th { font-size: 9px; letter-spacing: 0.18em; }

  .cart__panel { width: 100vw; }
  .cart__item { grid-template-columns: 70px 1fr auto; }
  .cart__item-img { width: 70px; height: 90px; }
}

/* iPhone Pro Max territory — give a tiny bit more breathing room */
@media (min-width: 481px) and (max-width: 720px) {
  .product__main { aspect-ratio: 4 / 3.65; }
}

/* ---------- Subtle reveal animation (progressive enhancement) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js-on .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
  }
  .js-on .reveal.is-in {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Print fallback (no-op) ---------- */
@media print {
  .site-header, .site-footer, .cart, .modal, .menu, .toast { display: none !important; }
}