/* ==========================================================================
   Maison Élanor — The Art of Quiet Fragrance
   --------------------------------------------------------------------------
    1. Fonts            6. Glass material
    2. Tokens           7. Motion primitives
    3. Reset & base     8. Hero
    4. Layout system    9. Sections
    5. Shell & chrome  10. Responsive / reduced motion
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */

/* Bodoni Moda carries a true optical-size axis (6–96), so the hairlines thin
   as the display type grows and thicken again at note size. `font-optical-sizing`
   drives that from the font-size, which is why no size sets it by hand. */
@font-face {
  font-family: 'Bodoni Moda';
  src: url('/fonts/bodoni-moda-latin.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/fonts/schibsted-grotesk-latin.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}

/* 2. Tokens --------------------------------------------------------------- */

@property --h { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  /* Ground */
  --ivory: #F4F0E8;
  --porcelain: #E8E3DB;
  --ink: #171614;
  --gold: #B89A68;

  --ink-soft: rgba(23, 22, 20, 0.76);
  --ink-quiet: rgba(23, 22, 20, 0.66);
  --rule: rgba(23, 22, 20, 0.14);
  --rule-soft: rgba(23, 22, 20, 0.09);
  --gold-rule: rgba(184, 154, 104, 0.6);

  --serif: 'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif;
  --sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, 'Helvetica Neue', Arial, sans-serif;

  /* Type. Tracking is size-specific: display tightens, small caps open up. */
  --t-display: clamp(3.1rem, 11.4vw, 10rem);
  --t-statement: clamp(2.35rem, 5.5vw, 4.9rem);
  --t-title: clamp(2.15rem, 4.5vw, 3.9rem);
  --t-name: clamp(2.15rem, 3.2vw, 3.1rem);
  --t-lede: clamp(1.22rem, 1.5vw, 1.55rem);
  --t-body: clamp(1.0625rem, 0.95vw, 1.15rem);
  --t-nav: 0.9375rem;    /* 15px — was 12px and too small to read */
  --t-label: 0.8125rem;  /* 13px */
  --t-caption: 0.875rem; /* 14px */

  /* One grid for the whole page, so every left and right edge agrees. */
  --page-max: 1600px;
  --gutter: clamp(22px, 5.2vw, 92px);
  --gutter-l: calc(var(--gutter) + env(safe-area-inset-left, 0px));
  --gutter-r: calc(var(--gutter) + env(safe-area-inset-right, 0px));
  --col-gap: clamp(16px, 1.8vw, 32px);

  --section-y: clamp(88px, 11vh, 160px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-glass: cubic-bezier(0.32, 0.72, 0, 1);

  /* Glass */
  --glass-light: rgba(246, 243, 236, 0.5);
  --glass-blur: 14px;
  --glass-sat: 1.7;

  --shell-h: 100svh;
  --hero-screens: 4.2;
}

/* 3. Reset & base --------------------------------------------------------- */

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

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--ivory);
}

body {
  position: fixed;
  inset: 0;
  width: 100%;
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.66;
  color: var(--ink-soft);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, dl, dd, dt, figure, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
::selection { background: rgba(184, 154, 104, 0.28); }

/* 4. Layout system -------------------------------------------------------- */

/* Every band of content resolves to the same measure and the same insets —
   full-bleed backgrounds live on the section, width lives here. */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter-l) var(--gutter-r);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
}

/* Sections hold the screen, with their content optically centred in it. */
.section {
  display: flex;
  align-items: center;
  min-height: var(--shell-h);
  padding-block: var(--section-y);
}

/* 5. Shell & chrome ------------------------------------------------------- */

.app-shell { position: fixed; inset: 0; overflow: hidden; background: var(--ivory); }

.app-scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
}

.app-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.app-shell[data-locked='true'] .app-scroll { overflow: hidden; }
main { display: block; }

