/* 7 AROMA · No. 7 The House — approval sample
   Static layout is the default (no JS / reduced motion). html.motion switches on the pinned, scrubbed stage. */

:root {
  /* KRAFT / PAPER: the colour world of the brand's first site ("Letters"). Grounds are kraft and paper, type is ink;
     gold is a 1px line (hairlines, frames, rules) and gold-ink carries small text on paper. */
  --kraft: #C4A686;        /* kraft board: the counter wall */
  --kraft-2: #B39574;      /* kraft in shade: vignettes, the counter's front */
  --kraft-ink: #6E5A43;    /* kraft's own ink (Letters) */
  --paper: #F3EBDC;        /* house paper: the shop, the close */
  --paper-2: #ECE2CF;      /* paper in shade */
  --stock: #FAF6EE;        /* card stock: print mounts, mats */
  --ink: #161513;          /* body type on paper */
  --ink-2: #4A4237;        /* secondary type on paper */
  --gold: #B8913F;         /* hairlines only */
  --gold-ink: #6F531C;     /* kickers, numerals, small gilt text on paper */
  --gold-ink-k: #523C13;   /* the same gilt ink, deepened for small text on kraft */
  --sepia: rgba(28, 21, 13, 1); /* the warm dark of a sepia print: photo shades */
  --brass-1: #8C6A2E;
  --brass-2: #E4CB8E;
  --brass-3: #B8913F;
  --ivory: #F3EBDC;        /* type on photographs (= paper) */
  --gilt: linear-gradient(100deg, #8C6A2E 0%, #C9A55A 26%, #E4CB8E 48%, #B8913F 74%, #8C6A2E 100%);
  --gilt-v: linear-gradient(180deg, #E4CB8E 0%, #B8913F 55%, #8C6A2E 100%);
  --brass-plate: linear-gradient(135deg, #6f5323 0%, #b8913f 18%, #ecd59c 36%, #c9a55a 52%, #8c6a2e 76%, #d2b471 100%);
  /* paper grain (Letters M7), laid into the paper and kraft grounds with multiply */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .24 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper-shadow: 0 1px 2px rgba(22, 21, 19, .10), 0 22px 40px -24px rgba(22, 21, 19, .42);

  --f-display: 'Bodoni Moda', 'Bodoni 72', Didot, 'Times New Roman', serif;
  --f-serif: 'Cormorant Garamond', Garamond, 'Times New Roman', serif;
  --f-caps: 'Jost', Futura, 'Century Gothic', sans-serif;

  --gut: clamp(20px, 5.2vw, 96px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* viewport heights the hall dissolves in over the still-pinned door (read by main.js as PIN.over) */
  --over: .35;
  /* viewport heights the counter dissolves in over the still-pinned hall (read by main.js as PIN.over2) */
  --over2: .5;
  /* viewport heights the paper close rises over the still-pinned counter while the set goes to paper (PIN.over3) */
  --over3: .7;
  /* bottom offset that clears the mobile toolbar (100vh - 100svh = toolbar height) */
  --safe-b: 0px;
}
@supports (height: 100svh) { :root { --safe-b: calc(100vh - 100svh); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 19px/1.5 var(--f-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, canvas { display: block; max-width: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--kraft); color: var(--ink); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nw { white-space: nowrap; } /* keeps a short sentence on one line when a title wraps */

/* ---------- type ---------- */
.display {
  font-family: var(--f-display);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.012em;
  line-height: .96;
}
.kicker {
  font: 500 11px/1.4 var(--f-caps);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
:focus-visible { outline: 1px solid var(--gold-ink); outline-offset: 6px; }

/* cover box: keeps a 16:9 picture covering the viewport, so overlays can sit on picture coordinates */
.cover {
  position: absolute;
  left: 50%; top: 50%;
  width: max(100vw, 177.78vh);
  height: max(100vh, 56.25vw);
  transform: translate(-50%, -50%);
}
.cover > img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- masthead: only from the counter onwards, so it never doubles the fascia or the wall logo.
   Two grounds: ink on paper/kraft (default), paper over a photograph (.on-photo, toggled by main.js). ---------- */
.mast {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  height: 72px; padding: 0 var(--gut);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  font: 500 10.5px/1 var(--f-caps); letter-spacing: .34em; text-transform: uppercase;
  color: var(--ink-2);
  transition: color .5s;
  isolation: isolate;
}
/* over a photograph a short smoked band keeps the paper type and bright gilt legible; on paper and kraft none */
.mast::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 30px);
  z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(28, 21, 13, .55), rgba(28, 21, 13, 0));
  opacity: 0; transition: opacity .5s;
}
.mast.on-photo { color: rgba(243, 235, 220, .86); }
.mast.on-photo::before { opacity: 1; }
html:not(.motion) .mast { display: none; }
.mast__l { white-space: nowrap; }
.mast__logo { display: block; line-height: 0; }
.mast__logo svg { height: 32px; width: auto; overflow: visible; }
.mast.on-photo .mast__logo svg { filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .5)); }
/* curtain for the masthead links: a page turn in house paper instead of rewinding the whole film */
.cut { position: fixed; inset: 0; z-index: 40; opacity: 0; pointer-events: none; background: var(--paper); }
/* on paper the mark is printed in gold-ink gilt (#giltInk); over a photograph it is the fascia's bright gilt */
.mast__logo use { fill: url(#giltInk); transition: fill .5s; }
.mast.on-photo .mast__logo use { fill: url(#giltFascia); }
.mast__r {
  justify-self: end; color: inherit; text-decoration: none; white-space: nowrap;
  padding-bottom: 6px;
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat;
}

/* =================================================================== 1. THE DOOR */
.door {
  position: relative;
  height: 100vh;
  min-height: 520px;
  overflow: hidden;
  background: var(--kraft-2);
  isolation: isolate;
}
.door__scene { position: absolute; inset: 0; transform-origin: 50% 55%; }
/* fascia headroom: at rest the picture sits 5% low (capped at the cover box's own overhang, so no gap opens
   above it). main.js eases --dk from 1 to 0 during the walk, so the clip ends centred, exactly where the hall
   still is registered (no ghosting in the dissolve). coverDy() in main.js mirrors this offset. */
@media (min-width: 768px) {
  .door .cover {
    --cover-h: max(100vh, 56.25vw);
    transform: translate(-50%, calc(-50% + var(--dk, 1) * min(var(--cover-h) * .05, (var(--cover-h) - 100vh) / 2)));
  }
}
.door__poster, .door__frames { position: absolute; inset: 0; width: 100%; height: 100%; }
.door__frames { opacity: 0; }
/* phone set is a full-height centre crop: the canvas covers just the viewport, centred in the 16:9 box */
.door__frames.is-crop { left: 50%; right: auto; width: 100vw; transform: translateX(-50%); }
.door__glow {
  position: absolute; left: 50%; top: 55%;
  width: 34%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.door__glow i {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 196, 128, .26), rgba(255, 170, 96, .08) 58%, rgba(255, 170, 96, 0));
}

/* the real logo is baked onto the fascia in the hero video/poster, so the HTML stand-in board + plaque stay hidden */
.fascia, .plaque-wrap { display: none; }

/* (legacy) fascia: walnut board, gilt lockup */
.fascia {
  position: absolute;
  left: var(--gut); right: var(--gut);
  top: 6.5vh;
  --fh: clamp(84px, 17vh, 156px);
  height: var(--fh);
  z-index: 2;
}
.fascia::before, .fascia::after { /* cornice mouldings */
  content: ''; position: absolute; left: -1.2vw; right: -1.2vw; height: 2px;
  background: var(--gilt); opacity: .7;
}
.fascia::before { top: -9px; box-shadow: 0 3px 0 -1px rgba(0, 0, 0, .7); }
.fascia::after { bottom: -9px; }
.fascia__board {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 3vw;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .02) 16%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(104deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .045) 42%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(180deg, #4a3320 0%, #3c2818 40%, #261910 100%);
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(0, 0, 0, .9);
}
.fascia__board::before { /* inner gilt line */
  content: ''; position: absolute; inset: 7px; pointer-events: none;
  border: 1px solid rgba(228, 203, 142, .28);
}
.fascia__logo { height: calc(var(--fh) * .74); width: auto; aspect-ratio: 436 / 214; justify-self: center; overflow: visible; }
.fascia__legend {
  position: relative;
  font: 500 clamp(9px, .72vw, 11px)/1 var(--f-caps);
  letter-spacing: .42em;
  text-transform: uppercase;
  white-space: nowrap;
}
.fascia__legend:first-child { justify-self: start; }
.fascia__legend:last-child { justify-self: end; }
.fascia__legend .b { color: #17140f; text-shadow: 0 1px 0 rgba(255, 236, 190, .07); }
.fascia__legend .g {
  position: absolute; left: 0; top: 0;
  /* gilt either side of a specular band: both rest positions (0% / 100%) read as plain gilt */
  background: linear-gradient(100deg, #A9853C 0%, #E4CB8E 14%, #B8913F 30%, #F2E2B4 45%, #FFF9EA 50%, #F2E2B4 55%, #B8913F 70%, #E4CB8E 86%, #A9853C 100%);
  background-size: 300% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.js .fascia__legend .g { clip-path: inset(0 100% 0 0); }
.js .logo-gold { opacity: 0; }

/* brass plaque */
.plaque-wrap {
  position: absolute;
  right: calc(var(--gut) + 1vw);
  bottom: calc(13vh + var(--safe-b));
  z-index: 2;
}
.plaque {
  position: relative;
  display: grid; justify-items: center; gap: 9px;
  padding: 20px 24px 18px;
  white-space: nowrap;
  background: var(--brass-plate);
  border-radius: 2px;
  color: #3b2a0f;
  font: 500 clamp(9px, .66vw, 10.5px)/1.2 var(--f-caps);
  letter-spacing: .3em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 240, 205, .55), 0 -1px 0 rgba(60, 38, 8, .35);
  box-shadow: inset 0 1px 0 rgba(255, 244, 214, .55), inset 0 -1px 0 rgba(0, 0, 0, .35),
              inset 0 0 0 3px rgba(140, 106, 46, .35), 0 16px 34px rgba(0, 0, 0, .6);
  filter: brightness(.86) saturate(.9);
}
.plaque::after { /* lamplight falloff */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, rgba(255, 220, 160, .12), rgba(0, 0, 0, .28));
}
.plaque__l1 { font-size: 1.12em; }
.plaque__rule { width: 46%; height: 1px; background: rgba(59, 42, 15, .55); box-shadow: 0 1px 0 rgba(255, 240, 205, .45); }
.plaque__screw {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f5e2ad, #8c6a2e 70%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
.plaque__screw::after { content: ''; position: absolute; left: 1px; right: 1px; top: 3px; height: 1px; background: rgba(50, 30, 6, .7); transform: rotate(35deg); }
.plaque__screw:nth-child(1) { left: 7px; top: 7px; }
.plaque__screw:nth-child(2) { right: 7px; top: 7px; }
.plaque__screw:nth-child(3) { left: 7px; bottom: 7px; }
.plaque__screw:nth-child(4) { right: 7px; bottom: 7px; }
.js .plaque { opacity: 0; }

.door__rain { display: none; }
.door__shade {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  /* bottom only, in the warm dark of a sepia print: the brick and the olive tree stay lit */
  background: linear-gradient(0deg, rgba(28, 21, 13, .8) 0%, rgba(28, 21, 13, .42) 22%, rgba(28, 21, 13, 0) 44%);
}

/* one line in the pavement band; the bell answers it on the right */
.door__ui {
  position: absolute;
  left: var(--gut); right: var(--gut);
  bottom: calc(6vh + var(--safe-b));
  z-index: 5;
  max-width: none;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'kicker .' 'title cta';
  align-items: end;
  column-gap: 4vw;
}
.door__ui .kicker { grid-area: kicker; color: rgba(243, 235, 220, .84); }
.door__title {
  grid-area: title;
  font-size: clamp(48px, min(5.6vw, 10vh), 104px);
  margin: 1.4vh 0 0;
  white-space: nowrap;
  color: var(--ivory);
}
.door__title .ln { display: inline-block; overflow: hidden; padding: .05em 0 .07em; margin: -.05em 0 -.07em; vertical-align: bottom; }
.door__title .ln + .ln { margin-left: .26em; }
.door__title .ln > span { display: inline-block; }
.js .door__title .ln > span { transform: translateY(108%); }
.js [data-intro] { opacity: 0; }

.door__actions { grid-area: cta; display: flex; align-items: center; margin: 0; padding-bottom: .9vh; }
.bell {
  display: inline-flex; align-items: center; gap: 16px;
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 11px/1 var(--f-caps); letter-spacing: .32em; text-transform: uppercase;
  color: var(--ivory);
}
/* a flat engraved hairline, not a 3D button */
.bell__plate {
  position: relative; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: none;
  border: 1px solid rgba(228, 203, 142, .7);
  box-shadow: none;
  transition: border-color .4s var(--ease-out);
}
.bell__plate::before { /* inner hairline, drawn on hover */
  content: ''; position: absolute; inset: 5px; border-radius: 50%;
  border: 1px solid rgba(228, 203, 142, .45);
  box-shadow: none;
  opacity: 0; transform: scale(.7);
  transition: opacity .4s, transform .5s var(--ease-out);
}
.bell__plate::after { /* ring ripple */
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 1px solid rgba(228, 203, 142, .8); opacity: 0;
}
.bell__push {
  position: relative; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brass-2);
  box-shadow: none;
  transition: transform .18s var(--ease-out);
}
.bell:hover .bell__plate { box-shadow: none; border-color: var(--brass-2); }
.bell:hover .bell__plate::before { opacity: 1; transform: none; }
.bell:active .bell__push, .bell.is-ringing .bell__push { transform: scale(.6); box-shadow: none; }
.bell.is-ringing .bell__plate::after { animation: ring 1.1s var(--ease-out); }
@keyframes ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }

@media (max-width: 1023px) {
  .door__ui { grid-template-columns: 1fr; grid-template-areas: 'kicker' 'title' 'cta'; }
  .door__title { white-space: normal; }
  .door__actions { margin-top: 3vh; justify-self: start; }
}

.door__bloom, .door__stone { position: absolute; inset: 0; pointer-events: none; z-index: 6; opacity: 0; }
.door__bloom {
  background: radial-gradient(circle at 50% 55%, #FFFBF3 0%, #F7F0E3 18%, rgba(243, 235, 220, .75) 36%, rgba(243, 235, 220, 0) 66%);
  transform-origin: 50% 55%;
}
.door__stone { background: var(--paper); }

/* =================================================================== 2. THE HALL */
/* THE SHOP exactly as the green sample: the client's real room full-bleed (in the clip's kraft-film grade), ivory type
   on a warm sepia floor shade. Only the colours are the kraft world's: sepia shades, ivory type, the gilt kicker. */
.hall {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--sepia);
  color: var(--ivory);
  isolation: isolate;
}
.hall__aperture { position: absolute; inset: 0; overflow: hidden; background: var(--sepia); }
.hall__aperture picture { display: contents; }
.hall__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; }
/* the room stays sharp: shade only the floor (for the copy) and a light left edge, so the real wall logo stays bright */
.hall__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(28, 21, 13, .88) 0%, rgba(28, 21, 13, .55) 28%, rgba(28, 21, 13, 0) 55%),
    linear-gradient(90deg, rgba(28, 21, 13, .45) 0%, rgba(28, 21, 13, 0) 40%);
}
.hall__content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 9vh 20px;
  width: 100%;
}
.hall__kicker { color: var(--brass-2); } /* gilt over the photograph */
.hall__title { font-size: clamp(44px, min(5.4vw, 9.6vh), 92px); margin-top: 2.2vh; color: var(--ivory); }
.hall__title .rv { display: block; }
.hall__sub {
  margin-top: 2.6vh;
  font: italic 400 clamp(19px, 1vw + .9vh, 25px)/1.42 var(--f-serif);
  color: rgba(243, 235, 220, .84);
}
.hall__sub .rv { display: block; }

/* =================================================================== 3. THE COUNTER (static default) */
.counter {
  position: relative;
  background: var(--grain), var(--kraft);
  color: var(--ink);
  padding-bottom: 12vh;
  --spine: #999999;
}
.counter__stage { position: relative; height: 100vh; min-height: 520px; overflow: hidden; }
/* a kraft set: counter-kraft.jpg (the counter plate re-graded into kraft and paper, tools/kraft_counter.py) is the
   room, out of focus behind the counter (main.js racks it soft), and contributes its pale paper-oak top sharp,
   faded in from just above the back edge (~66.5% of the box) */
.counter__room { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; transform-origin: 50% 40%; }
.cover > .counter__bg {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 60%, #000 66.2%);
  mask-image: linear-gradient(180deg, transparent 0, transparent 60%, #000 66.2%);
}
/* the counter's brass edge: one gilt hairline along the front lip of the top */
.counter__lip {
  position: absolute; left: 0; right: 0; top: 80.25%; height: 1px;
  background: linear-gradient(90deg, rgba(184, 145, 63, 0), rgba(184, 145, 63, .75) 12%, #C9A55A 50%, rgba(184, 145, 63, .75) 88%, rgba(184, 145, 63, 0));
  box-shadow: 0 1px 0 rgba(250, 246, 238, .35);
}
/* kraft vignette: the wall falls off into shade at the edges, the light stays on the bottle */
.counter__dim {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 62% 70% at 50% 47%, rgba(110, 90, 67, 0) 38%, rgba(110, 90, 67, .34) 100%),
    linear-gradient(180deg, rgba(110, 90, 67, .16) 0%, rgba(110, 90, 67, 0) 34%);
}
/* the scent's lamp on the oak: a soft coloured pool, not a stage spot (--spine = the scent's light, see main.js) */
.counter__pool {
  position: absolute; left: 50%; bottom: 26.9%;
  /* the cover box is always 16:9, so a width in bottle heights is --bottle-h x 9/16 */
  width: calc(var(--bottle-h, 50%) * 1.3 * .5625); height: calc(var(--bottle-h, 50%) * .15);
  transform: translate(-50%, 46%);
  background: radial-gradient(closest-side, var(--spine), transparent);
  background: radial-gradient(closest-side, var(--spine) 0%, color-mix(in srgb, var(--spine) 55%, transparent) 42%, transparent 100%);
  mix-blend-mode: soft-light; opacity: 0;
}
/* ...and a faint coloured glow on the room behind the glass (its centre sits behind the bottle, so it reads
   as a halo around it, never a disc) */
.counter__glow {
  position: absolute; left: 50%; bottom: calc(26.9% - var(--bottle-h, 50%) * .02);
  height: calc(var(--bottle-h, 50%) * 1.06); aspect-ratio: 1.02;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, var(--spine), transparent);
  background: radial-gradient(closest-side, var(--spine) 0%, color-mix(in srgb, var(--spine) 72%, transparent) 40%, color-mix(in srgb, var(--spine) 30%, transparent) 70%, transparent 100%);
  mix-blend-mode: soft-light; opacity: 0; pointer-events: none;
}
.bottle {
  position: absolute; left: 50%; bottom: 26.9%;
  height: var(--bottle-h, 50%);
  transform-origin: 50% 100%;
  aspect-ratio: 755 / 1370;
  transform: translateX(-50%);
}
.bottle__img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* on a light top the glass needs its shadow: a tight ink contact line, and a soft occlusion pool behind the foot */
.bottle__shadow {
  position: absolute; left: 4%; right: 4%; bottom: -2%; height: 4.6%;
  background:
    radial-gradient(47% 24% at 50% 56%, rgba(36, 25, 14, .82), rgba(36, 25, 14, 0)),
    radial-gradient(closest-side, rgba(52, 38, 22, .55), rgba(52, 38, 22, .2) 60%, rgba(52, 38, 22, 0));
  mix-blend-mode: multiply;
}
.bottle__shadow::before {
  content: ''; position: absolute; left: -26%; right: -26%; bottom: 10%; height: 280%;
  background: radial-gradient(closest-side, rgba(74, 56, 36, .4), rgba(74, 56, 36, .14) 55%, rgba(74, 56, 36, 0));
}
/* counter-top reflection: masked 'to top' because the mask applies before the flip, so the base side stays opaque */
.bottle__reflect {
  position: absolute; left: 0; top: 100%;
  width: 100%; height: 100%;
  transform: scaleY(-1);
  opacity: 0;
  filter: brightness(.8) sepia(.3) blur(1.5px);
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .7), transparent 18%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, .7), transparent 18%);
  pointer-events: none;
}
/* the same lit amber glass for all seven bottles, multiplied over the shoulder and the body. Measured on
   bottle-007.webp (755x1370): cap + neck = 0-31.8% (never multiplied, so the gold cap stays true) and the real
   label plate = x 125.5-632.5, y 594.5-831 px. Only that plate is cut out of the glass (an even-odd hole), so the
   clear glass either side of it gets the same amber as the body; the bottom band darkens the packshot base. */
