/* ═══════════════════ FONTS ═══════════════════ */
/* Heritage Legacy — elegant high-contrast serif (has lowercase): brand
   wordmark, display headings, product/look names, and body reading text. */
@font-face {
  font-family: "Heritage Legacy";
  src: url("assets/fonts/HeritageLegacy.otf") format("opentype");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
/* Cormorant Garamond — high-contrast Garamond carrying the letterspaced
   UPPERCASE label / UI layer (nav, buttons, kickers, prices, tabs). Its
   capitals are drawn for wide tracking, which is what gives the labels their
   museum-plaque register. Small optical size + fine hairlines mean the label
   layer runs at weight 600 — see FONT ROLE ASSIGNMENT at the end of this file. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/CormorantGaramond-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/CormorantGaramond-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/CormorantGaramond-600-normal.woff2") format("woff2");
  font-weight: 600 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/fonts/CormorantGaramond-400-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
/* Inter — clean sans for body / paragraph reading copy only. */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ═══════════════════ TOKENS ═══════════════════ */
:root {
  /* Brand palette */
  --color-beige: #E8DDD4;
  --color-beige-dark: #D4C4B8;
  --color-green: #1B4D3E;
  --color-green-light: #2A5F4A;
  --color-burgundy: #8B4545;
  --color-burgundy-dark: #6B3E3E;
  --color-white: #FFFFFF;
  --color-black: #1A1A1A;
  --color-black-text: #000000;

  /* Semantic tokens */
  --color-text-primary: #201C17;
  --color-text-secondary: #2A5F4A;
  --color-text-inverse: #E8DDD4;
  --color-surface-base: #17362C;      /* deeper, richer forest */
  --color-surface-muted: #F6F1E9;     /* warm ivory, never pure white */
  --color-surface-raised: #F0E8E0;
  --color-surface-strong: #E8DDD4;
  --color-line: rgba(32, 28, 23, 0.14);
  --color-line-inverse: rgba(232, 221, 212, 0.26);
  --color-accent: #8B4545;
  --color-gold: #B08D57;              /* champagne gold — the one metallic */
  --color-gold-soft: #C4A876;

  /* Typefaces — three roles:
     serif = Heritage Legacy (display headings, product/look names)
     sans  = Cormorant Garamond (letterspaced caps label/UI layer)
     body  = Inter           (paragraph reading copy) */
  --font-serif: "Heritage Legacy", Georgia, "Times New Roman", serif;
  --font-serif-italic: "Heritage Legacy", Georgia, serif;
  --font-sans: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Cormorant Garamond", Georgia, serif;
  --font-stack: var(--font-body);
  --color-pop-red: #A85832;    /* refined terracotta, not primary red */
  --color-pop-blue: #45625C;   /* muted deep teal, ties to the green */
  --font-size-xs: 0.6875rem;   /* 11px */
  --font-size-sm: 0.75rem;     /* 12px */
  --font-size-md: 0.8125rem;   /* 13px */
  --font-size-body: 1rem;      /* 16px — body copy floor for readability */
  --font-size-xl: clamp(2.5rem, 6vw, 4.25rem);   /* → 68px */
  --font-size-2xl: clamp(3rem, 8vw, 5rem);        /* → 80px */
  --font-size-mega: clamp(3rem, 11vw, 8.5rem);   /* hero display */
  --font-size-giant: clamp(6rem, 24vw, 20rem);    /* footer wordmark */

  --space-1: 1px;  --space-2: 5px;  --space-3: 6px;  --space-4: 7px;
  --space-5: 10px; --space-6: 12px; --space-7: 16px; --space-8: 24px;
  --space-9: 40px; --space-10: 64px; --space-11: 96px; --space-12: 160px;

  --motion-instant: 300ms;
  --motion-fast: 500ms;
  --motion-slow: 850ms;
  --motion-cinema: 1200ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-luxe: cubic-bezier(0.16, 1, 0.3, 1);   /* long, smooth deceleration */

  --z-nav: 100;
  --z-scrim: 900;
  --z-cart: 1000;
  --z-toast: 1100;
}

/* ═══════════════════ RESET / BASE ═══════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Native smooth scrolling ONLY when Lenis isn't driving the scroll —
   layering both causes double-smoothed, laggy "sticky" scrolling */
html { scroll-behavior: auto; }
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }

body {
  font-family: var(--font-stack);
  font-size: var(--font-size-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--color-text-primary);
  background: var(--color-surface-muted);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
em { font-style: normal; }

/* color-pop accents — one or two words at a time, never whole sentences */
.pop-red { color: var(--color-pop-red); font-style: italic; }
.pop-blue { color: var(--color-pop-blue); font-style: italic; }

/* focus */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed; top: -100px; left: var(--space-7);
  z-index: calc(var(--z-toast) + 1);
  padding: var(--space-5) var(--space-7);
  background: var(--color-surface-base);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  text-transform: uppercase; letter-spacing: 0.12em;
  transition: top var(--motion-instant) var(--ease-out);
}
.skip-link:focus-visible { top: var(--space-7); outline-color: var(--color-text-inverse); }

/* ═══════════════════ NAV ═══════════════════ */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-7) clamp(var(--space-7), 4vw, var(--space-9));
  color: var(--color-text-inverse);
  transition: color var(--motion-instant) var(--ease-out);
}
.nav--on-light { color: var(--color-text-primary); }
.nav__brand { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 900; letter-spacing: 0; }
.nav__links { display: flex; gap: clamp(var(--space-7), 3vw, var(--space-9)); }
.nav__links a, .nav__cart {
  font-size: var(--font-size-md);
  font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  position: relative; padding: var(--space-5) 0;
  min-height: 44px; display: inline-flex; align-items: center;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 4px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--motion-instant) var(--ease-out);
}
.nav__links a:hover::after, .nav__links a:focus-visible::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__links a[aria-current="page"] { opacity: 1; }
.nav__cart { gap: var(--space-3); }
.nav__cart:hover .nav__cart-count { transform: scale(1.15); }
.nav__cart-count {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 var(--space-2);
  border: 1px solid currentColor; border-radius: 999px;
  font-size: var(--font-size-xs); font-weight: 700;
  transition: transform var(--motion-instant) var(--ease-out);
}
.nav__cart-count.is-bumped { animation: bump 400ms var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.5); } }

.nav__toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex: none; }
.nav__toggle svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 640px) {
  .nav { padding-inline: var(--space-7); }
  .nav__brand { font-size: 1.15rem; }
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: fixed; inset: 0 0 auto 0; z-index: -1;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-surface-base); color: var(--color-text-inverse);
    padding: calc(var(--space-12) + var(--space-6)) var(--space-7) var(--space-9);
    transform: translateY(-100%);
    transition: transform var(--motion-fast) var(--ease-out);
  }
  .nav__links.is-open { transform: translateY(0); }
  .nav__links a { width: 100%; padding: var(--space-6) 0; font-size: var(--font-size-xl); font-family: var(--font-serif); font-weight: 900; text-transform: none; letter-spacing: 0; min-height: 56px; }
  .nav__links a::after { display: none; }
  .nav__cart-label { display: none; }
}

/* ═══════════════════ HERO ═══════════════════ */
.hero {
  position: relative; min-height: 100dvh;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--color-green) 0%, var(--color-green-light) 100%);
  color: var(--color-beige);
  overflow: clip;
  perspective: 1200px;
}
/* Background video fills the hero edge-to-edge behind everything; the
   stage content stacks in normal document flow above it. Only hero__meta
   (corner captions) stays absolutely positioned. */
.hero__bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0.4;
  z-index: 0;
  pointer-events: none;
}
.hero__stage {
  position: relative; z-index: 1;
  display: grid;
  justify-items: center;
  gap: clamp(var(--space-6), 3vw, var(--space-8));
  padding: calc(var(--space-11) + var(--space-7)) var(--space-7) var(--space-11);
  width: 100%;
}
.hero__eyebrow {
  font-size: var(--font-size-sm);
  text-transform: uppercase; letter-spacing: 0.3em;
  color: var(--color-surface-raised);
}
.hero__title-wrap {
  position: relative; z-index: 2; pointer-events: none;
}
.hero__title {
  display: grid; text-align: center;
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 13vw, 8rem);
  font-weight: 900; line-height: 0.9;
  letter-spacing: -0.02em;
  transform-style: preserve-3d;
}
.hero__line { display: block; will-change: transform; transform-style: preserve-3d; }
.hero__line--name { white-space: nowrap; }   /* NEWTRALS always on one line */
.hero__word { display: inline-block; }
/* "TRALS" rendered as an outline inside the single-line NEWTRALS wordmark */
.hero__outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--color-text-inverse);
}
.hero__line em { color: var(--color-surface-raised); }

