/* ═══════════════════════════════════════════════════════════════
   HOUSE OF AYURA — Design System (Phase 23 / Rebuild)
   ───────────────────────────────────────────────────────────────
   A single source of truth for type, colour, spacing, grid,
   and the shared components (nav, footer, buttons, frames).
   Editorial-grid direction — Aesop / Loro Piana / Buly lineage.
   Premium, modern, weighted. Breathing without being airy.
   ─────────────────────────────────────────────────────────────── */

:root {
  /* ── Colour ─────────────────────────────────────────────── */
  /* Refined house palette — green-black darks, cleaner antique grounds,
     stone-grey supporting type, gold reserved for hairline accents only. */
  --ivory:        #F5F3ED;   /* primary ground — cleaner antique ivory */
  --warm-stone:   #F0ECE4;   /* secondary ground — lifted, less yellow */
  --bone:         #EAE5DC;   /* tertiary, dividers, low-emphasis fills */
  --obsidian:     #0E1411;   /* dark surface — deep green-black */
  --charcoal:     #141B17;   /* dark surface secondary — green-black */

  --ink:          #15201B;   /* primary text — deep green-black */
  --ink-lift:     #243029;   /* lifted green-black for button hover */
  --ink-soft:     #5C615B;   /* secondary text — muted stone grey */
  --ink-muted:    #8C918A;   /* tertiary text, captions — silvered grey */

  --on-dark:      #F5F3ED;   /* text on dark surfaces */
  --on-dark-soft: rgba(245, 243, 237, 0.66);
  --on-dark-mute: rgba(245, 243, 237, 0.36);

  --brass:        #AC9259;   /* accent — muted antique gold, hairlines only */
  --brass-soft:   #BFA468;   /* highlight accent */
  --brass-deep:   #82693E;   /* hover/active */

  --line:         rgba(14, 20, 17, 0.10);
  --line-strong:  rgba(14, 20, 17, 0.18);
  --line-dark:    rgba(245, 243, 237, 0.12);

  /* ── Type ───────────────────────────────────────────────── */
  --font-serif: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Fluid type scale */
  --t-display-xl: clamp(3rem,    7vw,   6rem);       /* hero display — lifted Phase 26 */
  --t-display-l:  clamp(2.25rem, 5vw,   4rem);       /* page titles */
  --t-display-m:  clamp(1.625rem,3.2vw, 2.5rem);     /* section titles */
  --t-display-s:  clamp(1.375rem,2.2vw, 1.75rem);    /* card titles */
  --t-editorial:  clamp(1.125rem, 1.6vw, 1.375rem);  /* lead paragraphs */
  --t-body:       0.9375rem;                         /* 15px body */
  --t-body-s:     0.8125rem;                         /* 13px secondary body */
  --t-caption:    0.6875rem;                         /* 11px captions */
  --t-eyebrow:    0.625rem;                          /* 10px eyebrow labels */
  --t-micro:      0.5625rem;                         /* 9px nav / micro */

  /* ── Spacing scale ──────────────────────────────────────── */
  --s-1:  8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  40px;
  --s-5:  64px;
  --s-6:  96px;
  --s-7:  128px;
  --s-8:  160px;

  /* ── Layout ─────────────────────────────────────────────── */
  --page-pad:        clamp(20px, 4vw, 56px);
  --container-max:   1320px;
  --container-mid:   980px;
  --container-narrow:680px;

  /* ── Motion (shared tokens — extended in motion.css) ───── */
  --ease:         cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-soft:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-quiet:   cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Elevation (sparing — luxury sites don't lean on shadow) ── */
  --lift:         0 1px 0 var(--line);
  --lift-strong:  0 2px 24px rgba(20, 20, 20, 0.06);
}

/* ───────────────────────────────────────────────────────────────
   RESET
   ─────────────────────────────────────────────────────────────── */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--ivory);
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--brass); color: var(--ivory); }

/* ───────────────────────────────────────────────────────────────
   TYPE COMPONENTS
   ─────────────────────────────────────────────────────────────── */

.display-xl {
  font-family: var(--font-serif);
  font-size: var(--t-display-xl);
  font-weight: 300;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.display-l {
  font-family: var(--font-serif);
  font-size: var(--t-display-l);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.display-m {
  font-family: var(--font-serif);
  font-size: var(--t-display-m);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.display-s {
  font-family: var(--font-serif);
  font-size: var(--t-display-s);
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
}
.editorial-lead {
  font-family: var(--font-serif);
  font-size: var(--t-editorial);
  font-weight: 300;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink-soft);
}
.body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-soft);
}
.body-s {
  font-family: var(--font-sans);
  font-size: var(--t-body-s);
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-soft);
}
.caption {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-muted);
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
}
.eyebrow--ink { color: var(--ink-muted); }
.eyebrow--on-dark { color: var(--brass-soft); }

em, .italic { font-style: italic; font-weight: 300; }

/* Editorial italic emphasis word — used inside titles */
.is-italic { font-style: italic; font-weight: 300; }

/* ───────────────────────────────────────────────────────────────
   LAYOUT — Grid, containers, surfaces
   ─────────────────────────────────────────────────────────────── */

.surface { background: var(--ivory); }
.surface--warm { background: var(--warm-stone); }
.surface--bone { background: var(--bone); }
.surface--dark { background: var(--obsidian); color: var(--on-dark); }
.surface--dark .body,
.surface--dark .body-s,
.surface--dark .editorial-lead { color: var(--on-dark-soft); }
.surface--dark .display-xl,
.surface--dark .display-l,
.surface--dark .display-m,
.surface--dark .display-s { color: var(--on-dark); }

.container       { max-width: var(--container-max);    margin: 0 auto; padding: 0 var(--page-pad); }
.container--mid  { max-width: var(--container-mid);    margin: 0 auto; padding: 0 var(--page-pad); }
.container--narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--page-pad); }
.container--full { padding: 0 var(--page-pad); }

/* Section vertical rhythm */
.section          { padding: var(--s-6) 0; }
.section--tight   { padding: var(--s-5) 0; }
.section--spacious{ padding: var(--s-7) 0; }
.section--grand   { padding: var(--s-8) 0; }

/* 12-col grid */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--s-3);
  row-gap: var(--s-4);
}
.grid--lg-gap { column-gap: var(--s-4); row-gap: var(--s-5); }

/* Common asymmetric splits */
.split--5-7 { display: grid; grid-template-columns: 5fr 7fr; gap: var(--s-5); align-items: center; }
.split--7-5 { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-5); align-items: center; }
.split--4-8 { display: grid; grid-template-columns: 4fr 8fr; gap: var(--s-5); align-items: center; }
.split--8-4 { display: grid; grid-template-columns: 8fr 4fr; gap: var(--s-5); align-items: center; }
.split--1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }

/* Hairline rules */
.rule { width: 100%; height: 1px; background: var(--line); border: 0; }
.rule--brass { width: 48px; height: 1px; background: var(--brass); border: 0; }
.rule--brass-wide { width: 96px; height: 1px; background: var(--brass); border: 0; }
.rule--vertical { width: 1px; height: 100%; background: var(--line); }
.rule--on-dark { background: var(--line-dark); }

/* Animated rule. Draws itself from 0 to its target width when entering view. */
.rule--animated { width: 0; height: 1px; background: var(--brass); transition: width 1200ms var(--ease-soft); }
.rule--animated[data-reveal-rule="brass"]      { transition-property: width; }
.rule--animated.is-in                          { width: 96px; }
.rule--animated.rule--animated-wide.is-in      { width: 160px; }
.rule--animated.rule--animated-full.is-in      { width: 100%; }
.rule--animated.rule--center                   { margin-left: auto; margin-right: auto; }

/* Ayura divider — brass line + diamond mark + brass line.
   The diamond is drawn from the same geometry as the identity mark.
   Use as a curatorial punctuation between major sections. */
.ayura-divider {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}
.ayura-divider__line {
  flex: 1;
  height: 1px;
  background: var(--brass);
  opacity: 0;
  transform: scaleX(0.2);
  transform-origin: center;
  transition: opacity 900ms var(--ease-soft), transform 1100ms var(--ease-soft);
}
.ayura-divider__line--left  { transform-origin: right; }
.ayura-divider__line--right { transform-origin: left; }
.ayura-divider__diamond {
  width: 8px; height: 8px;
  background: var(--brass);
  transform: rotate(45deg) scale(0);
  transition: transform 600ms var(--ease-soft) 300ms;
  flex: 0 0 8px;
}
.ayura-divider.is-in .ayura-divider__line   { opacity: 1; transform: scaleX(1); }
.ayura-divider.is-in .ayura-divider__diamond{ transform: rotate(45deg) scale(1); }
.ayura-divider--on-dark .ayura-divider__line,
.ayura-divider--on-dark .ayura-divider__diamond { background: var(--brass-soft); }

/* Section numeral — small italic Cormorant in eyebrow position */
.section-numeral {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--brass);
  margin-right: 14px;
  letter-spacing: 0;
}

/* Utility spacing */
.mt-1 { margin-top: var(--s-1); }   .mb-1 { margin-bottom: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }   .mb-2 { margin-bottom: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }   .mb-3 { margin-bottom: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }   .mb-4 { margin-bottom: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }   .mb-5 { margin-bottom: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }   .mb-6 { margin-bottom: var(--s-6); }
.text-center { text-align: center; }

/* ───────────────────────────────────────────────────────────────
   NAV — fixed, two states (transparent over hero, solid on scroll)
   ─────────────────────────────────────────────────────────────── */