.counter { --glass-zone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 755 1370' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 435.7H755V1370H0Z M125.5 594.5V831H632.5V594.5Z'/%3E%3C/svg%3E"); }
.bottle__glass {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  -webkit-mask:
    url(assets/bottle-007.webp) center bottom / 100% 100% no-repeat,
    var(--glass-zone) 0 0 / 100% 100% no-repeat;
  -webkit-mask-composite: source-in;
  mask:
    url(assets/bottle-007.webp) center bottom / 100% 100% no-repeat,
    var(--glass-zone) 0 0 / 100% 100% no-repeat;
  mask-composite: intersect;
}
/* on the light kraft set: honey liquid lit through (warm centre, amber flanks, never black), and below the liquid
   line the thick clear base, which takes the kraft's own colour rather than going dark */
.bottle__glass {
  mix-blend-mode: multiply;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 86.9%, rgba(122, 92, 52, .9) 87.5%, #D6C2A2 89.2%, #CDB696 95%, #B79C7A 100%),
    linear-gradient(90deg, #86643A 0%, #A9814A 5%, #C99B58 15%, #E0B670 33%, #EBC680 50%, #E0B670 67%, #C99B58 85%, #A9814A 95%, #86643A 100%);
}
/* glass reads as glass by its highlights: two soft softbox streaks down the flanks, faded at shoulder and base */
.bottle__spec {
  position: absolute; inset: 0; pointer-events: none; opacity: .9;
  background: linear-gradient(90deg, transparent 5.5%, rgba(255, 251, 240, .62) 8.2%, rgba(255, 251, 240, .2) 10.4%, transparent 12.5%,
    transparent 85.5%, rgba(255, 251, 240, .16) 87.4%, rgba(255, 251, 240, .44) 90%, transparent 92.6%);
  mix-blend-mode: screen;
  -webkit-mask:
    url(assets/bottle-007.webp) center bottom / 100% 100% no-repeat,
    var(--glass-zone) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, transparent 33%, #000 42%, #000 80%, transparent 88%) 0 0 / 100% 100% no-repeat;
  -webkit-mask-composite: source-in, source-in;
  mask:
    url(assets/bottle-007.webp) center bottom / 100% 100% no-repeat,
    var(--glass-zone) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, transparent 33%, #000 42%, #000 80%, transparent 88%) 0 0 / 100% 100% no-repeat;
  mask-composite: intersect, intersect;
}
/* the scent's lamp seen THROUGH the glass, not painted on it: a soft band inside the right flank that is
   strongest mid-body and fades out to nothing at the shoulder and the base (the third mask layer). The colour is
   masked on a child and the whole group blurred after it, so even the silhouette edge stays soft; screen at a low
   opacity (LIT.rim in main.js) adds light rather than paint. */
.counter { --lamp-fade: linear-gradient(180deg, transparent 28%, #000 48%, #000 72%, transparent 90%); }
.bottle__rim, .bottle__tint { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.bottle__rim { mix-blend-mode: screen; filter: blur(2.5px); }
.bottle__rim::before, .bottle__tint {
  -webkit-mask:
    url(assets/bottle-007.webp) center bottom / 100% 100% no-repeat,
    var(--glass-zone) 0 0 / 100% 100% no-repeat,
    var(--lamp-fade) 0 0 / 100% 100% no-repeat;
  -webkit-mask-composite: source-in, source-in;
  mask:
    url(assets/bottle-007.webp) center bottom / 100% 100% no-repeat,
    var(--glass-zone) 0 0 / 100% 100% no-repeat,
    var(--lamp-fade) 0 0 / 100% 100% no-repeat;
  mask-composite: intersect, intersect;
}
.bottle__rim::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0, transparent 82%, color-mix(in srgb, var(--spine) 30%, transparent) 89%, color-mix(in srgb, var(--spine) 75%, transparent) 95.5%, color-mix(in srgb, var(--spine) 40%, transparent) 100%);
}
/* ...and the liquid itself picks up a breath of the scent's hue (colour blend: hue only, the amber's light stays) */
.bottle__tint { background: var(--spine); mix-blend-mode: color; }
/* 007's key light: a warm lamp on the label (and a glint on the cap). colour-dodge with a dim warm source is an
   exposure gain (~1.3x at the centre): the gilt lettering and the honey glass brighten, the black plate stays black */
.bottle__key {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background:
    radial-gradient(ellipse 60% 16.5% at 50% 52%, rgb(68, 56, 34), rgba(68, 56, 34, .55) 55%, rgba(68, 56, 34, 0) 100%),
    radial-gradient(ellipse 42% 13% at 50% 13%, rgba(62, 50, 26, .9), rgba(62, 50, 26, 0) 100%);
  mix-blend-mode: color-dodge;
  -webkit-mask: url(assets/bottle-007.webp) center bottom / 100% 100% no-repeat;
  mask: url(assets/bottle-007.webp) center bottom / 100% 100% no-repeat;
}
/* provisional typeset label plates for 001–006 (client artwork pending), set like the real 007 label so the 007
   crossfade only changes the words. box = the real plate (125.5–632.5 x 594.5–831 px of bottle-007.webp) + its
   bleed (120.8–637.2 x 586.4–843.9 px); every position below is measured on the real label and mapped into this
   box: a single gilt frame line, the numerals between two gilt rules, the name in the same gilt. */
.bottle__label {
  --lbl-gold: #D1B76F; /* the mean of the real label's gilt lettering (numerals, name, rules) */
  position: absolute; left: 16%; right: 15.6%; top: 42.8%; bottom: 38.4%;
  background: linear-gradient(180deg, #1C1C18 0%, #171814 55%, #131410 100%); /* the real plate, as lit at 001–006 */
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, .08), 0 0 0 .5px rgba(0, 0, 0, .6);
  border-radius: 2px;
  container-type: size;
  pointer-events: none;
}
/* the frame: one gilt line, inset as on the real plate */
.bottle__label::before {
  content: ''; position: absolute; top: 9.2%; bottom: 11.3%; left: 3.9%; right: 3.7%;
  border: max(1px, 1.4cqh) solid var(--lbl-gold); opacity: .88;
}
/* the two gilt rules flanking the numerals (10.7–28.7% and 71.5–89.5% of the box, on the numerals' centre line) */
.bottle__label::after {
  content: ''; position: absolute; left: 10.7%; right: 10.5%; top: 35.3%;
  height: max(1px, 1.2cqh); transform: translateY(-50%);
  background: linear-gradient(90deg, var(--lbl-gold) 0 22.85%, transparent 22.85% 77.15%, var(--lbl-gold) 77.15% 100%);
}
.lbl { position: absolute; inset: 0; visibility: hidden; opacity: 0; color: var(--lbl-gold); }
.lbl b, .lbl i {
  position: absolute; left: 0; right: 0; transform: translateY(-50%);
  text-align: center; white-space: nowrap; font-style: normal;
}
/* numerals: glyphs 18.3–52.1% of the box (centre 35.2%) */
.lbl b {
  top: 35.7%;
  font: 600 49cqh/1 var(--f-caps); /* the real 007 numerals are a plain sans, not Bodoni */
  letter-spacing: 0; transform: translateY(-50%) scaleX(.8); /* real numerals are narrower than Jost */
}
/* name: caps 59.8–74.2% of the box (centre 67%), 'Arabian Smoke' spanning 11.1–89% */
.lbl i {
  top: 67.5%;
  font: 600 19.2cqh/1 var(--f-caps);
  letter-spacing: 0; text-transform: uppercase;
}
/* one gilt sheen pass across the real glass at the reveal */
.bottle__sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 246, 220, .45) 50%, transparent 60%) 100% 0 / 300% 100% no-repeat;
  -webkit-mask: url(assets/bottle-007.webp) center bottom / 100% 100% no-repeat;
  mask: url(assets/bottle-007.webp) center bottom / 100% 100% no-repeat;
  mix-blend-mode: screen;
}
.counter__front {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 34% 46% at 50% 52%, rgba(255, 222, 170, .2), rgba(255, 222, 170, 0) 70%);
  mix-blend-mode: screen;
}