.hero__eyebrow, .hero__meta { position: relative; z-index: 2; }

.hero__meta {
  position: absolute; bottom: var(--space-9);
  font-size: var(--font-size-xs);
  text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--color-surface-raised);
}
.hero__meta--left { left: clamp(var(--space-7), 4vw, var(--space-9)); }
.hero__meta--right { right: clamp(var(--space-7), 4vw, var(--space-9)); text-align: right; }
@media (max-width: 640px) { .hero__meta--right { display: none; } }

.hero__scrollcue {
  position: absolute; z-index: 1; bottom: var(--space-8); left: 50%;
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: var(--space-3);
  font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.3em;
  color: var(--color-surface-raised);
}
.hero__scrollcue span {
  width: 1px; height: 36px; background: var(--color-surface-raised);
  animation: cue 1.8s var(--ease-out) infinite;
  transform-origin: top;
}
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ═══════════════════ MARQUEE ═══════════════════ */
.marquee {
  overflow: clip;
  background: var(--color-surface-muted);
  border-block: 1px solid var(--color-line);
  padding: var(--space-6) 0;
}
.marquee__track {
  display: flex; width: max-content;
  animation: marquee 22s linear infinite;
  font-size: var(--font-size-md);
  text-transform: uppercase; letter-spacing: 0.22em;
  white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ═══════════════════ MANIFESTO ═══════════════════ */
.manifesto { background: var(--color-surface-muted); }
.manifesto__pin {
  min-height: 100dvh;
  display: grid; place-content: center; justify-items: center;
  text-align: center; gap: var(--space-8);
  padding: var(--space-11) var(--space-7);
  overflow: clip;
}
.manifesto__kicker, .collection__kicker, .lookbook__kicker, .craft__kicker {
  font-size: var(--font-size-sm);
  text-transform: uppercase; letter-spacing: 0.3em;
  color: var(--color-text-primary); opacity: 0.55;
}
.manifesto__word {
  font-family: var(--font-serif);
  font-size: var(--font-size-2xl);
  font-weight: 900; letter-spacing: -0.01em; line-height: 1;
  will-change: transform;
}
.manifesto__copy {
  max-width: 34em;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  line-height: 1.65;
}
.manifesto__copy .w { display: inline-block; will-change: transform, opacity; }

/* ═══════════════════ COLLECTION (horizontal) ═══════════════════ */
.collection { background: var(--color-green); color: var(--color-beige); }
.collection__pin {
  min-height: 100dvh;
  display: grid; align-content: center;
  gap: var(--space-9);
  padding: var(--space-11) 0;
  overflow: clip;
}
.collection__head { padding-inline: clamp(var(--space-7), 4vw, var(--space-10)); }
.collection__kicker { color: var(--color-text-inverse); opacity: 0.55; }
.collection__title, .lookbook__title, .page__title {
  font-family: var(--font-serif);
  font-size: var(--font-size-xl);
  font-weight: 900; line-height: 0.92; letter-spacing: -0.01em;
  text-transform: uppercase;
}
.collection__title { margin-top: var(--space-5); }

.collection__track {
  display: flex; gap: clamp(var(--space-7), 3vw, var(--space-9));
  padding-inline: clamp(var(--space-7), 4vw, var(--space-10));
  width: max-content;
  will-change: transform;
}

.card {
  width: clamp(260px, 30vw, 380px);
  flex: none;
  perspective: 900px;
}
.card__tilt {
  position: relative;
  display: grid; gap: 0;
  background: var(--color-beige);
  color: var(--color-black-text);
  border: 1px solid var(--color-beige-dark);
  transform-style: preserve-3d;
  transition: box-shadow var(--motion-fast) var(--ease-out);
  will-change: transform;
}
/* the product link wraps only the art+info rows; display:contents lets its
   children act as direct grid rows of .card__tilt alongside .card__add,
   so the whole card still reads as one bordered box */
.card__link { display: contents; }
.card__art {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: clip;
  display: grid; place-items: center;
  padding: clamp(var(--space-8), 7%, var(--space-11));
  transform: translateZ(30px);
}
/* soft ground shadow the garment visibly sits on; it spreads and softens
   as the piece lifts on hover, selling the depth. The softness is baked
   into the gradient stops rather than a filter:blur() — with 15-20+ of
   these on a category page, per-element blur filters were expensive enough
   to freeze the compositor on scroll; a wider, feathered gradient reads
   the same without the GPU cost. */
.card__art::after {
  content: "";
  position: absolute; left: 50%; bottom: 9%;
  width: 60%; height: 34px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(19, 19, 19, 0.26) 0%, rgba(19, 19, 19, 0.14) 35%, rgba(19, 19, 19, 0) 70%);
  z-index: 0;
  transition: width var(--motion-fast) var(--ease-out), opacity var(--motion-fast) var(--ease-out);
}
/* garment floats on its own transparent silhouette — object-fit:contain
   keeps the whole piece in frame (never crops it); the drop-shadow hugs the
   actual cutout (not a bounding box), and a hover lift + shadow growth gives
   the pieces real, tactile depth */
.card__art img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  display: block;
  filter: drop-shadow(0 10px 12px rgba(19, 19, 19, 0.13));
  transition: transform var(--motion-fast) var(--ease-out), filter var(--motion-fast) var(--ease-out);
}
.card__tilt:hover .card__art img, .card__tilt:focus-within .card__art img {
  transform: scale(1.06) translateY(-9px);
  filter: drop-shadow(0 24px 22px rgba(19, 19, 19, 0.22));
}
.card__tilt:hover .card__art::after, .card__tilt:focus-within .card__art::after {
  width: 62%; opacity: 0.75;
}
.card__info {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--space-7);
  border-top: 1px solid currentColor;
  transform: translateZ(20px);
}
.card__name { font-size: var(--font-size-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.card__price { font-family: var(--font-mono); font-size: var(--font-size-body); font-variant-numeric: tabular-nums; }
.card__variants { grid-column: 1 / -1; font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.6; margin-top: var(--space-2); }
.card__add {
  padding: var(--space-7);
  min-height: 48px;
  font-size: var(--font-size-md);
  text-transform: uppercase; letter-spacing: 0.14em;
  border-top: 1px solid currentColor;
  transform: translateZ(20px);
  transition: background var(--motion-instant) var(--ease-out), color var(--motion-instant) var(--ease-out), opacity var(--motion-instant);
}
.card__add:hover, .card__add:focus-visible { background: var(--color-surface-base); color: var(--color-text-inverse); }
.card__add:active { transform: translateZ(20px) scale(0.97); }
.card__add[disabled] { opacity: 0.45; cursor: default; }
.card--end {
  display: grid; place-content: center; gap: var(--space-4);
  border: 1px dashed var(--color-line-inverse);
  color: var(--color-surface-raised);
  font-size: var(--font-size-md);
  text-transform: uppercase; letter-spacing: 0.2em;
  text-align: center;
  transition: border-color var(--motion-instant), color var(--motion-instant);
}
.card--end:hover, .card--end:focus-visible { border-color: currentColor; color: var(--color-beige); }

/* mobile: native horizontal scroll-snap instead of pin */
@media (max-width: 767px) {
  .collection__pin { min-height: auto; }
  .collection__track {
    width: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-7);
  }
  .card { scroll-snap-align: center; width: 78vw; }
}

/* ═══════════════════ LOOKBAND — full-bleed immersive lookbook (home) ═══ */
/* ─── Lookbook section — editorial gallery ─── */
.lookband {
  position: relative;
  padding: 0;
  background: var(--color-surface-base);
  overflow: clip;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

/* Top bar: issue label + link */
.lookband__bar {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-7) clamp(var(--space-7), 4vw, var(--space-10));
  border-bottom: 1px solid var(--color-line-inverse);
  flex: none;
}
.lookband__bar-label {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--color-beige);
  opacity: 0.45;
}
.lookband__bar-link {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-weight: 700;
  color: var(--color-beige);
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  transition: gap var(--motion-instant) var(--ease-out), opacity var(--motion-instant);
}
.lookband__bar-link svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none; stroke-width: 2;
  flex: none;
}
.lookband__bar-link:hover { gap: var(--space-8); opacity: 0.75; }