.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--page-pad);
  background: transparent;
  transition:
    background-color 500ms var(--ease-quiet),
    backdrop-filter  500ms var(--ease-quiet),
    padding          500ms var(--ease-quiet),
    border-color     500ms var(--ease-quiet);
  border-bottom: 1px solid transparent;
}
.nav--solid {
  background: rgba(247, 244, 238, 0.92);
  backdrop-filter: saturate(1.1) blur(18px);
  -webkit-backdrop-filter: saturate(1.1) blur(18px);
  padding: 14px var(--page-pad);
  border-bottom-color: var(--line);
}
/* Pages that don't have a dark hero start in solid state */
.nav--solid-default,
.nav--solid-default.nav { background: var(--ivory); border-bottom-color: var(--line); padding: 14px var(--page-pad); }

.nav__wordmark {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--on-dark);
  transition: color 400ms var(--ease-quiet);
}
.nav--solid .nav__wordmark,
.nav--solid-default .nav__wordmark { color: var(--ink); }

.nav__mark { height: 40px; width: auto; }

.nav__links {
  display: flex; gap: 36px; list-style: none;
}
.nav__links a {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-dark-soft);
  position: relative;
  padding: 6px 0;
  transition: color 350ms var(--ease-quiet);
}
.nav__links a:hover { color: var(--on-dark); }

.nav--solid .nav__links a,
.nav--solid-default .nav__links a { color: var(--ink-soft); }
.nav--solid .nav__links a:hover,
.nav--solid-default .nav__links a:hover { color: var(--ink); }

.nav__links a::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--brass);
  transition: width 400ms var(--ease-soft);
}
.nav__links a:hover::after,
.nav__links a.is-current::after { width: 100%; }

.nav__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--on-dark);
  border: 1px solid var(--on-dark-mute);
  transition: all 400ms var(--ease-quiet);
}
.nav__cta:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }
.nav--solid .nav__cta,
.nav--solid-default .nav__cta {
  color: var(--ink); border-color: var(--line-strong);
}
.nav--solid .nav__cta:hover,
.nav--solid-default .nav__cta:hover {
  background: var(--ink); color: var(--ivory); border-color: var(--ink);
}

.nav__hamburger {
  display: none;
  width: 28px; height: 20px;
  position: relative;
}
.nav__hamburger span {
  display: block; position: absolute; left: 0;
  width: 100%; height: 1px;
  background: var(--on-dark);
  transition: all 400ms var(--ease-quiet);
}
.nav__hamburger span:nth-child(1) { top: 4px; }
.nav__hamburger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav__hamburger span:nth-child(3) { bottom: 4px; }
.nav--solid .nav__hamburger span,
.nav--solid-default .nav__hamburger span { background: var(--ink); }

/* Phase 26 — header stays present at all times. The hide-on-scroll
   behaviour was removed; .nav--hidden is intentionally inert so the
   header is reliably sticky on every page. */
.nav { will-change: background-color, padding; }
.nav.nav--hidden { transform: none; }

/* Brass scroll-progress line that sits at the very bottom of the nav.
   Width is driven by JS as a percentage of page progress. */
.nav__progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 0;
  background: var(--brass);
  transition: width 100ms linear, opacity 400ms var(--ease-quiet);
  opacity: 0;
  pointer-events: none;
}
.nav--solid .nav__progress,
.nav--solid-default .nav__progress { opacity: 1; }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0;
  background: var(--ivory);
  z-index: 200;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 28px;
  opacity: 0; visibility: hidden;
  transition: opacity 400ms var(--ease-soft), visibility 400ms var(--ease-soft);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu__close {
  position: absolute; top: 22px; right: var(--page-pad);
  font-size: 24px; line-height: 1; color: var(--ink);
}
.mobile-menu a {
  font-family: var(--font-serif);
  font-size: 1.75rem; font-weight: 300; font-style: italic;
  color: var(--ink);
  opacity: 0; transform: translateY(12px);
  transition: opacity 500ms var(--ease-soft), transform 500ms var(--ease-soft);
}
.mobile-menu.is-open a { opacity: 1; transform: translateY(0); }
.mobile-menu.is-open a:nth-child(1) { transition-delay: 80ms; }
.mobile-menu.is-open a:nth-child(2) { transition-delay: 140ms; }
.mobile-menu.is-open a:nth-child(3) { transition-delay: 200ms; }
.mobile-menu.is-open a:nth-child(4) { transition-delay: 260ms; }
.mobile-menu.is-open a:nth-child(5) { transition-delay: 320ms; }
.mobile-menu.is-open a:nth-child(6) { transition-delay: 380ms; }

/* ───────────────────────────────────────────────────────────────
   BUTTONS — link, ghost, primary, arrow
   ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 32px;
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: transparent;
  transition: all 400ms var(--ease-quiet);
}
.btn:hover { background: var(--ink); color: var(--ivory); }

.btn--primary { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.btn--primary:hover { background: var(--ink-lift); border-color: var(--ink-lift); color: var(--ivory); }
.btn--bone { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.btn--bone:hover { background: transparent; color: var(--ink); border-color: var(--ink); }

/* ── HERO SEAM — an authored transition from hero into the body.
   A fine rule with a small diamond node where the hero meets the page. ── */
.page-intro, .vault-opening { position: relative; border-bottom: 1px solid var(--line); }
.page-intro::after, .vault-opening::after {
  content: '';
  position: absolute; left: 50%; bottom: -4px;
  width: 7px; height: 7px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--warm-stone);
  border: 1px solid var(--line-strong);
  z-index: 2;
}
/* Home: the dark hero meets the light body. A centred node marks the seam. */
.lead-in { position: relative; }
.lead-in::before {
  content: '';
  position: absolute; left: 50%; top: -4px;
  width: 7px; height: 7px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--ivory);
  border: 1px solid var(--line-strong);
}

.btn--ghost { border-color: var(--line-strong); color: var(--ink-soft); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: transparent; }

.btn--on-dark { border-color: var(--on-dark-mute); color: var(--on-dark); }
.btn--on-dark:hover { background: var(--on-dark); color: var(--ink); border-color: var(--on-dark); }

/* Inline link with extending rule */
.link {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 350ms var(--ease-quiet), gap 400ms var(--ease-soft);
}
.link::after {
  content: '';
  width: 28px; height: 1px;
  background: currentColor;
  transition: width 400ms var(--ease-soft);
}
.link:hover { color: var(--brass-deep); gap: 22px; }
.link:hover::after { width: 44px; }
.link--on-dark { color: var(--on-dark); }
.link--on-dark:hover { color: var(--brass-soft); }

/* ───────────────────────────────────────────────────────────────
   FRAMES — image containers with consistent aspect treatments
   ─────────────────────────────────────────────────────────────── */

.frame { position: relative; overflow: hidden; background: var(--bone); }
.frame > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease-soft); }
.frame:hover > img { transform: scale(1.035); }

.frame--portrait  { aspect-ratio: 3 / 4; }
.frame--landscape { aspect-ratio: 4 / 3; }
.frame--editorial { aspect-ratio: 5 / 6; }
.frame--wide      { aspect-ratio: 16 / 9; }
.frame--square    { aspect-ratio: 1 / 1; }
.frame--hero      { aspect-ratio: 21 / 9; }

/* Frame caption */
.frame-caption {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 14px;
  gap: var(--s-3);
}
.frame-caption .caption { color: var(--ink-muted); }

/* ───────────────────────────────────────────────────────────────
   CARDS — stone, article, commission
   ─────────────────────────────────────────────────────────────── */

.card {
  display: flex; flex-direction: column;
  text-align: left;
  transition: opacity 400ms var(--ease-quiet);
}

.card__image { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bone); margin-bottom: 18px; }
.card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--ease-soft); }
.card:hover .card__image img { transform: scale(1.04); }

.card__meta {
  display: flex; gap: 16px; align-items: baseline;
  margin-bottom: 10px;
}

.card__title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 8px;
}

.card__desc {
  font-family: var(--font-sans);
  font-size: var(--t-body-s);
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 14px;
}

/* Article-card variant */
.article-card { display: block; }
.article-card .card__image { aspect-ratio: 4 / 3; }
.article-card__title {
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
  color: var(--ink);
  margin: 14px 0 10px;
}
.article-card__excerpt {
  font-family: var(--font-sans);
  font-size: var(--t-body-s);
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.article-card__meta {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ───────────────────────────────────────────────────────────────
   FORMS — inputs, labels, fieldsets
   ─────────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 8px; }
.field__label {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  color: var(--ink);
  transition: border-color 300ms var(--ease-quiet);
}
.field__textarea { min-height: 100px; resize: vertical; line-height: 1.65; padding-top: 12px; }
.field__input:focus,
.field__select:focus,
.field__textarea:focus { outline: none; border-bottom-color: var(--brass); }
.field__select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23141414' fill='none' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 24px;
}

/* ───────────────────────────────────────────────────────────────
   FOOTER — three-column maison footer
   ─────────────────────────────────────────────────────────────── */

.footer {
  background: var(--obsidian);
  color: var(--on-dark);
  padding: var(--s-7) 0 var(--s-4);
}
.footer__main {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--s-5);
  padding: 0 var(--page-pad);
  max-width: var(--container-max);
  margin: 0 auto var(--s-5);
}

.footer__brand .footer__mark { height: 52px; width: auto; margin-bottom: 22px; display: block; }
.footer__brand .footer__wordmark {
  font-family: var(--font-serif);
  font-size: 1.5rem; font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--on-dark);
  line-height: 1.1;
}
.footer__brand .footer__house {
  font-family: var(--font-serif);
  font-size: 0.625rem;
  font-style: italic;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
  display: block;
  margin-bottom: 2px;
}
.footer__brand .footer__descriptor {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass-soft);
  margin: 14px 0 14px;
  opacity: 0.85;
}
.footer__brand .footer__tagline {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--on-dark-soft);
  line-height: 1.5;
  max-width: 240px;
}

