/* ============================================================
   ZAYMAR — pages/home.css
   ============================================================ */

/* ---- 1 · Hero — full-viewport cinema, ivory type over ink ---- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* The photograph is held slightly enlarged for its entrance, and the
     desktop zoom scales it further. Without a clip that overhang widens
     the page on a phone at the exact moment the opening is on screen,
     and a fixed layer then centres on the wider page, not the screen. */
  overflow: clip;
}
.hero .media-slot.hero__media,
.hero .media-slot.hero__media[data-ratio='16/9'] {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  height: 100%;
  border-radius: 0;
}
/* ---- the photograph's arrival ----
   It opens: held a little too close and perfectly still, then easing
   back to its resting frame over two seconds. Transform only, so the
   whole move is composited — a scale never costs a repaint. The slow
   ambient zoom is held back until this has finished, because an
   animation and a transition on the same property would fight, and
   the fight is what you would see. */
html.js-motion .hero__media {
  transform: scale(1.14);
  transition: transform 2200ms var(--ease-enter);
  will-change: transform;
}
html.js-motion .hero.is-in .hero__media { transform: scale(1); }
html.js-motion .hero.is-settled .hero__media {
  transform: none;
  transition: none;
  animation: hero-zoom 28s var(--ease-enter) infinite alternate;
}
/* Phone: the campaign photograph still opens, but is held still after —
   a never-ending scale on a full-bleed image keeps its layer
   recompositing for as long as the page is open. */
@media (max-width: 56em) {
  html.js-motion .hero.is-settled .hero__media {
    animation: none;
    will-change: auto;
  }
}

/* the ink the picture comes out of — one flat layer between the
   photograph and the type, lifting as the frame settles */
html.js-motion .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--z-ink);
  pointer-events: none;
  opacity: 1;
  transition: opacity 1600ms var(--ease-enter);
}
html.js-motion .hero.is-in::before { opacity: 0; }

/* Phone: the collection campaign carries the hero. Declared inside the
   media query so a desktop visitor never downloads it, and via
   image-set so each device picks the density it can actually resolve.
   The ink underneath means there is no flash before it paints. */
@media (max-width: 56em) {
  .hero .media-slot.hero__media {
    background-color: var(--z-ink);
    background-image: -webkit-image-set(
      url("../../assets/media/hero/collection-1x.webp") 1x,
      url("../../assets/media/hero/collection-2x.webp") 2x);
    background-image: image-set(
      url("../../assets/media/hero/collection-1x.webp") 1x,
      url("../../assets/media/hero/collection-2x.webp") 2x);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }
  /* the placeholder brief has nothing left to say once the shot is in */
  .hero__media .media-slot__frame,
  .hero__media .media-slot__ticks,
  .hero__media .media-slot__duration,
  .hero__media .media-slot__scrub { display: none; }

  /* The block sits in the true centre of the screen, over the frame.
     The scrim below is weighted to that centre band so the type reads
     cleanly against what is behind it, while the labels and the
     reflections lower down stay open. */
  /* static so the button below anchors to the hero, not to this box;
     z-index still applies, this is a flex item */
  /* Static so the button below anchors to the hero, not to this box;
     z-index still applies, this is a flex item. The three-row grid puts
     the house line dead on the centre of the screen — the middle row is
     exactly its own height, with equal space above and below — and
     everything else follows underneath it. */
  .hero .hero__content {
    padding-top: 0;
    position: static;
    height: 100svh;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    justify-items: center;
    align-items: start;
  }
  .hero .hero__title { grid-row: 2; }
  .hero .hero__sub {
    grid-row: 1;
    align-self: end;          /* sits directly above the house line */
    margin: 0 0 var(--sp-m);
    color: var(--z-ivory);
  }
  /* the title and subline keep the true centre of the screen; the
     button is lifted out of the flow and set lower, in the quiet band
     above the bottles, so neither has to give ground to the other */
  .hero .hero__enquire {
    position: absolute;
    left: 50%;
    bottom: 30svh;
    transform: translateX(-50%);
    margin-top: 0;
  }
  html.js-motion .hero [data-hero].hero__enquire { transform: translate(-50%, 22px); }
  html.js-motion .hero.is-in [data-hero].hero__enquire { transform: translateX(-50%); }
  /* .hero prefix so these beat the base rules above, which would
     otherwise win on source order and leave ivory text on ivory */
  .hero .hero__enquire {
    min-width: 9.5rem;
    min-height: 3rem;
    color: var(--z-ivory);
    /* An ink wash rather than a backdrop blur — the blur forced the
       compositor to read the photograph back on every scrolled frame.
       Weighted enough that the button reads as a considered surface
       sitting on the picture, not a hairline drawn over it, while the
       bottles behind still show through. */
    background: rgba(13, 11, 9, 0.44);
    border-color: rgba(169, 143, 85, 0.72);
  }
  .hero .hero__enquire:hover,
  .hero .hero__enquire:focus-visible {
    background: rgba(13, 11, 9, 0.62);
    border-color: var(--z-gold);
    color: var(--z-ivory);
  }
  .hero::after {
    inset: 0;
    height: auto;
    opacity: 1;
    background: linear-gradient(
      to bottom,
      rgba(13, 11, 9, 0.40) 0%,
      rgba(13, 11, 9, 0.74) 22%,
      rgba(13, 11, 9, 0.88) 38%,
      rgba(13, 11, 9, 0.91) 52%,
      rgba(13, 11, 9, 0.88) 62%,
      rgba(13, 11, 9, 0.70) 72%,
      rgba(13, 11, 9, 0.16) 86%,
      rgba(13, 11, 9, 0.00) 100%);
  }
}
@keyframes hero-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}
/* legibility scrim under the copy — functional, not decorative */
.hero::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, var(--z-ink), transparent);
  opacity: 0.75;
  pointer-events: none;
}
/* Hero content sits on the cinema media (always ink), not on the
   descending page surface — its colours are pinned, immune to the
   white↔black interpolation running underneath. */
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--z-ivory);
}

/* The house line, set in Lora caps: high-contrast serif capitals with
   wide tracking are what make a fragrance campaign read as expensive,
   and the two lines break on the phrase rather than wherever the box
   happens to end. */
.hero__title,
.hero__sub {
  /* the line carries its own shadow, so its legibility never depends
     on whatever the photograph happens to be doing behind it */
  text-shadow: 0 0.02em 0.9em rgba(13, 11, 9, 0.72),
               0 0.01em 0.16em rgba(13, 11, 9, 0.55);
}
.hero__title {
  /* Set in the house sans rather than the serif: in white, over a
     photograph, a serif's thin strokes are the first thing the image
     eats. Open capitals hold their shape against anything behind
     them, and the wide tracking keeps the line looking set rather
     than typed. */
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.5rem, 6.6vw, 3.25rem);
  line-height: 1.34;
  letter-spacing: 0.13em;
  text-indent: 0.13em; /* optical: recentre against the trailing tracking */
  text-transform: uppercase;
  color: var(--z-ivory);
}
.hero__title-line { display: block; }

.hero__sub {
  margin-bottom: var(--sp-m);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--z-gold);
}

.hero__enquire {
  margin-top: var(--sp-xl);
  min-width: 11rem;
  border-color: var(--line-gold);
  color: var(--z-ivory);
}
.hero__enquire:hover,
.hero__enquire:focus-visible {
  background: var(--z-ivory);
  border-color: var(--z-ivory);
  color: var(--z-ink);
}

/* ---- the entrance ----
   Each element rises into place, staggered so the promise, the line and
   the invitation arrive in that order. Driven by a single class and
   plain transitions, so a dropped frame can never strand anything
   half-arrived — whatever happens, the end state is the resting state. */
html.js-motion .hero [data-hero] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1200ms var(--ease-enter),
              transform 1200ms var(--ease-enter);
}
html.js-motion .hero.is-in [data-hero] {
  opacity: 1;
  transform: none;
}

/* The house line is set rather than faded in: each line is uncovered
   from below, the way type is pulled off a press. The resting clip is
   generous on every side so nothing can shave a cap or the tracking. */
html.js-motion .hero__title-line {
  clip-path: inset(0 -12% 105% -12%);
  transition: opacity 1200ms var(--ease-enter),
              transform 1200ms var(--ease-enter),
              clip-path 1400ms var(--ease-enter);
}
html.js-motion .hero.is-in .hero__title-line {
  clip-path: inset(-25% -12% -25% -12%);
}
/* the block arrives in reading order, top to bottom */
html.js-motion .hero__sub { transition-delay: 260ms; }
html.js-motion .hero__title-line:nth-child(1) { transition-delay: 460ms; }
html.js-motion .hero__title-line:nth-child(2) { transition-delay: 640ms; }
html.js-motion .hero__enquire { transition-delay: 1020ms; }

/* Laptop: Date Me alone, the bottle standing right of centre in its
   smoke. The copy takes the left of the frame, where the photograph is
   dark and empty, so the two never contest the same ground. The shot
   is served as a background inside this query, so a phone never
   downloads it. */
@media (min-width: 56.01em) {
  .hero .media-slot.hero__media {
    background-color: var(--z-ink);
    background-image: -webkit-image-set(
      url("../../assets/media/hero/desktop-half.webp") 1x,
      url("../../assets/media/hero/desktop.webp") 2x);
    background-image: image-set(
      url("../../assets/media/hero/desktop-half.webp") 1x,
      url("../../assets/media/hero/desktop.webp") 2x);
    background-size: cover;
    background-position: 56% center;
    background-repeat: no-repeat;
  }
  .hero__media .media-slot__frame,
  .hero__media .media-slot__ticks,
  .hero__media .media-slot__duration,
  .hero__media .media-slot__scrub { display: none; }

  /* the scrim: heavy at the left where the type sits, gone by the
     bottle; and a foot fade so the floor keeps its reflection */
  .hero::after {
    inset: 0;
    height: auto;
    opacity: 1;
    background:
      linear-gradient(90deg,
        rgba(13, 11, 9, 0.78) 0%,
        rgba(13, 11, 9, 0.62) 30%,
        rgba(13, 11, 9, 0.28) 48%,
        rgba(13, 11, 9, 0.00) 62%),
      linear-gradient(to top, rgba(13, 11, 9, 0.35), transparent 30%);
  }

  /* the copy, set left: the line, the promise, the invitation */
  .hero__content {
    align-items: flex-start;
    text-align: left;
    padding-top: var(--header-h);
  }
  /* wide enough that "The evolution of" holds one line: no widow */
  .hero__title { max-width: 13em; text-indent: 0; }
  .hero__sub { text-indent: 0; }
  .hero__enquire { margin-top: var(--sp-xl); }
}
/* a smaller laptop shows more of the frame's left, so the bottle
   keeps clear of the copy */
@media (min-width: 56.01em) and (max-width: 75em) {
  .hero .media-slot.hero__media { background-position: 38% center; }
  .hero__title { font-size: 2.75rem; max-width: min(13em, 62vw); }
}

/* ---- 2 · Opening statement ----
   Typography and proportion come from the shared .stmt pattern
   in components.css; the section only provides the surface. */

/* ---- 3 · Chapter I — the horizontal journey ----
   A real horizontal scroll container: the visitor scrolls/swipes
   sideways through five full-screen rooms and the browser does the
   moving, so there is nothing to fight or de-sync. Scroll-snap lands
   each room; overscroll-behavior keeps the gesture inside the section
   (and stops the swipe-back navigation). Vertical gestures fall
   through to the page as normal.
   Type is pinned to dark-surface colours — the rooms are always dark,
   never part of the page descent's flip. Phone is the primary layout. */
.chapter {
  position: relative;
  overflow: clip;
  height: 100svh;
  background-color: var(--z-ink); /* the rooms fade in over this */
  color: var(--z-ivory);
  --fg: var(--z-ivory);
  --fg2: var(--z-beige);
  --fg3: var(--z-taupe);
  --accent: var(--z-gold);
  --line: var(--line-on-dark);
}

/* Room colour lives on two stacked layers that cross-fade by opacity.
   Repainting a full-screen background-color every frame is what made
   the journey stutter; opacity is composited on the GPU and costs
   nothing to animate. */
.chapter__rooms {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.chapter__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
}
.chapter.ambient::before {
  z-index: 1;
  /* The tint stays; the drift does not. This layer is two and a half
     times the viewport, and here it sits directly under a horizontal
     scroll container — animating it means recompositing that whole
     area against the journey on every frame of the journey. The rooms
     already give this section its atmosphere. */
  animation: none;
  will-change: auto;
}