/* Loader */
.loader {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--ivory);
  transition: opacity 900ms var(--ease-glass);
}
.loader[data-done='true'] { opacity: 0; pointer-events: none; }
.loader__inner { display: grid; justify-items: center; gap: 30px; padding: 0 24px; }
.loader__crest { width: 62px; height: auto; opacity: 0; animation: fade-in 1400ms var(--ease-out-expo) 120ms forwards; }
.loader__word {
  font-size: var(--t-label);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-right: -0.32em;
  opacity: 0;
  animation: fade-in 1400ms var(--ease-out-expo) 320ms forwards;
}
.loader__rule { width: min(190px, 46vw); height: 1px; background: var(--rule-soft); overflow: hidden; }
.loader__rule-fill { display: block; width: 0%; height: 100%; background: var(--gold); transition: width 420ms var(--ease-out-quart); }
@keyframes fade-in { to { opacity: 1; } }

/* Reading progress */
.progress { position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 60; pointer-events: none; }
.progress__fill { display: block; height: 100%; width: 100%; background: var(--gold-rule); transform: scaleX(0); transform-origin: left; }

/* 6. Glass material ------------------------------------------------------- */

/*
  Real refractive glass, not a painted translucent bar. canvasui.dev's Glass
  needs WebGL html-in-canvas (`drawElementImage`), which iPhone Safari has no
  path to, so the same optical cues — refraction, a Fresnel-bright top bevel,
  a frosted blur — are built from CSS + an SVG filter instead. `feTurbulence`
  feeding `feDisplacementMap` bends the backdrop the way an imperfect pane of
  glass bends light through it, which `backdrop-filter: blur()` alone cannot
  do: blur softens the page behind the glass, but a flat blur never looks like
  looking *through* something. The two are combined here so the page beneath
  the HUD visibly ripples as it passes under the material.

  Declared twice per property, plain filter first: an engine that can't parse
  the `url(#glass-distortion)` term drops that whole declaration as invalid and
  keeps the earlier one, so unsupported browsers still get blur — never a flat
  unglassed bar. Every property below is `transform`/`opacity`/filter, so the
  arrival is a materialize-in (blur ramping with it), not a plain fade.
*/
.hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 50;
  color: var(--ink);
}

.hud__glass {
  position: absolute;
  inset: 0;
  background-color: var(--glass-light);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: url(#glass-distortion) blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter: url(#glass-distortion) blur(var(--glass-blur)) saturate(var(--glass-sat));
  opacity: 0;
  transform: translateY(-14px) scale(1.015);
  filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0.45) 82%, transparent);
  mask-image: linear-gradient(to bottom, #000 58%, rgba(0, 0, 0, 0.45) 82%, transparent);
  transition: opacity 900ms var(--ease-glass), transform 900ms var(--ease-glass), filter 900ms var(--ease-glass);
}

/* The Fresnel edge: brightest where light grazes the top of the pane. */
.hud__glass::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 40%);
  mix-blend-mode: overlay;
}

/* A fine bright rule along the true top edge, as if the pane were bevel-cut. */
.hud__glass::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(
    to right, transparent, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.9) 80%, transparent);
}

.hud[data-glass='true'] .hud__glass { opacity: 1; transform: none; filter: blur(0); }
.hud[data-hidden='true'] { opacity: 0; pointer-events: none; }

.hud__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: calc(var(--safe-t) + clamp(16px, 2.1vh, 26px)) clamp(15px, 2vh, 24px);
}

/* Vibrancy: type over a translucent surface needs a touch more weight and
   tracking than it would on a solid ground. */
.hud__word {
  font-size: var(--t-nav);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-right: -0.24em;
  white-space: nowrap;
  padding: 8px 0;
}

.hud__nav { display: flex; gap: clamp(22px, 2.4vw, 44px); }

.hud__nav a {
  --h: 0;
  position: relative;
  font-size: var(--t-nav);
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 8px 0;
  opacity: calc(0.66 + var(--h) * 0.34);
  transition: --h 620ms var(--ease-out-expo), opacity 620ms var(--ease-out-expo);
}

.hud__nav a > span { display: block; }

.hud__nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(var(--h));
  transform-origin: left;
  transition: transform 620ms var(--ease-out-expo);
}

@media (hover: hover) { .hud__nav a:hover { --h: 1; } }

.hud__nav a[data-current='true'] { --h: 1; opacity: 1; }
.hud__nav a[data-current='true']::after { background: var(--gold); }

.hud__index {
  display: none;
  font-size: var(--t-nav);
  font-weight: 500;
  letter-spacing: 0.1em;
  padding: 8px 0;
}