.footer__col-title {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass-soft);
  margin-bottom: 22px;
}

.footer__list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer__list a {
  font-family: var(--font-sans);
  font-size: var(--t-body-s);
  color: var(--on-dark-soft);
  transition: color 350ms var(--ease-quiet);
}
.footer__list a:hover { color: var(--brass-soft); }

.footer__contact-line {
  font-family: var(--font-sans);
  font-size: var(--t-body-s);
  line-height: 1.85;
  color: var(--on-dark-soft);
}
.footer__contact-line strong {
  display: block;
  font-weight: 400;
  color: var(--on-dark);
  letter-spacing: 0.02em;
}
.footer__contact-line + .footer__contact-line { margin-top: 18px; }

.footer__bottom {
  border-top: 1px solid var(--line-dark);
  padding: var(--s-3) var(--page-pad) 0;
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.footer__copyright,
.footer__legal {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.footer__legal { display: flex; gap: 28px; }
.footer__legal a { transition: color 350ms var(--ease-quiet); }
.footer__legal a:hover { color: var(--brass-soft); }

/* ───────────────────────────────────────────────────────────────
   PAGE INTRO — universal page header pattern for non-home pages
   ─────────────────────────────────────────────────────────────── */

.page-intro {
  padding: calc(var(--s-7) + 60px) 0 var(--s-6); /* top accounts for fixed nav */
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
}
.page-intro__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-5);
  align-items: end;
}
.page-intro__eyebrow { margin-bottom: 22px; }
.page-intro__title { margin-bottom: 0; }
.page-intro__lead { max-width: 520px; }

/* ───────────────────────────────────────────────────────────────
   QUOTE / PULL — editorial quote block
   ─────────────────────────────────────────────────────────────── */

.quote {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.quote__attribution {
  display: block;
  margin-top: 28px;
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--ink-muted);
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 24 — CURATORIAL HOUSE PRIMITIVES
   Vitrine, ground shadow, scroll-snap rows, editorial index.
   Used to present rare objects with curatorial presence.
   ═══════════════════════════════════════════════════════════════ */

/* ── VITRINE — single object centred in its frame, generous neutral
   surround, optional ground shadow, optional caption stripe. Used
   for the homepage featured stone and the headline stone on The Stones. */

.vitrine {
  position: relative;
  padding: var(--s-7) 0 var(--s-6);
  background: var(--bone);
}
.vitrine--ivory { background: var(--ivory); }
.vitrine--warm  { background: var(--warm-stone); }
.vitrine--dark  { background: var(--obsidian); color: var(--on-dark); }

.vitrine__inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 var(--page-pad);
  text-align: center;
  position: relative;
}
.vitrine__eyebrow {
  display: block;
  margin-bottom: 28px;
}
.vitrine__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.4vw, 2.625rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: var(--s-5);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.vitrine__title em { font-style: italic; }
.vitrine--dark .vitrine__title { color: var(--on-dark); }

.vitrine__stage {
  position: relative;
  margin: 0 auto var(--s-4);
  max-width: 560px;
}
.vitrine__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bone);
  z-index: 2;
}
.vitrine__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1400ms var(--ease-soft);
}
.vitrine.is-staged .vitrine__frame img { transform: scale(1); }

/* Ground shadow — soft elliptical shadow beneath the object */
.vitrine__shadow {
  position: absolute;
  left: 10%; right: 10%;
  bottom: -14px;
  height: 28px;
  background: radial-gradient(ellipse at center,
    rgba(20, 20, 20, 0.18) 0%,
    rgba(20, 20, 20, 0.06) 45%,
    transparent 70%);
  filter: blur(8px);
  z-index: 1;
  opacity: 0;
  transform: scaleX(0.9);
  transition: opacity 1400ms var(--ease-soft) 200ms, transform 1400ms var(--ease-soft) 200ms;
  pointer-events: none;
}
.vitrine.is-staged .vitrine__shadow { opacity: 1; transform: scaleX(1); }

/* Caption stripe beneath the staged object */
.vitrine__caption {
  margin-top: var(--s-4);
  display: flex; flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: center;
  align-items: baseline;
}
.vitrine__spec {
  display: flex; gap: 8px; align-items: baseline;
}
.vitrine__spec-label {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.vitrine__spec-value {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--ink);
  font-style: italic;
}
.vitrine--dark .vitrine__spec-value { color: var(--on-dark); }
.vitrine--dark .vitrine__spec-label { color: var(--on-dark-mute); }

.vitrine__provenance {
  margin: var(--s-4) auto 0;
  max-width: 560px;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-soft);
}
.vitrine--dark .vitrine__provenance { color: var(--on-dark-soft); }

.vitrine__cta {
  margin-top: var(--s-4);
  display: inline-block;
}

/* Ground-shadow utility usable outside .vitrine (e.g. featured image
   on the homepage that drifts subtly on scroll) */
.has-ground-shadow {
  position: relative;
  isolation: isolate;
}
.has-ground-shadow::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%;
  bottom: -14px;
  height: 22px;
  background: radial-gradient(ellipse at center,
    rgba(20, 20, 20, 0.14) 0%,
    rgba(20, 20, 20, 0.04) 45%,
    transparent 70%);
  filter: blur(6px);
  z-index: -1;
  pointer-events: none;
}


/* ── SCROLL-SNAP ROW — horizontal gallery row, no autoplay,
   no carousel UI. User moves it with arrow controls or touch.
   Three objects visible, with the next partially in view as a
   suggestion of more. */

.scroll-row {
  position: relative;
  padding: var(--s-6) 0;
  background: var(--ivory);
}
.scroll-row--warm { background: var(--warm-stone); }
.scroll-row--bone { background: var(--bone); }
.scroll-row--dark { background: var(--obsidian); color: var(--on-dark); }

.scroll-row__header {
  max-width: var(--container-max);
  margin: 0 auto var(--s-4);
  padding: 0 var(--page-pad);
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-4);
  align-items: end;
}
.scroll-row__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--ink);
}
.scroll-row__title em { font-style: italic; }
.scroll-row--dark .scroll-row__title { color: var(--on-dark); }
.scroll-row__intro {
  max-width: 480px;
  color: var(--ink-soft);
  font-size: var(--t-body);
  line-height: 1.7;
}
.scroll-row--dark .scroll-row__intro { color: var(--on-dark-soft); }

.scroll-row__track-wrap {
  position: relative;
}
.scroll-row__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, calc((100vw - 2 * var(--page-pad)) / 3.2));
  gap: var(--s-3);
  padding: 8px var(--page-pad) var(--s-3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.scroll-row__track::-webkit-scrollbar { display: none; }
.scroll-row__track > * {
  scroll-snap-align: start;
}

/* Hairline brass arrow controls. Hidden on touch devices, fade in
   on row hover on desktop. */
.scroll-row__nav {
  position: absolute;
  bottom: -8px; right: var(--page-pad);
  display: flex; gap: 12px;
  opacity: 0;
  transition: opacity 400ms var(--ease-quiet);
}
.scroll-row__track-wrap:hover .scroll-row__nav { opacity: 1; }
.scroll-row__arrow {
  width: 44px; height: 44px;
  border: 1px solid var(--brass);
  background: var(--ivory);
  color: var(--brass);
  display: flex; align-items: center; justify-content: center;
  transition: all 400ms var(--ease-quiet);
  cursor: pointer;
}
.scroll-row--warm .scroll-row__arrow { background: var(--warm-stone); }
.scroll-row--bone .scroll-row__arrow { background: var(--bone); }
.scroll-row--dark .scroll-row__arrow { background: var(--obsidian); border-color: var(--brass-soft); color: var(--brass-soft); }
.scroll-row__arrow:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.scroll-row__arrow svg { width: 14px; height: 14px; }
.scroll-row__arrow[disabled] { opacity: 0.3; cursor: default; }
.scroll-row__arrow[disabled]:hover { background: transparent; color: var(--brass); }

@media (hover: none) { .scroll-row__nav { display: none; } }


/* ── EDITORIAL INDEX — typographic catalogue. Single column of
   rows separated by hairline rules. Each row clickable to open
   the object's detail. Used on The Stones for the long tail
   of inventory beyond the headline + featured selection. */

.editorial-index {
  background: var(--ivory);
}
.editorial-index--warm { background: var(--warm-stone); }
.editorial-index__inner {
  max-width: var(--container-mid);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
.editorial-index__list {
  list-style: none;
  border-top: 1px solid var(--line-strong);
}
.editorial-index__row {
  position: relative;
  display: grid;
  grid-template-columns: auto 0.5fr 2fr 1fr 1fr 1fr 0.6fr;
  gap: var(--s-3);
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 350ms var(--ease-quiet);
}
.editorial-index__thumb { width: 46px; height: 58px; overflow: hidden; background: var(--bone); }
.editorial-index__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 800ms var(--ease-soft); }
.editorial-index__row:hover .editorial-index__thumb img { transform: scale(1.06); }
.editorial-index__row::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease-soft);
}
.editorial-index__row:hover { background: rgba(184, 155, 94, 0.04); }
.editorial-index__row:hover::before { transform: scaleX(1); }