.chapter__track {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  /* Scrolling in here is 100% native — the track is opted out of Lenis
     (data-lenis-prevent), so the browser scrolls it on the compositor
     at full frame rate and provides its own momentum. Snap gives the
     slow, deliberate landing on each room. Nothing in JS writes the
     scroll position, so there is nothing to fight and nothing to lag.
     Horizontal overscroll is contained (no page pan, no swipe-back);
     vertical still chains to the page. */
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
  scrollbar-width: none;
}
/* Phone: the snap is proximity, not mandatory. With mandatory snap a
   vertical swipe that begins on this container can be claimed by it
   while the browser decides the gesture's axis — the page appears to
   refuse the scroll, then take it on the next try. Proximity still
   lands each room when a swipe ends near one; it just never contests
   a gesture that is plainly heading down the page. */
@media all { /* phone and laptop alike */
  /* Phone: no browser snap at all, and no settling either. Snap
     shortens a flick and holds the momentum back on its way to a room,
     which reads as a pause; the journey is continuous, carried by the
     browser's own momentum, and rests wherever the finger leaves it. */
  .chapter__track { scroll-snap-type: none; }
  /* the bottles move every frame of a swipe: give them their own layers */
  .chapter__bottle { will-change: transform; }
  /* the sign has a hairline beneath it now: the room's foot reserves that too */
  .chapter__panel { padding-bottom: calc(var(--sp-l) + var(--sp-m) + var(--sp-l) + var(--sp-xs) + 0.75rem); }
}
/* laptop: the tween owns the position, so the browser's snap must not
   pull against it mid-move — that pull was the stutter */
.chapter__track.is-driven { scroll-snap-type: none; scroll-behavior: auto; }
.chapter__track::-webkit-scrollbar { display: none; }
.chapter__track:focus-visible { outline-offset: -4px; }

/* Each room is lit, not flat: a soft warm sheen behind the bottle and a
   deeper vignette at the edges, painted once as a static gradient on
   the room itself. Nothing animates; it scrolls with the room. */
.chapter__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 38% at 50% 36%, var(--room-sheen, rgba(169, 143, 85, 0.16)), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.45) 100%);
}
.chapter__panel > * { position: relative; z-index: 1; }
.chapter__panel[data-temp="date-me"] { --room-sheen: rgba(150, 70, 40, 0.22); }
.chapter__panel[data-temp="tropical-burn"] { --room-sheen: rgba(184, 92, 34, 0.2); }
.chapter__panel[data-temp="black-honey"] { --room-sheen: rgba(169, 143, 85, 0.12); }

.chapter__panel {
  position: relative;
  flex: none;
  width: 100%;              /* = the container, never 100vw */
  height: 100%;
  min-height: 0;
  scroll-snap-align: start;
  contain: layout paint; /* a room's painting never escapes its own box */
  display: flex;
  align-items: center;
  /* The foot of every room belongs to the cue bar (it sits sp-l + sp-m
     up from the bottom). The bottom padding reserves that band plus a
     clear margin above it, so the room's last line — Discover — can
     never be laid over the cue, whatever the copy wraps to. */
  padding-block: calc(var(--header-h) + var(--sp-s))
                 calc(var(--sp-l) + var(--sp-m) + var(--sp-l) + var(--sp-xs));
}

/* intro plate */
.chapter__intro {
  --stmt-gap-rule: clamp(1.25rem, 3vh, 2rem);
  --stmt-gap-lead: clamp(1.5rem, 4vh, 2.5rem);
  --stmt-gap-body: clamp(1.5rem, 4vh, 2.5rem);
}
.chapter__eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: var(--z-gold);
}
.chapter__eyebrow.tick-above::before { margin-bottom: var(--stmt-gap-rule); }
.chapter__title {
  margin-top: var(--stmt-gap-lead);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.875rem, 11vw, 10rem);
  line-height: 0.95;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  text-indent: 0.045em;
  color: var(--z-ivory);
}
/* The invitation under CHAPTER I: ivory, and set in the house serif's
   italic — the same voice the fragrance stories are told in, which is
   what makes it read as an invitation rather than a caption. */
.chapter__lede {
  color: var(--z-ivory);
  max-width: 26em;
  font-family: var(--font-title);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
  line-height: 1.72;
  letter-spacing: 0.012em;
}
.chapter__cue {
  margin-top: var(--stmt-gap-body);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-s);
  color: var(--z-gold);
  letter-spacing: var(--track-micro);
  text-wrap: balance;
}
.chapter__cue-line { width: var(--tick); height: var(--hairline); background: var(--z-gold); }

/* The cue that sits with the rail: it asks for the sideways scroll
   while the journey is unfinished, and reports the way out once it is
   done. It pops if the visitor tries to scroll past too early. */
.chapter__cue-bar {
  position: absolute;
  left: var(--margin);
  right: var(--margin);
  bottom: calc(var(--sp-l) + var(--sp-m));
  z-index: 3;
  margin: 0;
  max-width: none;
  text-align: center;
  color: var(--z-gold);
  text-transform: uppercase;
  pointer-events: none;
}
.chapter__cue-scroll,
.chapter__cue-done {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
}
.chapter__cue-done { display: none; }
.chapter.is-complete .chapter__cue-scroll { display: none; }
.chapter.is-complete .chapter__cue-done { display: inline-flex; color: var(--z-beige); }

/* Phone: the journey opens straight into the first perfume. The
   CHAPTER I panel is an introduction the small screen does not need —
   the section already arrives out of black, and the cue says which way
   to travel. Desktop keeps it. */
@media all { /* phone and laptop alike */
  .chapter__panel--intro { display: none; }
}

/* the pop when a downward scroll is held back — the cue brightens to
   ivory, swells and opens its tracking, so the answer to "why won't
   the page move" is the most alive thing on the screen */
.chapter__cue-scroll { transition: color var(--dur-state) var(--ease-enter); }
.chapter.is-nudging .chapter__cue-scroll {
  color: var(--z-ivory);
  animation: cue-pop 700ms var(--ease-enter);
}
@keyframes cue-pop {
  0%   { transform: scale(1)    translateY(0);      letter-spacing: var(--track-micro); }
  22%  { transform: scale(1.16) translateY(-0.2em); letter-spacing: 0.34em; }
  55%  { transform: scale(1.03) translateY(0);      letter-spacing: 0.26em; }
  100% { transform: scale(1)    translateY(0);      letter-spacing: var(--track-micro); }
}
.chapter.is-nudging /* the cue says what is true on the device: a phone swipes sideways,
   a laptop scrolls and the journey moves for it */
.chapter__cue-scroll .chapter__cue-touch { display: inline; }
.chapter__cue-scroll .chapter__cue-wheel { display: none; }
@media (pointer: fine) and (min-width: 56.01em) {
  .chapter__cue-scroll .chapter__cue-touch { display: none; }
  .chapter__cue-scroll .chapter__cue-wheel { display: inline; }
}

.chapter__cue-arrow { animation: cue-shoot 700ms var(--ease-enter); }
@keyframes cue-shoot {
  0%   { transform: translateX(0); }
  30%  { transform: translateX(var(--sp-m)); }
  100% { transform: translateX(0); }
}

/* the journey's contents carry the same exit fade as its colour */
.chapter__track,
.chapter__cue-bar,
.chapter__rail { opacity: var(--chapter-exit, 1); }

/* ---- phone: the arrows either side of the bottle ----
   Hairline gold rings on a faint dark wash, at the bottle's height,
   inside the page margins. Each fades out at the end it cannot go past
   (opacity only). Shown by the script on coarse pointers alone. */
.chapter__step {
  display: none;
  position: absolute;
  z-index: 4;
  top: 36%;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: var(--hairline) solid var(--z-gold);
  border-radius: 50%;
  background: rgba(13, 11, 9, 0.32);
  color: var(--z-gold);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transform: translateY(-50%);
  opacity: var(--chapter-exit, 1);
  transition: opacity var(--dur-state) var(--ease-enter), background-color var(--dur-state) var(--ease-enter);
}
.chapter__step svg { display: block; margin: auto; width: 14px; height: 14px; }
/* the ring is small; the tap target beneath it is not */
.chapter__step::before { content: ''; position: absolute; inset: -0.6rem; }
.chapter__step--prev { left: calc(var(--margin) - 0.25rem); }
.chapter__step--next { right: calc(var(--margin) - 0.25rem); }
.chapter__step.is-idle { opacity: 0; pointer-events: none; }
.chapter__step:active { background: rgba(169, 143, 85, 0.22); }
.chapter__step:focus-visible { outline: var(--hairline) solid var(--z-gold); outline-offset: 3px; }


.chapter__cue-arrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: 1;
  animation: cue-drift 1.8s var(--ease-enter) infinite alternate;
}
@keyframes cue-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--sp-xs)); }
}


/* fragrance rooms — phone: a centred column, bottle then copy */
/* Phone rooms are a three-row grid — act, bottle, copy — that fills the
   room's content box exactly. The copy row takes what it needs, and the
   bottle takes what is left: it can never be taller than the space
   above the copy, so the copy can never be pushed down into the cue at
   the foot, whatever the copy wraps to on any phone. */
.chapter__grid {
  width: 100%;
  align-self: stretch;          /* fill the room's content height */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: var(--sp-s);
  justify-items: center;
  align-items: center;
  text-align: center;
}
.chapter__act {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: var(--z-gold);
}
/* The bottle is sized by the room's height as well as its width, so it
   fills the plate on a tall phone and never pushes the copy into the
   cue at the foot on a short one. */
.chapter__bottle {
  /* The link fills its row and column; the plate inside it is sized by
     the height that is left, at 4:5, and centred by the grid on both
     axes. Centring the plate inside a full-width box, rather than
     asking the box itself to shrink around an aspect ratio, is what
     keeps it on the axis in every engine: a browser that will not
     shrink a grid item to a ratio-derived width simply leaves the box
     wide and the plate still sits in the middle of it. */
  width: 100%;
  height: 100%;
  min-height: 0;
  margin-top: 0;
  display: grid;
  place-items: center;
}
.chapter__bottle__fig {
  height: 100%;
  width: auto;
  max-width: min(76vw, 17.5rem);
  aspect-ratio: 4 / 5;
  margin-inline: auto;
}
@media (max-width: 30em) and (min-aspect-ratio: 390/700), (min-width: 30.01em) and (max-width: 56em) and (max-height: 700px) {
  .chapter__panel { padding-top: calc(var(--header-h) + var(--sp-xs)); }
}
/* the bottle is the way into the fragrance — the whole plate is the
   target, and it lifts a little under the finger so it reads as one */
/* opacity, not transform: the drift writes this element's transform
   every frame and would overwrite a hover lift */
a.chapter__open { display: block; transition: opacity var(--dur-state) var(--ease-enter); }
a.chapter__open:hover { opacity: 0.82; }

/* The bottle stands in the room, not in a box. The photograph's own
   ground is black and amber, and a hard-edged rectangle of it laid on
   the room's flat colour reads as a pasted picture — so the edges are
   dissolved with a radial mask: full strength around the bottle,
   fading to nothing at the corners, and the smoke simply becomes the
   room. No frame, no radius, no border to betray the edge. */
.chapter__bottle__fig.has-media {
  border-radius: 0;
  background: transparent;
  -webkit-mask-image: radial-gradient(ellipse 58% 60% at 50% 54%, #000 46%, rgba(0,0,0,0.55) 68%, transparent 100%);
          mask-image: radial-gradient(ellipse 58% 60% at 50% 54%, #000 46%, rgba(0,0,0,0.55) 68%, transparent 100%);
}
.chapter__bottle__fig.has-media > img { border-radius: 0; }
.chapter__copy { margin-top: 0; }
.chapter__num { font-size: var(--fs-h3); }
.chapter__name {
  margin-top: var(--sp-xs);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  line-height: 1.05;
  color: var(--z-ivory);
}
.chapter__line {
  margin: var(--sp-s) auto 0;
  font-size: var(--fs-body-lg);
  color: var(--z-beige);
  max-width: 20em;
}
.chapter__facets { margin-top: var(--sp-xs); color: var(--z-beige); }
/* the door into the fragrance: a gold hairline frame with a faint gold
   wash, so it reads as a button and not a line of copy. Composited only:
   the arrow eases forward on touch or hover, nothing else moves. */
.chapter__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-top: var(--sp-m);
  padding: 0.6rem 1.15rem;
  border: var(--hairline) solid var(--z-gold);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--z-ivory);
  background: rgba(169, 143, 85, 0.1);
  transition: background-color var(--dur-state) var(--ease-enter), border-color var(--dur-state) var(--ease-enter);
}
.chapter__cta-arrow {
  display: inline-block;
  color: var(--z-gold);
  transition: transform var(--dur-state) var(--ease-enter);
}
.chapter__cta:hover, .chapter__cta:focus-visible, .chapter__cta:active {
  background: rgba(169, 143, 85, 0.2);
  border-color: #D9C48F;
}
.chapter__cta:hover .chapter__cta-arrow, .chapter__cta:focus-visible .chapter__cta-arrow { transform: translateX(4px); }