/* Mobile index — the same material, arriving as a surface rather than a fade */
.index { position: absolute; inset: 0; z-index: 70; display: flex; align-items: center; }
.index[hidden] { display: none; }

.index__glass {
  position: absolute;
  inset: 0;
  background-color: rgba(244, 240, 232, 0.72);
  backdrop-filter: blur(32px) saturate(1.5);
  -webkit-backdrop-filter: blur(32px) saturate(1.5);
  backdrop-filter: url(#glass-distortion) blur(32px) saturate(1.5);
  -webkit-backdrop-filter: url(#glass-distortion) blur(32px) saturate(1.5);
  opacity: 0;
  transform: scale(1.04);
  filter: blur(8px);
  transition: opacity 620ms var(--ease-glass), transform 900ms var(--ease-glass), filter 900ms var(--ease-glass);
}

.index__glass::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 30%);
  mix-blend-mode: overlay;
}

.index[data-open='true'] .index__glass { opacity: 1; transform: none; filter: blur(0); }
.index__inner { position: relative; }

.index__nav { display: grid; }

.index__nav a {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.6rem, 12vw, 4.2rem);
  line-height: 1.2;
  color: var(--ink);
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
  overflow: hidden;
}

.index__nav a > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1000ms var(--ease-out-expo);
}

.index[data-open='true'] .index__nav a > span { transform: none; }
.index__nav a:nth-child(1) > span { transition-delay: 90ms; }
.index__nav a:nth-child(2) > span { transition-delay: 160ms; }
.index__nav a:nth-child(3) > span { transition-delay: 230ms; }
.index__nav a:nth-child(4) > span { transition-delay: 300ms; }

.index__crest { width: 46px; margin-top: 42px; opacity: 0; transition: opacity 800ms var(--ease-glass) 420ms; }
.index[data-open='true'] .index__crest { opacity: 0.9; }

.index__close {
  position: absolute;
  top: calc(var(--safe-t) + clamp(16px, 2.1vh, 26px));
  right: var(--gutter-r);
  z-index: 2;
  font-size: var(--t-nav);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--ink);
  padding: 8px 0 8px 14px;
}

.glass-chip {
  position: relative;
  background: rgba(246, 243, 236, 0.6);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: url(#glass-distortion-tight) blur(14px) saturate(1.6);
  -webkit-backdrop-filter: url(#glass-distortion-tight) blur(14px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  color: var(--ink);
  overflow: hidden;
}

.glass-chip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* 7. Motion primitives ---------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 1000ms var(--ease-out-expo) var(--d, 0ms),
    transform 1200ms var(--ease-out-expo) var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Headings rise out of their own baseline, word by word. */
[data-words] .w {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  padding: 0.12em 0 0.2em;
  margin: -0.12em 0 -0.2em;
}

[data-words] .wi {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1250ms var(--ease-out-expo) var(--wd, 0ms);
}

[data-words].is-in .wi { transform: none; }

/* Media arrives as a wipe with the image settling out of a slow push-in — the
   signature entrance for every photograph and the product bottles alike, so
   images read as a deliberate, singular move rather than a generic fade.
   Two shapes of markup use it: a wrapper div holding an `<img>`/`<video>`
   (clip-path on the wrapper, the push-in scale on the child), and a bare
   `<img data-media>` with no wrapper, which needs both on itself. */
[data-media] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1500ms var(--ease-out-expo) var(--d, 60ms);
}
[data-media].is-in { clip-path: inset(0 0 0% 0); }

[data-media] > img,
[data-media] > video {
  transform: scale(1.1);
  transition: transform 2000ms var(--ease-out-expo) var(--d, 60ms);
}
[data-media].is-in > img,
[data-media].is-in > video { transform: none; }

img[data-media],
video[data-media] {
  transform: scale(1.1);
  transition:
    clip-path 1500ms var(--ease-out-expo) var(--d, 60ms),
    transform 2000ms var(--ease-out-expo) var(--d, 60ms);
}
img[data-media].is-in,
video[data-media].is-in { transform: none; }

/* 8. Hero ----------------------------------------------------------------- */

.hero { position: relative; height: calc(var(--shell-h) * var(--hero-screens)); }

.hero__stage {
  position: sticky;
  top: 0;
  height: var(--shell-h);
  overflow: hidden;
  background: var(--ivory);
}

.hero__canvas, .hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__poster { z-index: 0; }
.hero__canvas { z-index: 1; opacity: 0; transition: opacity 800ms var(--ease-glass); }
.hero__canvas[data-ready='true'] { opacity: 1; }

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(244, 240, 232, 0.34), rgba(244, 240, 232, 0) 20%),
    linear-gradient(to top, rgba(244, 240, 232, 0.5), rgba(244, 240, 232, 0) 30%);
}