.editorial-index__num {
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-style: italic;
  color: var(--brass);
}
.editorial-index__name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--ink);
}
.editorial-index__weight {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--ink);
}
.editorial-index__origin,
.editorial-index__treatment {
  font-family: var(--font-sans);
  font-size: var(--t-body-s);
  color: var(--ink-soft);
}
.editorial-index__cert {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: right;
}
.editorial-index__chevron {
  font-family: var(--font-serif);
  color: var(--ink-muted);
  text-align: right;
  transition: transform 400ms var(--ease-soft), color 350ms var(--ease-quiet);
  display: none; /* hidden on wide; visible on narrow */
}
.editorial-index__row:hover .editorial-index__chevron {
  transform: translateX(4px);
  color: var(--brass);
}


/* ── VAULT MODAL — refined modal for object presentation.
   Two columns: image on left, editorial provenance on right.
   Opens with shared-element style entrance (handled in JS). */

.vault-modal {
  position: fixed; inset: 0;
  z-index: 300;
  background: rgba(13, 14, 15, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-3);
  opacity: 0; visibility: hidden;
  transition: opacity 500ms var(--ease-soft), visibility 500ms var(--ease-soft);
}
.vault-modal.is-open { opacity: 1; visibility: visible; }
.vault-modal__panel {
  background: var(--ivory);
  max-width: 1040px; width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 5fr 6fr;
  transform: translateY(20px) scale(0.985);
  transition: transform 700ms var(--ease-soft);
  position: relative;
}
.vault-modal.is-open .vault-modal__panel { transform: translateY(0) scale(1); }

.vault-modal__image {
  aspect-ratio: 4 / 5;
  background: var(--bone);
  overflow: hidden;
  position: relative;
}
.vault-modal__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  opacity: 0;
  transition: transform 1200ms var(--ease-soft), opacity 900ms var(--ease-soft);
}
.vault-modal.is-open .vault-modal__image img { transform: scale(1); opacity: 1; }

.vault-modal__body {
  padding: var(--s-5) var(--s-5) var(--s-5);
  display: flex; flex-direction: column;
}
.vault-modal__close {
  position: absolute;
  top: 18px; right: 18px;
  width: 40px; height: 40px;
  border: 1px solid var(--line-strong);
  background: var(--ivory);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--ink);
  transition: all 350ms var(--ease-quiet);
  z-index: 2;
}
.vault-modal__close:hover { background: var(--ink); color: var(--ivory); border-color: var(--ink); }

.vault-modal__eyebrow { display: block; margin-bottom: 20px; }
.vault-modal__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 8px;
}
.vault-modal__title em { font-style: italic; }
.vault-modal__weight {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--brass);
  margin-bottom: 28px;
}
.vault-modal__provenance {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.85;
  color: var(--ink-soft);
  margin-bottom: var(--s-4);
}
.vault-modal__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 28px;
  padding: 22px 0;
  margin: 0 0 var(--s-4);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.vault-modal__spec-label {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 4px;
}
.vault-modal__spec-value {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--ink);
}
.vault-modal__actions {
  margin-top: auto;
  padding-top: var(--s-3);
}


/* ── FULL-BLEED PAUSE — single image, full width, no overlay, optional
   small caption beneath. Used as a curatorial transition between
   dense sections. */

.full-bleed-pause {
  background: var(--ivory);
  padding: var(--s-3) 0 var(--s-5);
}
.full-bleed-pause__frame {
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--bone);
  position: relative;
}
.full-bleed-pause__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.full-bleed-pause__caption {
  max-width: var(--container-max);
  margin: 18px auto 0;
  padding: 0 var(--page-pad);
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: left;
}


/* ── FILTER TABS — used above the editorial index */

.filter-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}
.filter-tab {
  padding: 18px 28px 16px;
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
  position: relative;
  cursor: pointer;
  transition: color 350ms var(--ease-quiet);
}
.filter-tab::after {
  content: '';
  position: absolute;
  left: 28px; right: 28px;
  bottom: -1px; height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 400ms var(--ease-soft);
}
.filter-tab:hover { color: var(--ink); }
.filter-tab.is-active { color: var(--ink); }
.filter-tab.is-active::after { transform: scaleX(1); }


/* ── RESPONSIVE for Phase 24 primitives */

@media (max-width: 960px) {
  .scroll-row__header { grid-template-columns: 1fr; align-items: start; gap: var(--s-3); }
  .editorial-index__row {
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
      "thumb num name weight"
      "thumb .   origin treatment"
      "thumb .   cert cert";
    row-gap: 4px;
    column-gap: 14px;
    align-items: center;
  }
  .editorial-index__thumb   { grid-area: thumb; align-self: center; }
  .editorial-index__num     { grid-area: num; align-self: start; padding-top: 2px; }
  .editorial-index__name    { grid-area: name; }
  .editorial-index__weight  { grid-area: weight; text-align: right; }
  .editorial-index__origin  { grid-area: origin; }
  .editorial-index__treatment { grid-area: treatment; text-align: right; }
  .editorial-index__cert    { grid-area: cert; text-align: left; }
  .editorial-index__chevron { display: none; }
  .vault-modal__panel { grid-template-columns: 1fr; max-height: 94vh; }
  .vault-modal__body { padding: var(--s-4); }
  .vitrine { padding: var(--s-6) 0 var(--s-5); }
}
@media (max-width: 600px) {
  .scroll-row__track { grid-auto-columns: minmax(240px, calc((100vw - 2 * var(--page-pad)) / 1.3)); }
  .vitrine__caption { gap: 10px 18px; }
}


/* ═══════════════════════════════════════════════════════════════
   CURATORIAL HOUSE — chapter framing, title-set, tag triplet,
   spatial note, Ayura seal. Used across every interior page.
   ═══════════════════════════════════════════════════════════════ */

/* Chapter framing — narrative kicker (italic Cormorant brass) */
.chapter {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-serif);
  font-size: 0.875rem;
  font-style: italic;
  font-weight: 400;
  color: var(--brass);
  margin-bottom: 28px;
  letter-spacing: 0.01em;
}
.chapter__num   { color: var(--brass); }
.chapter__line  { display: inline-block; width: 18px; height: 1px; background: var(--brass); opacity: 0.6; }
.chapter__name  { color: var(--brass); }
.chapter--on-dark .chapter__num,
.chapter--on-dark .chapter__name { color: var(--brass-soft); }
.chapter--on-dark .chapter__line { background: var(--brass-soft); }

/* Title-set — leading clause + italic conclusion on its own line */
.title-set { display: flex; flex-direction: column; gap: 6px; }
.title-set__lead {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.005em;
}
.title-set__conclusion {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-style: italic;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.012em;
}
.title-set--on-dark .title-set__lead,
.title-set--on-dark .title-set__conclusion { color: var(--on-dark); }
.title-set--centered { align-items: center; text-align: center; }

/* Tag triplet — slash-separated curatorial annotation */
.tag-triplet {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 18px;
}
.tag-triplet span:not(:last-child)::after {
  content: '/';
  margin-left: 10px;
  opacity: 0.4;
}
.tag-triplet--on-dark { color: var(--on-dark-mute); }

/* Spatial note — curatorial margin annotation */
.spatial-note {
  display: flex; flex-direction: column;
  gap: 8px;
  max-width: 320px;
  padding-left: 14px;
  border-left: 1px solid var(--brass);
}
.spatial-note__label {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
}
.spatial-note__text {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.5;
}
.spatial-note--on-dark .spatial-note__label { color: var(--brass-soft); }
.spatial-note--on-dark .spatial-note__text  { color: var(--on-dark-soft); }

/* Section divider — Ayura brass line · diamond · line */
.section-divider {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--s-4) var(--page-pad) 0;
  display: flex; justify-content: center;
}

/* Ayura seal — house signature above key chapters (centred) */
.ayura-seal {
  display: block;
  height: 64px;
  width: auto;
  margin: 0 auto 28px;
  opacity: 0.92;
}
.ayura-seal--lg { height: 80px; }
.ayura-seal--sm { height: 48px; }


/* ═══════════════════════════════════════════════════════════════
   ATMOSPHERIC DEPTH + UNIFIED MOTION VOCABULARY
   Modern luxury depth language. Slow floating, mask reveals,
   layered shadows, refined hover lifts, brass underline grows.
   All cohesive, all token-driven, all opt-in via class names.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Motion durations — one timing language across the entire house */
  --motion-instant:    140ms;
  --motion-quick:      300ms;
  --motion-base:       600ms;
  --motion-slow:       900ms;
  --motion-cinematic:  1400ms;
  --motion-float:      12s;

  /* Motion distances + opacities */
  --motion-rise:       32px;
  --motion-rise-sm:    16px;
  --motion-rise-lg:    56px;
  --motion-fade-in:    0;
  --motion-fade-out:   1;

  /* Shadow tokens — restrained contact shadows. Cards rest on the page rather
     than floating off it. Elevation is felt, not announced. */
  --shadow-soft:       0 1px 2px rgba(20,20,20,0.04);
  --shadow-medium:     0 2px 6px -3px rgba(20,20,20,0.06);
  --shadow-lift:       0 6px 16px -12px rgba(20,20,20,0.10);
  --shadow-deep:       0 10px 24px -14px rgba(20,20,20,0.13);
}

/* ── BRAND CIPHER — a subtle house mark set into interior page openings.
   A faint watermark, behind the type, never loud. ── */
.brand-cipher {
  position: absolute;
  top: 50%; right: 5%;
  transform: translateY(-50%);
  width: clamp(150px, 17vw, 250px);
  opacity: 0.06;
  color: var(--ink);
  pointer-events: none;
  z-index: 0;
}
.brand-cipher svg { width: 100%; height: auto; display: block; }
.brand-cipher--dark { color: var(--on-dark); opacity: 0.08; }
@media (max-width: 760px) {
  .brand-cipher { right: 0; width: 130px; opacity: 0.045; }
}