/* ---------- the scent made visible (motion only): a Victorian botanical plate of the notes, left of the bottle,
   and the scent's own light hanging in the air between them. Both live inside the cover, so they sit behind the
   glass and move with the camera; positions are in viewport units (the cover is centred on the viewport). ---------- */
.specimen, .mist { display: none; }
.motion .specimen {
  display: block; position: absolute; pointer-events: none;
  /* plate size, and its centre: 23vw across (mirrors the name column), level with the bottle's middle (73.1% =
     the bottle's foot line), but never up under the counter heading (its foot = top 72px + 2.4vh, kicker 16px +
     12px, the title's line). Kept smaller than the bottle reads, so the glass stays the hero. */
  --ps: min(44vh, 26vw);
  width: var(--ps); height: var(--ps);
  left: calc(50% - 27vw - var(--ps) / 2);
  top: max(calc(73.1% - var(--bottle-h, 52%) / 2 - var(--ps) / 2 - 2vh), calc(50% - 50vh + 72px + 2.4vh + 28px + 1.3 * clamp(19px, 1vw + .8vh, 24px) + 4.5vh));
}
/* the plates are sepia ink line work: multiplied, they print into the kraft rather than sit on it */
.plate { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; mix-blend-mode: multiply; }
/* --m = the draw-in: a feathered radial wipe opening from the side nearest the bottle (main.js tweens it 0% -> 120%);
   the second layer lets the plate's foot thin out over the oak, as if printed into the dark above it */