.hero__stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: var(--ivory);
  opacity: var(--hero-dissolve, 0);
}

.hero__acts { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

.hero__act { position: absolute; left: 0; right: 0; opacity: 0; }
.hero__act--title { bottom: calc(var(--safe-b) + clamp(72px, 12vh, 132px)); }
.hero__act--line { top: 50%; transform: translateY(-50%); }

.hero__word {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 0.94;
  letter-spacing: -0.028em;
  color: var(--ink);
}

.hero__tagline {
  margin-top: clamp(16px, 2vh, 24px);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-right: -0.26em;
}

.hero__statement {
  font-family: var(--serif);
  font-size: var(--t-statement);
  line-height: 1.16;
  letter-spacing: -0.022em;
  color: var(--ink);
  max-width: 22ch;
  margin-inline: auto;
  text-align: center;
}

.hero__cue {
  position: absolute;
  z-index: 3;
  right: var(--gutter-r);
  bottom: calc(var(--safe-b) + 26px);
  display: grid;
  justify-items: center;
  gap: 10px;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.hero__cue span:first-child { margin-right: -0.22em; }
.hero__cue-rule { width: 1px; height: 36px; background: linear-gradient(to bottom, var(--ink-quiet), rgba(23, 22, 20, 0)); }

/* 9. Sections ------------------------------------------------------------- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-quiet);
}

.eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--gold); flex: none; }

.section-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-title);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--ink);
}

/* Opening · Heart · Trace — the hairline above each movement steps down in
   weight, so the block fades as the fragrance does. */
.notes__group { padding: 15px 0 17px; border-top: 1px solid var(--gold-rule); }
.notes__group:nth-child(2) { border-top-color: rgba(184, 154, 104, 0.34); }
.notes__group:nth-child(3) { border-top-color: rgba(184, 154, 104, 0.17); }

.notes dt {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-bottom: 8px;
  margin-right: -0.16em;
}

.notes dd {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.35vw, 1.38rem);
  line-height: 1.34;
  color: var(--ink);
}

.notes--row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(20px, 3vw, 52px); }

/* 9a. Introduction */
.intro__eyebrow { grid-column: 1 / -1; margin-bottom: clamp(28px, 4vh, 54px); }
.intro__statement {
  grid-column: 1 / span 6;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-statement);
  line-height: 1.04;
  letter-spacing: -0.026em;
  color: var(--ink);
}
.intro__body {
  grid-column: 8 / -1;
  align-self: end;
  display: grid;
  gap: 1.4em;
  font-size: var(--t-lede);
  line-height: 1.62;
}