/* the sign at the foot of the room: ivory words, a gold arrow, and a
   bead of gold gliding along the hairline beneath. Transform and
   opacity only. */
.chapter__cue-scroll { flex-direction: column; gap: 0.55rem; }
.chapter__cue-text { display: inline-flex; align-items: center; gap: var(--sp-xs); color: var(--z-ivory); }
.chapter__cue-text .chapter__cue-arrow { color: var(--z-gold); }
.chapter__cue-glide {
  position: relative;
  display: block;
  width: 6rem;
  height: 3px;
  overflow: hidden;
}
.chapter__cue-glide::before {
  content: '';
  position: absolute;
  inset: 1px 0 auto 0;
  height: var(--hairline);
  background: var(--line-gold);
}
.chapter__cue-glide i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 1.5rem;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--z-gold) 60%, #F0DCA8);
  transform: translate3d(-100%, 0, 0);
}
html.js-motion .chapter__cue-glide i { animation: cue-glide 1900ms cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes cue-glide {
  0%   { transform: translate3d(-100%, 0, 0); opacity: 0; }
  15%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate3d(6rem, 0, 0); opacity: 0; }
}

/* Room content rises in when the room is reached. Driven by a class
   and a compositor transition rather than a JS tween, so a throttled
   or interrupted frame can never strand the copy half-faded. */
html.js-motion .chapter__panel [data-hreveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-reveal) var(--ease-enter),
              transform var(--dur-reveal) var(--ease-enter);
}
html.js-motion .chapter__panel.is-in [data-hreveal] {
  opacity: 1;
  transform: none;
}

/* the rail — a champagne line at the foot that fills across the journey */
.chapter__rail {
  position: absolute;
  left: var(--margin);
  right: var(--margin);
  bottom: var(--sp-l);
  height: var(--hairline);
  background: var(--line-on-dark);
  z-index: 3;
  pointer-events: none;
}
.chapter__rail-fill {
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(0);
  background: var(--z-gold);
}

/* desktop: bottle left, copy right, the act word set large and faint above */
@media (min-width: 56.01em) {
  .chapter__panel { padding-block: calc(var(--header-h) + var(--sp-l)) var(--sp-3xl); }
  .chapter__grid {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: center;
    text-align: left;
  }
  .chapter__act {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: start;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(3rem, 7vw, 7rem);
    line-height: 1;
    letter-spacing: -0.01em;
    text-indent: 0;
    text-transform: none;
    color: var(--z-ivory);
    opacity: 0.16;
    pointer-events: none;
  }
  .chapter__bottle { grid-column: 2 / 6; grid-row: 2; width: 100%; max-width: 27rem; height: auto; margin-top: 0; display: block; }
  .chapter__bottle__fig { width: 100%; height: auto; max-width: none; }
  .chapter__copy { grid-column: 7 / 12; grid-row: 2; margin-top: 0; }
  .chapter__line { margin-inline: 0; }
}

/* ---- 4 · Scarcity ----
   Read top to bottom: the chapter mark, the number, what the number is,
   why it matters, and the promise. The chapter mark is set in the same
   Lora capitals as the house mark, so the two ends of the page rhyme.
   The section is one full screen with the statement centred in it: it
   is the last white page, and it has to hold the screen long enough
   for the surface to stay white while it is read — the crossover to
   the black that follows is measured from the next section's edge. */
.scarcity {
  min-height: 100svh;
  display: grid;
  align-content: center;
}
.scarcity__chapter {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(0.9375rem, 1.1vw, 1.125rem);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1;
}
.scarcity__chapter.tick-above::before { margin-bottom: var(--stmt-gap-rule); }
.scarcity__num {
  line-height: 1;
  margin-top: var(--stmt-gap-lead);
  /* every digit the same width, so the count never jitters sideways */
  font-variant-numeric: lining-nums tabular-nums;
}
.scarcity__title {
  margin-top: var(--sp-s);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 500;
}
.scarcity__note {
  margin-top: var(--sp-xl);
  color: var(--accent);
}
@media (max-width: 56em) {
  /* the whole statement holds one phone screen, with headroom: the
     focal padding steps down and the rhythm scales with the height */
  .scarcity.section--focal { padding-block: calc(var(--header-h) + clamp(1rem, 3vh, 1.5rem)) clamp(1rem, 3vh, 1.5rem); }
  .scarcity .stmt {
    --stmt-gap-rule: clamp(1rem, 2.6vh, 1.5rem);
    --stmt-gap-lead: clamp(1.25rem, 3.4vh, 2.125rem);
    --stmt-gap-body: clamp(1.5rem, 4vh, 2.5rem);
  }
  /* the statement fills the screen: everything a size up, the rhythm
     scaled to the height, so a phone shows it whole with no dead band */
  .scarcity .scarcity__chapter { font-size: clamp(0.9375rem, 4vw, 1.0625rem); }
  .scarcity .scarcity__num { font-size: clamp(4.25rem, min(24vw, 12.5vh), 6rem); }
  .scarcity .scarcity__title { margin-top: clamp(0.5rem, 1.6vh, 1rem); font-size: clamp(1.25rem, 5.6vw, 1.5rem); }
  .scarcity .stmt__para { font-size: clamp(1rem, 4.4vw, 1.125rem); line-height: 1.65; }
  .scarcity .scarcity__note { margin-top: clamp(1.5rem, 4vh, 2.25rem); font-size: 0.8125rem; }
}

/* ---- 4b · The certificate ----
   Quiet details that make the statement read as a document of the
   house: a gold hairline frame inset from the screen with small corner
   brackets, a soft warm light behind the numeral, and short rules that
   set the footnote like a seal. All static paint, nothing moves. */
/* the house mark between the title and the paragraph (a small hairline
   lozenge, in place of a rule) */
.scarcity__title::after {
  content: '';
  display: block;
  width: 0.4375rem;
  height: 0.4375rem;
  margin: clamp(1rem, 2.6vh, 1.5rem) auto 0;
  border: var(--hairline) solid var(--z-bronze);
  transform: rotate(45deg);
}
/* the footnote set like a seal, between two hairlines */
.scarcity__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  max-width: none;
}
/* the footnote stands alone, no rules either side */

/* ---- 5 · The presentation ----
   Black field, gold keyline, the case at the centre. The lid resolves
   into its calligraphy as the visitor scrolls (a single composited
   opacity, scrubbed), then the two gifts sit side by side. */
.packaging__head { margin-inline: auto; }
.packaging__display { max-width: 12em; }
.packaging__lede { color: var(--z-beige); }

.packaging__stage {
  position: relative;
  width: min(100%, 26rem);
  aspect-ratio: 4 / 5;
  margin: var(--sp-xl) auto 0;
}
.packaging__lid {
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
}
html.js-motion .packaging__lid--calligraphy { opacity: 0; }
/* the keyline sits just outside the photograph, like the box's own */
.packaging__keyline {
  position: absolute;
  inset: calc(-1 * var(--sp-s));
  border: var(--hairline) solid var(--line-gold);
  border-radius: var(--radius);
  pointer-events: none;
}

.packaging__gifts { margin-top: var(--space-block); }
.packaging__gift { text-align: left; }
.packaging__gift-media { width: 100%; }
.packaging__gift-num { margin-top: var(--sp-m); font-size: var(--fs-label); }
.packaging__gift-title { margin-top: var(--sp-xs); max-width: 14em; }
/* the descriptions are set in the house serif, light, at the reading
   size of the statement paragraphs: one voice for the whole story */
.packaging__gift-copy {
  margin-top: var(--sp-s);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.8;
  letter-spacing: 0.005em;
  color: var(--z-beige);
  max-width: 30em;
}
.packaging__gift-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.2;
}
.packaging__note {
  margin-top: var(--space-block);
  text-align: center;
  color: var(--accent);
}
@media (max-width: 56em) {
  /* The opening reads like the gifts below it: the photograph first,
     full width and unframed, then the label, the line and a short
     description, set left. The whole of it holds one screen; the
     photograph takes the height the words leave. */
  .packaging__head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    /* a little shorter than the screen, so it reads whole without the
       visitor having to stop on the exact spot */
    height: calc(100svh - var(--header-h) - 4.5rem);
    min-height: 28rem;
  }
  .packaging__head > * { flex: none; margin-inline: 0; }
  .packaging__head > .packaging__stage {
    order: -1;
    flex: 1 1 auto;
    min-height: 10rem;
    width: 100%;
    aspect-ratio: auto;
    height: auto;
    margin: 0;
  }
  .packaging__stage .packaging__keyline { display: none; }
  .packaging__stage .packaging__lid { aspect-ratio: auto; }
  .packaging__stage .media-slot.has-media > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .packaging__head .stmt__kicker { margin-top: var(--sp-s); font-size: var(--fs-label); }
  .packaging__head .stmt__kicker.tick-above::before { display: none; }
  .packaging__head .packaging__display {
    margin-top: var(--sp-xs);
    max-width: none;
    font-size: clamp(1.625rem, 7.4vw, 1.9375rem);
    line-height: 1.18;
  }
  .packaging__head .packaging__lede {
    margin-top: var(--sp-s);
    max-width: none;
    font-size: 1rem;
    line-height: 1.6;
  }
  .packaging__gifts { margin-top: var(--sp-2xl); row-gap: var(--sp-2xl); }
  .packaging__gift + .packaging__gift { margin-top: var(--sp-xl); }
  /* each gift holds one phone screen. The photograph is never cropped: it
     keeps its full 4:5 frame and narrows instead, to the width at which its
     height leaves room for the words beneath it */
  .packaging__gift-media {
    aspect-ratio: 4 / 5;
    width: min(100%, calc((100svh - var(--gift-words, 21rem)) * 0.8));
    height: auto;
  }
  .packaging__gift-num { margin-top: var(--sp-s); }
  .packaging__gift-copy { font-size: 0.9375rem; line-height: 1.55; }
}

/* ---- 5 · Newsletter ---- */
/* The invitation: a label, the line, a short letter from the house, the
   door, a quieter aside, and the house's name set at the foot like a
   signature. One screen on a phone. */
.newsletter { min-height: 100svh; display: grid; align-content: center; }
.newsletter .stmt { --stmt-gap-lead: clamp(1rem, 2.6vh, 1.75rem); --stmt-gap-body: clamp(1.25rem, 3.4vh, 2.25rem); }
.newsletter__lede { color: var(--fg); }
/* the invitation sits on black: ivory words, the label and the house's
   name in champagne */