/* Three-chapter grid */
.lookband__chapters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  flex: 1;
  /* 1px gap renders as a hairline separator between chapters */
  gap: 1px;
  background: var(--color-line-inverse);
  min-height: 0;
}

/* Individual chapter panel */
.lookband__chapter {
  position: relative;
  display: block;
  overflow: clip;
  background: var(--color-surface-base);
  /* subtle scale on hover reveals the editorial depth */
}
.lookband__chapter-img {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: clip;
}
.lookband__chapter-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform var(--motion-cinema) var(--ease-luxe),
              opacity var(--motion-slow) var(--ease-out);
  opacity: 0.88;
}
.lookband__chapter:hover .lookband__chapter-img img,
.lookband__chapter:focus-visible .lookband__chapter-img img {
  transform: scale(1.04);
  opacity: 1;
}

/* Persistent dark vignette so text is always legible */
.lookband__chapter::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top,
      rgba(23,54,44,0.92) 0%,
      rgba(23,54,44,0.4)  35%,
      rgba(23,54,44,0)    65%),
    linear-gradient(to bottom,
      rgba(23,54,44,0.55) 0%,
      rgba(23,54,44,0)    25%);
  pointer-events: none;
}

/* Chapter label pinned to the bottom-left */
.lookband__chapter-label {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(var(--space-9), 5vw, var(--space-11))
           clamp(var(--space-7), 4vw, var(--space-9));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.lookband__chapter-num {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--color-gold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
}
.lookband__chapter-num::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--color-gold);
  flex: none;
  opacity: 0.8;
}
.lookband__chapter-name {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--color-beige);
  transition: letter-spacing var(--motion-fast) var(--ease-out);
}
.lookband__chapter:hover .lookband__chapter-name,
.lookband__chapter:focus-visible .lookband__chapter-name {
  letter-spacing: -0.01em;
}

/* Middle chapter gets a slightly warmer tint to vary the palette */
.lookband__chapter:nth-child(2) .lookband__chapter-img img {
  object-position: center center;
}

@media (max-width: 860px) {
  .lookband__chapters {
    grid-template-columns: 1fr;
    gap: 1px;
  }
  .lookband__chapter {
    aspect-ratio: 4 / 3;
  }
  .lookband {
    min-height: 0;
  }
}
@media (min-width: 861px) {
  /* Force chapters to fill the remaining height below the bar */
  .lookband__chapters {
    height: 100%;
  }
  .lookband__chapter {
    min-height: min(88vh, 880px);
  }
}

/* ═══════════════════ LOOKBOOK — BENTO GRID (lookbook.html) ═══════════════════ */

.bento-wrap { position: relative; }
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(240px, 30vw);
  gap: var(--space-2);
  padding: 0 var(--space-2) var(--space-2);
}
.bento-item {
  position: relative;
  display: block;
  overflow: clip;
  background: var(--color-beige);
}
/* transparent garment cutouts sit contained on the tile (never cropped),
   with a drop-shadow that hugs the silhouette for depth */
.bento-item img {
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  padding: clamp(var(--space-7), 4%, var(--space-10));
  box-sizing: border-box;
  filter: drop-shadow(0 12px 16px rgba(19, 19, 19, 0.16));
  transition: transform 700ms var(--ease-out), filter 700ms var(--ease-out);
}
.bento-item:hover img, .bento-item:focus-visible img {
  transform: scale(1.05) translateY(-6px);
  filter: drop-shadow(0 24px 24px rgba(19, 19, 19, 0.22));
}
.bento-item__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(var(--space-6), 2.5vw, var(--space-8));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0) 85%);
  color: var(--color-white);
}
.bento-item__index { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.85; }
.bento-item__name { font-family: var(--font-serif); font-weight: 900; font-size: clamp(1.15rem, 2.6vw, 1.9rem); margin-top: var(--space-3); line-height: 1.05; }
.bento-item__desc { font-size: var(--font-size-sm); margin-top: var(--space-4); max-width: 34em; opacity: 0.92; }

.bento-1 { grid-column: span 2; grid-row: span 2; }
.bento-2 { grid-column: span 2; grid-row: span 1; }
.bento-3 { grid-column: span 1; grid-row: span 1; }
.bento-4 { grid-column: span 1; grid-row: span 1; }
.bento-5 { grid-column: span 2; grid-row: span 1; }
.bento-6 { grid-column: span 2; grid-row: span 1; }

@media (max-width: 860px) {
  .bento-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(200px, 44vw); }
  .bento-1 { grid-column: span 2; grid-row: span 2; }
  .bento-2, .bento-5, .bento-6 { grid-column: span 2; grid-row: span 1; }
  .bento-3, .bento-4 { grid-column: span 1; grid-row: span 1; }
}
@media (max-width: 560px) {
  .bento-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento-grid > * { grid-column: span 1 !important; grid-row: span 1 !important; aspect-ratio: 4 / 5; }
}