.plate__art {
  position: absolute; inset: 0; --m: 120%;
  transform-origin: 70% 45%;
  -webkit-mask-image: radial-gradient(150% 130% at 104% 40%, #000 calc(var(--m) - 32%), transparent var(--m)), linear-gradient(180deg, #000 80%, rgba(0, 0, 0, .35) 100%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(150% 130% at 104% 40%, #000 calc(var(--m) - 32%), transparent var(--m)), linear-gradient(180deg, #000 80%, rgba(0, 0, 0, .35) 100%);
  mask-composite: intersect;
}
.plate__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* one gilt shimmer across the engraving in the hold, masked by the engraving itself (main.js moves it):
   the ink lines warm to gilt as it passes */
.plate__sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(212, 170, 84, 0) 42%, rgba(222, 182, 98, .62) 50%, rgba(212, 170, 84, 0) 58%) 0% 0 / 300% 100% no-repeat;
  -webkit-mask: var(--src) center / contain no-repeat;
  mask: var(--src) center / contain no-repeat;
  mix-blend-mode: screen;
}
.plate__cap {
  position: absolute; left: -20%; right: -20%; top: 100%; margin-top: 1.2vh;
  text-align: center; white-space: nowrap;
  font: italic 400 clamp(14px, .45vw + 1.05vh, 18px)/1.2 var(--f-serif);
  letter-spacing: .02em; color: #3A2A0C;
}
/* small caps on kraft need weight: Jost 500, not the hairline Cormorant (the plate itself is multiplied at .78) */
.plate__cap span { font: normal 500 .7em/1 var(--f-caps); letter-spacing: .3em; text-transform: uppercase; }