/* 9b. Featured fragrance */
.section--feature { background: #EFEAE6; }
.section--feature .container { display: grid; gap: clamp(30px, 5vh, 62px); }

.feature__stage {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: clamp(340px, 54vh, 600px);
}

.feature__bottle {
  position: relative;
  z-index: 1;
  height: clamp(300px, 50vh, 545px);
  width: auto;
  filter: drop-shadow(0 30px 48px rgba(23, 22, 20, 0.11));
}

/* The name rests high on the flacon so the liquid crosses only its feet, and
   rises out from behind the glass as the section is read. */
.feature__name {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 56%;
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(4.2rem, 18vw, 15rem);
  line-height: 1;
  letter-spacing: -0.034em;
  color: var(--ink);
  white-space: nowrap;
  transform: translate3d(-50%, calc(var(--rise, 0) * 110px), 0);
}

/* A faint continuation of the word across the glass, so it reads whole. */
.feature__name--ghost { z-index: 2; color: rgba(23, 22, 20, 0.16); }

.feature__text { display: grid; gap: 24px; max-width: 62ch; justify-self: center; text-align: center; }
.feature__character {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-right: -0.2em;
}
.feature__desc {
  font-family: var(--serif);
  font-size: var(--t-lede);
  line-height: 1.48;
  color: var(--ink);
  max-width: 40ch;
  margin-inline: auto;
}
.feature__text .notes--row { text-align: left; margin-top: 10px; }

/* 9c. Collection archive */
.section--collection { align-items: flex-start; }
.collection__head { margin-bottom: clamp(64px, 10vh, 150px); row-gap: 26px; }
.collection__lead { grid-column: 1 / span 6; display: grid; gap: 22px; }
.collection__note {
  grid-column: 8 / -1;
  align-self: end;
  font-size: var(--t-lede);
  line-height: 1.62;
}

.archive {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(34px, 7vw, 130px);
  row-gap: clamp(72px, 10vh, 150px);
}

/* Each fragrance reads as a centred specimen — flacon, name, mark and notation
   share one vertical axis down the middle of the column — which is also what
   keeps the two-column composition itself feeling centred on the page, rather
   than left-heavy from every bottle hugging its column's left edge. */
.archive__item {
  --h: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: --h 760ms var(--ease-out-expo);
}
.archive__item:nth-child(even) { margin-top: clamp(52px, 12vh, 170px); }
@media (hover: hover) { .archive__item:hover { --h: 1; } }

/* The bottle's own entrance: a bottom-up wipe (clip-path) as its own signature
   move, independent of the hover lift below (its settle-scale lives on
   `.archive__bottle` itself, further down, as a separate CSS property). */
.archive__figure {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  margin-bottom: clamp(32px, 4.4vh, 56px);
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, var(--py, 0px), 0);
  transition: clip-path 1500ms var(--ease-out-expo) var(--d, 0ms);
}
.archive__figure.is-in { clip-path: inset(0 0 0% 0); }

/* One height for every bottle: each fragrance's natural width still varies
   with its own flacon shape, but no bottle is deliberately shrunk relative to
   another — that read as arbitrary rather than as an editorial choice.
   The entrance scale lives on the standalone `scale` property, transitioning
   on this element's own class change — not composed from a custom property
   set by an ancestor. That cross-element route was tried first and measured
   unreliable: Chromium correctly animates an inherited `@property` value on
   the element declaring it, but does not consistently repaint a DESCENDANT's
   `transform` in step with it — the bottle sat visibly frozen at its 1.1×
   starting scale for ~2s after the ancestor's own value had already finished
   interpolating to 1. `scale` and the legacy `transform` (used below, for the
   hover lift) are independent transform-related properties, so the entrance
   uses the standard `[data-media] > img` rule unmodified (proven already, by
   the craft film and materials plate) rather than a second bespoke one — the
   hover response on this card lives on the mark and name instead, which
   already give it a clear, working feel without a second rule contending for
   the img's own `transform`. */
.archive__bottle {
  height: clamp(250px, 36vh, 440px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(
    0 calc(20px + var(--h) * 22px)
      calc(30px + var(--h) * 26px)
      rgba(23, 22, 20, calc(0.1 + var(--h) * 0.05)));
}

.archive__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-name);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--ink);
  transform: scale(calc(1 + var(--h) * 0.02));
}

/* The one place each fragrance's own colour appears, sampled from its liquid.
   Several of the sampled liquids (Éclat, Nocturne, Lueur) sit almost exactly
   on the ivory ground and would go invisible as a 2px line, so the mark uses
   a version mixed toward ink rather than the raw pale sample — still each
   fragrance's own hue, just at a weight a hairline can actually carry. */
.archive__mark {
  display: block;
  width: 36px;
  height: 2px;
  margin: 16px auto 18px;
  background: var(--gold);
  background: color-mix(in srgb, var(--accent, var(--gold)) 60%, var(--ink) 40%);
  transform: scaleX(calc(1 + var(--h) * 1.3));
  transform-origin: center;
}

.archive__character {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-right: -0.16em;
  margin-bottom: 24px;
}

.archive .notes { max-width: 380px; margin-inline: auto; }