/* ── DEPTH SHADOWS ── */
.depth-soft   { box-shadow: var(--shadow-soft); }
.depth-medium { box-shadow: var(--shadow-medium); }
.depth-deep   { box-shadow: var(--shadow-deep); }

/* ── FLOATING SHADOW — soft elliptical pool beneath presented objects ── */
.float-shadow {
  position: relative;
  isolation: isolate;
}
.float-shadow::after {
  content: '';
  position: absolute;
  left: 6%; right: 6%;
  bottom: -16px;
  height: 26px;
  background: radial-gradient(ellipse at center,
    rgba(20,20,20,0.12) 0%,
    rgba(20,20,20,0.03) 50%,
    transparent 75%);
  filter: blur(12px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 1200ms var(--ease-soft), transform 1200ms var(--ease-soft);
}
.float-shadow:hover::after { opacity: 0.6; transform: scale(1.02) translateY(1px); }

/* ── SLOW FLOAT — continuous gentle motion for hero/vitrine objects ── */
@keyframes slowFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
.float-motion {
  animation: slowFloat var(--motion-float) ease-in-out infinite;
}

/* ── IMAGE REVEAL — a clean rise and fade on entry. The directional
   curtain wipes read as a template effect, so every variant now resolves
   to one quiet gesture: no clip wipe, no blur, the image stays sharp. ── */
.mask-reveal {
  clip-path: none;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 1300ms var(--ease-soft),
    transform 1300ms var(--ease-soft);
  will-change: opacity, transform;
}
.mask-reveal.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.mask-reveal--left, .mask-reveal--right,
.mask-reveal--bottom, .mask-reveal--top, .mask-reveal--center { clip-path: none; }
.mask-reveal--left.is-in, .mask-reveal--right.is-in,
.mask-reveal--bottom.is-in, .mask-reveal--top.is-in, .mask-reveal--center.is-in { clip-path: none; }
.mask-reveal--slow { transition-duration: 1600ms; }

/* ── CARD LIFT — gentle hover translate + shadow ── */
.card-lift {
  transition:
    transform var(--motion-base) var(--ease-soft),
    box-shadow var(--motion-base) var(--ease-soft);
  will-change: transform;
}
.card-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

/* ── ATMOSPHERIC SURFACE — very subtle vertical light gradient ── */
.surface--atmospheric {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,255,255,0.6) 0%, transparent 60%),
    var(--ivory);
}
.surface--atmospheric-warm {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,250,240,0.5) 0%, transparent 60%),
    var(--warm-stone);
}
.surface--atmospheric-dark {
  background:
    radial-gradient(ellipse 60% 80% at 50% 0%, rgba(60,55,45,0.25) 0%, transparent 70%),
    var(--obsidian);
}

/* ── BRASS UNDERLINE FROM CENTER — modern link microinteraction ── */
.link-underline,
a.link {
  position: relative;
}
a.link::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 0;
  height: 1px;
  background: var(--brass);
  transition: width var(--motion-base) var(--ease-soft), left var(--motion-base) var(--ease-soft);
}
a.link:hover::before {
  width: 100%;
  left: 0;
}

/* ── MAGNETIC HOVER (refined) — applied via motion.js on [data-magnetic] ── */
[data-magnetic] {
  transition: transform var(--motion-base) cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* ── GLASS OVERLAY — refined backdrop for hover details ── */
.glass-overlay {
  background: rgba(247, 244, 238, 0.86);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.glass-overlay--dark {
  background: rgba(13, 14, 15, 0.78);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  color: var(--on-dark);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── REDUCED MOTION — strip atmospheric motion cleanly ── */
@media (prefers-reduced-motion: reduce) {
  .float-motion { animation: none; }
  .mask-reveal { clip-path: inset(0 0 0 0) !important; transition: none !important; }
  .card-lift { transition: none; }
  .card-lift:hover { transform: none; }
  .float-shadow::after { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════
   IMAGE EVOLUTION — Tier 1+2+3 modern luxury image vocabulary
   Aspect variation, editorial captions, differentiated hovers,
   single-product hero, refined layered diptych, vertical
   scroll-snap product gallery, faux-video texture, slow rotation
   ═══════════════════════════════════════════════════════════════ */

/* ── EDITORIAL CAPTION beneath images ──
   Small-caps brass italic, sits like a museum label */
.image-caption {
  margin-top: 14px;
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.image-caption__brass {
  color: var(--brass);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
  font-family: var(--font-serif);
  font-size: 0.875rem;
}
.image-caption__divider {
  color: var(--ink-muted);
  opacity: 0.5;
}

/* ── ASPECT VARIANTS — modern luxury sites cycle between aspects ── */
.aspect-cinema { aspect-ratio: 16 / 9; }
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-pano   { aspect-ratio: 21 / 9; }
.aspect-portrait { aspect-ratio: 4 / 5; }
.aspect-tall   { aspect-ratio: 3 / 4; }
.aspect-taller { aspect-ratio: 5 / 7; }

/* ── 21:9 FULL-BLEED PAUSE refined ── */
.bleed-21-9 {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: var(--bone);
  position: relative;
}
.bleed-21-9 > img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 1800ms var(--ease-soft);
}
.bleed-21-9:hover > img { transform: scale(1.06); }

/* ── SINGLE-PRODUCT HERO — one object the full viewport ──
   Used on the homepage featured stone and the Stones headline */
.product-hero {
  min-height: 92vh;
  padding: var(--s-6) 0 var(--s-7);
  background: var(--bone);
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}
.product-hero__stage {
  position: relative;
  width: min(640px, 64vw);
  aspect-ratio: 4 / 5;
}
.product-hero__frame {
  width: 100%; height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 2;
  outline: 1px solid var(--brass);
  outline-offset: 18px;
}
.product-hero__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 2400ms var(--ease-soft);
}
.product-hero:hover .product-hero__frame img { transform: scale(1.06); }
.product-hero__shadow {
  position: absolute;
  left: 6%; right: 6%;
  bottom: -28px;
  height: 30px;
  background: radial-gradient(ellipse at center,
    rgba(20,20,20,0.12) 0%,
    rgba(20,20,20,0.04) 50%,
    transparent 75%);
  filter: blur(13px);
  z-index: 1;
  opacity: 0;
  transition: opacity 1400ms var(--ease-soft) 600ms;
}
.product-hero.is-staged .product-hero__shadow { opacity: 1; }
.product-hero__caption {
  position: absolute;
  bottom: var(--s-4);
  left: var(--page-pad); right: var(--page-pad);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: var(--s-4);
  max-width: var(--container-max);
  margin: 0 auto;
}
.product-hero__caption-left,
.product-hero__caption-right {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.product-hero__caption-right { text-align: right; }
.product-hero__caption-center {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--brass);
}

/* ── SLOW STONE ROTATION — Tier 3 simulator of 360 view ──
   The stone frame itself rotates very slowly (perpetual breath).
   Subtle enough to read as life, never spinning. */
@keyframes stoneRotate {
  0%   { transform: rotate(-0.6deg) scale(1.02); }
  50%  { transform: rotate(0.5deg)  scale(1.04); }
  100% { transform: rotate(-0.6deg) scale(1.02); }
}
.stone-rotate {
  animation: stoneRotate 24s ease-in-out infinite;
  transform-origin: center;
}

/* ── FAUX-VIDEO TEXTURE on hover — Tier 3 simulator without video ──
   Subtle brightness + saturation breath while hovering, gives the
   sense of a slow video loop without needing a real .mp4 */
.faux-video-on-hover { overflow: hidden; }
.faux-video-on-hover img {
  transition: transform 1200ms var(--ease-soft), filter 1200ms var(--ease-soft);
}
.faux-video-on-hover:hover img {
  /* The looping faux-pan read as a template GIF effect. Stilled. */
  animation: none;
}

/* ── DIFFERENTIATED HOVER VARIANTS — per card type ── */
/* Stones: zoom + brightness lift (product cards) */
.card-hover-zoom { transition: transform var(--motion-base) var(--ease-soft); }
.card-hover-zoom:hover { transform: translateY(-2px); }
.card-hover-zoom img { transition: transform 1400ms var(--ease-soft); }
.card-hover-zoom:hover img { transform: scale(1.03); }

/* Pillars: surface shift + brass accent line slides */
.card-hover-shift {
  transition: background var(--motion-base) var(--ease-quiet), transform var(--motion-base) var(--ease-soft);
  position: relative;
  overflow: hidden;
}
.card-hover-shift::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--brass);
  transition: width var(--motion-base) var(--ease-soft);
}
.card-hover-shift:hover::after { width: 100%; }

/* Journal/articles: type-emphasis (title shifts brass on hover) */
.card-hover-type { transition: transform var(--motion-base) var(--ease-soft); }
.card-hover-type .card-hover-type__title { transition: color var(--motion-base) var(--ease-quiet); }
.card-hover-type:hover .card-hover-type__title { color: var(--brass-deep); }

/* ── REFINED DIPTYCH — Tier 2 layered composition (refined) ──
   Primary image, smaller secondary offset, ivory gutter between */
.diptych {
  position: relative;
  padding-bottom: 60px;
}
.diptych__primary {
  position: relative;
  z-index: 1;
}
.diptych__primary .diptych__frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bone);
}
.diptych__secondary {
  position: absolute;
  right: -20px;
  bottom: 0;
  width: 50%;
  z-index: 2;
}
.diptych__secondary .diptych__frame {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bone);
  outline: 8px solid var(--ivory);
}
.diptych__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 1600ms var(--ease-soft);
}
.diptych__frame:hover img { transform: scale(1.03); }

