/* 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 {
  /* palette sampled from the real shop (store-2026-10-13): interior wall green, exterior sage, oak shelving, walnut fascia */
  --green-deep: #0F1A13;   /* darkest ground, night shade */
  --green: #172A20;        /* shop wall green (interior) */
  --green-2: #22382B;      /* lifted green, panels */
  --sage: #9AA573;         /* exterior sage paint */
  --oak: #A07954;          /* light-oak shelving */
  --honey: #C79A5E;        /* oak highlights */
  --walnut: #3C2818;       /* fascia board */
  --brass-1: #8C6A2E;
  --brass-2: #E4CB8E;
  --brass-3: #B8913F;
  --cream: #E9E1D3;
  --ivory: #F3EBDC;
  --ink: #14201A;
  --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%);

  --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 green close rises over the still-pinned counter while its lamps go down (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(--green-deep);
  color: var(--ivory);
  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(--brass-2); 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(--brass-2);
}
:focus-visible { outline: 1px solid var(--brass-2); 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 ---------- */
.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: rgba(243, 235, 220, .78);
  transition: color .5s;
  isolation: isolate;
}
/* a short smoked band, so the gilt mark stays legible over lamp bokeh */
.mast::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 36px);
  z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 12, 9, .6), rgba(8, 12, 9, 0));
  transition: opacity .5s;
}
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; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .55)); }
/* curtain for the masthead links: a short cut instead of rewinding the whole film */
.cut { position: fixed; inset: 0; z-index: 40; opacity: 0; pointer-events: none; background: #0F1A13; }
.mast__logo use { fill: url(#giltFascia); transition: fill .5s; }
.mast__r {
  justify-self: end; color: inherit; text-decoration: none; white-space: nowrap;
  padding-bottom: 6px;
  background: linear-gradient(var(--brass-3), var(--brass-3)) 0 100% / 100% 1px no-repeat;
}

/* =================================================================== 1. THE DOOR */
.door {
  position: relative;
  height: 100vh;
  min-height: 520px;
  overflow: hidden;
  background: var(--green);
  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: the brick and the olive tree stay lit */
  background: linear-gradient(0deg, rgba(10, 18, 13, .86) 0%, rgba(10, 18, 13, .45) 22%, rgba(10, 18, 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; }
.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%, #FFF9EC 0%, #F6EEDF 18%, rgba(240, 231, 214, .75) 36%, rgba(233, 225, 211, 0) 66%);
  transform-origin: 50% 55%;
}
.door__stone { background: var(--cream); }

/* =================================================================== 2. THE HALL */
.hall {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--green);
  color: var(--ivory);
  isolation: isolate;
}
.hall__aperture { position: absolute; inset: 0; overflow: hidden; background: var(--green); }
.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(10, 18, 13, .88) 0%, rgba(10, 18, 13, .55) 28%, rgba(10, 18, 13, 0) 55%),
    linear-gradient(90deg, rgba(10, 18, 13, .45) 0%, rgba(10, 18, 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__title { font-size: clamp(44px, min(5.4vw, 9.6vh), 92px); margin-top: 2.2vh; }
.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(--green-deep);
  color: var(--ivory);
  padding-bottom: 12vh;
  --spine: #999999;
}
.counter__stage { position: relative; height: 100vh; min-height: 520px; overflow: hidden; }
/* the client's own shop, out of focus behind the counter (rack focus out of the hall, see main.js);
   counter.jpg contributes only its oak countertop, faded in from just above the back edge (~67-69% 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;
  filter: saturate(.72) brightness(.92);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 60%, #000 67.5%);
  mask-image: linear-gradient(180deg, transparent 0, transparent 60%, #000 67.5%);
}
.counter__dim { position: absolute; inset: 0; background: rgba(8, 14, 10, .22); }
/* 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: screen; 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: screen; 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%; }
/* contact shadow where the glass meets the counter */
.bottle__shadow {
  position: absolute; left: 8%; right: 8%; bottom: -1.2%; height: 3.5%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .85), transparent);
}
/* 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(.6) sepia(.25) blur(1px);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .7), transparent 22%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, .7), transparent 22%);
  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;
}
.bottle__glass {
  mix-blend-mode: multiply;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 87%, #6B4E30 88.5%, #3A2918 100%),
    linear-gradient(90deg, #2E2113 0%, #6B5233 8%, #9C7C4E 19%, #C9AD7A 50%, #9C7C4E 81%, #6B5233 92%, #2E2113 100%);
}
/* 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));
}
.plate { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; }
/* --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) */
.plate__sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 240, 200, 0) 42%, rgba(255, 238, 196, .5) 50%, rgba(255, 240, 200, 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: rgba(214, 189, 120, .82); text-shadow: 0 1px 10px rgba(8, 14, 10, .85);
}
.plate__cap span { font-style: normal; font-size: .82em; letter-spacing: .18em; text-transform: uppercase; }