.newsletter.s-ink .stmt__display { color: var(--z-ivory); }
.newsletter.s-ink .newsletter__lede { color: var(--z-ivory); }
.newsletter.s-ink .newsletter__aside { color: var(--z-beige); }
.newsletter.s-ink .stmt__kicker,
.newsletter.s-ink .newsletter__ar,
.newsletter.s-ink .newsletter__sign { color: var(--z-gold); }
.newsletter .newsletter__ar { margin-top: var(--sp-xs); }
.newsletter__aside {
  margin: clamp(1.25rem, 3vh, 2rem) auto 0;
  max-width: 22em;
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg2);
}
.newsletter__sign {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  margin: clamp(1.75rem, 5vh, 3rem) auto 0;
  max-width: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
/* no rules either side: the two names are joined by the house mark */
.newsletter__sign-mark { flex: none; width: 0.375rem; height: 0.375rem; opacity: 0.85; }
.newsletter__sign-ar { font-family: var(--font-ar-text); font-size: var(--fs-body); letter-spacing: 0; text-transform: none; }
@media (max-width: 56em) {
  /* the invitation follows the presentation closely: content from the
     top of its screen, not floated in the middle of it */
  .newsletter.section { padding-block: 3rem 4rem; min-height: auto; align-content: start; }
  /* the house's name settles a little lower, as a signature should */
  .newsletter .newsletter__sign { margin-top: clamp(2.25rem, 6vh, 3.25rem); }
  .newsletter .newsletter__aside { margin-top: clamp(1.5rem, 3.6vh, 2.25rem); }
  .packaging.section { padding-top: 2.5rem; padding-bottom: 3.5rem; }
  .newsletter .stmt__display { font-size: clamp(2.25rem, 10vw, 2.75rem); }
  .newsletter .newsletter__lede { font-size: clamp(1.0625rem, 4.6vw, 1.1875rem); line-height: 1.65; }
}
.newsletter .newsletter__note { color: var(--fg2); }



/* ==== Chapter One on the phone: a carousel of cards ====
   The title above, then one card per fragrance, each about four fifths
   of the screen wide so the next always stands at the right edge and
   asks to be swiped to. Each card carries its fragrance's own colour,
   lit from behind the bottle. The swipe is the browser's own, as
   before: continuous, no snap. Laptop is untouched. */
.chapter__head { display: none; }
@media all { /* phone and laptop alike */
  /* the whole chapter fits one screen: title, cards and sign; the
     cards take whatever height is left, and the photograph inside each
     gives way first, so nothing ever needs a vertical scroll to see */
  .chapter {
    height: 100svh;
    display: flex;
    flex-direction: column;
    padding-block: calc(var(--header-h) + var(--sp-m)) var(--sp-m);
  }
  /* the full-screen room colour, the drift and the rail belong to the
     full-screen rooms; the cards carry their own colour */
  .chapter__rooms, .chapter__rail { display: none; }
  .chapter__track, .chapter__cue-bar { opacity: 1; }

  .chapter__head { display: block; flex: none; text-align: center; padding-inline: var(--margin); }
  /* Arabic joins its letters: no tracking, no indent */
  .chapter__head-kicker { color: var(--z-gold); letter-spacing: 0; text-indent: 0; font-size: var(--fs-body-lg); line-height: 1.4; }
  .chapter__head-title {
    margin-top: var(--sp-s);
    /* the same face, weight and tracking as the laptop's CHAPTER I */
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.5rem, 13.5vw, 4rem);
    line-height: 0.95;
    white-space: nowrap;
    letter-spacing: 0.045em;
    text-indent: 0.045em;

    text-transform: uppercase;
    color: var(--z-ivory);
  }

  .chapter__track {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    margin-top: var(--sp-m);
    gap: 0.875rem;
    padding-inline: var(--margin) 0;   /* the end margin comes from the spacer below */
    align-items: stretch;
  }
  /* the end margin, which a scroll container's own padding will not
     reliably give in every engine */
  .chapter__track::after { content: ''; flex: none; width: calc(var(--margin) - 0.875rem); }

  .chapter__panel {
    width: 78%;
    height: auto;
    padding: 0;
    display: flex;
    border: var(--hairline) solid rgba(169, 143, 85, 0.28);
    border-radius: 2px;
    background-color: var(--z-espresso);
    overflow: hidden;
  }
  .chapter__panel.chapter__panel--intro { display: none; }
  .chapter__panel[data-temp="date-me"]        { background-color: color-mix(in srgb, var(--temp-date-me) 42%, var(--z-ink)); }
  .chapter__panel[data-temp="tropical-burn"]  { background-color: color-mix(in srgb, var(--temp-tropical-burn) 42%, var(--z-ink)); }
  .chapter__panel[data-temp="sweet-disaster"] { background-color: color-mix(in srgb, var(--temp-sweet-disaster) 42%, var(--z-ink)); }
  .chapter__panel[data-temp="black-honey"]    { background-color: var(--z-ink); }
  .chapter__panel::before {
    background: radial-gradient(ellipse 70% 42% at 50% 30%, var(--room-sheen, rgba(169, 143, 85, 0.16)), transparent 72%);
  }

  .chapter__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0 var(--sp-m);
    row-gap: 0;
  }
  .chapter__act { display: none; }
  .chapter__bottle { flex: 1 1 auto; min-height: 0; width: 100%; height: auto; display: block; will-change: auto; transform: none !important; }
  .chapter__bottle__fig {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
  }
  .chapter__bottle__fig.has-media > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  .chapter__bottle__fig.has-media {
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  }
  .chapter__copy { padding-inline: var(--sp-m); margin-top: calc(-1 * var(--sp-s)); }
  .chapter__num { font-size: var(--fs-body-lg); color: var(--z-gold); }
  .chapter__name { margin-top: 0.35rem; font-size: clamp(1.75rem, 8vw, 2.125rem); }
  .chapter__line { margin-top: var(--sp-xs); font-size: var(--fs-body); }
  .chapter__facets { display: none; }
  .chapter__cta { margin-top: var(--sp-m); }

  /* every card is complete from the start: the one peeking in at the
     edge must already show what it is */
  html.js-motion .chapter__panel [data-hreveal] { opacity: 1; transform: none; transition: none; }

  /* a short phone gives the bottle the room: the line steps aside */
  @media (min-width: 56.01em) and (max-height: 740px), (max-width: 30em) and (min-aspect-ratio: 390/740), (min-width: 30.01em) and (max-width: 56em) and (max-height: 740px) {
    .chapter__line { display: none; }
    .chapter__copy { margin-top: var(--sp-xs); }
  }
  /* the sign, quietly: small grey type and a plain arrow, no gold, no
     moving bar. The peeking card already says there is more. */
  .chapter__cue-glide { display: none; }
  .chapter__cue-bar { color: var(--z-taupe); }
  .chapter__cue-text { color: var(--z-taupe); letter-spacing: 0.18em; font-size: 0.6875rem; }
  .chapter__cue-text .chapter__cue-arrow { color: var(--z-taupe); animation: none; font-size: 0.875rem; }
  .chapter.is-complete .chapter__cue-done { color: var(--z-taupe); letter-spacing: 0.18em; font-size: 0.6875rem; }
  /* On the phone the chapter sits on ivory: dark ink for the title, the
     Arabic in bronze, the sign in warm grey. The cards keep their own
     dark colour and photography, so they stand out cleanly on the white;
     their gold outline goes. */
  .chapter {
    background-color: var(--z-stone);
    color: var(--z-ink);
    --fg: var(--z-ink);
    --fg2: var(--z-brown);
    --fg3: var(--z-brown);
    --accent: var(--z-bronze);
    --line: var(--line-on-light, rgba(13, 11, 9, 0.12));
  }
  .chapter.ambient::before { display: none; }
  .chapter .chapter__head-title { color: var(--z-ink); }
  .chapter .chapter__head-kicker { color: var(--z-bronze); }
  .chapter .chapter__panel { border: 0; border-radius: 2px; }
  .chapter .chapter__cue-bar,
  .chapter .chapter__cue-text,
  .chapter .chapter__cue-text .chapter__cue-arrow,
  .chapter.is-complete .chapter__cue-done { color: var(--z-brown); }
  /* The cards as a light gallery, in the soft studio white and cool
     grey of a product shelf: white, grey, grey, white. The photograph
     sits as a clean rectangle at the top; the words below are in ink. */
  /* Each card is the colour of its own studio photograph's floor, so the
     picture runs on into the card with no edge: two in white, two in
     the grey of the grey sweep. */
  .chapter .chapter__panel[data-temp="date-me"]        { background-color: #F3F3F5; --card: #F3F3F5; }
  .chapter .chapter__panel[data-temp="tropical-burn"]  { background-color: #F2F2F2; --card: #F2F2F2; }
  .chapter .chapter__panel[data-temp="sweet-disaster"] { background-color: #B8B8BA; --card: #B8B8BA; }
  .chapter .chapter__panel[data-temp="black-honey"]    { background-color: #96979B; --card: #96979B; }
  /* the studio photographs (phone only, so a laptop never downloads them) */
  /* framed from the floor up: the whole bottle, a little floor beneath,
     cropped from the empty sweep above */
  /* The cards size to their content and sit centred in the band. The
     photograph window is cut close around the bottle, so the bottle
     fills most of it, and the words below are set tight. */
  .chapter .chapter__bottle__fig { position: relative; background: center 58% / auto 155% no-repeat; background-color: var(--card); }
  .chapter .chapter__panel { height: auto; align-self: center; }
  .chapter .chapter__bottle { flex: none; }
  .chapter .chapter__bottle__fig { flex: none; height: 18.5rem; }
  /* the bottle leads; the name is set a size smaller than before */
  .chapter .chapter__name { font-size: clamp(1.5rem, 6.6vw, 1.75rem); }
  .chapter .chapter__line { font-size: 0.9375rem; line-height: 1.5; min-height: 3em; }  /* two lines kept for every card, so all four stand the same height */
  .chapter .chapter__num { font-size: var(--fs-label); }
  .chapter .chapter__grid { padding-bottom: var(--sp-m); }
  .chapter .chapter__copy { margin-top: var(--sp-xs); }
  .chapter .chapter__name { margin-top: 0.25rem; }
  .chapter .chapter__line { margin-top: 0.375rem; }
  .chapter .chapter__cta { margin-top: var(--sp-s); }
  /* a short phone: narrower cards, so the photograph keeps its bottle */
  @media (min-width: 56.01em) and (max-height: 740px), (max-width: 30em) and (min-aspect-ratio: 390/740), (min-width: 30.01em) and (max-width: 56em) and (max-height: 740px) {
    .chapter .chapter__panel { width: 66%; }
  }
  /* the floor of the photograph runs on into the card */
  .chapter .chapter__bottle__fig::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 7%;
    background: linear-gradient(to bottom, transparent, var(--card));
    pointer-events: none;
  }
  .chapter .chapter__bottle__fig > img { display: none; }
  .chapter [data-temp="date-me"] .chapter__bottle__fig {
    background-image: -webkit-image-set(url("../../assets/media/fragrances/date-me/studio-1x.webp") 1x, url("../../assets/media/fragrances/date-me/studio-2x.webp") 2x);
    background-image: image-set(url("../../assets/media/fragrances/date-me/studio-1x.webp") 1x, url("../../assets/media/fragrances/date-me/studio-2x.webp") 2x);
  }
  .chapter [data-temp="black-honey"] .chapter__bottle__fig {
    background-image: -webkit-image-set(url("../../assets/media/fragrances/black-honey/studio-1x.webp") 1x, url("../../assets/media/fragrances/black-honey/studio-2x.webp") 2x);
    background-image: image-set(url("../../assets/media/fragrances/black-honey/studio-1x.webp") 1x, url("../../assets/media/fragrances/black-honey/studio-2x.webp") 2x);
  }
  .chapter [data-temp="tropical-burn"] .chapter__bottle__fig {
    background-image: -webkit-image-set(url("../../assets/media/fragrances/tropical-burn/studio-1x.webp") 1x, url("../../assets/media/fragrances/tropical-burn/studio-2x.webp") 2x);
    background-image: image-set(url("../../assets/media/fragrances/tropical-burn/studio-1x.webp") 1x, url("../../assets/media/fragrances/tropical-burn/studio-2x.webp") 2x);
  }
  .chapter [data-temp="sweet-disaster"] .chapter__bottle__fig {
    background-image: -webkit-image-set(url("../../assets/media/fragrances/sweet-disaster/studio-1x.webp") 1x, url("../../assets/media/fragrances/sweet-disaster/studio-2x.webp") 2x);
    background-image: image-set(url("../../assets/media/fragrances/sweet-disaster/studio-1x.webp") 1x, url("../../assets/media/fragrances/sweet-disaster/studio-2x.webp") 2x);
  }
  .chapter .chapter__bottle__fig .media-slot__frame,
  .chapter .chapter__bottle__fig .media-slot__ticks { display: none; }
  /* on the two grey cards the words take full ink for contrast */
  .chapter [data-temp="black-honey"] .chapter__line,
  .chapter [data-temp="sweet-disaster"] .chapter__line { color: rgba(13, 11, 9, 0.78); }
  .chapter [data-temp="black-honey"] .chapter__num,
  .chapter [data-temp="sweet-disaster"] .chapter__num { color: var(--z-ink); }
  .chapter .chapter__panel::before { display: none; }
  .chapter .chapter__bottle__fig.has-media { -webkit-mask-image: none; mask-image: none; }
  .chapter .chapter__copy { margin-top: var(--sp-s); }
  .chapter .chapter__num { color: var(--z-bronze); }
  .chapter .chapter__name { color: var(--z-ink); }
  .chapter .chapter__line { color: var(--z-brown); }
  .chapter .chapter__cta {
    color: var(--z-ink);
    background: transparent;
    border-color: rgba(13, 11, 9, 0.55);
  }
  .chapter .chapter__cta-arrow { color: var(--z-ink); }
  .chapter .chapter__cta:hover,
  .chapter .chapter__cta:focus-visible,
  .chapter .chapter__cta:active { background: var(--z-ink); color: var(--z-ivory); border-color: var(--z-ink); }
  .chapter .chapter__cta:active .chapter__cta-arrow,
  .chapter .chapter__cta:hover .chapter__cta-arrow { color: var(--z-ivory); }
  /* ---- the shelf: a square tile, then the words beneath it ----
     As a product shelf: the photograph is a square tile with the bottle
     standing in the middle of it at a good size; under it, left set,
     the number, the name and the line. No card around the words, no
     button: the tile itself is the way in. */
  .chapter .chapter__panel { background: transparent !important; border-radius: 0; overflow: visible; width: 80%; }
  .chapter .chapter__grid { align-items: stretch; text-align: left; padding: 0; }
  .chapter .chapter__bottle__fig {
    height: auto;
    aspect-ratio: 1 / 1;
    background-size: cover;          /* the photograph spans the tile edge to edge */
    background-position: center 64%;
  }
  .chapter .chapter__bottle__fig::after { display: none; }
  .chapter .chapter__copy { margin-top: var(--sp-s); padding: 0; text-align: left; }
  .chapter .chapter__num { display: block; font-size: var(--fs-micro); letter-spacing: 0.14em; color: var(--z-brown); }
  .chapter .chapter__name {
    margin-top: 0.3rem;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 1.0625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.25;
    color: var(--z-ink);
  }
  /* the line reads as a quotation in the house serif: italic, in ink,
     set between curled quotation marks */
  .chapter .chapter__panel .chapter__line {
    margin: 0.4rem 0 0;
    max-width: none;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: 1.0625rem;
    line-height: 1.45;
    color: rgba(13, 11, 9, 0.82);
  }
  .chapter .chapter__panel .chapter__line::before { content: '\201C'; }
  .chapter .chapter__panel .chapter__line::after { content: '\201D'; }
  .chapter .chapter__cta { display: none; }
  /* title, shelf and sign sit together as one group, centred on the
     screen, rather than the sign waiting alone at the foot */
  .chapter { justify-content: center; }
  .chapter .chapter__track { flex: 0 0 auto; margin-top: var(--sp-l); }
  .chapter .chapter__cue-bar { margin-top: var(--sp-l); }
  /* the sign sits under the cards, in the flow */
  .chapter__cue-bar { position: static; flex: none; margin-top: var(--sp-m); }
}

/* laptop: the words lead and the case follows, as before */
@media (min-width: 56.01em) {
  .packaging__head { display: flex; flex-direction: column; align-items: center; }
  .packaging__words { order: -1; }
}

/* ---- Chapter I on the phone: small touches of the house gold ----
   Only details: the numerals and the quotation marks round each line. */
@media all { /* phone and laptop alike */
  .chapter .chapter__num { color: var(--z-bronze); }
  .chapter .chapter__panel .chapter__line::before,
  .chapter .chapter__panel .chapter__line::after { color: var(--z-bronze); }
}


/* ---- Chapter I on the laptop: the phone's shelf ----
   The same light gallery as the phone, with all four tiles standing
   side by side in one row; no sideways journey to travel. */
@media (min-width: 56.01em) {
  .chapter { height: auto; min-height: calc(100svh + 8rem); justify-content: center; padding-block: calc(var(--header-h) + var(--sp-l)) calc(var(--sp-l) + 8rem); }
  .chapter__head-title { font-size: clamp(3rem, 5vw, 4.5rem); }
  .chapter__track {
    flex: none;
    overflow: visible;
    justify-content: center;
    gap: clamp(1rem, 1.6vw, 1.5rem);
    padding-inline: var(--margin);
    margin-top: var(--sp-l);
  }
  .chapter__track::after { display: none; }
  .chapter .chapter__panel { width: auto; flex: 0 1 17.5rem; min-width: 0; }
  .chapter .chapter__bottle__fig { height: clamp(14rem, 42vh, 21rem); }
  .chapter .chapter__name { font-size: clamp(1.375rem, 1.8vw, 1.75rem); }
  .chapter .chapter__line { display: block; }
  .chapter__step, .chapter__cue-bar { display: none; }
  .chapter__head-kicker { max-width: none; margin-inline: auto; }
}

/* Laptop Chapter I, gallery spacing: four larger portrait tiles spread
   across the width with generous air between, words centred beneath. */
@media (min-width: 56.01em) {
  .chapter__track { gap: clamp(2rem, 4.5vw, 5rem); padding-inline: clamp(2rem, 4vw, 4.5rem); margin-top: clamp(2.5rem, 5vh, 3.5rem); }
  .chapter .chapter__panel { flex: 1 1 0; max-width: 26rem; }
  .chapter .chapter__bottle__fig { height: clamp(18rem, 52vh, 30rem); background-size: auto 112%; background-position: center 62%; }
  .chapter .chapter__copy { text-align: center; padding-inline: 0; margin-top: var(--sp-m); }
  .chapter .chapter__grid { align-items: stretch; }
}

/* ==== Hero: Date Me in its bands of light ====
   One bottle, full bleed. The name and an underlined Discover sit in
   the dark: top left on the phone, bottom left on the laptop. No scrim
   over the bottle; only a soft shade where the words sit. */
.hero .media-slot.hero__media {
  background-color: #0B0704;
  background-image: -webkit-image-set(url("../../assets/media/hero/date-me-1x.webp") 1x, url("../../assets/media/hero/date-me-2x.webp") 2x);
  background-image: image-set(url("../../assets/media/hero/date-me-1x.webp") 1x, url("../../assets/media/hero/date-me-2x.webp") 2x);
  /* phone: the photograph stands on the foot of the screen, a little
     smaller than the screen is tall, so the bottle keeps its distance
     from the words and the dark above it is the photograph's own */
  background-size: auto 86%;
  background-position: 50% 100%;
  background-repeat: no-repeat;
}
.hero::after {
  inset: 0; height: auto; opacity: 1;
  background: linear-gradient(to bottom, #0B0704 0%, #0B0704 14%, rgba(11, 7, 4, 0) 30%);
}
.hero .hero__content {
  position: absolute;
  inset: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  padding-top: calc(var(--header-h) + var(--sp-l));
}
.hero__name {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(2.25rem, 10vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--z-ivory);
  text-shadow: 0 0.02em 0.8em rgba(11, 7, 4, 0.6);
}
.hero__discover {
  margin-top: var(--sp-m);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--z-ivory);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
  padding-block: 0.5rem;
  transition: opacity var(--dur-micro) var(--ease-enter);
}
.hero__discover:hover, .hero__discover:focus-visible { opacity: 0.75; }
html.js-motion .hero__discover { transition-delay: 700ms; }

@media (min-width: 56.01em) {
  .hero .media-slot.hero__media {
    background-image: -webkit-image-set(url("../../assets/media/hero/date-me-wide-1x.webp") 1x, url("../../assets/media/hero/date-me-wide-2x.webp") 2x);
    background-image: image-set(url("../../assets/media/hero/date-me-wide-1x.webp") 1x, url("../../assets/media/hero/date-me-wide-2x.webp") 2x);
    background-position: center center;
    background-size: cover;
  }
  .hero::after { background: linear-gradient(to top, rgba(11, 7, 4, 0.6) 0%, rgba(11, 7, 4, 0) 35%); }
  .hero .hero__content { justify-content: flex-end; padding-top: 0; padding-bottom: clamp(3rem, 8vh, 5.5rem); }
  .hero__name { font-size: clamp(3rem, 4.6vw, 4.75rem); }
}
/* the house line, quietly beneath the name */
.hero__line {
  margin-top: 0.6rem;
  font-family: var(--font-title);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1rem, 4.4vw, 1.375rem);
  letter-spacing: 0.01em;
  color: rgba(250, 248, 244, 0.82);
  text-shadow: 0 0.02em 0.8em rgba(11, 7, 4, 0.6);
}
html.js-motion .hero__line { transition-delay: 500ms; }
/* the photograph's pure black eases into the house ink at its foot, so
   the hero hands over to the section below with no visible seam */
.hero .media-slot.hero__media { background-color: var(--z-ink); }
.hero::after {
  background:
    linear-gradient(to bottom, var(--z-ink) 0%, var(--z-ink) 14%, rgba(13, 11, 9, 0) 30%),
    linear-gradient(to top, var(--z-ink) 0%, rgba(13, 11, 9, 0) 16%);
}
@media (min-width: 56.01em) {
  .hero::after { background: linear-gradient(to top, var(--z-ink) 0%, rgba(13, 11, 9, 0.6) 12%, rgba(13, 11, 9, 0) 38%); }
}
/* name a step smaller, the block set a little lower */
.hero__name { font-size: clamp(2rem, 9vw, 3.75rem); }
.hero .hero__content { padding-top: calc(var(--header-h) + var(--sp-l) + 1.25rem); }
@media (min-width: 56.01em) {
  .hero__name { font-size: clamp(2.75rem, 4.1vw, 4.25rem); }
  .hero .hero__content { padding-top: 0; padding-bottom: clamp(2.25rem, 6vh, 4.5rem); }
}
/* Laptop Chapter I: square tiles as on the phone, names a lighter weight */
@media (min-width: 56.01em) {
  .chapter .chapter__bottle__fig { height: auto; aspect-ratio: 1 / 1; background-size: auto 120%; background-position: center 60%; }
  .chapter .chapter__panel { max-width: 22rem; }
  .chapter .chapter__name { font-weight: 400; font-size: clamp(1rem, 1.25vw, 1.25rem); letter-spacing: 0.12em; }
}

/* ---- The presentation on the laptop: three screens, as on the phone ----
   The case, then each gift, each holds one screen: the photograph whole
   at one side, the words beside it. The middle gift turns the other way
   for rhythm. No keyline. */
@media (min-width: 56.01em) {
  .packaging.section { padding-block: 0; }
  .packaging__head,
  .packaging__gift {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 6vw, 7rem);
    align-items: center;
    align-content: center;
    min-height: 100svh;
    padding-block: calc(var(--header-h) + 2rem) 2rem;
    max-width: 72rem;
    margin-inline: auto;
    text-align: left;
  }
  .packaging__head > .packaging__stage {
    grid-column: 1; grid-row: 1;
    order: 0;
    width: auto;
    height: min(calc(100svh - var(--header-h) - 6rem), 40rem);
    aspect-ratio: 4 / 5;
    margin: 0;
    justify-self: end;
  }
  .packaging__stage .packaging__keyline { display: none; }
  .packaging__words { grid-column: 2; grid-row: 1; order: 0; max-width: 28rem; }
  .packaging__words .stmt__kicker { text-align: left; }
  .packaging__words .stmt__kicker.tick-above::before { display: none; }
  .packaging__head .packaging__display { max-width: none; text-align: left; font-size: clamp(2.25rem, 3.4vw, 3.25rem); line-height: 1.12; }
  .packaging__head .packaging__lede { margin-inline: 0; text-align: left; max-width: 26em; }

  .packaging__gifts { display: block; margin-top: 0; }
  .packaging__gift { grid-template-rows: auto auto auto; row-gap: 0; }
  .packaging__gift + .packaging__gift { margin-top: 0; }
  .packaging__gift-media {
    grid-column: 1; grid-row: 1 / 4;
    justify-self: end;
    width: auto;
    height: min(calc(100svh - var(--header-h) - 6rem), 40rem);
    aspect-ratio: 4 / 5;
  }
  .packaging__gift-num, .packaging__gift-title, .packaging__gift-copy { grid-column: 2; max-width: 28rem; }
  .packaging__gift-num { grid-row: 1; align-self: end; margin-top: 0; }
  .packaging__gift-title { grid-row: 2; }
  .packaging__gift-copy { grid-row: 3; align-self: start; }
  /* the second gift faces the other way */
  .packaging__gift:nth-child(2) .packaging__gift-media { grid-column: 2; justify-self: start; }
  .packaging__gift:nth-child(2) .packaging__gift-num,
  .packaging__gift:nth-child(2) .packaging__gift-title,
  .packaging__gift:nth-child(2) .packaging__gift-copy { grid-column: 1; justify-self: end; width: 100%; }
}
@media (min-width: 56.01em) {
  .packaging__gift { grid-template-rows: 1fr auto auto auto 1fr; }
  .packaging__gift-media { grid-row: 1 / 6; }
  .packaging__gift-num { grid-row: 2; }
  .packaging__gift-title { grid-row: 3; }
  .packaging__gift-copy { grid-row: 4; }
}