/* ── PILLAR IMAGE HEADER refined — 1:1 square (smaller than before) ── */
.pillar-image-square {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bone);
  margin-bottom: var(--s-3);
  position: relative;
}
.pillar-image-square img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 1400ms var(--ease-soft);
}
.pillar-image-square:hover img { transform: scale(1.03); }
.pillar-image-square::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 65%, rgba(13,14,15,0.10) 100%);
  pointer-events: none;
}

/* ── VERTICAL SCROLL-SNAP PRODUCT GALLERY — Tier 2 ──
   One stone per viewport, scroll-snap on the section.
   Used on The Stones page as a "walk through the room" moment. */
.product-stack {
  background: var(--bone);
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  max-height: 100vh;
  scrollbar-width: none;
}
.product-stack::-webkit-scrollbar { display: none; }
.product-stack__stop {
  scroll-snap-align: start;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-6) var(--page-pad);
  max-width: var(--container-max);
  margin: 0 auto;
}
.product-stack__frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bone);
  outline: 1px solid var(--brass);
  outline-offset: 12px;
  position: relative;
}
.product-stack__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 2400ms var(--ease-soft);
}
.product-stack__stop:hover .product-stack__frame img { transform: scale(1.04); }
.product-stack__copy {
  padding: 0 var(--s-3);
}
.product-stack__num {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--brass);
  font-size: 0.875rem;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}
.product-stack__title {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.4vw, 2.625rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 22px;
  letter-spacing: -0.005em;
}
.product-stack__title em { font-style: italic; }
.product-stack__weight {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--brass);
  margin-bottom: 22px;
}
.product-stack__body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.85;
  color: var(--ink-soft);
  max-width: 460px;
  margin-bottom: 28px;
}

/* ── PINNED TEXT vs SCROLLING IMAGE — Tier 2 ──
   Image is tall (covers multiple viewports). Text column sits
   sticky inside, reads while the image scrolls past. */
.pin-scroll {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-5);
  align-items: start;
}
.pin-scroll__text {
  position: sticky;
  top: calc(var(--s-7) + 60px);
  align-self: start;
  padding-right: var(--s-4);
}
.pin-scroll__image {
  position: relative;
  aspect-ratio: 3 / 5;
  overflow: hidden;
  background: var(--bone);
}
.pin-scroll__image img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* ── SUBTLE CURSOR-AWARE TILT for product imagery (Tier 3) ──
   Small 3D rotate based on cursor position on the frame. JS-driven.
   Hook: add data-tilt to a frame. */
[data-tilt] {
  transition: transform 600ms var(--ease-soft);
  transform-style: preserve-3d;
  will-change: transform;
}


/* ── RESPONSIVE — collapse new patterns on mobile ── */
@media (max-width: 960px) {
  .product-hero__stage { width: 86vw; }
  .product-hero__caption { grid-template-columns: 1fr; gap: var(--s-2); text-align: left; }
  .product-hero__caption-right { text-align: left; }
  .product-stack__stop { grid-template-columns: 1fr; min-height: auto; padding: var(--s-5) var(--page-pad); }
  .product-stack { scroll-snap-type: none; max-height: none; overflow: visible; }
  .product-stack__copy { padding: 0; }
  .diptych__secondary { position: relative; right: 0; width: 70%; margin-top: var(--s-2); margin-left: auto; }
  .pin-scroll { grid-template-columns: 1fr; }
  .pin-scroll__text { position: static; padding-right: 0; }
  .bleed-21-9 { aspect-ratio: 3 / 2; }
}


/* ═══════════════════════════════════════════════════════════════
   V5 — CURATOR EXPERIENCE LAYER
   Cinematic loader, custom curator cursor, day/night theme,
   cursor-tracked light, tilt-shift, font weight pulse, scroll
   pinning, view transitions. All opt-in, all reduced-motion safe.
   ═══════════════════════════════════════════════════════════════ */

/* ── CINEMATIC LOADER — Ayura mark draws itself, then page fades in ── */
.loader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity 900ms var(--ease-soft) 200ms, visibility 900ms 200ms;
}
.loader.is-gone { opacity: 0; visibility: hidden; }
.loader__mark {
  width: 80px;
  height: auto;
}
.loader__mark path,
.loader__mark line {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: drawMark 1600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.loader__mark line { animation-delay: 600ms; }
.loader__mark path:nth-of-type(7) {
  /* the diamond is a fill, fade it in instead of drawing */
  stroke-dashoffset: 0;
  animation: fadeIn 400ms ease-out 1200ms forwards;
  opacity: 0;
}
@keyframes drawMark { to { stroke-dashoffset: 0; } }
@keyframes fadeIn  { to { opacity: 1; } }

/* Loader brand line beneath */
.loader__caption {
  position: absolute;
  bottom: 18%;
  left: 0; right: 0;
  text-align: center;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.875rem;
  color: var(--brass);
  letter-spacing: 0.05em;
  opacity: 0;
  animation: fadeIn 800ms ease-out 1400ms forwards;
}

/* Body enters with the loader leaving */
body.is-loading > *:not(.loader) { opacity: 0; }
body:not(.is-loading) > *:not(.loader) {
  animation: bodyEnter 900ms var(--ease-soft) forwards;
}
@keyframes bodyEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ── CURATOR CURSOR — small brass dot with state labels ── */
.cursor-dot,
.cursor-label {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9998;
  will-change: transform;
  transition: opacity 300ms var(--ease-quiet);
}
.cursor-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brass);
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  opacity: 0.7;
}
.cursor-label {
  padding: 6px 14px;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  border: 1px solid var(--brass);
  transform: translate(-50%, calc(-100% - 18px)) scale(0.92);
  opacity: 0;
  white-space: nowrap;
  transition:
    opacity 280ms var(--ease-quiet),
    transform 380ms var(--ease-soft);
  z-index: 9999;
}
.cursor-label.is-visible {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 18px)) scale(1);
}
/* Phase 28 — the custom curator cursor is retired. It hid the native
   pointer (cursor:none) and replaced it with a faint 8px difference-blend
   dot, leaving many machines with no visible pointer. The native cursor is
   now always used. The dot/label styles below are kept but never rendered
   (setupCuratorCursor is no longer booted); hidden defensively so a stray
   node could never reappear or steal the pointer. */
.cursor-dot, .cursor-label { display: none !important; }


/* ── DAY / NIGHT THEME ── */
.theme-toggle {
  position: relative;
  width: 44px; height: 24px;
  border: 1px solid var(--brass);
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  margin-right: 16px;
  transition: background var(--motion-base) var(--ease-quiet);
}
.theme-toggle__dot {
  position: absolute;
  top: 50%; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--brass);
  transform: translateY(-50%);
  transition: left var(--motion-base) var(--ease-soft), background var(--motion-base) var(--ease-quiet);
}
.theme-toggle[aria-pressed="true"] .theme-toggle__dot { left: calc(100% - 19px); }