/* the scent in the air: big, heavily softened blobs in the scent's colour (--spine), multiplied into the kraft like a
   watercolour wash; three leave the bottle's shoulder and drift out past the plate, one lingers around it.
   Paused off screen (.is-live). */
.motion .mist { display: block; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: 0; }
.mist i {
  position: absolute; left: calc(50% - 6vw); top: calc(73.1% - var(--bottle-h, 52%) * .7);
  width: 30vw; aspect-ratio: 1.3; border-radius: 50%; opacity: 0;
  background:
    radial-gradient(42% 46% at 40% 48%, color-mix(in srgb, var(--spine) 85%, transparent), transparent),
    radial-gradient(36% 40% at 64% 58%, color-mix(in srgb, var(--spine) 60%, transparent), transparent);
  filter: blur(28px);
  transform: translate(-50%, -50%) scale(.5);
  will-change: transform, opacity;
  animation: mist-drift 20s cubic-bezier(.33, .1, .45, 1) infinite paused;
}
.mist i:nth-child(1) { --o: .3; --dx: -24vw; --dy: -7vh; --r0: -8deg; --r1: 14deg; animation-duration: 19s; animation-delay: -3s; }
.mist i:nth-child(2) { --o: .24; --dx: -31vw; --dy: 9vh; --r0: 10deg; --r1: -12deg; animation-duration: 24s; animation-delay: -11s; }
.mist i:nth-child(3) { --o: .2; --dx: -17vw; --dy: -17vh; --r0: 4deg; --r1: 26deg; animation-duration: 22s; animation-delay: -17s; }
.mist i:nth-child(4) {
  --o: .2; left: calc(50% - 27vw); top: calc(73.1% - var(--bottle-h, 52%) / 2);
  width: 36vw; opacity: var(--o);
  animation: mist-hover 17s ease-in-out infinite alternate paused;
}
.counter.is-live .mist i { animation-play-state: running; }
@keyframes mist-drift {
  0% { transform: translate(-50%, -50%) rotate(var(--r0)) scale(.5); opacity: 0; }
  22% { opacity: var(--o); }
  50% { transform: translate(calc(-50% + var(--dx) * .5), calc(-50% + var(--dy) * .35 - 3vh)) rotate(0deg) scale(.95); }
  72% { opacity: var(--o); }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r1)) scale(1.4); opacity: 0; }
}
@keyframes mist-hover {
  0% { transform: translate(-58%, -44%) rotate(-6deg) scale(1); }
  100% { transform: translate(-42%, -57%) rotate(8deg) scale(1.16); }
}