/* ---- 500 on the laptop: a step smaller, a little more gold ----
   Short gold hairlines either side of the lozenge and of the footnote,
   and the title in the house bronze. */
@media (min-width: 56.01em) {
  .scarcity .scarcity__num { font-size: clamp(6rem, 11vw, 10rem); }
  .scarcity .scarcity__title { color: var(--z-bronze); font-size: clamp(1.25rem, 1.6vw, 1.625rem); }
  .scarcity__title::after {
    width: 7px; height: 7px;
    box-shadow: 0 0 0 0 transparent;
    background:
      linear-gradient(var(--z-bronze), var(--z-bronze)) center / 0 0 no-repeat;
  }
  .scarcity__title { position: relative; }
  .scarcity .stmt__para { position: relative; }
  .scarcity .stmt__para::before {
    content: '';
    display: block;
    width: 9rem; height: 1px;
    margin: calc(-1 * clamp(1rem, 2.6vh, 1.5rem) - 4px) auto clamp(1.75rem, 4vh, 2.5rem);
    background: linear-gradient(90deg, rgba(169,143,85,0) 0%, rgba(169,143,85,0.7) 30%, rgba(169,143,85,0) 45%, rgba(169,143,85,0) 55%, rgba(169,143,85,0.7) 70%, rgba(169,143,85,0) 100%);
  }
  .scarcity__note::before, .scarcity__note::after {
    content: ''; width: 2.5rem; height: 1px; background: rgba(169, 143, 85, 0.6);
  }
}