/* the scent in the air: big, heavily softened blobs in the scent's light (--spine), screened over the room; 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: screen; 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: .21; --dx: -24vw; --dy: -7vh; --r0: -8deg; --r1: 14deg; animation-duration: 19s; animation-delay: -3s; }
.mist i:nth-child(2) { --o: .16; --dx: -31vw; --dy: 9vh; --r0: 10deg; --r1: -12deg; animation-duration: 24s; animation-delay: -11s; }
.mist i:nth-child(3) { --o: .14; --dx: -17vw; --dy: -17vh; --r0: 4deg; --r1: 26deg; animation-duration: 22s; animation-delay: -17s; }
.mist i:nth-child(4) {
  --o: .13; 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 */
/* lamps down at the end of the counter: the scene sinks into the house green as the green close rises over it */
.counter__wash { position: absolute; inset: 0; z-index: 6; background: #0D1711; opacity: 0; pointer-events: none; }

.counter__head { position: absolute; left: var(--gut); top: calc(72px + 2.4vh); z-index: 3; }
.counter__title {
  margin-top: 12px;
  font: italic 400 clamp(19px, 1vw + .8vh, 24px)/1.3 var(--f-serif);
  color: rgba(243, 235, 220, .8);
}
.counter__title span { color: rgba(228, 203, 142, .75); }
.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; }
.ledger__item::before { content: ''; position: absolute; left: 0; top: 0; width: 32px; height: 2px; background: var(--c); opacity: .85; }
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;
}
.ledger__no {
  font: 400 clamp(46px, 5vw, 64px)/1 var(--f-display);
  background: var(--gilt-v); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ledger__name { font: 400 clamp(28px, 2.6vw, 38px)/1.05 var(--f-display); color: var(--ivory); letter-spacing: -.01em; }
.ledger__notes { font: italic 400 20px/1.36 var(--f-serif); color: rgba(243, 235, 220, .78); }

.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: rgba(243, 235, 220, .9);
}
.counter__line em { font-style: normal; font-family: var(--f-display); font-size: .9em; letter-spacing: .01em; color: var(--brass-2); }