html:not(.motion) .bottle__label { display: none; } /* the static page shows the real 007 label */
/* the end of the counter: the lamps go down and the set sinks into kraft shade as the paper close is laid over it */
.counter__wash {
  position: absolute; inset: 0; z-index: 6; opacity: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 80% at 50% 45%, rgba(80, 62, 42, .55), rgba(60, 45, 30, .9)), var(--kraft-2);
  mix-blend-mode: multiply;
}

.counter__head { position: absolute; left: var(--gut); top: calc(72px + 2.4vh); z-index: 3; }
.counter__head .kicker, .counter .ledger__no { color: var(--gold-ink-k); }
.counter__title {
  margin-top: 12px;
  font: italic 400 clamp(19px, 1vw + .8vh, 24px)/1.3 var(--f-serif);
  color: var(--ink-2);
}
.counter__title span { color: var(--gold-ink-k); }
.counter__index { display: none; }

.ledger { position: relative; z-index: 3; padding: 9vh var(--gut) 0; }
.ledger__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 44px 32px; }
.ledger__item { position: relative; display: grid; align-content: start; gap: 10px; padding-top: 18px; }
/* each scent's spine colour, deepened a little with ink so it holds a line on kraft and paper */
.ledger__item { --c-ink: color-mix(in srgb, var(--c) 70%, #161513); }
.ledger__item::before { content: ''; position: absolute; left: 0; top: 0; width: 32px; height: 2px; background: var(--c-ink); }
html:not(.motion) .ledger__item::after {
  content: ''; order: -1; width: min(100%, 200px); aspect-ratio: 1; margin: 4px 0 6px;
  background: var(--plate) left center / contain no-repeat; opacity: .85; mix-blend-mode: multiply;
}
.ledger__no {
  font: 400 clamp(46px, 5vw, 64px)/1 var(--f-display);
  color: var(--gold-ink);
}
.ledger__name { font: 400 clamp(28px, 2.6vw, 38px)/1.05 var(--f-display); color: var(--ink); letter-spacing: -.01em; }
.ledger__notes { font: italic 400 20px/1.36 var(--f-serif); color: var(--ink-2); }

.counter__line {
  position: relative; z-index: 3;
  margin: 10vh var(--gut) 0;
  text-align: center;
  font: italic 400 clamp(20px, 1.1vw + .8vh, 26px)/1.35 var(--f-serif);
  color: var(--ink);
}
.counter__line em { font-style: normal; font-family: var(--f-display); font-size: .9em; letter-spacing: .01em; color: #3E2D0C; }

/* =================================================================== 4. CLOSE */
/* house paper under a soft lamp, ink type, the bag as a photograph in a gilt hairline frame on a card-stock mat */
.close {
  position: relative;
  min-height: 100vh;
  display: grid; grid-template-rows: 1fr auto;
  color: var(--ink);
  background:
    radial-gradient(ellipse 58% 64% at 36% 46%, rgba(252, 249, 242, .78), rgba(252, 249, 242, 0) 72%),
    radial-gradient(ellipse 120% 95% at 50% 50%, rgba(110, 90, 67, 0) 58%, rgba(110, 90, 67, .16) 100%),
    var(--grain), var(--paper);
  isolation: isolate;
}
.close__inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 12vh 20px 6vh;
}
.close__text { display: flex; flex-direction: column; align-items: center; }
/* the bag as a framed photograph: an outer gilt hairline, a card-stock mat, an inner gilt hairline, a warm print */
.close__bag {
  width: clamp(300px, min(40vw, 72vh * 1.1778), 600px); max-width: 100%;
  margin: 0 0 6vh; padding: 16px;
  border: 1px solid transparent;
  background: linear-gradient(180deg, #FCF9F2, var(--stock) 45%, #F5EEE1) padding-box, var(--gilt) border-box;
  box-shadow: 0 2px 3px rgba(22, 21, 19, .07), 0 44px 64px -38px rgba(22, 21, 19, .5), 0 14px 28px -18px rgba(22, 21, 19, .22);
}
.close__photo {
  position: relative; overflow: hidden;
  aspect-ratio: 1060 / 900;
  outline: 1px solid rgba(184, 145, 63, .85); outline-offset: 5px;
}
/* graded into the paper: the cream studio backdrop goes to warm paper, the corners to a soft sepia shade */
.close__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  filter: brightness(.98) contrast(1.04) saturate(.9) sepia(.12);
  transform-origin: 50% 60%;
}
.close__photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 74% at 46% 44%, rgba(110, 90, 67, 0) 52%, rgba(110, 90, 67, .32) 100%),
    linear-gradient(180deg, rgba(255, 236, 200, .05), rgba(110, 90, 67, .06));
  mix-blend-mode: multiply;
}
.close__kicker { display: flex; align-items: center; gap: 16px; color: var(--gold-ink); }
.close__kicker::before, .close__kicker::after { content: ''; width: 34px; height: 1px; background: var(--gilt); opacity: .9; }
.close__title { margin-top: 3vh; font-size: clamp(46px, min(5.6vw, 10.4vh), 96px); line-height: .98; color: var(--ink); }
.close__title .rv { display: block; padding-bottom: .06em; }
/* gilt in ink: the italic carries the gold, dark enough to read on paper */
.close__gilt {
  font-style: italic;
  background: linear-gradient(180deg, #8E6D2C 0%, #6F531C 58%, #5A4116 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.close__rule { display: block; width: 56px; height: 1px; background: var(--gilt); margin-top: 3.4vh; transform-origin: 0 50%; }

/* guest list: the gilt button opens an inline line, no modal (TODO: wire to the client's real contact) */
.guest { display: flex; flex-direction: column; align-items: center; }
.guest [hidden] { display: none !important; }
.guest__row { display: flex; align-items: flex-end; gap: 22px; margin-top: 3.4vh; }
.guest__in {
  background: none; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(184, 145, 63, .75);
  padding: 10px 0; width: min(340px, 70vw);
  font: italic 400 22px/1.2 var(--f-serif); color: var(--ink);
  transition: border-color .4s;
}
.guest__in::placeholder { color: rgba(74, 66, 55, .6); }
.guest__in:focus { outline: none; border-bottom-color: var(--gold-ink); }
.guest__go {
  flex: none; cursor: pointer;
  padding: 0 0 6px; margin-bottom: 8px; border: 0;
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat;
  font: 500 10.5px/1 var(--f-caps); letter-spacing: .32em; text-transform: uppercase;
  color: var(--ink); white-space: nowrap;
}
.guest__go:hover { color: var(--gold-ink); }
.guest__ok { margin-top: 3.4vh; font: italic 400 22px/1.3 var(--f-serif); color: var(--gold-ink); }
.btn-gilt {
  position: relative; display: inline-grid; place-items: center;
  min-height: 52px; margin-top: 5vh; padding: 0 34px;
  border: 1px solid transparent;
  background: linear-gradient(var(--ivory), var(--ivory)) padding-box, var(--gilt) border-box;
  font: 500 11.5px/1 var(--f-caps); letter-spacing: .32em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; cursor: pointer;
  overflow: hidden; isolation: isolate;
  transition: color .5s var(--ease-out);
}
.btn-gilt::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--gold-ink);
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform .7s var(--ease-out);
}
.btn-gilt:hover::before, .btn-gilt:focus-visible::before { transform: scaleX(1); transform-origin: 0 50%; }
/* printed in ink on the paper, a gilt hairline round it; gold-ink wipes in on hover */
.close .btn-gilt {
  margin-top: 4.4vh;
  background: linear-gradient(var(--ink), var(--ink)) padding-box, var(--gilt) border-box;
  color: var(--stock);
}
.close .btn-gilt:hover, .close .btn-gilt:focus-visible { color: var(--stock); }
@media (min-width: 1024px) {
  .close__inner { flex-direction: row; justify-content: center; align-items: center; gap: 6.5vw; text-align: left; padding: 13vh var(--gut) 8vh; }
  .close__bag { margin: 0; }
  .close__text { align-items: flex-start; }
  .close__kicker::before { display: none; }
  .guest { align-items: flex-start; }
}
.foot {
  padding: 26px 20px calc(26px + env(safe-area-inset-bottom));
  text-align: center;
  font: 500 10.5px/1 var(--f-caps); letter-spacing: .26em;
  color: rgba(111, 83, 28, .82);
  border-top: 1px solid rgba(184, 145, 63, .45);
  margin: 0 var(--gut);
}