/* Laptop Chapter I: the photograph fills each square, so no strip of
   card shows at the sides; the tiles a little larger */
@media (min-width: 56.01em) {
  .chapter .chapter__bottle__fig { background-size: cover; background-position: center 62%; }
  .chapter .chapter__panel { max-width: 25rem; }
}
@media (min-width: 56.01em) {
  .scarcity .stmt__para::before { display: none; }
  .scarcity__title::before {
    content: '';
    position: absolute;
    left: 50%; bottom: 3px;
    width: 10rem; height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(169,143,85,0) 0%, rgba(169,143,85,0.75) 38%, rgba(169,143,85,0) 44%, rgba(169,143,85,0) 56%, rgba(169,143,85,0.75) 62%, rgba(169,143,85,0) 100%);
  }
}
@media (min-width: 56.01em) { .chapter__track { margin-top: calc(clamp(2.5rem, 5vh, 3.5rem) + 1.25rem); } }

/* ---- 500 on the laptop: the page framed like a certificate ----
   A gold hairline inset from the screen's edges with short corner
   brackets, and a faint warm light behind the numeral. Static paint. */
@media (min-width: 56.01em) {
  .scarcity { position: relative; isolation: isolate; }
  .scarcity::before {
    content: '';
    position: absolute;
    inset: calc(var(--header-h) + 1.75rem) clamp(1.75rem, 3vw, 3rem) clamp(1.75rem, 3vw, 3rem);
    border: 1px solid rgba(169, 143, 85, 0.28);
    pointer-events: none;
    z-index: -1;
    /* corner brackets, drawn in the same gold, a shade stronger */
    background:
      linear-gradient(var(--z-bronze), var(--z-bronze)) top left / 2.25rem 1px no-repeat,
      linear-gradient(var(--z-bronze), var(--z-bronze)) top left / 1px 2.25rem no-repeat,
      linear-gradient(var(--z-bronze), var(--z-bronze)) top right / 2.25rem 1px no-repeat,
      linear-gradient(var(--z-bronze), var(--z-bronze)) top right / 1px 2.25rem no-repeat,
      linear-gradient(var(--z-bronze), var(--z-bronze)) bottom left / 2.25rem 1px no-repeat,
      linear-gradient(var(--z-bronze), var(--z-bronze)) bottom left / 1px 2.25rem no-repeat,
      linear-gradient(var(--z-bronze), var(--z-bronze)) bottom right / 2.25rem 1px no-repeat,
      linear-gradient(var(--z-bronze), var(--z-bronze)) bottom right / 1px 2.25rem no-repeat;
  }
  .scarcity::after {
    content: '';
    position: absolute;
    left: 50%; top: 42%;
    width: min(46rem, 60vw); height: 22rem;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(169, 143, 85, 0.12), rgba(169, 143, 85, 0) 65%);
    pointer-events: none;
    z-index: -1;
  }
}
/* the Arabic beside the presentation's label: joined letters, no tracking */
.packaging__kicker-ar {
  margin-inline-start: 0.6em;
  font-family: var(--font-ar-text);
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--z-gold);
}
.packaging__kicker-ar { font-size: 1.2em; margin-inline-start: 0.75em; }
/* the 500 page holds exactly one laptop screen, so its frame sits true:
   an even margin on all four sides, the top one measured from under the
   header. Sizes scale with the screen's height so a short laptop fits. */
@media (min-width: 56.01em) {
  .scarcity.section--focal {
    height: 100svh; min-height: 0;
    padding-block: calc(var(--header-h) + 2.5rem) 2.5rem;
    align-content: center;
  }
  .scarcity::before { inset: calc(var(--header-h) + 1.25rem) 1.25rem 1.25rem; }
  .scarcity .stmt { --stmt-gap-lead: clamp(1rem, 3.2vh, 2rem); --stmt-gap-body: clamp(1.25rem, 3.6vh, 2.25rem); }
  .scarcity .scarcity__num { font-size: clamp(5rem, min(11vw, 17vh), 10rem); }
  .scarcity .stmt__para { font-size: clamp(1rem, 2.1vh, 1.1875rem); }
  .scarcity .scarcity__note { margin-top: clamp(1.25rem, 3.5vh, 2.5rem); }
}
@media (min-width: 56.01em) { .chapter .chapter__bottle__fig { aspect-ratio: 9 / 10; } .chapter .chapter__panel { max-width: 27rem; } }
/* the gift titles share the size of the presentation's own title */
.packaging .packaging__gift-title { font-size: clamp(1.625rem, 7.4vw, 1.9375rem); line-height: 1.18; }
@media (min-width: 56.01em) {
  .packaging .packaging__gift-title { font-size: clamp(2.25rem, 3.4vw, 3.25rem); line-height: 1.12; max-width: none; }
}
/* the words of each gift share one column edge: number, title and
   description all start on the same line */
@media (min-width: 56.01em) {
  .packaging .packaging__gift-num,
  .packaging .packaging__gift-title,
  .packaging .packaging__gift-copy { width: min(100%, 28rem); max-width: 28rem; justify-self: start; }
  .packaging .packaging__gift:nth-child(2) .packaging__gift-num,
  .packaging .packaging__gift:nth-child(2) .packaging__gift-title,
  .packaging .packaging__gift:nth-child(2) .packaging__gift-copy { justify-self: end; }
}
@media (max-width: 56em) { .hero .hero__content { padding-top: calc(var(--header-h) + var(--sp-l)); } }
@media (max-width: 56em) { .hero .hero__content { padding-left: calc(var(--margin) - 0.375rem); } }

/* ---- 5b · Beyond the bottle ----
   Ivory, as a page of the presentation: the photograph of the case's
   seal, and beside it a label, the line and a short paragraph. Reads
   as the gifts do: the photograph whole, the words set left. */
.beyond { color: var(--z-ink); }
.beyond__in { display: flex; flex-direction: column; text-align: left; }
.beyond__media { width: 100%; margin: 0; }
.beyond__media img { display: block; width: 100%; height: auto; border-radius: 2px; }
.beyond__kicker { text-align: left; text-indent: 0; }
.beyond__kicker.tick-above::before { display: none; }
.beyond__display { margin-top: var(--sp-xs); max-width: none; text-align: left; }
.beyond__copy { margin-top: var(--sp-s); margin-inline: 0; text-align: left; color: var(--z-brown); }

@media (max-width: 56em) {
  /* one phone screen: the photograph takes the height the words leave */
  .beyond.section { padding-top: calc(var(--header-h) + var(--sp-m)); padding-bottom: var(--sp-xl); }
  .beyond__in { min-height: calc(100svh - var(--header-h) - 4.5rem); justify-content: center; }
  .beyond__media { flex: none; width: min(100%, calc((100svh - 22rem) * 0.836)); margin-inline: 0; }
  .beyond__words { margin-top: var(--sp-m); }
  .beyond__display { font-size: clamp(1.625rem, 7.4vw, 1.9375rem); line-height: 1.18; }
  .beyond__copy { font-size: 1rem; line-height: 1.6; }
}
@media (min-width: 56.01em) {
  /* the laptop spread: the photograph left, sized to the screen, the
     words right, centred on it */
  .beyond.section { padding-block: 0; }
  .beyond__in {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(3rem, 6vw, 7rem);
    align-items: center;
    min-height: 100svh;
    padding-block: calc(var(--header-h) + 2rem) 2rem;
    max-width: 72rem;
    margin-inline: auto;
  }
  .beyond__media { justify-self: end; width: auto; height: min(calc(100svh - var(--header-h) - 6rem), 40rem); aspect-ratio: 1147 / 1372; }
  .beyond__media img { height: 100%; object-fit: cover; }
  .beyond__words { max-width: 28rem; }
  .beyond__display { font-size: clamp(2.25rem, 3.4vw, 3.25rem); line-height: 1.12; }
  .beyond__copy { max-width: 26em; }
}
@media (max-width: 56em) {
  .beyond.section { padding-bottom: var(--sp-m); }
  .beyond__in { min-height: calc(100svh - var(--header-h) - 3.5rem); }
}
/* Beyond the bottle on black, as the presentation is */
.beyond { color: var(--z-ivory); }
.beyond .beyond__display { color: var(--z-ivory); }
.beyond .beyond__copy { color: var(--z-beige); }
/* the 500 frame, quieter: a fainter keyline, shorter and softer corners,
   set a little further in */
@media (min-width: 56.01em) {
  .scarcity::before {
    inset: calc(var(--header-h) + 1.75rem) 2rem 1.75rem;
    border-color: rgba(169, 143, 85, 0.14);
    --c: rgba(130, 102, 58, 0.45);
    background:
      linear-gradient(var(--c), var(--c)) top left / 1.25rem 1px no-repeat,
      linear-gradient(var(--c), var(--c)) top left / 1px 1.25rem no-repeat,
      linear-gradient(var(--c), var(--c)) top right / 1.25rem 1px no-repeat,
      linear-gradient(var(--c), var(--c)) top right / 1px 1.25rem no-repeat,
      linear-gradient(var(--c), var(--c)) bottom left / 1.25rem 1px no-repeat,
      linear-gradient(var(--c), var(--c)) bottom left / 1px 1.25rem no-repeat,
      linear-gradient(var(--c), var(--c)) bottom right / 1.25rem 1px no-repeat,
      linear-gradient(var(--c), var(--c)) bottom right / 1px 1.25rem no-repeat;
  }
}
/* Phone: one screen exactly. The label and line first, then the
   photograph (whole, taking the height that is left), then the paragraph */
@media (max-width: 56em) {
  .beyond.section { padding: calc(var(--header-h) + var(--sp-m)) 0 var(--sp-m); }
  .beyond__in { height: calc(100svh - var(--header-h) - var(--sp-m) * 2); min-height: 26rem; justify-content: flex-start; }
  .beyond__words { display: contents; }
  .beyond__kicker { order: 1; margin: 0; }
  .beyond__display { order: 2; margin-top: var(--sp-xs); }
  .beyond__media { order: 3; flex: 1 1 auto; min-height: 8rem; width: 100%; margin: var(--sp-m) 0 0; display: flex; }
  .beyond__media img { width: auto; height: 100%; max-width: 100%; object-fit: contain; object-position: left center; }
  .beyond__copy { order: 4; margin-top: var(--sp-m); font-size: 0.9375rem; line-height: 1.55; }
}
/* Beyond the bottle on black: the photograph's lit edges (the amber glow
   and the marble at the right and foot) ran hard into the black. A soft
   vignette on the image itself darkens its edges a little so it settles
   into the ground. On the img, so it follows the photograph's own box on
   phone (contain) and laptop (cover) alike; mask, not a filter, so
   nothing is re-rasterised. */