/* =================================================================== 4. CLOSE */
/* the shop's own green and gold (the bag, the fascia): a lamplit green wall, gilt hairlines, ivory and gilt type */
.close {
  position: relative;
  min-height: 100vh;
  display: grid; grid-template-rows: 1fr auto;
  color: var(--ivory);
  background:
    radial-gradient(ellipse 58% 62% at 38% 46%, rgba(52, 86, 64, .5), rgba(52, 86, 64, 0) 72%),
    radial-gradient(ellipse 120% 90% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(4, 8, 6, .55) 100%),
    linear-gradient(180deg, #0D1711 0%, #132419 34%, #12221A 72%, #0A130E 100%);
  isolation: isolate;
}
/* a faint felt grain on the wall, so the green is a surface rather than a fill */
.close::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .62 0 0 0 0 .5 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.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 green mat, an inner gilt hairline, a graded print */
.close__bag {
  width: clamp(300px, min(40vw, 72vh * 1.1778), 600px); max-width: 100%;
  margin: 0 0 6vh; padding: 14px;
  border: 1px solid transparent;
  background: linear-gradient(#0E1913, #0E1913) padding-box, var(--gilt) border-box;
  box-shadow: 0 46px 70px -34px rgba(0, 0, 0, .85), 0 12px 30px -12px rgba(0, 0, 0, .5);
}
.close__photo {
  position: relative; overflow: hidden;
  aspect-ratio: 1060 / 900;
  outline: 1px solid rgba(201, 165, 90, .7); outline-offset: 5px;
}
/* graded into the room: the cream studio backdrop goes to warm lamplit parchment, the corners to the wall's shade */
.close__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  filter: brightness(.8) contrast(1.08) saturate(.86) sepia(.16);
  transform-origin: 50% 60%;
}
.close__photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 78% 72% at 46% 44%, rgba(14, 25, 19, 0) 48%, rgba(14, 25, 19, .5) 100%),
    linear-gradient(180deg, rgba(255, 226, 170, .06), rgba(14, 25, 19, .1));
  mix-blend-mode: multiply;
}
.close__kicker { display: flex; align-items: center; gap: 16px; color: var(--brass-2); }
.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(--ivory); }
.close__title .rv { display: block; padding-bottom: .06em; }
.close__gilt {
  font-style: italic;
  background: linear-gradient(180deg, #F2DFA8 0%, #D6B46A 58%, #B08A3E 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(201, 165, 90, .55);
  padding: 10px 0; width: min(340px, 70vw);
  font: italic 400 22px/1.2 var(--f-serif); color: var(--ivory);
  transition: border-color .4s;
}
.guest__in::placeholder { color: rgba(243, 235, 220, .45); }
.guest__in:focus { outline: none; border-bottom-color: var(--brass-2); }
.guest__go {
  flex: none; cursor: pointer;
  padding: 0 0 6px; margin-bottom: 8px; border: 0;
  background: linear-gradient(var(--brass-3), var(--brass-3)) 0 100% / 100% 1px no-repeat;
  font: 500 10.5px/1 var(--f-caps); letter-spacing: .32em; text-transform: uppercase;
  color: var(--ivory); white-space: nowrap;
}
.guest__go:hover { color: var(--brass-2); }
.guest__ok { margin-top: 3.4vh; font: italic 400 22px/1.3 var(--f-serif); color: var(--brass-2); }
.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(--gilt);
  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%; }
/* house green, like the bag; the gilt wipes in on hover */
.close .btn-gilt {
  margin-top: 4.4vh;
  background: linear-gradient(#0E1913, #0E1913) padding-box, var(--gilt) border-box;
  color: var(--brass-2);
}
.close .btn-gilt:hover, .close .btn-gilt:focus-visible { color: var(--ink); }
@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(228, 203, 142, .55);
  border-top: 1px solid rgba(184, 145, 63, .28);
  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(--green-deep); }
.motion .counter__stage { position: absolute; inset: 0; height: auto; min-height: 0; }
/* green shop shade over the room bokeh, eased off across the countertop's back edge, deeper again on its front */
.motion .counter__dim {
  background: linear-gradient(180deg, rgba(12, 32, 20, .55) 0%, rgba(12, 32, 20, .42) 58%, rgba(8, 14, 10, .1) 68%, rgba(8, 14, 10, .45) 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, #F2DFA8 0%, #D6B46A 55%, #B08A3E 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); }
.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 green close rises over the still-pinned counter while its lamps go down: dark into dark, no blank viewport */
.motion .close { margin-top: calc(-1 * var(--over3) * 100vh); z-index: 3; }
.motion .close::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 30vh; pointer-events: none;
  background: linear-gradient(0deg, #0D1711 0%, rgba(13, 23, 17, .82) 30%, rgba(13, 23, 17, .4) 62%, rgba(13, 23, 17, 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(10, 18, 13, .9) 0%, rgba(10, 18, 13, .55) 34%, rgba(10, 18, 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); }
  .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; }
}