/* =================================================================== motion layout (pinned stage) */
.motion .door__scene, .motion .bottle__img, .motion .hall__img { will-change: transform; }
.motion .hall {
  height: 100vh;
  margin-top: calc(-1 * max(100vh, 520px) - var(--over) * 100vh);
  background: transparent;
  place-items: end start;
}
/* copy bottom-left on the shaded floor; the room keeps its centre */
.motion .hall__content {
  align-items: flex-start;
  text-align: left;
  padding: 0 0 11vh var(--gut);
  max-width: min(46vw, 720px);
}

/* the counter dissolves in over the still-pinned hall, exactly as the hall does over the door */
.motion .counter {
  height: 100vh; min-height: 0; padding: 0; overflow: hidden;
  margin-top: calc(-1 * max(100vh, 520px) - var(--over2) * 100vh);
  position: relative; z-index: 2;
  background: transparent;
}
.motion .counter__stage { background: var(--kraft); }
.motion .counter__stage { position: absolute; inset: 0; height: auto; min-height: 0; }
/* kraft shade over the room bokeh (deeper at the edges, open behind the bottle), eased off across the top's back
   edge, a little deeper again on the counter's front */
.motion .counter__dim {
  background:
    radial-gradient(ellipse 58% 66% at 50% 46%, rgba(110, 90, 67, 0) 34%, rgba(110, 90, 67, .36) 100%),
    linear-gradient(180deg, rgba(110, 90, 67, .2) 0%, rgba(110, 90, 67, .06) 58%, rgba(110, 90, 67, 0) 67%, rgba(110, 90, 67, 0) 80%, rgba(80, 62, 42, .2) 100%);
}
/* the camera: a 3% overscan leaves room for the per-scent drift; 007's push-in centres on its label */
.motion .counter__cover { --bottle-h: 52%; transform-origin: 50% 48%; }
/* no dot index: the plate and the ledger carry the number */
.motion .counter__index { display: none; }
.motion .ledger {
  position: absolute; z-index: 3; padding: 0;
  right: var(--gut); top: 50%;
  width: min(30vw, 420px);
  height: 46vh;
  transform: translateY(-50%);
  overflow: hidden;
}
/* one scent at a time: items stack in place and crossfade (main.js) */
.motion .ledger__list { display: block; position: relative; height: 100%; }
.motion .ledger__item {
  position: absolute; inset: 0; height: auto;
  align-content: center; gap: 1.6vh; padding: 0 0 0 2px;
  opacity: 0; visibility: hidden;
}
.motion .ledger__item::before { top: auto; bottom: calc(50% + 9.6vh); display: none; }
.motion .ledger__no {
  font-size: clamp(64px, 13vh, 124px);
  font-optical-sizing: none; font-variation-settings: 'opsz' 28; font-weight: 500;
  background: linear-gradient(180deg, #8E6D2C 0%, #6F531C 55%, #5A4116 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.motion .ledger__name { font-size: clamp(32px, 6.4vh, 58px); }
.motion .ledger__notes { font-size: clamp(19px, 2.9vh, 24px); }
.motion .ledger__notes li { display: flex; align-items: center; gap: 12px; }
.motion .ledger__notes li:first-child::before { content: ''; width: 22px; height: 1px; background: var(--c-ink); }
.motion .ledger__notes li:not(:first-child) { padding-left: 34px; }
.motion .counter__line { position: absolute; left: 0; right: 0; bottom: calc(6vh + var(--safe-b)); margin: 0 var(--gut); }

/* the paper close is laid over the still-pinned counter like a page: opaque from its edge down, so the counter is
   covered, never seen through it; the page's leading edge casts a soft sepia shadow onto the counter below it */
.motion .close { margin-top: calc(-1 * var(--over3) * 100vh); z-index: 3; box-shadow: 0 -1px 0 rgba(250, 246, 238, .7); }
.motion .close::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 9vh; pointer-events: none;
  background: linear-gradient(0deg, rgba(28, 21, 13, .3) 0%, rgba(28, 21, 13, .12) 30%, rgba(28, 21, 13, .03) 70%, rgba(28, 21, 13, 0) 100%);
}

/* =================================================================== small laptops */
@media (max-height: 700px) and (min-width: 768px) {
  .fascia { top: 5.5vh; }
}

/* =================================================================== mobile */
@media (max-width: 767px) {
  :root { --gut: 20px; }
  body { font-size: 18px; }
  .fascia { left: 16px; right: 16px; top: calc(4vh + env(safe-area-inset-top)); --fh: 84px; }
  .fascia::before, .fascia::after { left: -6px; right: -6px; }
  .fascia__board { grid-template-columns: 1fr; padding: 0; }
  .fascia__legend { display: none; }
  .fascia__logo { height: calc(var(--fh) * .7); }
  .plaque-wrap { right: 16px; bottom: auto; top: calc(4vh + 84px + 3.2vh); }
  .plaque { padding: 14px 14px 12px; gap: 7px; font-size: 8px; letter-spacing: .22em; }
  .mast { height: 60px; }
  .mast__l { visibility: hidden; }
  .door__ui { bottom: calc(5vh + var(--safe-b)); }
  .door__title { font-size: clamp(44px, 13vw, 64px); margin: 14px 0 0; }
  .door__actions { margin-top: 22px; }
  .door__shade {
    background: linear-gradient(0deg, rgba(28, 21, 13, .86) 0%, rgba(28, 21, 13, .5) 34%, rgba(28, 21, 13, 0) 60%);
  }

  .hall__title { font-size: clamp(38px, 11vw, 54px); }
  .hall__sub { font-size: 18px; }
  .motion .hall__content { max-width: none; padding: 0 var(--gut) 9vh; }

  .counter__head { top: calc(5vh + env(safe-area-inset-top)); }
  .ledger__list { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .ledger__notes { font-size: 18px; }

  .motion .counter__cover { --bottle-h: 35%; transform-origin: 50% 56%; }
  .motion .counter__head { display: none; }
  .motion .counter__index { display: none; }
  .motion .ledger {
    left: var(--gut); right: var(--gut); width: auto;
    top: calc(60px + 2.5vh + env(safe-area-inset-top)); height: 30vh; transform: none;
    text-align: center;
  }
  .motion .ledger__item { justify-items: center; gap: 6px; }
  .motion .ledger__no { font-size: clamp(48px, 7.4vh, 64px); }
  .motion .ledger__name { font-size: clamp(30px, 4.6vh, 40px); }
  .motion .ledger__notes { font-size: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 14px; }
  .motion .ledger__notes li:first-child::before { display: none; }
  .motion .ledger__notes li:not(:first-child) { padding-left: 0; }
  .motion .ledger__notes li + li::before { content: '·'; margin-right: 14px; color: var(--c-ink); }
  .motion .counter__line { bottom: calc(4.5vh + var(--safe-b)); font-size: 19px; }
  .motion .counter__line em { display: block; }
  .motion .specimen { --ps: min(84vw, 44vh); left: calc(50% - var(--ps) / 2); top: calc(73.1% - var(--bottle-h) / 2 - var(--ps) / 2); opacity: .3; }
  .motion .plate__cap, .motion .mist { display: none; }

  .close__inner { padding-top: 14vh; }
  .close__bag { width: min(88vw, 420px); }
  .btn-gilt { padding: 0 26px; }
  .guest__row { flex-direction: column; align-items: center; gap: 18px; }
  .guest__in { text-align: center; }
  .guest__ok { text-align: center; }
}

/* =================================================================== reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-fade] { opacity: 0; transition: opacity .9s ease; }
  [data-fade].is-in { opacity: 1; }
  .mist i { animation: none; }
}