/* Night theme inverts the room. Activated by attribute on <html>. */
html[data-theme="night"] {
  --ivory:       #0E1411;
  --warm-stone:  #141B17;
  --bone:        #1C2620;
  --ink:         #F5F3ED;
  --ink-soft:    #C6C9C2;
  --ink-muted:   #8C918A;
  --line:        rgba(245, 243, 237, 0.10);
  --line-strong: rgba(245, 243, 237, 0.18);
  --obsidian:    #F5F3ED;
  --ink-lift:    #2A3830;
  --on-dark:     #15201B;
  --on-dark-soft: rgba(21, 32, 27, 0.65);
  --on-dark-mute: rgba(21, 32, 27, 0.35);
}
html[data-theme="night"] body { background: #0D0E0F; }
html[data-theme="night"] .nav--solid,
html[data-theme="night"] .nav--solid-default {
  background: rgba(13, 14, 15, 0.92);
}
html[data-theme="night"] img { filter: none; }
html { transition: background var(--motion-base) var(--ease-quiet); }
html, html * { transition-property: background-color, color, border-color, fill, stroke; transition-duration: var(--motion-base); transition-timing-function: var(--ease-quiet); }


/* ── CURSOR-TRACKED LIGHT — spotlight on dark surfaces ── */
.cursor-light {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Retired — a gold glow that followed the pointer. Removed as a cheap cue. */
.cursor-light::before { display: none; }
@media (hover: none), (prefers-reduced-motion: reduce) {
  .cursor-light::before { display: none; }
}


/* ── TILT-SHIFT removed — the top/bottom mask fade read as a muddy,
   dated effect that softened the stones. Images now sit clean and sharp. ── */
.tilt-shift {
  mask-image: none;
  -webkit-mask-image: none;
}


/* ── HERO TITLE FONT WEIGHT PULSE — Cormorant breathing ── */
@keyframes weightPulse {
  0%, 100% { font-variation-settings: "wght" 300; }
  50%      { font-variation-settings: "wght" 360; }
}
.font-pulse {
  animation: weightPulse 6.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .font-pulse { animation: none; }
}


/* ── SCROLL-PINNED MOVEMENTS — sticky positioning for Bespoke ── */
.movements--pinned .movements__grid {
  display: block;
}
.movements--pinned .movement {
  min-height: 80vh;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-5) 0;
}
.movements--pinned .movement__image {
  position: sticky;
  top: 14vh;
  aspect-ratio: 4 / 5;
  max-height: 72vh;
  align-self: start;
}
.movements--pinned .movement__num,
.movements--pinned .movement__title,
.movements--pinned .movement__body,
.movements--pinned .movement .tag-triplet {
  padding-left: var(--s-3);
}
@media (max-width: 960px) {
  .movements--pinned .movement {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .movements--pinned .movement__image {
    position: relative;
    top: auto;
  }
}


/* ── VIEW TRANSITIONS — declarative cross-page morphs ── */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 420ms; /* Phase 27 — quieter, snappier cross-page fade */
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.vt-vitrine { view-transition-name: vitrine-stone; }
.vt-headline { view-transition-name: headline-stone; }
.vt-nav { view-transition-name: nav-bar; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════
   PHASE 25 — MODERN MAISON COMPONENTS
   Trust band, Provenance card, Viewing Room, Stone-to-Setting.
   First-class product-trust vocabulary across the site.
   ═══════════════════════════════════════════════════════════════ */

/* ── TRUST BAND SLIM — hairline strip of trust signals ── */
.trust-band-slim {
  background: var(--warm-stone);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s-4) 0;
}
.trust-band-slim__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
.trust-band-slim__col {
  padding: 0 var(--s-3);
  border-left: 1px solid var(--line);
}
.trust-band-slim__col:first-child {
  border-left: 0;
  padding-left: 0;
}
.trust-band-slim__label {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
  margin-bottom: 10px;
}
.trust-band-slim__value {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--ink);
  line-height: 1.3;
}

/* ── PROVENANCE CARD — first-class component for every stone ── */
.provenance-card {
  background: var(--ivory);
  padding: var(--s-4);
  border-left: 1px solid var(--brass);
  display: flex; flex-direction: column;
  gap: 14px;
}
.provenance-card__row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.provenance-card__row:last-of-type { border-bottom: 0; }
.provenance-card__label {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.provenance-card__value {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--ink);
}
.provenance-card__note {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.provenance-card__action {
  margin-top: 18px;
}

/* Horizontal compact variant — under tiles */
.provenance-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.provenance-strip__brass {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 0.9375rem;
  color: var(--brass);
}
.provenance-strip__sep { opacity: 0.5; }


/* ── VIEWING ROOM — vitrine + provenance card together ── */
.viewing-room {
  padding: var(--s-8) 0; /* Phase 27 rhythm — the featured stone is the homepage peak; open it up */
  background: var(--bone);
  position: relative;
}
.viewing-room__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--s-5);
  align-items: center;
}
.viewing-room__stage {
  position: relative;
}
.viewing-room__frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bone);
  outline: 1px solid var(--brass);
  outline-offset: 16px;
  position: relative;
}
.viewing-room__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 2200ms var(--ease-soft);
}
.viewing-room__stage:hover .viewing-room__frame img { transform: scale(1.06); }
.viewing-room__shadow {
  position: absolute;
  left: 10%; right: 10%;
  bottom: -22px;
  height: 26px;
  background: radial-gradient(ellipse at center,
    rgba(20,20,20,0.10) 0%,
    rgba(20,20,20,0.03) 50%,
    transparent 75%);
  filter: blur(12px);
  z-index: -1;
  pointer-events: none;
}
.viewing-room__copy {
  padding-left: var(--s-3);
}
.viewing-room__chapter { margin-bottom: 24px; }
.viewing-room__title {
  font-family: var(--font-serif);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.008em;
  color: var(--ink);
  margin-bottom: var(--s-3);
}
.viewing-room__title em { font-style: italic; }


/* ── STONE-TO-SETTING DIPTYCH — bespoke transformation in two images ── */
.stone-to-setting {
  padding: var(--s-6) 0; /* Phase 27 rhythm — compress the secondary diptych so the featured stone reads as the peak */
  background: var(--ivory);
}
.stone-to-setting__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
.stone-to-setting__header {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-5);
  align-items: end;
  margin-bottom: var(--s-5);
}
.stone-to-setting__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--ink);
}
.stone-to-setting__title em { font-style: italic; }
.stone-to-setting__intro {
  max-width: 480px;
  color: var(--ink-soft);
}
.stone-to-setting__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  align-items: center;
}
.stone-to-setting__frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bone);
  position: relative;
}
.stone-to-setting__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.03);
  transition: transform 1400ms var(--ease-soft);
}
.stone-to-setting__frame:hover img { transform: scale(1.06); }
.stone-to-setting__label {
  position: absolute;
  top: 18px; left: 18px;
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ivory);
  background: rgba(13, 14, 15, 0.85);
  padding: 8px 12px;
  z-index: 2;
}
.stone-to-setting__arrow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 56px; height: 56px;
  background: var(--ivory);
  border: 1px solid var(--brass);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--brass);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  pointer-events: none;
}
.stone-to-setting__caption {
  margin-top: var(--s-3);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--ink-soft);
  text-align: center;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.55;
}


/* ── RESPONSIVE for Phase 25 primitives ── */
@media (max-width: 960px) {
  .trust-band-slim__inner { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .trust-band-slim__col { border-left: 0; padding-left: 0; }
  .trust-band-slim__col:nth-child(odd) { border-right: 1px solid var(--line); padding-right: var(--s-3); }
  .viewing-room__inner { grid-template-columns: 1fr; gap: var(--s-4); }
  .viewing-room__copy { padding-left: 0; }
  .stone-to-setting__header { grid-template-columns: 1fr; gap: var(--s-3); align-items: start; }
  .stone-to-setting__pair { grid-template-columns: 1fr; gap: var(--s-3); }
  .stone-to-setting__arrow { display: none; }
}


/* ───────────────────────────────────────────────────────────────
   RESPONSIVE
   ─────────────────────────────────────────────────────────────── */

@media (max-width: 960px) {
  .nav__links, .nav__cta { display: none; }
  .nav__hamburger { display: block; }
  .split--5-7, .split--7-5, .split--4-8, .split--8-4, .split--1-1 {
    grid-template-columns: 1fr;
    gap: var(--s-4);
  }
  .page-intro__inner { grid-template-columns: 1fr; align-items: start; }
  .footer__main { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .footer__legal { flex-wrap: wrap; gap: 16px; }
}

@media (max-width: 600px) {
  .section          { padding: var(--s-5) 0; }
  .section--spacious{ padding: var(--s-6) 0; }
  .section--grand   { padding: var(--s-6) 0; }
  .footer__main { grid-template-columns: 1fr; gap: var(--s-4); }
  .page-intro { padding: calc(var(--s-6) + 56px) 0 var(--s-5); }
  /* Phase 27 — the rhythm peak/compress is a desktop cadence; even it out on small screens */
  .viewing-room    { padding: var(--s-6) 0; }
  .stone-to-setting{ padding: var(--s-5) 0; }
}

/* ═══════════════════════════════════════════════════════════════
   ENQUIRY DRAWER — Phase 27 · contextual side panel (Attended Salon)
   The conversion spine. Summoned by [data-enquiry] triggers; never
   auto-opened. The page dims and blurs behind it so the visitor is
   received in context rather than redirected away.
   ═══════════════════════════════════════════════════════════════ */

.enquiry-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(13, 14, 15, 0.42);
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms var(--ease-quiet), visibility 300ms var(--ease-quiet);
}
.enquiry-backdrop.is-open { opacity: 1; visibility: visible; }

.enquiry-drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1401;
  height: 100%;
  width: clamp(320px, 33vw, 488px);
  max-width: 100%;
  background: var(--ivory);
  border-left: 1px solid var(--brass-soft, #D8C9A4);
  box-shadow: -40px 0 80px -40px rgba(13, 14, 15, 0.4);
  transform: translateX(100%);
  transition: transform 360ms var(--ease-soft);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}
.enquiry-drawer.is-open { transform: translateX(0); }

.enquiry-drawer__inner { padding: clamp(28px, 4vw, 48px); flex: 1 0 auto; }

.enquiry-drawer__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--s-3);
}
.enquiry-drawer__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass);
}
.enquiry-drawer__close {
  appearance: none;
  background: none;
  border: 1px solid var(--line, #E0D9CB);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  flex: none;
  transition: border-color 300ms var(--ease-quiet), color 300ms var(--ease-quiet), transform 300ms var(--ease-soft);
}
.enquiry-drawer__close:hover { border-color: var(--brass); color: var(--brass); transform: rotate(90deg); }

.enquiry-drawer__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 10px;
}
.enquiry-drawer__title em { font-style: italic; }
.enquiry-drawer__lead {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: var(--s-3);
}

/* context block — provenance summary of the stone that summoned the drawer */
.enquiry-drawer__context {
  border: 1px solid var(--line, #E0D9CB);
  background: var(--bone);
  padding: 16px 18px;
  margin-bottom: var(--s-3);
}
.enquiry-drawer__context-label {
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
  margin-bottom: 6px;
}
.enquiry-drawer__context-stone {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 4px;
}
.enquiry-drawer__context-meta {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
}

.enquiry-drawer .field { margin-bottom: 18px; }
.enquiry-drawer__submit { margin-top: var(--s-3); }
.enquiry-drawer__submit .btn { width: 100%; text-align: center; justify-content: center; }

.enquiry-drawer__note {
  margin-top: var(--s-3);
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  line-height: 1.7;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

.enquiry-drawer__confirm {
  display: none;
  text-align: center;
  padding: var(--s-4) 0;
}
.enquiry-drawer__confirm.is-visible { display: block; }
.enquiry-drawer__confirm-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.375rem;
  color: var(--ink);
  margin-bottom: 12px;
}
.enquiry-drawer__confirm-body {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 32ch;
  margin: 0 auto;
}

/* staged content settle on open */
.enquiry-drawer__inner > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms var(--ease-soft), transform 500ms var(--ease-soft);
}
.enquiry-drawer.is-open .enquiry-drawer__inner > * { opacity: 1; transform: none; }
.enquiry-drawer.is-open .enquiry-drawer__inner > *:nth-child(2) { transition-delay: 60ms; }
.enquiry-drawer.is-open .enquiry-drawer__inner > *:nth-child(3) { transition-delay: 110ms; }
.enquiry-drawer.is-open .enquiry-drawer__inner > *:nth-child(n+4) { transition-delay: 150ms; }