.beyond__media img {
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 48%, #000 62%, rgba(0, 0, 0, 0.62) 100%);
          mask-image: radial-gradient(ellipse 72% 70% at 50% 48%, #000 62%, rgba(0, 0, 0, 0.62) 100%);
}
@media (max-width: 56em) {
  .beyond.section { padding-top: calc(var(--header-h) + var(--sp-s)); }
  .beyond__in { height: calc(100svh - var(--header-h) - var(--sp-s) - var(--sp-m)); }
  .beyond__media { margin-top: var(--sp-s); }
  .beyond__copy { margin-top: var(--sp-s); font-size: 0.875rem; line-height: 1.5; }
}
@media (max-width: 56em) { #beyond + .newsletter.section { padding-top: 5rem; } }
@media (min-width: 56.01em) { #beyond + .newsletter.section { margin-top: 3rem; } }

/* ---- Phone hero, recomposed ----
   The bottle stands at the centre, so the words do too: the name and its
   line centred above it, and Discover set on the dark floor beneath it,
   where the photograph is quiet. Nothing sits on the light bands. */
@media (max-width: 56em) {
  .hero .hero__content {
    align-items: center;
    text-align: center;
    padding-inline: var(--margin);
    padding-top: calc(var(--header-h) + var(--sp-l));
  }
  .hero__name { font-size: clamp(2.25rem, 10vw, 3rem); letter-spacing: 0.08em; text-indent: 0.08em; }
  .hero__line { margin-top: 0.5rem; font-size: clamp(0.9375rem, 4.2vw, 1.125rem); max-width: 20em; }
  .hero .hero__discover {
    position: absolute;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(2rem, 6svh, 3.5rem));
    transform: translateX(-50%);
    margin: 0;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
  }
  html.js-motion .hero [data-hero].hero__discover { transform: translate(-50%, 24px); }
  html.js-motion .hero.is-in [data-hero].hero__discover { transform: translateX(-50%); }
}

/* Beyond the bottle and the invitation are both on black: a fine gold
   rule with the house lozenge at its centre marks where one page ends
   and the next begins */
#beyond + .newsletter { position: relative; }
#beyond + .newsletter::before,
#beyond + .newsletter::after {
  content: '';
  position: absolute;
  left: 50%;
  pointer-events: none;
}
#beyond + .newsletter::before {
  top: 0;
  width: min(calc(100% - 2 * var(--margin)), 60rem);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(169,143,85,0) 0%, rgba(169,143,85,0.45) 30%, rgba(169,143,85,0.45) 46%, rgba(169,143,85,0) 48.5%, rgba(169,143,85,0) 51.5%, rgba(169,143,85,0.45) 54%, rgba(169,143,85,0.45) 70%, rgba(169,143,85,0) 100%);
}
#beyond + .newsletter::after {
  top: -3.5px;
  width: 7px; height: 7px;
  border: 1px solid rgba(169, 143, 85, 0.75);
  transform: translateX(-50%) rotate(45deg);
}
/* the laptop gap as padding, not margin, so no strip of other colour shows */
@media (min-width: 56.01em) {
  #beyond + .newsletter.section { margin-top: 0; padding-top: calc(var(--header-h) + 3rem); }
}
@media (max-width: 56em) {
  #beyond.section { padding-bottom: 2.25rem; }
}
@media (min-width: 56.01em) { .hero .hero__content { left: -1.5rem; right: 1.5rem; } }

/* ==== Hero, brand-led ====
   The photograph fills the screen; the house line and Discover share
   one line at its foot, on the quiet floor, as a campaign is signed. */