/* ═══════════════════ CRAFT ═══════════════════ */
.craft {
  background: var(--color-burgundy); color: var(--color-beige);
  padding: var(--space-12) clamp(var(--space-7), 4vw, var(--space-10));
}
.craft__kicker { color: var(--color-text-inverse); opacity: 0.55; margin-bottom: var(--space-9); }
.craft__grid {
  display: grid; gap: var(--space-9);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.craft__stat { border-top: 1px solid var(--color-line-inverse); padding-top: var(--space-7); }
.craft__num { font-size: var(--font-size-2xl); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.craft__unit { font-size: var(--font-size-body); margin-left: var(--space-3); opacity: 0.6; text-transform: uppercase; letter-spacing: 0.1em; }
.craft__stat p { margin-top: var(--space-5); color: var(--color-surface-raised); font-size: var(--font-size-md); }

/* ═══════════════════ FOOTER ═══════════════════ */
.footer {
  position: relative;
  /* one source of truth for the footer gutter — the giant wordmark bleeds by
     exactly this much to reach the true left and right edges */
  --footer-pad: clamp(var(--space-7), 4vw, var(--space-10));
  background: var(--color-burgundy-dark); color: var(--color-beige);
  padding: var(--space-10) var(--footer-pad) var(--space-9);
  overflow: clip;
}
/* Bleeds past the footer's own padding to touch the true left, right and
   top edges of the footer box. Width/margin-left cancel the padding
   exactly; JS (fitGiantText) measures this element's clientWidth, so the
   bigger bled-out box makes the fitted text bigger automatically. */
.footer__giant {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: var(--font-size-giant); /* fallback until JS measures the exact fit */
  line-height: 0.76;
  letter-spacing: -0.02em;
  color: var(--color-beige);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  width: calc(100% + 2 * var(--footer-pad));
  margin-left: calc(-1 * var(--footer-pad));
  margin-top: calc(-1 * var(--space-10));
  margin-bottom: var(--space-9);
  padding-top: var(--space-7);
  will-change: transform;
  pointer-events: none;
}
/* On narrow viewports the fitted text is tall enough (relative to the
   viewport) that pulling it fully up to the footer's top edge can reach
   into the fixed nav's strip during scroll. Ease off the bleed so it still
   reads as touching the footer without colliding with the nav. */
@media (max-width: 640px) {
  .footer__giant { margin-top: calc(-1 * var(--space-4)); padding-top: var(--space-9); }
}
.footer__cta {
  display: grid; gap: var(--space-10);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-10);
}
@media (min-width: 900px) { .footer__cta { grid-template-columns: 1.2fr 1fr; align-items: end; } }
.footer__tagline { font-size: clamp(1.1rem, 2vw, 1.4rem); max-width: 22em; }
.footer__tagline .pop-red, .footer__tagline .pop-blue { font-style: normal; font-family: inherit; }
.footer__label { display: block; font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.25em; margin-bottom: var(--space-6); color: var(--color-surface-raised); }
.footer__row { display: flex; border-bottom: 1px solid var(--color-text-inverse); }
.footer__input {
  flex: 1; min-width: 0;
  background: none; border: none;
  color: var(--color-text-inverse);
  font: inherit; padding: var(--space-6) 0;
  min-height: 48px;
}
.footer__input::placeholder { color: rgba(253, 253, 253, 0.45); }
.footer__input:focus-visible { outline-offset: -2px; }
.footer__input[aria-invalid="true"] { border-bottom: 2px solid #ff6b6b; }
.footer__submit {
  padding: var(--space-6) var(--space-7);
  min-height: 48px;
  text-transform: uppercase; letter-spacing: 0.2em; font-size: var(--font-size-md); font-weight: 700;
  transition: letter-spacing var(--motion-instant) var(--ease-out);
}
.footer__submit:hover, .footer__submit:focus-visible { letter-spacing: 0.35em; }
.footer__hint { margin-top: var(--space-5); font-size: var(--font-size-sm); color: var(--color-surface-raised); min-height: 1.4em; }
.footer__hint.is-error { color: #ff8a8a; }
.footer__hint.is-success { color: #a8e6a1; }

.footer__nav-grid {
  display: grid; gap: var(--space-9);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-top: 1px solid var(--color-line-inverse);
  padding-block: var(--space-9);
}
.footer__nav-col h3 { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.55; margin-bottom: var(--space-6); }
.footer__nav-col a { display: flex; align-items: center; min-height: 44px; font-size: var(--font-size-md); padding: var(--space-3) 0; }
.footer__nav-col a:hover, .footer__nav-col a:focus-visible { opacity: 0.7; text-decoration: underline; }

.footer__legal {
  display: flex; flex-wrap: wrap; gap: var(--space-7); justify-content: space-between; align-items: center;
  border-top: 1px solid var(--color-line-inverse); padding-top: var(--space-8);
  font-size: var(--font-size-sm);
}
.footer__legal nav { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.footer__legal a { padding: var(--space-5) 0; min-height: 44px; display: inline-flex; align-items: center; text-transform: uppercase; letter-spacing: 0.14em; }
.footer__legal a:hover { opacity: 0.7; }
.footer__legal p { color: var(--color-surface-raised); }

/* ═══════════════════ CART DRAWER ═══════════════════ */
.cart-scrim {
  position: fixed; inset: 0; z-index: var(--z-scrim);
  background: rgba(0, 0, 0, 0.55);
  opacity: 0; transition: opacity var(--motion-instant) var(--ease-out);
}
.cart-scrim.is-open { opacity: 1; }
.cart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-cart);
  width: min(420px, 100vw);
  display: flex; flex-direction: column;
  background: var(--color-white); color: var(--color-black-text);
  transform: translateX(100%);
  transition: transform var(--motion-fast) var(--ease-out);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.25);
}
.cart.is-open { transform: translateX(0); }
.cart__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-8);
  border-bottom: 1px solid var(--color-line);
}
.cart__head h2 { font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.14em; }
.cart__close { width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.1rem; transition: transform var(--motion-instant) var(--ease-out); }
.cart__close:hover { transform: rotate(90deg); }
.cart__list { flex: 1; overflow-y: auto; padding: var(--space-7) var(--space-8); display: grid; gap: var(--space-7); align-content: start; }
.cart__item { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-6); align-items: center; }
.cart__item-art { width: 56px; height: 68px; display: block; background: var(--color-surface-strong); border: 1px solid var(--color-line); object-fit: cover; }
.cart__item-name { font-weight: 700; font-size: var(--font-size-md); text-transform: uppercase; letter-spacing: 0.06em; }
.cart__item-meta { font-size: var(--font-size-sm); color: var(--color-text-secondary); opacity: 0.7; font-variant-numeric: tabular-nums; }
.cart__item-remove { font-size: var(--font-size-sm); text-decoration: underline; min-height: 44px; padding: 0 var(--space-4); }
.cart__item-remove:hover { opacity: 0.6; }
.cart__empty { padding: var(--space-10) var(--space-8); text-align: center; opacity: 0.6; }
.cart__foot { padding: var(--space-8); border-top: 1px solid var(--color-line); display: grid; gap: var(--space-7); }
.cart__total-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.cart__checkout {
  padding: var(--space-7); min-height: 52px;
  background: var(--color-surface-base); color: var(--color-text-inverse);
  text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; font-size: var(--font-size-md);
  transition: opacity var(--motion-instant);
}
.cart__checkout:hover, .cart__checkout:focus-visible { opacity: 0.85; }
.cart__checkout:active { transform: scale(0.98); }

/* ═══════════════════ BACK TO TOP ═══════════════════ */
.back-to-top {
  position: fixed; right: var(--space-8); bottom: var(--space-8); z-index: var(--z-toast);
  width: 52px; height: 52px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--color-surface-base); color: var(--color-text-inverse);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  opacity: 0; transform: translateY(16px) scale(0.9);
  pointer-events: none;
  transition: opacity var(--motion-instant) var(--ease-out), transform var(--motion-instant) var(--ease-out), background var(--motion-instant);
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.back-to-top:hover, .back-to-top:focus-visible { background: var(--color-burgundy); }
.back-to-top svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) { .back-to-top { right: var(--space-7); bottom: var(--space-7); width: 46px; height: 46px; } }

/* ═══════════════════ KEEP BROWSING CTA — tiny corner pill over the grid ═══════════════════ */
.browse-more {
  position: absolute;
  right: clamp(var(--space-6), 3vw, var(--space-8));
  bottom: clamp(var(--space-6), 3vw, var(--space-8));
  z-index: 5;
}
.browse-more__text { display: none; }
.browse-more__link {
  font-family: var(--font-stack); font-weight: 700; font-style: normal;
  font-size: var(--font-size-sm);
  text-transform: uppercase; letter-spacing: 0.1em;
  display: inline-flex; align-items: center; gap: var(--space-4);
  min-height: 48px;
  padding: var(--space-7) var(--space-8);
  background: var(--color-surface-base); color: var(--color-text-inverse);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(19, 19, 19, 0.24);
  transition: transform var(--motion-instant) var(--ease-out), gap var(--motion-instant) var(--ease-out);
}
.browse-more__link:hover, .browse-more__link:focus-visible { gap: var(--space-6); transform: scale(1.05); }
.browse-more__link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }

/* ═══════════════════ PAGE HERO (secondary pages) ═══════════════════ */
.page-hero {
  min-height: 46dvh;
  display: grid; align-content: end; gap: var(--space-6);
  padding: calc(var(--space-12) + var(--space-9)) clamp(var(--space-7), 4vw, var(--space-10)) var(--space-10);
  background: var(--color-green); color: var(--color-beige);
}
.page-hero__kicker { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.3em; opacity: 0.6; }
.page-hero__desc { max-width: 40em; font-size: clamp(1rem, 1.6vw, 1.2rem); }

/* ═══════════════════ CATEGORY TABS ═══════════════════ */
.cat-tabs {
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  padding: var(--space-9) clamp(var(--space-7), 4vw, var(--space-10));
  border-bottom: 1px solid var(--color-line);
  position: sticky; top: 0; z-index: 20;
  background: var(--color-surface-muted);
}
.cat-tabs a {
  font-size: var(--font-size-md); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  padding: var(--space-5) var(--space-6); min-height: 40px; display: inline-flex; align-items: center;
  border: 1px solid var(--color-line); border-radius: 999px;
  transition: background var(--motion-instant), color var(--motion-instant), border-color var(--motion-instant);
}
.cat-tabs a:hover, .cat-tabs a:focus-visible { border-color: var(--color-text-primary); }
.cat-tabs a[aria-current="page"] { background: var(--color-text-primary); color: var(--color-surface-muted); border-color: var(--color-text-primary); }