/* 9d. Craft */
.section--craft { background: var(--porcelain); }
.craft__text { grid-column: 1 / span 4; display: grid; gap: 24px; align-content: center; }
.craft__lede {
  font-family: var(--serif);
  font-size: var(--t-lede);
  line-height: 1.42;
  color: var(--ink);
  max-width: 22ch;
}
.craft__body { max-width: 46ch; }
.craft__film { grid-column: 6 / -1; }
.craft__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #DCD6CD; }
.craft__video { width: 100%; height: 100%; object-fit: cover; }
.craft__play {
  position: absolute;
  inset: auto 0 0 0;
  margin: 22px auto;
  width: max-content;
  padding: 12px 22px;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.craft__film figcaption { margin-top: 20px; font-size: var(--t-caption); color: var(--ink-quiet); }

/* 9e. Materials */
.materials__col { grid-column: 1 / span 6; display: grid; gap: 22px; align-content: start; }
.materials__note { max-width: 44ch; margin-bottom: clamp(20px, 3.4vh, 44px); }
.materials__list { display: grid; }

.materials__item {
  --h: 0;
  display: grid;
  gap: 7px;
  padding: clamp(19px, 2.5vh, 29px) 0;
  border-top: 1px solid var(--rule-soft);
  transition: --h 700ms var(--ease-out-expo);
}
.materials__item:last-child { border-bottom: 1px solid var(--rule-soft); }
@media (hover: hover) { .materials__item:hover { --h: 1; } }

.materials__name {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  transform: translateX(calc(var(--h) * 10px));
}
.materials__in {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-right: -0.14em;
  transform: translateX(calc(var(--h) * 10px));
}

.materials__plate { grid-column: 8 / -1; position: sticky; top: clamp(96px, 17vh, 180px); }
.materials__plate-inner { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--porcelain); }
.materials__plate-inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1200ms var(--ease-glass);
}
.materials__plate-inner img.is-active { opacity: 1; }

/* 9f. Philosophy — a held breath rather than a colour trick: the pause comes
   from whitespace and scale, in the same light environment as everything
   else, so the HUD never has to recolour itself for one panel. */
.section--creed { background: var(--porcelain); }
.creed__inner { display: grid; justify-items: center; text-align: center; gap: clamp(30px, 4.4vh, 58px); }
.creed__crest { width: 54px; opacity: 0.85; }
.creed__statement {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-statement);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
  max-width: 16ch;
}
.creed__body { max-width: 46ch; font-size: var(--t-lede); line-height: 1.6; color: var(--ink-soft); }

/* 9g. The Maison */
.maison__title { grid-column: 1 / span 3; position: sticky; top: clamp(96px, 17vh, 180px); }
.maison__body {
  grid-column: 5 / span 7;
  display: grid;
  gap: 1.4em;
  font-size: var(--t-lede);
  line-height: 1.62;
}
.maison__sign {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  line-height: 1.28;
  color: var(--ink);
  margin-top: 0.4em;
}

/* 9h. Closing */
.closing__inner { display: grid; justify-items: center; text-align: center; gap: clamp(48px, 7vh, 92px); }
.closing__statement {
  font-family: var(--serif);
  font-size: var(--t-statement);
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.closing__crest { width: clamp(66px, 7vw, 98px); }

/* 9i. Footer */
.footer { padding-block: clamp(48px, 6vh, 76px) calc(var(--safe-b) + clamp(40px, 5vh, 64px)); border-top: 1px solid var(--rule-soft); }
.footer .grid { row-gap: 30px; align-items: end; }
.footer__brand { grid-column: 1 / span 5; }
.footer__word {
  font-size: var(--t-nav);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  margin-right: -0.24em;
}
.footer__tag { margin-top: 10px; font-size: var(--t-caption); color: var(--ink-quiet); }

.footer__nav { grid-column: 8 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px clamp(20px, 2.2vw, 36px); }
.footer__nav a {
  --h: 0;
  position: relative;
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-quiet);
  padding: 8px 0;
  transition: --h 620ms var(--ease-out-expo), color 620ms var(--ease-out-expo);
}
.footer__nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(var(--h));
  transform-origin: left;
  transition: transform 620ms var(--ease-out-expo);
}
@media (hover: hover) { .footer__nav a:hover { --h: 1; color: var(--ink); } }

.footer__fine {
  grid-column: 1 / -1;
  padding-top: 28px;
  border-top: 1px solid var(--rule-soft);
  font-size: var(--t-caption);
  color: var(--ink-quiet);
}