.hero__slogan {
  font-family: var(--font-title);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.08;
  color: var(--z-ivory);
}
.hero__slogan .hero__title-line { display: block; }
@media (max-width: 56em) {
  .hero .media-slot.hero__media { background-size: cover; background-position: 50% 42%; }
  .hero::after {
    background: linear-gradient(to top, rgba(13, 11, 9, 0.92) 0%, rgba(13, 11, 9, 0.55) 18%, rgba(13, 11, 9, 0) 34%),
                linear-gradient(to bottom, rgba(13, 11, 9, 0.45) 0%, rgba(13, 11, 9, 0) 14%);
  }
  .hero .hero__content {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-m);
    text-align: left;
    padding: 0 var(--margin) calc(env(safe-area-inset-bottom, 0px) + clamp(1.75rem, 5svh, 2.75rem));
  }
  .hero .hero__slogan { font-size: clamp(1.375rem, 6.4vw, 1.75rem); letter-spacing: 0.03em; text-indent: 0; }
  .hero .hero__discover {
    position: static;
    transform: none;
    flex: none;
    margin: 0 0 0.15rem;
    letter-spacing: 0.14em;
    text-indent: 0;
  }
  html.js-motion .hero [data-hero].hero__discover { transform: translateY(24px); }
  html.js-motion .hero.is-in [data-hero].hero__discover { transform: none; }
}
@media (min-width: 56.01em) {
  .hero .hero__slogan { font-size: clamp(2.5rem, 3.6vw, 3.75rem); }
}
@media (max-width: 56em) { .hero .hero__slogan { font-size: clamp(1.0625rem, 5vw, 1.375rem); letter-spacing: 0.05em; line-height: 1.2; } .hero .hero__slogan .hero__title-line { white-space: nowrap; } }
/* (a fixed small-phone size, retired: the phone type scale now follows the width) */
@media (max-width: 56em) { .hero .hero__slogan { font-size: clamp(0.9375rem, 4.4vw, 1.1875rem); } .hero .hero__content { gap: var(--sp-l); } }
/* (a fixed small-phone size, retired: the phone type scale now follows the width) */
@media (max-width: 56em) { .hero .hero__slogan { font-size: clamp(1rem, 4.75vw, 1.25rem); } }
/* (a fixed small-phone size, retired: the phone type scale now follows the width) */
@media (min-width: 56.01em) { .hero .hero__slogan { font-size: clamp(2.25rem, 3.2vw, 3.25rem); } }
@media (max-width: 56em) { #beyond + .newsletter::before { top: 1.5rem; } #beyond + .newsletter::after { top: calc(1.5rem - 3.5px); } }
@media (min-width: 56.01em) { #beyond + .newsletter::before { top: 3rem; } #beyond + .newsletter::after { top: calc(3rem - 3.5px); } }
@media (min-width: 56.01em) { .hero .hero__slogan { font-size: clamp(2rem, 2.9vw, 3rem); } }
/* more air between Beyond the bottle and the invitation; the divider
   stays at the centre of the wider gap */
@media (max-width: 56em) {
  #beyond.section { padding-bottom: 3.25rem; }
  #beyond + .newsletter.section { padding-top: 6.5rem; }
  #beyond + .newsletter::before { top: 2rem; }
  #beyond + .newsletter::after { top: calc(2rem - 3.5px); }
}
@media (min-width: 56.01em) {
  .beyond__in { padding-bottom: 4rem; }
  #beyond + .newsletter.section { padding-top: calc(var(--header-h) + 5rem); }
  #beyond + .newsletter::before { top: 4.5rem; }
  #beyond + .newsletter::after { top: calc(4.5rem - 3.5px); }
}

/* ---- 500, with the campaign photograph ----
   Phone: the photograph opens the page, full width with a slim margin,
   then the statement beneath. Laptop: a spread inside the gold frame,
   the photograph left (sized to the screen, whole), the statement right. */
.scarcity__media { margin: 0; }
.scarcity__media img { display: block; width: 100%; height: auto; }
@media (max-width: 56em) {
  .scarcity.section--focal { height: auto; }
  .scarcity__media { margin: 0 var(--margin) clamp(2rem, 5vh, 3rem); box-shadow: 0 1.5rem 3rem -1.5rem rgba(13, 11, 9, 0.45); }
}
@media (min-width: 56.01em) {
  .scarcity__spread {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(3rem, 6vw, 7rem);
    width: min(100% - 8rem, 76rem);
    margin-inline: auto;
  }
  .scarcity__media {
    height: calc(100svh - var(--header-h) - 7.5rem);
    max-height: 46rem;
    aspect-ratio: 1068 / 1473;
    box-shadow: 0 2rem 4rem -2rem rgba(13, 11, 9, 0.5);
  }
  .scarcity__media img { height: 100%; object-fit: cover; }
  .scarcity__spread > .container { width: 100%; padding: 0; max-width: none; }
  .scarcity .scarcity__num { font-size: clamp(4.5rem, min(8vw, 13vh), 8rem); }
  .scarcity .stmt__para { max-width: 30em; margin-inline: auto; }
}
/* Laptop 500: the photograph fills the left half of the screen, edge to
   edge under the header; the statement sits centred in the right half,
   with the gold frame drawn round that half only */
@media (min-width: 56.01em) {
  .scarcity.section--focal { padding: var(--header-h) 0 0; }
  .scarcity__spread {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 0;
    width: 100%;
    max-width: none;
    height: calc(100svh - var(--header-h));
  }
  .scarcity__media { height: 100%; max-height: none; aspect-ratio: auto; width: 100%; box-shadow: none; }
  .scarcity__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
  .scarcity__spread > .container { padding: 0 clamp(2.5rem, 5vw, 5rem); }
  .scarcity::before { inset: calc(var(--header-h) + 1.25rem) 1.25rem 1.25rem calc(50% + 1.25rem); }
  .scarcity::after { left: 75%; }
}
@media (min-width: 56.01em) { .scarcity__spread > .container { align-self: center; margin-block: 0; padding-block: 0; } .scarcity .scarcity__num { font-size: clamp(4rem, min(8vw, 11vh), 8rem); } .scarcity .scarcity__note { margin-top: clamp(1rem, 3vh, 2rem); } }
@media (min-width: 56.01em) { .scarcity__spread { grid-template-rows: minmax(0, 1fr); } .scarcity__media { min-height: 0; overflow: hidden; } }
@media (min-width: 56.01em) { .scarcity__spread { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .scarcity::before { left: calc(58.33% + 1.25rem); } .scarcity::after { left: 79%; width: min(30rem, 36vw); } .scarcity__spread > .container { padding: 0 clamp(2rem, 3.5vw, 3.5rem); } .scarcity .stmt__para { font-size: clamp(0.9375rem, min(1.15vw, 2.1vh), 1.125rem); } }
/* laptop: the 500 photograph runs a little past the foot of its page, over
   the quiet top of the next, so no band of page colour shows beneath it */
@media (min-width: 56.01em) {
  .scarcity { overflow: visible; z-index: 2; }
  .scarcity__spread { overflow: visible; }
  .scarcity__media { position: relative; z-index: 2; align-self: start; height: calc(100% + 5.5rem); margin-bottom: -5.5rem; }
  #beyond .beyond__in { padding-top: calc(var(--header-h) + 5.5rem); }
}
/* Discover arrives like the line beside it: uncovered from below, a beat
   after the slogan's second line */
html.js-motion .hero .hero__discover {
  opacity: 0;
  clip-path: inset(0 -12% 105% -12%);
  transform: translateY(24px);
  transition: opacity 1200ms var(--ease-enter), transform 1200ms var(--ease-enter), clip-path 1400ms var(--ease-enter);
  transition-delay: 900ms;
}
html.js-motion .hero.is-in .hero__discover { opacity: 1; transform: none; clip-path: inset(-25% -12% -25% -12%); }
html.js-motion .hero.is-in .hero__discover:hover { opacity: 0.75; transition-delay: 0s; }
/* the chapter's name above the photograph on the phone; the laptop keeps
   it in the statement beside the photograph */
.scarcity__head { display: none; }
@media (max-width: 56em) {
  .scarcity__head { display: flex; flex-direction: column; align-items: center; margin: 0 0 clamp(1.25rem, 3vh, 1.75rem); }
  .scarcity__head .ar-kicker { margin-top: 0.5rem; }
  .scarcity__spread > .container > .scarcity__chapter,
  .scarcity__spread > .container > .ar-kicker { display: none; }
  .scarcity__spread > .container .scarcity__num { margin-top: 0; }
  .scarcity.section--focal { padding-top: calc(var(--header-h) + clamp(1.5rem, 4vh, 2.25rem)); }
}
@media (min-width: 56.01em) { #beyond .beyond__in { padding-top: calc(var(--header-h) + 10rem); } }

/* ---- Phone 500, refined ----
   The numeral a size down so the photograph leads; the title in house
   bronze, quieter; the lozenge between two short gold rules; the
   paragraph at reading size; the footnote set between gold rules as on
   the laptop; the photograph without its heavy shadow. */
@media (max-width: 56em) {
  .scarcity__media { box-shadow: none; }
  .scarcity .scarcity__num { font-size: clamp(3.5rem, 16vw, 4.25rem); letter-spacing: 0.04em; }
  .scarcity .scarcity__title {
    margin-top: 0.35rem;
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-indent: 0.24em;
    color: var(--z-bronze);
    position: relative;
  }
  .scarcity__title::before {
    content: '';
    position: absolute;
    left: 50%; bottom: 3px;
    width: 8rem; height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(169,143,85,0) 0%, rgba(169,143,85,0.7) 36%, rgba(169,143,85,0) 44%, rgba(169,143,85,0) 56%, rgba(169,143,85,0.7) 64%, rgba(169,143,85,0) 100%);
  }
  .scarcity .stmt__para { font-size: 0.9375rem; line-height: 1.7; max-width: 21em; margin-inline: auto; color: var(--z-brown); }
  .scarcity .scarcity__note { font-size: 0.6875rem; letter-spacing: 0.2em; }
  .scarcity__note::before, .scarcity__note::after { content: ''; width: 1.75rem; height: 1px; background: rgba(169, 143, 85, 0.6); }
}
/* laptop 500, right panel: the frame set in evenly on all four sides so
   every corner shows clear of the header; the statement in a narrower,
   calmer measure, centred in the frame */
@media (min-width: 56.01em) {
  .scarcity::before { inset: calc(var(--header-h) + 2.25rem) 2.25rem 2.25rem calc(58.33% + 2.25rem); border-color: rgba(169, 143, 85, 0.2); }
  .scarcity__spread > .container { padding: 0 clamp(3.5rem, 5vw, 5.5rem); }
  .scarcity .scarcity__title { font-size: clamp(1.0625rem, 1.25vw, 1.375rem); letter-spacing: 0.22em; }
  .scarcity .stmt__para { max-width: 25em; font-size: clamp(0.9375rem, min(1.1vw, 2vh), 1.0625rem); line-height: 1.75; }
  .scarcity .scarcity__num { font-size: clamp(3.75rem, min(6.5vw, 11vh), 7rem); }
  .scarcity .scarcity__note::before, .scarcity .scarcity__note::after { width: 2rem; }
}

/* ---- Phone 500, as a titled page ----
   The heading comes first and whole: Chapter I, the Arabic, the 500 and
   Numbered bottles above the photograph, as a title over a plate. Below
   the photograph only the paragraph and the footnote remain. */
@media (max-width: 56em) {
  .scarcity__head .scarcity__num { margin-top: clamp(0.75rem, 2vh, 1.25rem); font-size: clamp(3.25rem, 15vw, 4rem); line-height: 1; letter-spacing: 0.04em; }
  .scarcity__head .scarcity__title { margin-top: 0.4rem; }
  .scarcity__head .scarcity__title::after { margin-top: 0.9rem; }
  .scarcity__spread > .container > .scarcity__num,
  .scarcity__spread > .container > .scarcity__title { display: none; }
  .scarcity__spread > .container .stmt__para { margin-top: 0; }
  .scarcity__media { margin-bottom: clamp(1.75rem, 4.5vh, 2.5rem); }
}
/* phone: the paragraph and footnote beneath the photograph are simply
   there, no entrance; set darker and a touch larger to read clearly */
@media (max-width: 56em) {
  html.js-motion .scarcity__spread > .container [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .scarcity .stmt__para { color: #2E261F; font-size: 1rem; line-height: 1.7; }
  .scarcity .scarcity__note { color: #6E5530; }
}
/* phone 500 heading, balanced: even rhythm between its parts, a clear
   pause before the photograph, and the photograph centred under it at
   a set width on any phone */
@media (max-width: 56em) {
  .scarcity__head { margin-bottom: 2.25rem; }
  .scarcity__head .ar-kicker { margin-top: 0.4rem; }
  .scarcity__head .scarcity__num { margin-top: 1.5rem; font-size: clamp(3rem, 13.5vw, 3.75rem); }
  .scarcity__head .scarcity__title { margin-top: 0.6rem; font-size: 0.875rem; letter-spacing: 0.26em; text-indent: 0.26em; }
  .scarcity__head .scarcity__title::after { margin-top: 1.1rem; }
  .scarcity__head .scarcity__title::before { bottom: -0.85rem; }
  .scarcity__media { width: min(calc(100% - 2 * var(--margin)), 28rem); margin-inline: auto; }
}
@media (max-width: 56em) { .scarcity__head .scarcity__title::before { bottom: calc(-1.1rem - 4px); } }
@media (max-width: 56em) { .scarcity__head .scarcity__title::before { bottom: 3px; } }
@media (min-width: 56.01em) { .scarcity__spread > .container { position: relative; top: 2.25rem; } }
/* phone 500 heading, lower and quieter: smaller labels with even tracking,
   a lighter numeral, one consistent rhythm */
@media (max-width: 56em) {
  .scarcity.section--focal { padding-top: calc(var(--header-h) + 3.25rem); }
  .scarcity__head .scarcity__chapter { font-size: 0.8125rem; letter-spacing: 0.32em; text-indent: 0.32em; }
  .scarcity__head .ar-kicker { margin-top: 0.35rem; font-size: 0.9375rem; }
  .scarcity__head .scarcity__num { margin-top: 1.25rem; font-size: clamp(2.875rem, 12.5vw, 3.375rem); font-weight: 300; }
  .scarcity__head .scarcity__title { margin-top: 0.5rem; font-size: 0.75rem; letter-spacing: 0.3em; text-indent: 0.3em; }
  .scarcity__head { margin-bottom: 2.5rem; }
}
@media (max-width: 56em) { html #scarcity .scarcity__spread > .container .scarcity__note { opacity: var(--fade, 1) !important; } }
@media (max-width: 56em) { .packaging.section { padding-top: 5rem; } }

/* ---- The invitation, set by hand ----
   The paragraph reads like a letter, not a banner: a narrower measure,
   a reading size, softer ivory, and lines balanced so no single word is
   left alone. The aside is a quiet footnote, small and warm grey. */
.newsletter .newsletter__lede {
  max-width: 21em;
  margin-inline: auto;
  font-size: clamp(1rem, 4.2vw, 1.125rem);
  line-height: 1.6;
  color: rgba(250, 248, 244, 0.78);
  text-wrap: pretty;
}
.newsletter .newsletter__aside {
  max-width: 22em;
  margin-inline: auto;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgba(250, 248, 244, 0.5);
  text-wrap: balance;
}
@media (min-width: 56.01em) {
  .newsletter .newsletter__lede { font-size: 1.125rem; max-width: 26em; }
}

/* ---- 500 on the laptop: the frame matches the Chapter I card's, and
   runs down to the foot of the photograph ----
   A firm gold keyline with an inner hairline, heavier brass corners, and
   the frame's foot level with the photograph's (which runs 5.5rem past
   the section); the statement centred again inside it. */
@media (min-width: 56.01em) {
  .scarcity::before {
    inset: calc(var(--header-h) + 2.25rem) 2.25rem calc(-5.5rem + 2.25rem) calc(58.33% + 2.25rem);
    border: 1px solid rgba(169, 143, 85, 0.7);
    box-shadow: inset 0 0 0 5px var(--z-ivory), inset 0 0 0 6px rgba(169, 143, 85, 0.35);
    --c: #8A6A35;
    background:
      linear-gradient(var(--c), var(--c)) top left / 2.5rem 2px no-repeat,
      linear-gradient(var(--c), var(--c)) top left / 2px 2.5rem no-repeat,
      linear-gradient(var(--c), var(--c)) top right / 2.5rem 2px no-repeat,
      linear-gradient(var(--c), var(--c)) top right / 2px 2.5rem no-repeat,
      linear-gradient(var(--c), var(--c)) bottom left / 2.5rem 2px no-repeat,
      linear-gradient(var(--c), var(--c)) bottom left / 2px 2.5rem no-repeat,
      linear-gradient(var(--c), var(--c)) bottom right / 2.5rem 2px no-repeat,
      linear-gradient(var(--c), var(--c)) bottom right / 2px 2.5rem no-repeat;
  }
  .scarcity__spread > .container { top: 2.75rem; }
}
/* the 500 page itself runs to the photograph's foot (instead of the
   photograph hanging past it), so the ivory and the frame end with it */
@media (min-width: 56.01em) {
  .scarcity.section--focal { height: calc(100svh + 5.5rem); }
  .scarcity__spread { height: calc(100svh + 5.5rem - var(--header-h)); }
  .scarcity__media { height: 100%; margin-bottom: 0; }
  .scarcity::before { bottom: 2.25rem; }
  .scarcity__spread > .container { top: 0.5rem; }
  #beyond .beyond__in { padding-top: calc(var(--header-h) + 4.5rem); }
}
@media (max-width: 56em) { .scarcity__head { margin-bottom: 1.25rem; } }
@media (min-width: 56.01em) { .scarcity::before { top: calc(var(--header-h) + 4.5rem); } .scarcity__spread > .container { top: 1.6rem; } }
@media (min-width: 56.01em) { .scarcity::before { top: calc(var(--header-h) + 6rem); bottom: 1rem; } .scarcity__spread > .container { top: 3rem; } }

/* ---- A phone held sideways (2026-10-11) ----
   The one-screen compositions are built for an upright phone. Turned on
   its side the screen is barely 375 high, so Chapter I lets its height
   follow its content instead of being squeezed into one screen: smaller
   cards, side by side, every name and link in full. */
@media (max-width: 56em) and (orientation: landscape) and (max-height: 32em) {
  .chapter { height: auto; min-height: 100svh; padding-block: calc(var(--header-h) + var(--sp-s)) var(--sp-m); }
  .chapter__head-title { font-size: clamp(2rem, 7vw, 3rem); }
  .chapter__track { flex: none; margin-top: var(--sp-s); }
  .chapter .chapter__panel { width: calc(62svh * 0.82); flex: none; }
  .chapter__bottle { flex: none; }
  .chapter .chapter__bottle__fig { height: 62svh; }
  .chapter__line { display: none; }
}
/* ...and a large phone on its side takes the laptop layout on a screen
   only 430 high: the 500 page grows to hold its footnote */
@media (min-width: 56.01em) and (max-height: 32em) {
  .scarcity.section--focal { height: auto; min-height: calc(100svh + 5.5rem); }
  .scarcity__spread { height: auto; min-height: calc(100svh + 5.5rem - var(--header-h)); }
}

/* ---- Phone: the hero runs under Safari's floating toolbar (2026-10-11) ----
   The hero was exactly one small-viewport tall, so beneath the
   translucent bottom bar the ivory of Chapter I showed as a white band.
   The hero's dark now reaches the bottom of the large viewport; the
   photograph and the words keep their place in the visible screen. */
@media (max-width: 56em) {
  .hero { min-height: 100lvh; background-color: #0B0704; }
  .hero .media-slot.hero__media { bottom: calc(100lvh - 100svh); height: auto; }
  .hero .hero__content { bottom: calc(100lvh - 100svh); }
}

/* ---- Beyond the bottle on a phone: the photograph at full width
   (2026-10-11) ----
   It took whatever height the words left, so on a shorter screen it
   shrank. It now always spans the column at its own proportion, as on
   the reference phone; the section simply runs as tall as it needs. */
@media (max-width: 30em) {
  .beyond__in { height: auto; min-height: 0; }
  .beyond__media { flex: none; min-height: 0; width: 100%; display: block; }
  .beyond__media img { width: 100%; height: auto; max-width: 100%; object-fit: initial; }
}

/* ---- The presentation on a phone: photographs at full size (2026-10-11) ----
   The opening photograph took the height its words left, and each gift
   narrowed to fit its words in one screen, so on a shorter phone they
   came out smaller. They now keep the reference phone's size on every
   phone (full column width, their own proportion). */
@media (max-width: 30em) {
  .packaging__head { height: auto; min-height: 0; }
  .packaging__head > .packaging__stage { flex: none; aspect-ratio: 343 / 468; height: auto; min-height: 0; }
  .packaging__gift-media { width: 100%; }
}

/* ---- Chapter I on the very shortest phones (an iPhone SE in Safari) ----
   The title, the cards and the sign cannot share so short a screen, so
   there the section runs a little past one screen instead of squeezing
   the cards: nothing hides under the header or falls past its foot. */
@media (max-width: 30em) and (min-aspect-ratio: 390/600) {
  .chapter { height: auto; min-height: 100svh; }
  .chapter__track { flex: none; }
  .chapter__bottle { flex: none; }
  .chapter .chapter__bottle__fig { height: 72vw; }
}
/* the 500 frame drawn in from both ends (2026-10-11): the top lower, the
   foot higher, by the same amount, so the words stay centred in it */
@media (min-width: 56.01em) { .scarcity::before { top: calc(var(--header-h) + 8rem); bottom: 3rem; } }