/* ═══════════════════ PRODUCT GRID PAGES ═══════════════════ */
.product-grid-page { padding: var(--space-10) clamp(var(--space-7), 4vw, var(--space-10)) var(--space-12); }
.product-grid-page__section + .product-grid-page__section { margin-top: var(--space-12); }
.product-grid-page__head { margin-bottom: var(--space-8); }
.product-grid-page__head h2 { font-family: var(--font-serif); font-weight: 900; font-size: var(--font-size-2xl); text-transform: uppercase; line-height: 0.95; }
.product-grid-page__head p { margin-top: var(--space-5); max-width: 36em; opacity: 0.75; }
.product-grid { display: grid; gap: var(--space-7); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.product-grid .card { width: auto; }
.product-grid .card__tilt { border-color: var(--color-line); }
.product-grid a.card__link { display: block; }

/* ═══════════════════ PRODUCT DETAIL PAGE ═══════════════════ */
.pdp {
  padding: calc(var(--space-12) + var(--space-7)) clamp(var(--space-7), 4vw, var(--space-10)) var(--space-12);
  display: grid; gap: clamp(var(--space-9), 5vw, var(--space-12));
  max-width: 1280px; margin-inline: auto;
}
@media (min-width: 860px) { .pdp { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.pdp__breadcrumb { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.55; margin-bottom: var(--space-7); display: flex; gap: var(--space-4); flex-wrap: wrap; }
.pdp__breadcrumb a:hover { text-decoration: underline; }
.pdp__media {
  position: relative;
  aspect-ratio: 4 / 5; overflow: clip;
  background: var(--color-beige);
  display: grid; place-items: center;
  padding: clamp(var(--space-9), 8%, var(--space-12));
}
.pdp__media::after {
  content: "";
  position: absolute; left: 50%; bottom: 8%;
  width: 56%; height: 42px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(19, 19, 19, 0.24) 0%, rgba(19, 19, 19, 0.12) 35%, rgba(19, 19, 19, 0) 70%);
  z-index: 0;
}
.pdp__media img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  filter: drop-shadow(0 18px 20px rgba(19, 19, 19, 0.16));
  transition: transform 500ms var(--ease-out);
}
.pdp__media:hover img { transform: scale(1.03) translateY(-4px); }
.pdp__info { position: sticky; top: calc(var(--space-12) + var(--space-6)); }
.pdp__category { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.55; margin-bottom: var(--space-5); }
.pdp__name { font-family: var(--font-serif); font-weight: 900; font-size: var(--font-size-2xl); line-height: 0.98; text-transform: uppercase; }
.pdp__tagline { font-style: italic; font-family: var(--font-serif); font-size: clamp(1.1rem, 2vw, 1.4rem); margin-top: var(--space-6); opacity: 0.85; }
.pdp__price { font-family: var(--font-mono); font-size: 1.5rem; margin-top: var(--space-8); font-variant-numeric: tabular-nums; }
.pdp__variants { margin-top: var(--space-8); }
.pdp__variants h2 { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.55; margin-bottom: var(--space-6); }
.pdp__swatches { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.pdp__swatch {
  padding: var(--space-5) var(--space-7); min-height: 44px;
  border: 1px solid var(--color-line);
  font-size: var(--font-size-md); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  transition: border-color var(--motion-instant), background var(--motion-instant), color var(--motion-instant);
}
.pdp__swatch:hover, .pdp__swatch:focus-visible { border-color: var(--color-text-primary); }
.pdp__swatch[aria-pressed="true"] { background: var(--color-text-primary); color: var(--color-surface-muted); border-color: var(--color-text-primary); }
.pdp__desc { margin-top: var(--space-8); max-width: 34em; }
.pdp__add {
  margin-top: var(--space-9); padding: var(--space-7); min-height: 56px; width: 100%;
  background: var(--color-surface-base); color: var(--color-text-inverse);
  text-transform: uppercase; letter-spacing: 0.2em; font-weight: 700; font-size: var(--font-size-md);
  transition: opacity var(--motion-instant);
}
.pdp__add:hover, .pdp__add:focus-visible { opacity: 0.85; }
.pdp__add:active { transform: scale(0.98); }
.pdp__details { margin-top: var(--space-10); border-top: 1px solid var(--color-line); padding-top: var(--space-8); }
.pdp__details h2 { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.55; margin-bottom: var(--space-6); }
.pdp__details ul { display: grid; gap: var(--space-4); font-size: var(--font-size-md); }
.pdp__details li { padding-left: var(--space-6); position: relative; }
.pdp__details li::before { content: "—"; position: absolute; left: 0; opacity: 0.5; }
.pdp__lifestyle { padding: var(--space-11) clamp(var(--space-7), 4vw, var(--space-10)) 0; max-width: 1280px; margin-inline: auto; }
.pdp__lifestyle h2 { font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.2em; opacity: 0.55; margin-bottom: var(--space-7); }
.pdp__lifestyle-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.pdp__lifestyle-grid a { display: block; overflow: clip; background: var(--color-surface-strong); }
.pdp__lifestyle-grid img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform var(--motion-fast) var(--ease-out); }
.pdp__lifestyle-grid a:hover img, .pdp__lifestyle-grid a:focus-visible img { transform: scale(1.05); }
@media (max-width: 640px) { .pdp__lifestyle-grid { grid-template-columns: 1fr; } }

.pdp__related { padding: 0 clamp(var(--space-7), 4vw, var(--space-10)) var(--space-12); max-width: 1280px; margin-inline: auto; }
.pdp__related h2 { font-family: var(--font-serif); font-weight: 900; font-size: var(--font-size-xl); text-transform: uppercase; margin-bottom: var(--space-8); }

/* ═══════════════════ TOAST ═══════════════════ */
.toast {
  position: fixed; bottom: var(--space-8); left: 50%; z-index: var(--z-toast);
  transform: translate(-50%, 150%);
  background: var(--color-surface-base); color: var(--color-text-inverse);
  padding: var(--space-6) var(--space-8);
  font-size: var(--font-size-md); text-transform: uppercase; letter-spacing: 0.12em;
  transition: transform var(--motion-instant) var(--ease-out);
  pointer-events: none;
  max-width: calc(100vw - 2 * var(--space-7));
}
.toast.is-visible { transform: translate(-50%, 0); }

/* ═══════════════════ REDUCED MOTION ═══════════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .marquee__track { animation: none; }
  .hero__scrollcue span { animation: none; height: 36px; }
}

/* ═══════════════════ FONT ROLE ASSIGNMENT ═══════════════════
   Placed last so it wins by source order. Cormorant Garamond carries the
   letterspaced UPPERCASE label / UI / button / headline-caps layer. Everything else — the NEWTRALS wordmark, product & look names, and
   all lowercase reading copy — stays in Heritage Legacy (set as body default). */
.nav__links a, .nav__cart, .nav__cart-count,
.hero__eyebrow, .hero__meta, .hero__scrollcue,
.marquee__track,
.manifesto__kicker, .collection__kicker, .lookbook__kicker, .craft__kicker,
.page-hero__kicker,
.collection__title, .lookbook__title, .page__title,
.product-grid-page__head h2, .pdp__related h2,
.card__name, .card__price, .card__variants, .card__add, .card--end,
.bento-item__index, .look__index,
.browse-more__text,
.craft__unit,
.footer__label, .footer__submit, .footer__nav-col h3, .footer__legal a, .footer__mark,
.cart__head h2, .cart__item-name, .cart__item-meta, .cart__total-row, .cart__checkout, .cart__item-remove,
.cat-tabs a,
.pdp__breadcrumb, .pdp__category, .pdp__variants h2, .pdp__variants h2 span, .pdp__swatch, .pdp__add, .pdp__details h2 {
  font-family: var(--font-sans);
}
/* Cormorant is a text-optical-size Garamond: at 11–13px its hairlines thin out
   and caps read weak. The label layer therefore runs at 600 with wide tracking
   — that combination is what makes the capitals feel engraved rather than
   merely small. Sizes are nudged up a step for the same reason (WCAG legibility
   on a high-contrast serif). */
.nav__links a, .nav__cart, .nav__cart-count, .card__add, .cat-tabs a,
.footer__nav-col h3, .footer__label, .footer__submit, .footer__legal a,
.pdp__category, .pdp__breadcrumb, .pdp__add, .pdp__details h2, .pdp__variants h2,
.pdp__swatch, .card__price, .card__variants, .bento-item__index, .look__index,
.browse-more__text, .craft__unit, .cart__head h2, .cart__checkout,
.cart__total-row, .hero__eyebrow, .page-hero__kicker, .manifesto__kicker,
.collection__kicker, .lookbook__kicker, .craft__kicker {
  font-weight: 600;
  letter-spacing: 0.2em;
}
/* the smallest labels need the most help */
.nav__links a, .cat-tabs a, .footer__nav-col h3, .pdp__category,
.hero__eyebrow, .page-hero__kicker, .manifesto__kicker, .collection__kicker,
.lookbook__kicker, .craft__kicker { font-size: 0.8125rem; }
.card__add, .pdp__add, .cart__checkout, .footer__submit { font-size: 0.875rem; }

/* ═══════════════════════════════════════════════════════════════
   LUXURY LAYER — appended last so it refines the base by source order
   ═══════════════════════════════════════════════════════════════ */

/* Warm text selection */
::selection { background: var(--color-gold); color: #17362C; }

/* Film grain — a single fixed, non-interactive texture over everything.
   Subtle enough to read as paper/film tooth, not noise. */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 4000; pointer-events: none;
  opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* Refined color-pop accents — italic serif, hairline weight */
.pop-red, .pop-blue { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

/* ── Custom cursor (desktop only, added by JS via .has-cursor on <html>) ── */
.cursor-ring, .cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 5000;
  pointer-events: none; border-radius: 50%;
  will-change: transform; opacity: 0;
  transition: opacity 400ms var(--ease-luxe);
}
.cursor-ring {
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border: 1px solid rgba(176, 141, 87, 0.9);
  mix-blend-mode: difference;
  transition: width 450ms var(--ease-luxe), height 450ms var(--ease-luxe),
              margin 450ms var(--ease-luxe), background 450ms var(--ease-luxe),
              opacity 400ms var(--ease-luxe);
}
.cursor-dot {
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  background: var(--color-gold);
}
.has-cursor.cursor-ready .cursor-ring,
.has-cursor.cursor-ready .cursor-dot { opacity: 1; }
/* grow the ring over interactive elements */
.cursor-ring.is-hover {
  width: 64px; height: 64px; margin: -32px 0 0 -32px;
  background: rgba(176, 141, 87, 0.12);
}
.cursor-dot.is-hover { opacity: 0; }
/* hide native cursor once the custom one is live */
@media (hover: hover) and (pointer: fine) {
  .has-cursor, .has-cursor a, .has-cursor button,
  .has-cursor [data-magnetic], .has-cursor input, .has-cursor label { cursor: none; }
}

/* Magnetic elements get a smooth spring back */
[data-magnetic] { transition: transform var(--motion-slow) var(--ease-luxe); }

/* ── Intro preloader (index only) ── */
.preloader {
  position: fixed; inset: 0; z-index: 6000;
  display: grid; place-items: center;
  background: var(--color-surface-base);
  color: var(--color-text-inverse);
  overflow: hidden;
}
.preloader__inner { display: grid; justify-items: center; gap: var(--space-8); }
.preloader__word {
  font-family: var(--font-serif); font-weight: 900;
  font-size: clamp(2rem, 7vw, 4.5rem); letter-spacing: 0.02em;
  opacity: 0; transform: translateY(18px);
}
.preloader__line {
  width: min(240px, 44vw); height: 1px;
  background: rgba(232, 221, 212, 0.25); position: relative; overflow: hidden;
}
.preloader__line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--color-gold); transform: scaleX(var(--p, 0)); transform-origin: left;
}