/* persistent discreet summon — a quiet brass hairline tab, desktop only */
.enquiry-tab {
  position: fixed;
  right: 0;
  bottom: clamp(40px, 12vh, 120px);
  z-index: 1390;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  background: var(--ivory);
  border: 1px solid var(--brass-soft, #D8C9A4);
  border-right: none;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: -12px 0 30px -18px rgba(13, 14, 15, 0.35);
  transition: padding-right 360ms var(--ease-soft), color 300ms var(--ease-quiet), background 300ms var(--ease-quiet);
}
.enquiry-tab::before { content: ''; width: 6px; height: 6px; background: var(--brass); border-radius: 50%; }
.enquiry-tab:hover { padding-right: 24px; color: var(--brass); }
@media (hover: hover) and (min-width: 961px) { .enquiry-tab { display: inline-flex; } }

body.drawer-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .enquiry-drawer { transition: none; }
  .enquiry-backdrop { transition: none; }
  .enquiry-drawer__close { transition: none; }
  .enquiry-drawer__inner > * { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 600px) {
  .enquiry-drawer { width: 100%; border-left: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY — Phase 27
   Keyboard focus visibility and a skip link. Pointer users see no
   change; keyboard users get a clear brass focus ring and a way to
   bypass the navigation.
   ═══════════════════════════════════════════════════════════════ */

/* Visible focus ring for keyboard users only (not on mouse click). */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.field__input:focus-visible,
.field__select:focus-visible,
.field__textarea:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: 1px;
}
/* Suppress the legacy field outline:none for keyboard users so fields
   also show a ring; mouse focus still uses the brass underline only. */
.field__input:focus-visible,
.field__select:focus-visible,
.field__textarea:focus-visible { outline-offset: 2px; }

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 2000;
  transform: translateY(-150%);
  background: var(--obsidian);
  color: var(--ivory);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  padding: 12px 18px;
  border: 1px solid var(--brass);
  text-decoration: none;
  transition: transform 220ms var(--ease-soft);
}
.skip-link:focus { transform: translateY(0); outline: none; }

/* Phase 27 fix — the drawer, backdrop, enquiry tab and skip link are
   injected as direct children of <body>, so the page-entry sweep
   (body:not(.is-loading) > *) would run bodyEnter on them and force
   their opacity to 1 and transform to identity, defeating their hide
   styles (the closed drawer would otherwise sit on-canvas). Opt them
   out so their own positioning holds. */
.enquiry-backdrop,
.enquiry-drawer,
.enquiry-tab,
.skip-link { animation: none !important; }

/* Belt-and-suspenders: keep the closed drawer non-visible and inert even
   if a transform is ever neutralised again. */
.enquiry-drawer {
  visibility: hidden;
  transition: transform 360ms var(--ease-soft), visibility 0s linear 360ms;
}
.enquiry-drawer.is-open {
  visibility: visible;
  transition: transform 360ms var(--ease-soft), visibility 0s linear 0s;
}

/* ════════════════════════════════════════════════════════════════
   CHAMBER HERO — interior dark threshold band.
   Echoes the homepage Threshold doors: you walk through the door
   into the room. One full-bleed dark image, a short serif line,
   then the page resolves into its light editorial body.
   ════════════════════════════════════════════════════════════════ */
.chamber-hero{ position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; background:var(--obsidian); }
.chamber-hero__media{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.chamber-hero__media img{ width:100%; height:100%; object-fit:cover; transform:scale(1.05); }
/* No filter on the image — original photography. Only a soft scrim at the
   very bottom so the room label stays legible. */
.chamber-hero__veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(14,20,17,0.55) 0%, rgba(14,20,17,0.12) 22%, transparent 46%); }
.chamber-hero__inner{ position:relative; z-index:2; width:100%; max-width:var(--container-max); margin:0 auto;
  padding:0 var(--page-pad) clamp(54px,9vh,112px); }
.chamber-hero__eyebrow{ display:block; margin-bottom:16px; font-family:var(--font-sans); font-size:0.64rem; letter-spacing:0.36em; text-transform:uppercase; color:var(--brass-soft); }
.chamber-hero__line{ margin:0; color:var(--ivory); font-family:var(--font-serif); font-weight:400; font-size:clamp(1.9rem,4.4vw,3.3rem); line-height:1.1; max-width:20ch; }
.chamber-hero__line em{ font-style:italic; }
.chamber-hero__scroll{ position:absolute; left:calc(50% - 0.5px); bottom:24px; z-index:3; width:1px; height:42px; background:linear-gradient(180deg, rgba(172,146,89,0.9), transparent); }
@media (prefers-reduced-motion: no-preference){
  .chamber-hero__media img{ animation: chamberDrift 32s ease-in-out infinite alternate; }
  .chamber-hero__scroll{ animation: chamberPulse 2.8s ease-in-out infinite; }
}
@keyframes chamberDrift{ from{ transform:scale(1.05) } to{ transform:scale(1.12) } }
@keyframes chamberPulse{ 0%,100%{ opacity:0.3 } 50%{ opacity:1 } }
@media (max-width: 700px){ .chamber-hero{ min-height:88svh; } }

/* ════════════════════════════════════════════════════════════════
   INTERIOR PAGE INTROS — elevated title-page scale (Phase 31).
   After the dark chamber hero, the light intro now reads as a
   confident title page: larger display type, more held spacing.
   Scoped to .page-intro so homepage title-sets are untouched.
   ════════════════════════════════════════════════════════════════ */
.page-intro { padding-bottom: var(--s-7); }
.page-intro__inner { gap: var(--s-6); }
.page-intro .title-set { gap: 10px; }
.page-intro .title-set__lead { font-size: clamp(1.6rem, 2.9vw, 2.4rem); line-height: 1.18; }
.page-intro .title-set__conclusion { font-size: clamp(2.7rem, 5.4vw, 4.5rem); line-height: 1.0; }
.page-intro__lead { max-width: 560px; font-size: clamp(1.06rem, 1.5vw, 1.3rem); line-height: 1.62; }
@media (max-width: 700px){
  .page-intro__inner { gap: var(--s-3); }
  .page-intro .title-set__conclusion { font-size: clamp(2.5rem, 11vw, 3.4rem); }
}

/* Chamber hero — room label only (Phase 31 redundancy edit).
   The chamber names the room; the page intro owns the headline. */
.chamber-hero__label{ text-shadow:0 1px 16px rgba(0,0,0,0.55); display:inline-flex; align-items:center; gap:16px;
  font-family:var(--font-sans); font-size:0.72rem; letter-spacing:0.42em; text-transform:uppercase;
  color:var(--ivory); }
.chamber-hero__label::before{ content:""; width:30px; height:1px; background:var(--brass-soft); display:inline-block; }

/* ════════════════════════════════════════════════════════════════
   ENQUIRY DRAWER — dark mode. Obsidian surface, light fields.
   Scoped to .enquiry-drawer so the Appointments page form stays light.
   ════════════════════════════════════════════════════════════════ */
.enquiry-drawer {
  background: var(--obsidian);
  border-left: 1px solid rgba(245,243,237,0.14);
  box-shadow: -40px 0 90px -40px rgba(0,0,0,0.6);
}
.enquiry-drawer__eyebrow { color: var(--brass-soft); }
.enquiry-drawer__close { border-color: rgba(245,243,237,0.24); color: var(--on-dark-soft); }
.enquiry-drawer__close:hover { border-color: var(--brass-soft); color: var(--brass-soft); }
.enquiry-drawer__title { color: var(--on-dark); }
.enquiry-drawer__lead { color: var(--on-dark-soft); }
.enquiry-drawer__context { background: rgba(245,243,237,0.05); border-color: rgba(245,243,237,0.12); }
.enquiry-drawer__context-label { color: var(--brass-soft); }
.enquiry-drawer__context-stone { color: var(--on-dark); }
.enquiry-drawer__context-meta { color: var(--on-dark-soft); }
.enquiry-drawer__note { color: var(--on-dark-mute); }
.enquiry-drawer__confirm-title { color: var(--on-dark); }
.enquiry-drawer__confirm-body { color: var(--on-dark-soft); }
.enquiry-drawer .field__label { color: var(--on-dark-mute); }
.enquiry-drawer .field__input,
.enquiry-drawer .field__select,
.enquiry-drawer .field__textarea { color: var(--on-dark); border-bottom-color: rgba(245,243,237,0.22); }
.enquiry-drawer .field__input::placeholder,
.enquiry-drawer .field__textarea::placeholder { color: var(--on-dark-mute); }
.enquiry-drawer .field__input:focus,
.enquiry-drawer .field__select:focus,
.enquiry-drawer .field__textarea:focus { border-bottom-color: var(--brass-soft); }
.enquiry-drawer .field__select { background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23BFA468' fill='none' stroke-width='1'/%3E%3C/svg%3E"); }
.enquiry-drawer .field__select option { color: #141414; }
.enquiry-drawer__submit .btn { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.enquiry-drawer__submit .btn:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); }

/* ════════════════════════════════════════════════════════════════
   HOMEPAGE — section-to-section snap scrolling (The Threshold).
   Native CSS scroll-snap; Lenis is disabled on the homepage so this
   can take over (see index.html). Proximity, so the short proof /
   signature sections still scroll freely between snap points.
   ════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  html:has(.page-home) { scroll-snap-type: y proximity; scroll-padding-top: 0; }
  .page-home .threshold-approach,
  .page-home .door,
  .page-home .home-appointment { scroll-snap-align: start; scroll-snap-stop: normal; }
}