.footer__credit {
  grid-column: 1 / -1;
  margin-top: 8px;
  font-size: var(--t-caption);
  color: var(--ink-quiet);
}

.footer__credit a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--rule);
  transition: color 420ms var(--ease-out-expo), text-decoration-color 420ms var(--ease-out-expo);
}

.footer__credit a:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}

/* 10. Responsive ---------------------------------------------------------- */

@media (max-width: 1100px) {
  .intro__statement { grid-column: 1 / -1; }
  .intro__body { grid-column: 1 / -1; }
  .collection__lead, .collection__note { grid-column: 1 / -1; }
  .craft__text, .craft__film { grid-column: 1 / -1; }
  .craft__text { margin-bottom: clamp(34px, 5vh, 60px); max-width: 54ch; }
  .materials__col, .materials__plate { grid-column: 1 / -1; }
  .materials__plate { position: relative; top: 0; order: -1; margin-bottom: clamp(30px, 5vh, 56px); }
  .materials__plate-inner { aspect-ratio: 3 / 2; }
  .maison__title { grid-column: 1 / -1; position: static; margin-bottom: clamp(26px, 4vh, 48px); }
  .maison__body { grid-column: 1 / -1; }
  .footer__brand, .footer__nav { grid-column: 1 / -1; }
  .footer__nav { justify-content: flex-start; }
}

@media (max-width: 780px) {
  :root { --hero-screens: 3.6; }

  .hud__nav { display: none; }
  .hud__index { display: block; }
  .hero__cue { display: none; }

  .archive { grid-template-columns: 1fr; row-gap: clamp(62px, 9vh, 100px); }
  .archive__item:nth-child(even) { margin-top: 0; }
  .archive__bottle { height: clamp(250px, 38vh, 350px); }

  .feature__text { text-align: left; justify-self: start; }
  .feature__text .notes--row { grid-template-columns: 1fr; }
  .feature__desc { margin-inline: 0; }
  .feature__bottle { height: clamp(260px, 40vh, 380px); }
  .feature__name { font-size: clamp(3.4rem, 20vw, 8rem); bottom: 54%; }
}

/* Pointer-coarse devices get no hover-only affordances */
@media (hover: none) {
  .archive__item, .materials__item, .hud__nav a, .footer__nav a { --h: 0; }
}

/* Frostier surfaces when transparency is unwelcome */
@media (prefers-reduced-transparency: reduce) {
  .hud__glass, .index__glass, .glass-chip {
    backdrop-filter: none; -webkit-backdrop-filter: none; filter: none;
  }
  .hud__glass { background-color: rgba(244, 240, 232, 0.97); }
  .index__glass { background-color: var(--ivory); }
  .glass-chip { background: var(--ivory); }
}

@media (prefers-contrast: more) {
  :root { --ink-soft: rgba(23, 22, 20, 0.92); --ink-quiet: rgba(23, 22, 20, 0.86); }
  .hud__glass {
    background-color: var(--ivory);
    backdrop-filter: none; -webkit-backdrop-filter: none; filter: none;
    border-bottom: 1px solid var(--ink);
  }
}

/* Reduced motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root { --hero-screens: 1; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .hero { height: auto; }
  .hero__stage {
    position: relative;
    height: auto;
    min-height: var(--shell-h);
    display: grid;
    align-content: space-between;
    padding: calc(var(--safe-t) + 22vh) 0 calc(var(--safe-b) + 10vh);
  }
  .hero__canvas { display: none; }
  .hero__poster { opacity: 1; }
  .hero__acts { position: relative; inset: auto; display: grid; gap: clamp(48px, 10vh, 120px); }
  .hero__act { position: relative; inset: auto; opacity: 1; transform: none; }
  .hero__act--line { transform: none; }
  .hero__cue { display: none; }

  [data-reveal] { opacity: 1; transform: none; }
  [data-words] .wi { transform: none; }
  [data-media] { clip-path: none; }
  [data-media] > img, [data-media] > video { transform: none; }
  .archive__figure { transform: none; }
  .feature__name { transform: translate3d(-50%, 0, 0); }
  .hud__glass { opacity: 1; transform: none; filter: none; }
  .index__nav a > span { transform: none; }
  .loader { display: none; }
}