/* Gold scroll-progress hairline at the very top */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-soft));
  z-index: 4500; pointer-events: none;
}
.preloader__count {
  font-family: var(--font-sans); font-size: var(--font-size-sm);
  letter-spacing: 0.3em; opacity: 0.55;
}
body.is-loading { overflow: hidden; }
/* Safety net: if JS never runs, the curtain still clears after 8s */
@keyframes preloaderFail { to { transform: translateY(-100%); visibility: hidden; } }
.preloader { animation: preloaderFail 0.4s var(--ease-luxe) 8s forwards; }

/* ── Elevated hover treatments ── */
/* Nav links: gold underline, slower */
.nav__links a::after { background: var(--color-gold); height: 1.5px; transition: transform var(--motion-slow) var(--ease-luxe); }
/* Primary buttons: tracking bloom + gentle lift */
.card__add, .pdp__add, .cart__checkout, .footer__submit, .browse-more__link {
  transition: letter-spacing var(--motion-slow) var(--ease-luxe),
              background var(--motion-fast) var(--ease-luxe),
              color var(--motion-fast) var(--ease-luxe),
              opacity var(--motion-fast) var(--ease-luxe),
              transform var(--motion-fast) var(--ease-luxe);
}
.pdp__add:hover, .cart__checkout:hover { letter-spacing: 0.28em; }
/* Category pill tabs: gold active */
.cat-tabs a[aria-current="page"] { background: var(--color-surface-base); border-color: var(--color-surface-base); }
.cat-tabs a:hover { border-color: var(--color-gold); color: var(--color-text-primary); }

/* Product cards: slower, more deliberate */
.card__art img { transition: transform var(--motion-cinema) var(--ease-luxe), filter var(--motion-slow) var(--ease-luxe); }
.card__art::after { transition: width var(--motion-slow) var(--ease-luxe), opacity var(--motion-slow) var(--ease-luxe); }

/* Gold hairline flourish under section kickers */
.manifesto__kicker, .collection__kicker, .lookbook__kicker,
.page-hero__kicker, .pdp__category {
  position: relative;
}

/* Refined reveal for opted-in elements */
[data-luxe] { opacity: 0; }

/* ═══════════════════ LUXURY REFINEMENTS — cards, air, detail ═══════════════════ */

/* Cards: soften the hard black dividers to hairlines, add a deep soft-shadow
   lift so pieces feel like they sit on a gallery plinth. */
.card__tilt {
  border: 1px solid rgba(32, 28, 23, 0.06);
  box-shadow: 0 2px 12px -9px rgba(20, 16, 12, 0.22);
  transition: box-shadow var(--motion-slow) var(--ease-luxe);
}
.card__tilt:hover, .card__tilt:focus-within {
  box-shadow: 0 44px 72px -36px rgba(20, 16, 12, 0.42);
}
.card__info { border-top-color: var(--color-line); padding-block: var(--space-6); }
.card__add { border-top-color: var(--color-line); letter-spacing: 0.18em; }
.card__name { letter-spacing: 0.1em; }

/* Editorial breathing room — luxury lives in the whitespace */
.page-hero { min-height: 60dvh; padding-block: calc(var(--space-12) + var(--space-10)) var(--space-11); }
.page-hero__kicker { letter-spacing: 0.34em; }
.product-grid { gap: clamp(var(--space-7), 2.6vw, var(--space-10)); grid-template-columns: repeat(auto-fill, minmax(clamp(260px, 25vw, 320px), 1fr)); }
.product-grid-page { padding-block: var(--space-12); }
.product-grid-page__section + .product-grid-page__section { margin-top: calc(var(--space-12) + var(--space-10)); }
.product-grid-page__head { margin-bottom: var(--space-10); }
.pdp { gap: clamp(var(--space-10), 6vw, var(--space-12)); padding-block: calc(var(--space-12) + var(--space-9)) var(--space-12); }
.pdp__lifestyle { padding-top: var(--space-12); }
.pdp__related { padding-bottom: calc(var(--space-12) + var(--space-9)); }

/* Category tab pills — refined, gold active */
.cat-tabs { gap: var(--space-7); padding-block: var(--space-9); }
.cat-tabs a { letter-spacing: 0.18em; border-radius: 0; border-width: 1px; }

/* Kicker gold flourish — a hairline that precedes the section number */
.manifesto__kicker, .collection__kicker, .page-hero__kicker {
  display: inline-flex; align-items: center; gap: var(--space-6);
}
.manifesto__kicker::before, .collection__kicker::before,
.page-hero__kicker::before {
  content: ""; width: clamp(24px, 4vw, 48px); height: 1px;
  background: var(--color-gold); opacity: 0.9; flex: none;
}


/* ═══════════════════════════════════════════════════════════════
   FLIP-BOOK PANELS (home page — each section stacks over previous)
   ═══════════════════════════════════════════════════════════════ */

/* Every section in the flip-book has to sit in the stacking order, or an
   earlier sticky panel paints straight over it. --flip-z ascends down the
   page so each section covers the one before it. */
.flip-panel,
.flip-layer {
  position: relative;
  z-index: var(--flip-z, 1);
  /* Subtle top shadow gives each panel the feeling of a physical card
     sliding over the one below — visible only at the entry edge */
  box-shadow: 0 -6px 40px rgba(0, 0, 0, 0.22);
}

/* Only sections WITHOUT a ScrollTrigger pin may also be sticky. .flip-layer
   is the variant for pin hosts: same stacking, no sticky. */
.flip-panel {
  position: sticky;
  top: 0;
}

/* Hero is the base layer — its shadow is handled by sections above */
.hero.flip-panel { box-shadow: none; }

/* A section must never be BOTH a sticky flip-panel and a ScrollTrigger pin
   host: GSAP measures the pin against the document while the sticky ancestor
   slides underneath it, so the pin releases part-way through the panel and
   strands it — leaving an empty coloured panel (the "ghost"). .manifesto and
   .collection therefore carry their pins instead of .flip-panel; their pins
   already hold the content in place.

   The footer is the last page of the flip-book, so it has to sit above every
   panel. Without this the final sticky panel (--flip-z:4) stays at top:0 and
   paints straight over it, and the footer is never visible. */
.footer { position: relative; z-index: 10; }

/* On reduced motion, remove sticky so the page scrolls normally */
@media (prefers-reduced-motion: reduce) {
  .flip-panel { position: static; }
  .flip-panel, .flip-layer { box-shadow: none; }
}

/* ═══════════════════════════════════════════════════════════════
   EDITORIAL LOOKBOOK PAGE
   ───────────────────────────────────────────────────────────────
   Two references held at once: an editorial magazine (asymmetric
   spreads, chapter openers, pull quotes, a few full-bleed moments)
   and an art gallery (every work matted in generous space, hung on
   a shared baseline, described by a wall label set BESIDE or BELOW
   it — never printed on top of the picture).

   One grid governs the page: --ed-margin is the wall, --ed-gutter
   the space between works. Both scale with the viewport so the
   matting stays proportional instead of collapsing on small screens.
   ═══════════════════════════════════════════════════════════════ */
#lookbookMain {
  --ed-margin: clamp(20px, 5.5vw, 132px);
  --ed-gutter: clamp(14px, 1.8vw, 34px);
  --ed-run: clamp(64px, 9vw, 168px);   /* vertical space between spreads */
  background: var(--color-surface-muted);
}

/* The shared wall: every spread lines up on these edges. */
.ed-wall {
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: var(--ed-margin);
}

/* ── Editorial hero ─────────────────────────────────────────── */
.ed-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--space-12) + 6vh) var(--ed-margin) var(--space-10);
  background: var(--color-surface-base);
  color: var(--color-text-inverse);
  overflow: hidden;
}
.ed-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 78% 8%, rgba(176, 141, 87, 0.16), transparent 62%);
  pointer-events: none;
}
.ed-hero__content { position: relative; z-index: 1; max-width: 22ch; }
.ed-hero__issue {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--color-gold);
  margin-bottom: var(--space-9);
}
.ed-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(4rem, 15vw, 13rem);
  line-height: 0.84;
  letter-spacing: -0.03em;
  margin: 0;
}
.ed-hero__title em { color: var(--color-gold); font-style: italic; }
.ed-hero__desc {
  margin: var(--space-9) 0 0;
  font-size: var(--font-size-body);
  line-height: 1.65;
  color: rgba(232, 221, 212, 0.72);
  max-width: 42ch;
}
.ed-hero__meta {
  position: absolute;
  right: var(--ed-margin);
  bottom: var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: right;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: rgba(232, 221, 212, 0.45);
}
@media (max-width: 720px) { .ed-hero__meta { display: none; } }
.ed-hero__scroll {
  position: absolute;
  left: 50%; translate: -50% 0;
  bottom: var(--space-8);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(232, 221, 212, 0.5);
}
.ed-hero__scroll span {
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, transparent, var(--color-gold));
}

/* ── Chapter opener ─────────────────────────────────────────── */
.ed-chapter {
  padding: clamp(96px, 16vh, 220px) 0;
  background: var(--color-surface-base);
  color: var(--color-text-inverse);
}
.ed-chapter--light {
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
}
.ed-chapter__banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--ed-gutter) clamp(24px, 5vw, 96px);
  align-items: end;
}
@media (max-width: 860px) { .ed-chapter__banner { grid-template-columns: 1fr; } }
.ed-chapter__number {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: var(--color-gold);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(176, 141, 87, 0.35);
}
.ed-chapter__title {
  grid-row: 2;
  font-family: var(--font-serif);
  font-size: clamp(3rem, 10vw, 9rem);
  line-height: 0.86;
  letter-spacing: -0.03em;
  margin: var(--space-8) 0 0;
}
.ed-chapter__line {
  grid-row: 2;
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-body);
  line-height: 1.7;
  max-width: 46ch;
  opacity: 0.68;
}
@media (max-width: 860px) {
  .ed-chapter__title, .ed-chapter__line { grid-row: auto; }
  .ed-chapter__line { margin-top: var(--space-8); }
}

/* ── The plate: one work, matted, with its wall label ───────── */
.ed-plate { padding: var(--ed-run) 0; }
.ed-plate__frame {
  margin: 0;
  overflow: hidden;
  background: var(--color-surface-raised);
}
.ed-plate__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--motion-cinema) var(--ease-luxe);
}
.ed-plate__frame:hover img { scale: 1.028; }

/* Wall label — the gallery's placard. Small caps, hung under the
   work on the left edge, never over it. */
.ed-label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4) var(--space-8);
  align-items: baseline;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}
.ed-label__index {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--color-gold);
  white-space: nowrap;
}
.ed-label__name {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
.ed-label__text {
  grid-column: 2;
  margin: var(--space-4) 0 0;
  font-size: var(--font-size-md);
  line-height: 1.7;
  max-width: 52ch;
  opacity: 0.66;
}
.ed-label__link {
  grid-column: 2;
  justify-self: start;
  margin-top: var(--space-6);
  display: inline-flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  border-bottom: 1px solid currentColor;
  transition: gap var(--motion-fast) var(--ease-out);
}
.ed-label__link:hover { gap: var(--space-8); }
/* on the dark register */
.ed-plate--dark { background: var(--color-surface-base); color: var(--color-text-inverse); }
.ed-plate--dark .ed-label { border-top-color: var(--color-line-inverse); }
.ed-plate--dark .ed-plate__frame { background: #14241e; }
@media (max-width: 620px) {
  .ed-label { grid-template-columns: 1fr; }
  .ed-label__text, .ed-label__link { grid-column: 1; }
}

/* ── Diptych / triptych: works hung in a row on one baseline ── */
.ed-hang {
  display: grid;
  gap: var(--ed-gutter);
  align-items: start;
  padding: var(--ed-run) 0;
}
.ed-hang--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed-hang--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* an offset pair: the second work hangs lower, like a salon hang */
.ed-hang--offset > :nth-child(2) { margin-top: clamp(28px, 7vw, 120px); }
@media (max-width: 860px) {
  .ed-hang--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed-hang--3 > :nth-child(3) { grid-column: span 2; }
}
@media (max-width: 620px) {
  .ed-hang--2, .ed-hang--3 { grid-template-columns: 1fr; }
  .ed-hang--3 > :nth-child(3) { grid-column: span 1; }
  .ed-hang--offset > :nth-child(2) { margin-top: 0; }
}

/* ── Feature spread: one large work + a column of copy ──────── */
.ed-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 104px);
  align-items: center;
  padding: var(--ed-run) 0;
}
.ed-feature--reverse .ed-feature__text { order: -1; }
@media (max-width: 900px) {
  .ed-feature { grid-template-columns: 1fr; }
  .ed-feature--reverse .ed-feature__text { order: 0; }
}
.ed-feature__text { max-width: 46ch; }
.ed-kicker {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--color-gold);
  margin: 0 0 var(--space-8);
}
.ed-heading {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.4vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-8);
}
.ed-body {
  margin: 0 0 var(--space-7);
  font-size: var(--font-size-body);
  line-height: 1.78;
  opacity: 0.74;
}
.ed-feature--dark { background: var(--color-surface-base); color: var(--color-text-inverse); }

/* ── Full-bleed moment: the picture runs edge to edge, the label
      sits under it on the page margin. ─────────────────────── */
.ed-bleed { padding: var(--ed-run) 0; }
.ed-bleed__frame {
  margin: 0;
  overflow: hidden;
  background: var(--color-surface-raised);
  aspect-ratio: 16 / 8;
}
@media (max-width: 860px) { .ed-bleed__frame { aspect-ratio: 4 / 3; } }
.ed-bleed__frame img {
  display: block;
  width: 100%;
  /* taller than the frame so the scrubbed parallax has room to travel
     without ever revealing an edge */
  height: 112%;
  object-fit: cover;
}
.ed-bleed .ed-label { padding-inline: var(--ed-margin); max-width: 1680px; margin-inline: auto; }

/* ── Pull quote — the wall text between rooms ───────────────── */
.ed-quote {
  padding: clamp(80px, 13vw, 200px) 0;
  text-align: center;
  background: var(--color-surface-base);
  color: var(--color-text-inverse);
}
.ed-quote blockquote {
  margin: 0 auto;
  max-width: 24ch;
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 5vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.ed-quote blockquote em { color: var(--color-gold); font-style: italic; }
.ed-quote figcaption {
  margin-top: var(--space-9);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: rgba(232, 221, 212, 0.45);
}

/* ── Register break — the thin rule that changes the key ────── */
.ed-register {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-10) var(--ed-margin);
  background: var(--color-surface-base);
  color: rgba(232, 221, 212, 0.5);
}
.ed-register::before, .ed-register::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-line-inverse);
}
.ed-register span {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  white-space: nowrap;
}

/* ── Closing ────────────────────────────────────────────────── */
.ed-close {
  padding: clamp(100px, 18vh, 240px) 0;
  text-align: center;
  background: var(--color-surface-muted);
}
.ed-close__kicker {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--color-gold);
  margin: 0 0 var(--space-9);
}
.ed-close__title {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 8vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-10);
}
.ed-close__title em { color: var(--color-gold); font-style: italic; }
.ed-close__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-7) var(--space-10);
  min-height: 58px;
  background: var(--color-surface-base);
  color: var(--color-text-inverse);
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  transition: gap var(--motion-fast) var(--ease-out), opacity var(--motion-fast);
}
.ed-close__cta svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none; stroke-width: 2;
  flex: none;
}
.ed-close__cta:hover { gap: var(--space-9); opacity: 0.88; }

/* ── Aspect ratios: the frame decides the crop, so square source
      files can hang as portraits, squares or landscapes. ────── */
.ar-portrait  { aspect-ratio: 4 / 5; }
.ar-tall      { aspect-ratio: 3 / 4.4; }
.ar-square    { aspect-ratio: 1 / 1; }
.ar-landscape { aspect-ratio: 3 / 2; }
.ar-wide      { aspect-ratio: 16 / 9; }

/* ═══════════════════════════════════════════════════════════════
   FOOTER — professional refinements
   ═══════════════════════════════════════════════════════════════ */

/* Gold top accent on footer */
.footer::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-gold) 20%,
    var(--color-gold-soft) 50%,
    var(--color-gold) 80%,
    transparent 100%);
  margin-bottom: 0;
  opacity: 0.7;
  position: absolute;
  top: 0; left: 0;
}

/* Wordmark row: giant name + origin line beneath.
   The row carries overflow:clip to mask the wordmark's scroll reveal, so it
   must bleed to the footer's edges too — otherwise it slices --footer-pad off
   each side of the wordmark that bled past it, cutting the N and the S clean
   off. The bleed lives on the row here, so the giant inside it resets to a
   plain full-width block (it keeps its own bleed on the pages where it sits
   directly in the footer with no row). */
.footer__wordmark-row {
  position: relative;
  width: calc(100% + 2 * var(--footer-pad));
  margin-left: calc(-1 * var(--footer-pad));
  overflow: clip;
}
.footer__wordmark-row > .footer__giant { width: 100%; margin-left: 0; }
.footer__origin {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  opacity: 0.4;
  text-align: center;
  margin-top: calc(-1 * var(--space-6));
  margin-bottom: var(--space-10);
}

/* CTA section: 2-col on large screens */
.footer__cta {
  grid-template-columns: 1fr;
  gap: var(--space-9);
  margin-bottom: var(--space-10);
  display: grid;
}
@media (min-width: 900px) {
  .footer__cta { grid-template-columns: 1.2fr 1fr; align-items: start; }
}
.footer__cta-left { display: flex; flex-direction: column; gap: var(--space-5); }
.footer__cta-sub {
  font-size: var(--font-size-sm);
  opacity: 0.45;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

/* Social links in follow column */
.footer__social-link {
  display: flex !important;
  align-items: center;
  gap: var(--space-5);
  min-height: 40px;
  font-size: var(--font-size-md);
  padding: var(--space-3) 0;
}
.footer__social-icon {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none; stroke-width: 1.5;
  flex: none;
  opacity: 0.7;
}
.footer__social-link:hover .footer__social-icon { opacity: 1; }

/* Legal row: refined */
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-7);
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-line-inverse);
  padding-top: var(--space-8);
  font-size: var(--font-size-sm);
}
.footer__legal-right {
  display: flex;
  align-items: center;
  gap: var(--space-9);
  flex-wrap: wrap;
}
.footer__legal-right nav { display: flex; gap: var(--space-8); }
.footer__back-top {
  font-family: var(--font-sans);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.6;
  transition: opacity var(--motion-instant);
}
.footer__back-top:hover { opacity: 1; }


/* ═══════════════════════════════════════════════════════════════
   SIZE GUIDE
   ───────────────────────────────────────────────────────────────
   Reference pages earn their keep by being scannable, so the type
   stays quiet and the tables do the talking: one measurement per
   column, the size always in the row header, and every numeric cell
   carrying its centimetre value in data-cm so the unit switch is a
   re-render rather than a second set of numbers to maintain.
   ═══════════════════════════════════════════════════════════════ */
.sg {
  max-width: 1180px;
  margin-inline: auto;
  padding: 0 clamp(20px, 5vw, 72px) var(--space-12);
}

/* ── unit switch ────────────────────────────────────────────── */
.sg__units {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-line);
  margin-bottom: var(--space-11);
}
.sg__units-label {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  opacity: 0.55;
}
.sg__toggle { display: flex; gap: var(--space-3); }
.sg__unit {
  appearance: none;
  background: transparent;
  border: 1px solid var(--color-line);
  color: inherit;
  cursor: pointer;
  min-height: 44px;
  padding: var(--space-5) var(--space-8);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  transition: background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.sg__unit:hover { border-color: var(--color-text-primary); }
.sg__unit.is-active {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
  color: var(--color-surface-muted);
}

/* ── sections ───────────────────────────────────────────────── */
.sg__section { margin-bottom: var(--space-12); }
.sg__section-head { max-width: 60ch; margin-bottom: var(--space-10); }
.sg__kicker {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--color-gold);
  margin: 0 0 var(--space-6);
}
.sg__title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 4vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-7);
}
.sg__lede { margin: 0; font-size: var(--font-size-body); line-height: 1.75; opacity: 0.72; }

/* ── how to measure ─────────────────────────────────────────── */
.sg__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-9) var(--space-10);
}
.sg__step { padding-top: var(--space-7); border-top: 1px solid var(--color-line); }
.sg__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  color: var(--color-gold);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-bottom: var(--space-6);
}
.sg__step-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  margin: 0 0 var(--space-5);
}
.sg__step-text { margin: 0; font-size: var(--font-size-md); line-height: 1.7; opacity: 0.7; }

/* ── tables ─────────────────────────────────────────────────── */
/* Wide tables scroll inside their own container so the page body never
   scrolls sideways on a phone. */
.sg__table-wrap { margin-bottom: var(--space-10); overflow-x: auto; }
.sg__table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  /* prices and measurements line up column-wise without jitter */
  font-variant-numeric: tabular-nums;
}
.sg__caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding-bottom: var(--space-7);
}
.sg__table th, .sg__table td {
  text-align: left;
  padding: var(--space-6) var(--space-7);
  border-bottom: 1px solid var(--color-line);
}
.sg__table thead th {
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.6;
  border-bottom-color: var(--color-text-primary);
  white-space: nowrap;
}
.sg__table thead th span {
  color: var(--color-gold);
  margin-left: var(--space-3);
  letter-spacing: 0;
}
.sg__table tbody th {
  font-family: var(--font-sans);
  font-size: var(--font-size-md);
  font-weight: 600;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.sg__table tbody th em { font-style: normal; opacity: 0.45; margin-left: var(--space-4); }
.sg__table tbody td { font-size: var(--font-size-md); }
.sg__table tbody tr:hover { background: rgba(32, 28, 23, 0.035); }
.sg__note {
  margin: var(--space-6) 0 0;
  font-size: var(--font-size-md);
  line-height: 1.7;
  opacity: 0.6;
  padding-left: var(--space-7);
  border-left: 2px solid var(--color-gold);
}

/* ── fit notes ──────────────────────────────────────────────── */
.sg__fits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-8);
}
.sg__fit {
  display: flex;
  flex-direction: column;
  padding: var(--space-9);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-line);
}
.sg__fit-name {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1.2;
  margin: 0 0 var(--space-6);
}
.sg__fit-text { margin: 0 0 var(--space-8); font-size: var(--font-size-md); line-height: 1.72; opacity: 0.72; }
.sg__fit-tag {
  margin: auto 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-gold);
}

/* ── help ───────────────────────────────────────────────────── */
.sg__help {
  padding: clamp(48px, 8vw, 104px);
  background: var(--color-surface-base);
  color: var(--color-text-inverse);
  text-align: center;
}
.sg__help-title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-7);
}
.sg__help-text {
  margin: 0 auto var(--space-10);
  max-width: 52ch;
  font-size: var(--font-size-body);
  line-height: 1.75;
  opacity: 0.72;
}
.sg__help-actions { display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: center; }
.sg__cta {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: var(--space-6) var(--space-10);
  background: var(--color-surface-muted);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  transition: opacity var(--motion-fast);
}
.sg__cta:hover { opacity: 0.85; }
.sg__cta--ghost {
  background: transparent;
  color: var(--color-text-inverse);
  border: 1px solid var(--color-line-inverse);
}