/* Scents of Belonging v3: "The gallery visit".
   One palette, taken from the hero film: linen card, walnut shelf, gold foil, amber glass.
   The only dark room is "The making" (Commercial 1). References: Refero ddna (museum-label type),
   D.S. & Durga (broadsheet scale contrast), Maison Margiela (printed-matter controls). */

:root {
  --linen: #EEE5D8;
  --sand: #E6D9C7;
  --paper: #F7F1E7;
  --card: #FBF8F2;
  --ink: #2A1F17;
  --ink-soft: #66574A;
  --hair: rgba(42, 31, 23, 0.14);
  --hair-strong: rgba(42, 31, 23, 0.28);
  --walnut: #3A2A1E;
  --gold: #A9822F;        /* foil, on large type and rules */
  --gold-ink: #866420;    /* gold that passes contrast as small text on linen */
  --amber: #B9692A;
  --night: #120D09;       /* the making room only */

  --sc-canvas: var(--linen);
  --sc-surface: var(--paper);
  --sc-ink: var(--ink);
  --sc-ink-soft: var(--ink-soft);
  --sc-accent: var(--gold-ink);
  --sc-accent-ink: var(--paper);
  --sc-font-display: "Cormorant", Georgia, serif;
  --sc-font-text: "Jost", system-ui, sans-serif;

  --gutter: clamp(1.1rem, 4vw, 3.5rem);
  --bar-h: 64px;
  --r: 3px;
  --shadow-paper: 0 1px 0 rgba(255,255,255,.6) inset, 0 18px 34px -22px rgba(58, 42, 30, 0.45), 0 2px 6px -2px rgba(58, 42, 30, 0.18);
  --ease: cubic-bezier(.22, .8, .24, 1);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--linen); color: var(--ink); font-family: "Jost", system-ui, sans-serif; font-weight: 400; }
::selection { background: var(--gold); color: var(--paper); }

/* ---------------------------------------------------------------- type */
.display { font-family: "Cormorant", Georgia, serif; font-weight: 500; line-height: 0.98; letter-spacing: -0.012em; margin: 0; text-wrap: balance; }
.display em, .film-line em, .beat em, .lede em, .invites__lead em, .five__steps em { font-style: italic; color: var(--gold); font-weight: 500; }
.display--xl { font-size: clamp(3.1rem, 1.6rem + 6.4vw, 7.6rem); }
.display--lg { font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5.4rem); }
.display--md { font-size: clamp(2rem, 1.5rem + 2.2vw, 3.2rem); }
.label { font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 1.1rem; font-weight: 500; }
.lede { font-size: clamp(1.06rem, 1rem + 0.3vw, 1.22rem); line-height: 1.6; color: var(--ink-soft); max-width: 34rem; margin: 1.4rem 0 0; }
.hint { font-size: 0.86rem; color: var(--ink-soft); margin: 0.6rem 0 0; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; }
.skip:focus { left: 8px; }

/* -------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: 0 1.6rem; border-radius: var(--r); border: 1px solid transparent;
  font: 500 0.92rem/1 "Jost", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: transform 220ms var(--ease), background-color 220ms, color 220ms, border-color 220ms, box-shadow 220ms;
}
.btn:hover { transform: translateY(-2px); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--walnut); box-shadow: 0 10px 22px -12px rgba(42, 31, 23, .6); }
.btn--paper { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-paper); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--hair-strong); }
.btn--line:hover { border-color: var(--ink); }
.btn--wide { width: 100%; }

/* ------------------------------------------------------------------ bar */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--bar-h);
  display: flex; align-items: center; gap: 2rem; padding: 0 var(--gutter);
  transition: background-color 300ms, box-shadow 300ms, color 300ms;
}
.bar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in oklab, var(--linen) 82%, transparent); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); opacity: 0; transition: opacity 300ms; box-shadow: 0 1px 0 var(--hair); }
.bar.is-solid::before { opacity: 1; }
.bar.is-night { color: var(--paper); }
.bar.is-night::before { background: color-mix(in oklab, var(--night) 70%, transparent); box-shadow: none; }
.bar__mark { display: flex; flex-direction: column; text-decoration: none; line-height: 1; }
.bar__name { font: 600 1.32rem/1 "Cormorant", serif; letter-spacing: 0.01em; }
.bar__sub { font-size: 0.6rem; letter-spacing: 0.34em; text-transform: uppercase; margin-top: 4px; opacity: 0.8; }
.bar__links { display: flex; gap: 1.8rem; margin-left: auto; }
.bar__links a { font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; padding: 8px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 260ms var(--ease); }
.bar__links a:hover { background-size: 100% 1px; }
.menu-btn { display: none; }
.bag-btn {
  display: inline-flex; align-items: center; gap: 0.7rem; height: 44px; padding: 0 14px 0 10px;
  border: 1px solid currentColor; border-radius: 999px; background: transparent; cursor: pointer;
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.bag-btn__count { min-width: 22px; height: 22px; border-radius: 99px; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-size: 0.75rem; letter-spacing: 0; }
.bar.is-night .bag-btn__count { background: var(--paper); color: var(--ink); }
.bag-btn.bump { animation: bump 520ms var(--ease); }
@keyframes bump { 30% { transform: scale(1.08); } }
/* the fan of test strips you're holding */
.bag-btn__fan { position: relative; width: 22px; height: 26px; }
.bag-btn__fan i { position: absolute; left: 8px; bottom: 0; width: 6px; height: 24px; border-radius: 1px; background: var(--card); box-shadow: 0 0 0 1px rgba(42,31,23,.35); transform-origin: 50% 100%; transform: rotate(var(--r)); }
.bag-btn__fan i::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: var(--c); opacity: .85; }
.bag-btn__fan:empty::before { content: ""; position: absolute; left: 8px; bottom: 0; width: 6px; height: 24px; border: 1px dashed currentColor; opacity: .5; }

/* the room plaque, bottom left, like gallery signage */
.plaque {
  position: fixed; left: var(--gutter); bottom: 18px; z-index: 30; margin: 0;
  display: flex; align-items: baseline; gap: 0.7rem; padding: 8px 14px; border-radius: 2px;
  background: color-mix(in oklab, var(--paper) 88%, transparent); box-shadow: 0 1px 0 var(--hair), 0 10px 22px -16px rgba(42,31,23,.5);
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft);
  transition: opacity 300ms, transform 300ms var(--ease);
}
.plaque__name { color: var(--ink); letter-spacing: 0.14em; }
.plaque.is-hidden { opacity: 0; transform: translateY(8px); }

/* -------------------------------------------------- the intro (logo reveal) */
html.has-intro, html.has-intro body { overflow: hidden; }
.intro { position: fixed; inset: 0; z-index: 100; background: #E8E8E2; display: grid; place-items: center; transition: opacity 800ms var(--ease), visibility 0s 800ms; }
.intro.is-leaving { opacity: 0; visibility: hidden; }
.intro__video { width: 100%; height: 100%; object-fit: cover; }
.intro__bar { position: absolute; left: 50%; bottom: clamp(1.4rem, 5vh, 3rem); translate: -50% 0; width: min(220px, 50vw); height: 2px; background: rgba(42,31,23,.14); overflow: hidden; }
.intro__bar i { position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; }
.intro__skip { position: absolute; right: var(--gutter); bottom: clamp(1rem, 4vh, 2.4rem); border: 1px solid rgba(42,31,23,.28); background: rgba(247,241,231,.6); color: var(--ink);
  border-radius: 99px; padding: 10px 16px; font: 500 .74rem/1 "Jost", sans-serif; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
@media (max-width: 860px) { .intro__video { object-fit: contain; } .intro__skip { right: 50%; translate: 50% 0; bottom: 1.2rem; } .intro__bar { bottom: 4.4rem; } }

/* -------------------------------------------------- I · the entrance */
.entrance__stage { background: var(--linen); }
/* --f: 1 on arrival (framed picture), 0 once scrolled (full room). Set by app.js from the act's progress. */
.entrance__frame {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  transform-origin: 50% calc(var(--bar-h) + 1rem);
  transform: translateY(calc(var(--f, 1) * (var(--bar-h) + 1.2rem))) scale(calc(1 - 0.3 * var(--f, 1)));
  border-radius: calc(var(--f, 1) * 3px);
  box-shadow: 0 calc(var(--f, 1) * 30px) calc(var(--f, 1) * 60px) calc(var(--f, 1) * -30px) rgba(58, 42, 30, 0.55);
  outline: calc(var(--f, 1) * 14px) solid var(--card);
  will-change: transform;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.entrance__hello { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: calc(clamp(1rem, 3.5vh, 2.2rem) + 2rem); height: clamp(3rem, 1.4rem + 4.4vw, 6rem); margin: 0; font-weight: 500; }
.entrance__line { position: absolute; left: 0; bottom: 0; font-size: clamp(2.6rem, 1.2rem + 4.4vw, 5.8rem); line-height: 1; color: var(--ink); white-space: nowrap; }
.entrance__sub { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: clamp(1rem, 3.5vh, 2.2rem); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 0; }
.entrance__sub .label { margin: 0; color: var(--ink); }
.entrance__hint { font: italic 500 1.1rem/1 "Cormorant", serif; color: var(--gold-ink); }
.entrance__desk { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; z-index: 1; pointer-events: none; }
.entrance__smoke { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 500ms; }
.entrance__sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: soft-light;
  background: radial-gradient(28vmax 28vmax at var(--mx, 50%) var(--my, 40%), rgba(255, 236, 190, 0.95), rgba(255, 236, 190, 0) 70%); transition: opacity 500ms; }
.entrance.is-desk .entrance__smoke, .entrance.is-desk .entrance__sheen { opacity: 1; }
.entrance__scrim { --sc-canvas: var(--linen); }
.entrance .sc-copy { z-index: 4; }
.entrance__hello .display { color: var(--ink); }
.entrance__hello .label { color: var(--ink); }
/* Words over film (Clive, 21 Oct): light lettering on a soft blackish shadow that arrives and leaves WITH the words,
   so the footage stays clean between lines and the crest desk stays bright. */
.beat { font: italic 500 clamp(1.7rem, 1.2rem + 1.7vw, 2.8rem)/1.08 "Cormorant", serif; margin: 0; color: #F7F1E7; max-width: 18ch; }
.beat em { font-style: normal; color: #E7C77A; }
.beat, .film-room .sc-copy, .making .sc-copy { isolation: isolate; }
.beat::before, .film-room .sc-copy::before, .making .sc-copy::before {
  content: ""; position: absolute; z-index: -1; inset: -3.6rem -5rem -3.6rem -5rem; pointer-events: none;
  background: radial-gradient(closest-side, rgba(16, 11, 7, 0.78), rgba(16, 11, 7, 0.52) 58%, rgba(16, 11, 7, 0) 100%);
  filter: blur(6px);
}
.entrance__scrim, .film-room .sc-scrim { display: none; }

.invites { position: absolute; z-index: 5; left: 0; right: 0; bottom: clamp(1rem, 3.2vh, 2rem); display: grid; justify-items: center; gap: .8rem; pointer-events: none; }
.invites__lead { margin: 0; text-align: center; font: 500 clamp(1.05rem, .95rem + .4vw, 1.35rem)/1.3 "Cormorant", serif; color: var(--ink); }
.invites__row { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; pointer-events: auto; }
.invite-btn { display: inline-flex; align-items: center; gap: .9rem; min-height: 54px; padding: 0 1.6rem 0 1.8rem; border-radius: 99px; text-decoration: none;
  font: 500 .86rem/1 "Jost", sans-serif; letter-spacing: .14em; text-transform: uppercase; transition: transform 260ms var(--ease), box-shadow 260ms, background-color 260ms, color 260ms; }
.invite-btn i { font-style: normal; font-size: 1.15rem; letter-spacing: 0; transition: transform 260ms var(--ease); }
.invite-btn:hover { transform: translateY(-3px); } .invite-btn:hover i { transform: translateX(4px); }
.invite-btn--ink { background: var(--ink); color: var(--paper); box-shadow: 0 14px 26px -16px rgba(42,31,23,.7); }
.invite-btn--line { background: color-mix(in oklab, var(--card) 88%, transparent); color: var(--ink); border: 1px solid var(--hair-strong); backdrop-filter: blur(4px); }
.invite { pointer-events: auto; width: min(21rem, 25vw); }
.invites__lead { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(1.2rem, 4.5vh, 2.6rem); margin: 0; text-align: center;
  font: 500 clamp(1.15rem, 1rem + .5vw, 1.5rem)/1.3 "Cormorant", serif; color: var(--ink); text-shadow: 0 1px 14px rgba(247,241,231,.95); }
.invite {
  display: grid; gap: .35rem; text-align: left; padding: 1.2rem 1.3rem 1.3rem; text-decoration: none; color: var(--ink);
  background: var(--card); border-radius: 2px; box-shadow: var(--shadow-paper);
  transform: rotate(var(--tilt)); transition: transform 380ms var(--ease), box-shadow 380ms;
  background-image: linear-gradient(transparent 0 calc(100% - 3px), var(--gold) calc(100% - 3px));
}
.invite:hover, .invite:focus-visible { transform: rotate(0deg) translateY(-8px); box-shadow: 0 28px 40px -24px rgba(58,42,30,.55), 0 2px 6px -2px rgba(58,42,30,.2); }
.invite__no { font: italic 500 1rem/1 "Cormorant", serif; color: var(--gold-ink); }
.invite__title { font: 600 1.55rem/1.05 "Cormorant", serif; }
.invite__line { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.45; }
.entrance__skip { position: absolute; z-index: 5; right: var(--gutter); top: calc(var(--bar-h) + 14px); font-size: 0.74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: 8px 12px; border: 1px solid var(--hair-strong); border-radius: 99px; background: color-mix(in oklab, var(--paper) 70%, transparent); transition: opacity 300ms; }
.entrance.is-desk .entrance__skip { opacity: 0; pointer-events: none; }

/* -------------------------------------------------- film rooms (C3, C4) */
.film-room [data-sc-stage] { background: var(--sand); }
.film-line { font: 500 clamp(2.2rem, 1.4rem + 3vw, 4.4rem)/1 "Cormorant", serif; margin: 0; color: #F7F1E7; max-width: 14ch; text-wrap: balance; }
.film-line em { color: #E7C77A; }
.sc-copy--trail .film-line { margin-left: auto; }
.film-sub { margin: 1rem 0 1.4rem; color: #EFE6D8; max-width: 26rem; font-size: 1.05rem; line-height: 1.55; }
.sc-copy--trail .film-sub { margin-left: auto; }

/* -------------------------------------------------- rooms (flow) */
.room { padding-block: clamp(5rem, 12vh, 9rem); }
.room--linen { background: var(--linen); }
.room--sand { background: var(--sand); }
.room--paper { background: var(--paper); }

/* II · testing bar */
.test { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.test__head { position: sticky; top: calc(var(--bar-h) + 3rem); }
.finder { display: grid; gap: 2.2rem; min-width: 0; }
.finder__step { border: 0; margin: 0; padding: 0; min-width: 0; min-inline-size: 0; } /* fieldsets default to min-content: the strips rail stretched the page */
.finder__step legend, .finder__legend { display: flex; align-items: baseline; gap: .7rem; margin: 0 0 1rem; padding: 0; font: 500 1.5rem/1.1 "Cormorant", serif; }
.finder__step legend small { font: 400 .84rem "Jost"; color: var(--ink-soft); }
.finder__n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gold); font: italic 500 1rem/1 "Cormorant"; color: var(--gold-ink); flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; padding: 0 1.25rem; border-radius: 99px; border: 1px solid var(--hair-strong); background: var(--card); font-size: 0.98rem; transition: background-color 200ms, color 200ms, border-color 200ms, transform 200ms var(--ease); }
.chip--mood span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mood); }
.chip:hover span { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--gold-ink); outline-offset: 3px; }

/* the signature: perfumer's test strips */
.strips { display: flex; gap: clamp(.6rem, 1.4vw, 1rem); overflow-x: auto; padding: 1.5rem .3rem 2rem; scroll-snap-type: x proximity; min-height: 330px; align-items: flex-end; }
.strip {
  --c: var(--gold); flex: none; width: 86px; height: 290px; scroll-snap-align: start; position: relative;
  border: 0; padding: 0; cursor: pointer; background: var(--card); border-radius: 2px 2px 1px 1px; color: var(--ink);
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 14px 22px -18px rgba(58,42,30,.6), 0 0 0 1px rgba(42,31,23,.07);
  transform-origin: 50% 100%; transform: rotate(var(--lean, 0deg)) translateY(12px); opacity: 0;
  animation: stripIn 620ms var(--ease) forwards; animation-delay: var(--d, 0ms);
  transition: transform 340ms var(--ease), box-shadow 340ms;
}
@keyframes stripIn { to { opacity: 1; transform: rotate(var(--lean, 0deg)) translateY(0); } }
.strip::before { /* the dipped tip, stained with the scent */
  content: ""; position: absolute; inset: auto 0 0 0; height: 34%;
  background: linear-gradient(to top, color-mix(in oklab, var(--c) 70%, transparent), color-mix(in oklab, var(--c) 18%, transparent) 80%, transparent);
  border-radius: 0 0 1px 1px;
}
.strip__name { position: absolute; left: 50%; top: 18px; translate: -50% 0; writing-mode: vertical-rl; transform: rotate(180deg); font: 600 1.32rem/1 "Cormorant", serif; white-space: nowrap; max-height: 175px; overflow: hidden; text-overflow: ellipsis; }
.strip__for { position: absolute; left: 0; right: 0; bottom: 12px; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; text-align: center; }
.strip:hover, .strip:focus-visible { transform: rotate(0deg) translateY(-14px); box-shadow: 0 30px 34px -24px rgba(58,42,30,.7), 0 0 0 1px rgba(42,31,23,.1); }
.strip--house { --c: var(--gold); }
.strip--house::after { content: "House"; position: absolute; top: -10px; left: 50%; translate: -50% 0; font: italic 500 .8rem/1 "Cormorant"; background: var(--gold); color: var(--paper); padding: 4px 8px; border-radius: 99px; }
.strip--name { background: transparent; box-shadow: none; border: 1px dashed var(--hair-strong); display: grid; place-items: center; text-decoration: none; }
.strip--name::before { display: none; }
.strip--name span { writing-mode: vertical-rl; transform: rotate(180deg); font: italic 500 1.2rem/1.1 "Cormorant"; color: var(--gold-ink); }
.strips__empty { align-self: center; color: var(--ink-soft); }

/* IV · collection */
.house { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; margin-bottom: clamp(4rem, 10vh, 7rem); }
.house__fig { margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 2px; box-shadow: var(--shadow-paper); background: var(--paper); padding: clamp(10px, 1.4vw, 18px); }
.house__fig img { width: 100%; height: 100%; object-fit: cover; }
.house__text .btn { margin-top: 2rem; }
.prices { border-top: 1px solid var(--hair-strong); border-bottom: 1px solid var(--hair-strong); padding: 1.6rem 0 1.8rem; margin-bottom: clamp(4rem, 10vh, 7rem); }
.prices__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.prices__list li { display: grid; gap: .2rem; padding: 0 1.2rem; border-left: 1px solid var(--hair); }
.prices__list li:first-child { border-left: 0; padding-left: 0; }
.prices__size { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.prices__rand { font: 500 clamp(2.4rem, 1.6rem + 2.6vw, 4rem)/1 "Cormorant", serif; font-variant-numeric: lining-nums; }
.prices__hint { font: italic 500 1.05rem/1 "Cormorant"; color: var(--gold-ink); }
.wall__head { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; }
.tab { min-height: 44px; padding: 0 1rem; border: 0; background: none; cursor: pointer; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid transparent; }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.labels { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.wlabel { background: var(--sand); }
.wlabel button { width: 100%; height: 100%; text-align: left; border: 0; background: none; cursor: pointer; padding: 1.3rem 1.3rem 1.2rem; display: grid; gap: .45rem; transition: background-color 220ms; }
.wlabel button:hover, .wlabel button:focus-visible { background: var(--paper); }
.wlabel__name { font: 600 1.45rem/1.05 "Cormorant", serif; }
.wlabel__meta { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
.wlabel__moods { display: flex; gap: .4rem; flex-wrap: wrap; }
.wlabel__moods i { font-style: normal; display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; color: var(--ink-soft); }
.wlabel__moods i::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.wlabel__price { display: flex; justify-content: space-between; align-items: baseline; margin-top: .35rem; font-size: .86rem; }
.wlabel__price b { font: italic 500 1.05rem "Cormorant"; color: var(--gold-ink); }
.wlabel--house { background: var(--paper); }
.wall__search { display: block; margin: 0 0 1.2rem; }
.wall__search input { width: 100%; max-width: 26rem; min-height: 50px; border: 1px solid var(--hair-strong); border-radius: 99px; background: var(--card); padding: 0 1.2rem; font-size: 1rem; color: var(--ink); }
.wall__search input:focus { outline: none; border-color: var(--gold-ink); box-shadow: 0 0 0 3px rgba(134,100,32,.16); }
.wall__more-row { display: flex; justify-content: center; margin-top: 1.4rem; }
.wlabel { animation: labelIn 520ms var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes labelIn { from { opacity: 0; transform: translateY(10px); } }
.wall__more { margin: 1.6rem 0 0; color: var(--ink-soft); }
.wall__more a { color: var(--ink); }

/* V · the making: the only dark room */
.making { --sc-canvas: var(--night); color: var(--paper); }
.making [data-sc-stage] { background: var(--night); }
.making__glass { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.making__scrim { --sc-canvas: var(--night); }
.film-line--light { color: var(--paper); }
/* "Be remembered." rests below the bottle, on the plinth (Clive, 21 Oct) */
.making__word { position: absolute; z-index: 4; left: 50%; bottom: 7vh; translate: -50% 0; margin: 0; text-align: center; white-space: nowrap; font: 600 clamp(2.2rem, 1.3rem + 2.6vw, 4rem)/1 "Cormorant", serif; color: #F3E3C3; text-shadow: 0 2px 4px rgba(0,0,0,.6), 0 0 40px rgba(0,0,0,.75); }
.making__word em { color: #E2BE6E; }
.has-glass .making__word { visibility: hidden; }

/* VI · worn in Hammanskraal: one face, one line, one wall colour per step (app.js sets data-step from the pin) */
.worn__stage { --wall: #EEE5D8; background: var(--wall); transition: background-color 900ms var(--ease);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem);
  padding: calc(var(--bar-h) + 2vh) var(--gutter) 4vh; }
.worn__stage[data-step="1"] { --wall: #EBD9C9; } .worn__stage[data-step="2"] { --wall: #E9DDC2; }
.worn__stage[data-step="3"] { --wall: #EBD5CD; } .worn__stage[data-step="4"] { --wall: #E2D4C0; } .worn__stage[data-step="5"] { --wall: #EFE0C6; } .worn__stage[data-step="6"] { --wall: #E4DBCF; }
.worn__lines { position: relative; height: clamp(9rem, 22vh, 15rem); margin: .5rem 0 1rem; }
.worn__line { position: absolute; inset: auto 0 0 0; margin: 0; font-size: clamp(3rem, 1.6rem + 5vw, 6.6rem); line-height: .98; color: var(--ink);
  opacity: 0; transform: translateY(22px); transition: opacity 600ms var(--ease), transform 700ms var(--ease); }
.worn__caption { position: relative; height: 1.5em; margin: 0; }
.worn__caption span { position: absolute; left: 0; right: 0; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); opacity: 0; transition: opacity 500ms; }
.worn__dots { display: flex; gap: .5rem; margin: 1.6rem 0 0; }
.worn__dots i { width: 26px; height: 2px; background: var(--hair-strong); transition: background-color 400ms; }
.worn__frame { position: relative; margin: 0; justify-self: center; height: min(74vh, 720px); aspect-ratio: 3 / 4;
  background: var(--paper); padding: clamp(10px, 1.2vw, 16px); border: 7px solid var(--walnut); box-shadow: var(--shadow-paper); }
.worn__photo { position: absolute; inset: clamp(10px, 1.2vw, 16px); width: calc(100% - 2 * clamp(10px, 1.2vw, 16px)); height: calc(100% - 2 * clamp(10px, 1.2vw, 16px));
  object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 700ms var(--ease), transform 1200ms var(--ease); }
.worn__stage[data-step="0"] [data-step="0"], .worn__stage[data-step="1"] [data-step="1"], .worn__stage[data-step="2"] [data-step="2"],
.worn__stage[data-step="3"] [data-step="3"], .worn__stage[data-step="4"] [data-step="4"], .worn__stage[data-step="5"] [data-step="5"],
.worn__stage[data-step="6"] [data-step="6"] { opacity: 1; transform: none; }
.worn__stage[data-step="0"] .worn__dots [data-step="0"], .worn__stage[data-step="1"] .worn__dots [data-step="1"], .worn__stage[data-step="2"] .worn__dots [data-step="2"],
.worn__stage[data-step="3"] .worn__dots [data-step="3"], .worn__stage[data-step="4"] .worn__dots [data-step="4"], .worn__stage[data-step="5"] .worn__dots [data-step="5"],
.worn__stage[data-step="6"] .worn__dots [data-step="6"] { background: var(--gold); }

/* VII · the guestbook: proof, hung as a mosaic of real voices */
.guestbook__head { max-width: 40rem; margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.guest-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2vw, 1.6rem); align-items: start; }
.gcard { margin: 0; background: var(--card); border-radius: 2px; box-shadow: var(--shadow-paper); padding: clamp(10px, 1vw, 14px); display: grid; gap: .8rem; }
.gcard figcaption { display: grid; gap: .15rem; padding: 0 .2rem .2rem; }
.gcard figcaption b { font: 600 1.25rem/1.1 "Cormorant", serif; }
.gcard figcaption span { font-size: .9rem; color: var(--ink-soft); line-height: 1.45; }
.gcard__media { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 1px; background: var(--sand); }
.gcard__media video { width: 100%; height: 100%; object-fit: cover; }
.gcard--farida { grid-column: 1 / span 4; grid-row: 1 / span 2; }
.gcard--entry { grid-column: 5 / span 5; grid-row: 1; }
.gcard--thandeka { grid-column: 10 / span 3; grid-row: 1; }
.gcard--bontle { grid-column: 5 / span 3; grid-row: 2; }
.gcard--hands { grid-column: 8 / span 2; grid-row: 2; }
.gcard--photo { grid-column: 10 / span 3; grid-row: 2; }
.gcard--photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.gcard--entry blockquote { margin: .6rem .4rem 0; font: italic 500 clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem)/1.2 "Cormorant", serif; color: var(--ink); position: relative; padding-left: 1.4rem; border-left: 2px solid var(--gold); }
.gcard__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gcard__pair img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.gcard__play { position: absolute; inset: auto 0 0 0; margin: 12px; min-height: 52px; border: 0; border-radius: 2px; cursor: pointer;
  background: color-mix(in oklab, var(--card) 92%, transparent); color: var(--ink); font: 500 .86rem/1 "Jost"; letter-spacing: .14em; text-transform: uppercase;
  display: flex; align-items: center; justify-content: center; gap: .6rem; box-shadow: 0 10px 22px -14px rgba(42,31,23,.6); }
.gcard__play::before { content: ""; border-left: 11px solid var(--ink); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.gcard { cursor: zoom-in; transition: transform 500ms var(--ease), box-shadow 500ms var(--ease); }
.gcard:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 30px 44px -28px rgba(58,42,30,.6), 0 2px 6px -2px rgba(58,42,30,.18); }
.gcard img, .gcard video { transition: transform 900ms var(--ease); }
.gcard:hover .gcard__media video, .gcard:hover .gcard__pair img, .gcard:hover > img { transform: scale(1.035); }
.gcard__pair, .gcard--photo { overflow: hidden; }

/* the viewer */
.lightbox { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; }
.lightbox[hidden] { display: none; }
.lightbox__back { position: absolute; inset: 0; background: rgba(24, 17, 12, .86); backdrop-filter: blur(6px); animation: fade 260ms ease; }
.lightbox__stage { position: relative; margin: 0; display: grid; gap: .8rem; justify-items: center; animation: rise 360ms var(--ease); max-width: 92vw; }
.lightbox__media video, .lightbox__media img { display: block; max-height: 80vh; max-width: 92vw; width: auto; border-radius: 3px; background: #000; box-shadow: 0 30px 70px -20px rgba(0,0,0,.6); }
.lightbox__cap { color: #F3EADC; text-align: center; display: grid; gap: .15rem; max-width: 40rem; }
.lightbox__cap b { font: 600 1.3rem/1.1 "Cormorant", serif; } .lightbox__cap span { font-size: .9rem; opacity: .8; }
.lightbox__nav { position: absolute; top: 50%; translate: 0 -50%; width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(243,234,220,.4); background: rgba(243,234,220,.08); color: #F3EADC; font-size: 2rem; line-height: 1; cursor: pointer; }
.lightbox__nav--prev { left: max(12px, 3vw); } .lightbox__nav--next { right: max(12px, 3vw); }
.lightbox__x { position: absolute; top: 14px; right: 14px; border: 1px solid rgba(243,234,220,.4); background: none; color: #F3EADC; border-radius: 99px; padding: 10px 16px; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }

/* guestbook reels: the N&E / Ballad editorial coverflow, re-skinned for the gallery */
.reels { position: relative; width: 100%; max-width: 1100px; margin: 0 auto clamp(2.5rem, 6vh, 4rem); padding: 1rem 0 2.6rem; overflow: hidden;
  --swiper-navigation-size: 22px; --swiper-navigation-color: var(--gold-ink); --swiper-pagination-color: var(--gold); --swiper-pagination-bullet-inactive-color: var(--ink); }
.reels .swiper-slide { width: min(250px, 62vw); transition: transform .5s; }
.gcard--reel { cursor: pointer; }
.gcard--reel .gcard__media { border-radius: 2px; }
.reels .swiper-slide:not(.swiper-slide-active) .gcard__play { opacity: 0; pointer-events: none; }
.reels .swiper-slide:not(.swiper-slide-active) figcaption { opacity: .45; }
.reels figcaption { text-align: center; transition: opacity .4s; }
.reels .swiper-pagination { bottom: 0; }
.reels .swiper-button-prev, .reels .swiper-button-next { width: 46px; height: 46px; border-radius: 50%; background: var(--card); box-shadow: var(--shadow-paper); top: 44%; }
.guest-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 2rem); max-width: 1000px; margin: 0 auto; align-items: start; }
.guest-row .gcard--photo img { aspect-ratio: 4 / 3; }
.guest-row > .gcard { grid-column: auto; grid-row: auto; }
.guest-row { align-items: center; }

.made__photo { margin-top: 2rem; width: min(100%, 360px); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; box-shadow: var(--shadow-paper); background: var(--paper); padding: 10px; }
.rows { margin: 0 0 clamp(3rem, 8vh, 5rem); }
.rows img { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: 2px; box-shadow: var(--shadow-paper); }

/* VIII · made for you */
.made { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.card-form { background: var(--card); padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: 2px; box-shadow: var(--shadow-paper); display: grid; gap: 1.1rem; }
.field { display: grid; gap: .45rem; }
.field > span { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); }
.field > span small { text-transform: none; letter-spacing: 0; }
.field input, .field textarea { width: 100%; min-height: 52px; border: 1px solid var(--hair-strong); border-radius: var(--r); background: #fff; padding: .8rem 1rem; font-size: 1.02rem; color: var(--ink); }
.field textarea { min-height: 76px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold-ink); box-shadow: 0 0 0 3px rgba(134, 100, 32, .18); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.choice__opt { position: relative; cursor: pointer; }
.choice__opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice__opt span { display: grid; gap: .2rem; padding: .9rem 1rem; border: 1px solid var(--hair-strong); border-radius: var(--r); background: #fff; transition: border-color 200ms, box-shadow 200ms; height: 100%; }
.choice__opt b { font-weight: 500; }
.choice__opt small { color: var(--ink-soft); font-size: .84rem; }
.choice__opt input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice__opt input:focus-visible + span { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-msg { margin: 0; min-height: 1.4em; font-size: .92rem; color: var(--gold-ink); }
.form-msg.is-error { color: #9B2C1E; }

/* IX · start with five */
.five__stage { background: var(--linen); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 1rem clamp(2rem, 5vw, 5rem); padding: calc(var(--bar-h) + 3vh) var(--gutter) 3vh; }
.five__text { align-self: center; }
.five__steps { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: .5rem; }
.five__steps li { font: 500 clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem)/1.1 "Cormorant", serif; }
.five__promise { margin: 1.6rem 0 0; font-size: 1.05rem; line-height: 1.6; color: var(--ink-soft); }
.five__shelf { align-self: center; position: relative; padding-bottom: 18px; }
.shelf-bottles { display: flex; justify-content: center; align-items: flex-end; gap: clamp(.6rem, 2vw, 1.6rem); }
/* the five bottles: each drops onto the shelf with a soft bounce, fills with amber, then sways (Clive: animate them) */
.sbottle { width: clamp(52px, 7vw, 92px); transform-origin: 50% 100%; filter: grayscale(1) opacity(.28); transform: translateY(-46px);
  transition: filter 500ms var(--ease), transform 820ms cubic-bezier(.34, 1.56, .64, 1); }
.sbottle .liq { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 1100ms var(--ease) 260ms; }
.sbottle.is-lit { filter: none; transform: translateY(0); }
.sbottle.is-lit .liq { transform: scaleY(1); }
.sbottle.is-lit svg { animation: sway 3.6s ease-in-out infinite alternate; animation-delay: calc(var(--n) * -0.7s); transform-origin: 50% 100%; }
.sbottle.is-lit .glint { animation: glint 4.2s ease-in-out infinite; animation-delay: calc(1s + var(--n) * 0.5s); }
@keyframes sway { from { transform: rotate(-1.6deg); } to { transform: rotate(1.6deg); } }
@keyframes glint { 0%, 70% { opacity: 0; transform: translateX(0); } 80% { opacity: .7; } 100% { opacity: 0; transform: translateX(13px); } }
@media (prefers-reduced-motion: reduce) { .sbottle, .sbottle .liq { transition: none; } .sbottle.is-lit svg, .sbottle.is-lit .glint { animation: none; } }
.sbottle.is-you { width: clamp(62px, 8.4vw, 110px); }
.sbottle svg { width: 100%; height: auto; overflow: visible; }
.sbottle__tag { display: block; text-align: center; margin-top: .6rem; font: italic 500 1rem/1 "Cormorant"; color: var(--gold-ink); opacity: 0; transition: opacity 500ms; }
.sbottle.is-lit .sbottle__tag { opacity: 1; }
.shelf-board { height: 16px; margin-top: -2px; border-radius: 2px; background: linear-gradient(#5A402C, #3A2A1E); box-shadow: 0 16px 24px -14px rgba(42,31,23,.7); }
.tiers { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem 2rem; border-top: 1px solid var(--hair-strong); padding-top: 1.4rem; }
.tiers__lead { margin: 0; font: italic 500 1.25rem/1.2 "Cormorant"; max-width: 15rem; }
.tiers__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.tier { padding: .7rem .9rem; border-radius: 2px; background: var(--card); box-shadow: var(--shadow-paper); display: grid; gap: .1rem; border-top: 3px solid var(--metal); }
.tier b { font: 600 1.2rem/1 "Cormorant"; }
.tier span { font-size: .82rem; color: var(--ink-soft); }
.tier--bronze { --metal: #A86B3C; } .tier--silver { --metal: #9DA3A6; } .tier--gold { --metal: #C9A23E; } .tier--platinum { --metal: #6E7B82; }
.tiers__small { grid-column: 1 / -1; margin: 0; font-size: .84rem; color: var(--ink-soft); }

/* XI · the founders */
.founders__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; margin-bottom: clamp(3rem, 8vh, 5rem); }
.founders__hero { margin: 0; background: var(--paper); padding: clamp(10px, 1.2vw, 16px); box-shadow: var(--shadow-paper); border: 7px solid var(--walnut); }
.founders__hero img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.founders__quote { margin: 2rem 0 0; padding-left: 1.4rem; border-left: 2px solid var(--gold); font: italic 500 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1.25 "Cormorant", serif; }
.founders__people { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 2rem); }
.fcard { margin: 0; background: var(--card); box-shadow: var(--shadow-paper); border-radius: 2px; padding: clamp(10px, 1vw, 14px); display: grid; gap: .7rem; cursor: zoom-in;
  transition: transform 500ms var(--ease), box-shadow 500ms var(--ease); }
.fcard:hover { transform: translateY(-6px); box-shadow: 0 30px 44px -28px rgba(58,42,30,.6), 0 2px 6px -2px rgba(58,42,30,.18); }
.fcard__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); }
.fcard__media video, .fcard__media img { width: 100%; height: 100%; object-fit: cover; }
.fcard figcaption { display: grid; gap: .15rem; padding: 0 .2rem; }
.fcard figcaption b { font: 600 1.35rem/1.1 "Cormorant", serif; } .fcard figcaption span { font-size: .9rem; color: var(--ink-soft); }
.fcard__links { margin: 0; padding: .6rem .2rem .2rem; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.fcard__links a { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--gold-ink); cursor: pointer; }
.fcard__links a:hover { text-decoration: underline; }
.foot__credit { grid-column: 1 / -1; margin: 0; font-size: .8rem; color: var(--ink-soft); letter-spacing: .04em; }
.foot__credit b { font-weight: 500; color: var(--ink); }

/* X · visit + footer */
.visit { padding-top: clamp(5rem, 12vh, 9rem); background: var(--sand); }
.visit__inner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.visit__addr { font: 500 clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem)/1.2 "Cormorant", serif; font-style: normal; margin: 1.6rem 0 1.4rem; }
.hours { margin: 0 0 2rem; display: grid; gap: 0; max-width: 26rem; border-top: 1px solid var(--hair-strong); }
.hours div { display: flex; justify-content: space-between; padding: .7rem 0; border-bottom: 1px solid var(--hair); }
.hours dt { color: var(--ink-soft); } .hours dd { margin: 0; font-variant-numeric: tabular-nums; }
.visit__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.visit__media { display: grid; gap: 1.4rem; }
.visit__film, .landmark { margin: 0; }
.visit__film video, .landmark img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; background: var(--paper); padding: 10px; box-shadow: var(--shadow-paper); }
.visit__film figcaption, .landmark figcaption { margin-top: .6rem; font-size: .86rem; color: var(--ink-soft); }
.foot { margin-top: clamp(4rem, 10vh, 7rem); padding: 2.4rem var(--gutter) 5rem; border-top: 1px solid var(--hair-strong); display: grid; grid-template-columns: auto 1fr; gap: 1rem 2rem; align-items: center; }
.foot__mark { display: flex; flex-direction: column; }
.foot__social { display: flex; gap: 1.4rem; justify-content: flex-end; flex-wrap: wrap; }
.foot__social a { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
.foot__social a:hover { text-decoration: underline; }
.foot__note, .foot__small { grid-column: 1 / -1; margin: 0; font-size: .8rem; color: var(--ink-soft); }

/* -------------------------------------------------- dialogs + bag */
.dialog, .bag { position: fixed; inset: 0; z-index: 60; }
.dialog[hidden], .bag[hidden] { display: none; }
.dialog__back, .bag__back { position: absolute; inset: 0; background: rgba(42, 31, 23, 0.42); backdrop-filter: blur(3px); animation: fade 260ms ease; }
@keyframes fade { from { opacity: 0; } }
.dialog__card { position: relative; margin: min(10vh, 90px) auto 0; width: min(760px, calc(100% - 28px)); max-height: calc(100vh - 2 * min(10vh, 90px)); overflow: auto; background: var(--card); border-radius: 3px; box-shadow: 0 40px 80px -30px rgba(42,31,23,.6); padding: clamp(1.4rem, 3vw, 2.4rem); animation: rise 380ms var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.x { position: absolute; right: 14px; top: 12px; border: 0; background: none; cursor: pointer; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); padding: 10px; }
.strip-card { display: grid; grid-template-columns: 120px 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); }
.strip-card__strip { --c: var(--gold); position: relative; height: 380px; background: var(--paper); border-radius: 2px; box-shadow: 0 0 0 1px rgba(42,31,23,.08), 0 20px 30px -22px rgba(58,42,30,.6); animation: dip 900ms var(--ease); }
.strip-card__strip::before { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: linear-gradient(to top, color-mix(in oklab, var(--c) 72%, transparent), transparent); }
.strip-card__strip span { position: absolute; left: 50%; top: 20px; translate: -50% 0; writing-mode: vertical-rl; transform: rotate(180deg); font: 600 1.7rem/1 "Cormorant"; white-space: nowrap; }
@keyframes dip { 0% { transform: translateY(-30px) rotate(-4deg); } 55% { transform: translateY(8px) rotate(1deg); } 100% { transform: none; } }
.sd-moods { display: flex; gap: .8rem; flex-wrap: wrap; margin: .8rem 0 0; color: var(--ink-soft); }
.sd-moods i { font-style: normal; display: inline-flex; align-items: center; gap: .35rem; }
.sd-moods i::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.sd-note { color: var(--ink-soft); margin: .6rem 0 0; min-height: 0; }
.sizes { border: 0; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.sizes legend { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .6rem; padding: 0; }
.size { position: relative; cursor: pointer; }
.size input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.size span { display: grid; place-items: center; gap: .1rem; padding: .7rem .3rem; border: 1px solid var(--hair-strong); border-radius: var(--r); background: #fff; text-align: center; transition: border-color 200ms, box-shadow 200ms; }
.size b { font-weight: 500; } .size small { color: var(--ink-soft); }
.size input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.size input:focus-visible + span { outline: 2px solid var(--gold-ink); outline-offset: 2px; }
.qty { display: flex; align-items: center; gap: .8rem; margin: 1.2rem 0; }
.qty span { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft); margin-right: auto; }
.qty button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hair-strong); background: #fff; cursor: pointer; font-size: 1.2rem; }
.qty output { min-width: 2ch; text-align: center; font-size: 1.1rem; }

.bag__panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(480px, 100%); background: var(--linen); box-shadow: -30px 0 60px -30px rgba(42,31,23,.5); overflow: auto; padding: 1.4rem clamp(1.1rem, 3vw, 2rem) 2.4rem; animation: slide 380ms var(--ease); }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
.bag__head { display: flex; align-items: center; justify-content: space-between; }
.bag__head .x { position: static; }
.bag__fan { position: relative; height: 92px; margin: 1rem 0 .4rem; }
.bag__fan i { position: absolute; left: 50%; bottom: 0; width: 22px; height: 86px; margin-left: -11px; background: var(--card); box-shadow: 0 0 0 1px rgba(42,31,23,.14), 0 8px 12px -10px rgba(42,31,23,.5); transform-origin: 50% 100%; transform: rotate(var(--r)); border-radius: 1px; }
.bag__fan i::after { content: ""; position: absolute; inset: auto 0 0 0; height: 36%; background: linear-gradient(to top, var(--c), transparent); opacity: .8; }
.bag__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.bitem { background: var(--card); padding: .9rem 1rem; display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; align-items: center; }
.bitem__name { font: 600 1.2rem/1.1 "Cormorant"; }
.bitem__meta { font-size: .84rem; color: var(--ink-soft); grid-column: 1; }
.bitem__price { grid-column: 2; grid-row: 1; font-weight: 500; }
.bitem__ctrl { grid-column: 2; display: flex; gap: .3rem; align-items: center; justify-content: flex-end; }
.bitem__ctrl button { min-width: 36px; height: 36px; border: 1px solid var(--hair-strong); background: #fff; border-radius: 50%; cursor: pointer; }
.bitem__ctrl .bitem__rm { border-radius: 99px; padding: 0 .7rem; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.bag__empty { color: var(--ink-soft); margin: 1rem 0; }
.bag__sent { background: var(--card); box-shadow: var(--shadow-paper); border-left: 3px solid var(--gold); padding: 1.2rem 1.3rem; margin: 1rem 0; border-radius: 2px; }
.bag__sent .label { margin-bottom: .4rem; }
.bag__sent-ref { font: 600 1.6rem/1.15 "Cormorant", serif; margin: 0 0 .6rem; }
.bag__sent p:last-child { margin: 0; color: var(--ink-soft); }
.bag__form { display: grid; gap: 1rem; margin-top: 1.2rem; }
.bag__total { display: flex; justify-content: space-between; align-items: baseline; padding: .6rem 0; border-bottom: 1px solid var(--hair-strong); }
.bag__total strong { font: 600 1.9rem/1 "Cormorant"; }
.five-form { display: grid; gap: 1rem; max-width: 560px; }
.field--range input { padding: 0; min-height: 40px; border: 0; background: none; accent-color: var(--gold-ink); }
.field--range output { font: 600 1.3rem/1 "Cormorant"; color: var(--ink); text-transform: none; letter-spacing: 0; margin-left: .3rem; }
.field--range b { margin-left: .5rem; color: var(--gold-ink); letter-spacing: .1em; }

/* -------------------------------------------------- phones */
@media (max-width: 860px) {
  :root { --bar-h: 58px; }
  .bar { gap: .8rem; }
  .bar__name { font-size: 1.12rem; }
  .bar__links { position: fixed; inset: var(--bar-h) 0 auto 0; flex-direction: column; gap: 0; margin: 0; padding: .6rem var(--gutter) 1.4rem; background: var(--linen); box-shadow: 0 20px 30px -20px rgba(42,31,23,.4); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 220ms, transform 220ms var(--ease), visibility 0s 220ms; color: var(--ink); }
  .bar__links.is-open { opacity: 1; transform: none; visibility: visible; transition: opacity 220ms, transform 220ms var(--ease); }
  .bar__links a { font: 500 1.6rem/1 "Cormorant"; letter-spacing: 0; text-transform: none; padding: .9rem 0; border-bottom: 1px solid var(--hair); background: none; }
  .menu-btn { display: inline-flex; margin-left: auto; height: 44px; align-items: center; padding: 0 12px; border: 0; background: none; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
  .bag-btn__label { display: none; }
  .plaque { display: none; }

  /* hero on a portrait phone: the film is wide, so show all five bottles (contain), copy above and below */
  .entrance__frame { transform: none; outline: 0; box-shadow: none; border-radius: 0; }
  .entrance .sc-stage :is(video[data-sc-scrub], .sc-stage__poster), .entrance__desk { object-fit: contain; object-position: 50% 42%; }
  .entrance__hello { top: calc(var(--bar-h) + 1.4rem); bottom: auto; height: 3.4rem; }
  .entrance__line { top: 0; bottom: auto; font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .entrance__sub { top: calc(var(--bar-h) + 5.4rem); bottom: auto; flex-direction: column; gap: .4rem; }
  /* on phones the film sits whole in the middle and the captions sit on the linen below it: dark ink, no shadow */
  .beat { position: absolute; top: auto; bottom: 14vh; font-size: 1.6rem; max-width: none; color: var(--ink); }
  .beat em { color: var(--gold-ink); }
  .beat::before { display: none; }
  .entrance__scrim { display: none; }
  .invites { left: var(--gutter); right: var(--gutter); }
  .invites__row { width: 100%; flex-direction: column; gap: .5rem; }
  .invite-btn { justify-content: space-between; }
  .invite { padding: .8rem .9rem; transform: none; gap: .25rem; }
  .invite__no { font-size: .9rem; }
  .invite__title { font-size: 1.3rem; }
  .invite__line { font-size: .82rem; }
  .entrance__skip { top: auto; bottom: 1rem; right: var(--gutter); }

  .test { grid-template-columns: minmax(0, 1fr); }
  .finder, .finder__step { min-width: 0; }
  .test__head { position: static; }
  .strips { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .house, .made, .visit__inner { grid-template-columns: 1fr; }
  .guest-grid { grid-template-columns: 1fr 1fr; }
  .guest-row { grid-template-columns: 1fr; }
  .reels .swiper-button-prev, .reels .swiper-button-next { display: none; }
  .founders__top, .founders__people { grid-template-columns: 1fr; }
  .lightbox__nav { top: auto; bottom: 18px; translate: none; width: 48px; height: 48px; }
  .lightbox__media video, .lightbox__media img { max-height: 72vh; }
  .gcard--farida, .gcard--entry { grid-column: 1 / -1; grid-row: auto; }
  .gcard--thandeka, .gcard--bontle, .gcard--hands, .gcard--photo { grid-column: span 1; grid-row: auto; }
  .gcard figcaption b { font-size: 1.05rem; } .gcard figcaption span { font-size: .8rem; }
  .gcard--farida .gcard__media { aspect-ratio: 4 / 5; }
  .made__photo { width: 70%; }
  .rows img { aspect-ratio: 16 / 9; }
  .house__fig { max-width: 420px; }
  .prices__list { grid-template-columns: repeat(2, 1fr); row-gap: 1.4rem; }
  .prices__list li:nth-child(3) { border-left: 0; padding-left: 0; }
  .labels { grid-template-columns: 1fr 1fr; }
  .wlabel button { padding: 1rem .9rem; }
  .wlabel__name { font-size: 1.2rem; }
  .field-row, .choice { grid-template-columns: 1fr; }
  .film-line { font-size: clamp(2rem, 9vw, 2.8rem); }

  /* film rooms on phones: the film fills the top 60%, the words sit below it (never on the bottle's label) */
  .film-room [data-sc-stage], .making [data-sc-stage] { background: var(--linen); }
  .making [data-sc-stage] { background: var(--night); }
  .film-room .sc-stage :is(video[data-sc-scrub], .sc-stage__poster),
  .making .sc-stage :is(video[data-sc-scrub], .sc-stage__poster) { top: var(--bar-h); height: 60svh; bottom: auto; }
  .film-room .sc-copy, .making .sc-copy { top: calc(var(--bar-h) + 60svh + 1.1rem); bottom: auto; }
  .film-room .sc-copy::before, .making .sc-copy::before { display: none; }
  .film-room .film-line { color: var(--ink); font-size: clamp(1.9rem, 8.4vw, 2.5rem); max-width: none; }
  .film-room .film-line em { color: var(--gold-ink); }
  .film-room .film-sub { color: var(--ink-soft); margin: .6rem 0 .9rem; font-size: .98rem; }
  .making .film-line { font-size: clamp(1.9rem, 8.4vw, 2.5rem); max-width: none; }
  .making__word { bottom: auto; top: calc(var(--bar-h) + 60svh + 1.4rem); font-size: clamp(2.4rem, 11vw, 3.2rem); }

  .worn__stage { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 1rem; padding-top: calc(var(--bar-h) + 1rem); }
  .worn__frame { order: -1; height: 52svh; }
  .worn__lines { height: 6.5rem; margin: 0 0 .4rem; }
  .worn__line { font-size: clamp(2.4rem, 11vw, 3.2rem); }

  .five__stage { grid-template-columns: 1fr; grid-template-rows: auto auto auto; align-content: center; gap: 1rem; padding-top: calc(var(--bar-h) + 1rem); }
  .five__steps li { font-size: 1.35rem; }
  .five__promise { font-size: .95rem; margin-top: .8rem; }
  .tiers { grid-template-columns: 1fr; gap: .7rem; padding-top: .9rem; }
  .tiers__list { grid-template-columns: repeat(2, 1fr); }
  .tier { padding: .5rem .7rem; }
  .tier b { font-size: 1.05rem; }
  .tiers__lead { font-size: 1.05rem; max-width: none; }
  .sbottle { width: 44px; } .sbottle.is-you { width: 54px; }

  .strip-card { grid-template-columns: 70px 1fr; }
  .strip-card__strip { height: 260px; }
  .strip-card__strip span { font-size: 1.25rem; }
  .sizes { grid-template-columns: repeat(2, 1fr); }
  .foot { grid-template-columns: 1fr; }
  .foot__social { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .strip { animation: none; opacity: 1; transform: none; }
  .strip-card__strip, .dialog__card, .bag__panel { animation: none; }
  .invite, .invite:hover { transform: none; }
}

/* ------------------------------------------------------------------ desktop order (round 4)
   Every flow room in the lower half opens the same way: a centred heading block, then its content laid out
   symmetrically under it. Clive: "down below, things are not organized … especially on the desktop". */
.room-head { max-width: 46rem; margin: 0 auto clamp(2.6rem, 6vh, 4rem); text-align: center; display: flex; flex-direction: column; align-items: center; }
.room-head .lede { margin-inline: auto; }
.guestbook__head { max-width: 46rem; }

.made { display: block; }
.made__body { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: stretch; max-width: 1080px; margin: 0 auto; }
.made__body .made__photo { margin: 0; width: 100%; height: 100%; min-height: 100%; aspect-ratio: auto; }

.founders__text { max-width: 50rem; }
.founders__quote { border-left: 0; padding: 1.2rem 0 0; margin: 1.6rem auto 0; border-top: 2px solid var(--gold); max-width: 34rem; }
.founders__people { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; max-width: 1240px; margin: 0 auto; }
.fcard--couple { cursor: zoom-in; }
.fcard--couple .fcard__media img { object-position: 50% 28%; }

.visit__inner { display: block; }
.visit__head .visit__addr { margin: 1.2rem 0 0; }
.visit__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); align-items: stretch; max-width: 1240px; margin: 0 auto; }
.visit__card { background: var(--card); box-shadow: var(--shadow-paper); border-radius: 2px; padding: clamp(1.2rem, 2vw, 1.8rem); display: flex; flex-direction: column; justify-content: space-between; gap: 1.4rem; }
.visit__card .hours { margin: 0; max-width: none; }
.visit__card .visit__actions { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.visit__card .visit__actions .btn { width: 100%; justify-content: center; }
.visit__cols .visit__film, .visit__cols .landmark { display: flex; flex-direction: column; }
.visit__cols .visit__film video, .visit__cols .landmark img { aspect-ratio: auto; flex: 1; min-height: 0; height: 100%; }

.foot { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.1rem; padding-top: 3.2rem; }
.foot__mark { align-items: center; }
.foot__social { justify-content: center; }
.foot__note, .foot__small, .foot__credit { max-width: 46rem; }

.five__head { grid-column: 1 / -1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.five__head .display { margin: 0; }
@media (min-width: 861px) {
  .five__stage { grid-template-rows: auto 1fr auto; align-content: center; padding-top: calc(var(--bar-h) + 2vh); }
  .five__text { justify-self: end; max-width: 30rem; }
  .five__shelf { justify-self: start; width: min(100%, 560px); }
}

/* ------------------------------------------------------------------ phones: everything centred
   House rule (Clive, 21 Oct; the Nthabi pattern): on a phone every heading, label, intro, caption, button row and the
   footer sit on the centre line. Forms keep left-aligned fields (easier to fill); lists of choices centre as a group. */
@media (max-width: 860px) {
  .label, .display, .lede, .film-line, .film-sub, .beat, .made__text, .test__head, .house__text, .guestbook__head,
  .founders__text, .five__text, .visit__main, .worn__text, .wall__head, .finder__legend, .finder__step legend,
  .gcard figcaption, .fcard figcaption, .portrait figcaption, .hours, .tiers__lead, .tiers__small, .foot, .wall__more { text-align: center; }
  .lede, .film-sub, .five__promise, .founders__quote, .hours, .made__photo { margin-inline: auto; }
  .sc-copy, .sc-copy--trail, .sc-copy--lead { text-align: center; inset-inline: var(--gutter); }
  .film-line, .sc-copy--trail .film-line, .sc-copy--trail .film-sub { margin-inline: auto; }
  .entrance__line { left: 0; right: 0; text-align: center; }
  .entrance__sub { align-items: center; text-align: center; }
  .finder__step legend, .finder__legend { justify-content: center; width: 100%; }
  .chips, .tabs, .visit__actions, .fcard__links, .foot__social, .worn__dots, .house__text, .wlabel__moods, .wlabel__price { justify-content: center; }
  .house__text { display: flex; flex-direction: column; align-items: center; }
  .house__fig { margin-inline: auto; }
  .wall__head { flex-direction: column; align-items: center; }
  .wall__search input { margin-inline: auto; display: block; }
  .wlabel button { text-align: center; justify-items: center; }
  .wlabel__price { gap: .6rem; }
  .prices__list li { text-align: center; padding: 0 .6rem; }
  .prices__list li:first-child, .prices__list li:nth-child(3) { padding-left: .6rem; }
  .worn__text { display: flex; flex-direction: column; align-items: center; }
  .worn__lines, .worn__caption { width: 100%; }
  .worn__line, .worn__caption span { text-align: center; }
  .five__steps { justify-items: center; }
  .five__text { display: flex; flex-direction: column; align-items: center; }
  .tiers { justify-items: center; }
  .founders__quote { border-left: 0; padding-left: 0; border-top: 2px solid var(--gold); padding-top: 1rem; max-width: 22rem; }
  .gcard--entry blockquote { border-left: 0; padding-left: 0; text-align: center; }
  .visit__main { display: flex; flex-direction: column; align-items: center; }
  .hours { width: 100%; }
  .foot { justify-items: center; }
  .foot__mark { align-items: center; }
}

/* round 4 grids on smaller screens */
@media (max-width: 1100px) and (min-width: 861px) {
  .founders__people { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
  .visit__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visit__card { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .made__body { grid-template-columns: minmax(0, 1fr); }
  .made__body .made__photo { height: auto; aspect-ratio: 4 / 5; max-width: 420px; margin-inline: auto; }
  .founders__people { grid-template-columns: minmax(0, 1fr); }
  .visit__cols { grid-template-columns: minmax(0, 1fr); }
  .visit__cols .visit__film video, .visit__cols .landmark img { aspect-ratio: 16 / 9; height: auto; }
}

/* hero desk (Clive, 21 Oct late): "Find your scent" on the left, "Order online" on the right, and the welcome line
   alone at the bottom centre, where the buttons were. */
.invites { top: 0; bottom: 0; align-content: center; }
.invites__row { width: 100%; justify-content: space-between; padding-inline: var(--gutter); flex-wrap: nowrap; }
.invites__lead { position: absolute; left: 50%; right: auto; translate: -50% 0; bottom: clamp(1.2rem, 4.5vh, 2.6rem); width: max-content; max-width: calc(100% - 2 * var(--gutter));
  padding: .55rem 1.3rem; border-radius: 99px; background: color-mix(in oklab, var(--paper) 82%, transparent); backdrop-filter: blur(6px); box-shadow: 0 10px 24px -18px rgba(42,31,23,.5); }
@media (max-width: 860px) {
  .invites { left: 0; right: 0; top: auto; bottom: 0; padding-bottom: clamp(1rem, 3vh, 1.6rem); gap: .7rem; align-content: end; }
  .invites__row { flex-direction: row; gap: .6rem; }
  .invite-btn { flex: 1 1 0; min-width: 0; justify-content: center; gap: .5rem; padding: 0 .8rem; font-size: .7rem; }
  .invites__lead { position: static; translate: none; width: auto; max-width: calc(100% - 2 * var(--gutter)); font-size: 1.02rem; }
  .invites { grid-template-areas: "row" "lead"; } .invites__row { grid-area: row; } .invites__lead { grid-area: lead; }
}
@media (max-width: 860px) { .invite-btn { white-space: nowrap; letter-spacing: .08em; } .invite-btn i { display: none; } }

/* the strips breathe: each one sways a little on its own beat while the rail glides, and the dipped tip slowly soaks */
.strips { scroll-snap-type: none; scrollbar-width: thin; }
.strip { animation: stripIn 620ms var(--ease) forwards, stripSway 5.2s ease-in-out calc(var(--d, 0ms) + 700ms) infinite alternate; }
@keyframes stripSway { from { rotate: -0.9deg; } to { rotate: 0.9deg; } }
.strip::before { animation: soak 4.6s ease-in-out infinite alternate; animation-delay: calc(var(--d, 0ms) * -3); }
@keyframes soak { from { height: 30%; } to { height: 40%; } }
.strip:hover, .strip:focus-visible { animation-play-state: running, paused; }
@media (prefers-reduced-motion: reduce) { .strip, .strip::before { animation: none; opacity: 1; } }

/* Book a testing visit */
.link-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.test__visit { margin: 1.2rem 0 0; color: var(--ink-soft); }
.hint--center { text-align: center; }
.bar__book { border: 1px solid var(--hair-strong); border-radius: 99px; padding: 8px 14px; }
.visit-form, .visit-done { display: grid; gap: 1.1rem; width: min(720px, calc(100% - 28px)); }
.visit-form .display, .visit-done .display, .visit-form > .label, .visit-done > .label { margin: 0; }
.vpick { border: 0; margin: 0; padding: 0; min-width: 0; min-inline-size: 0; display: grid; gap: .7rem; }
.vpick legend { display: flex; align-items: center; gap: .7rem; padding: 0; margin-bottom: .7rem; font: 500 1.3rem/1.1 "Cormorant", serif; }
.vpick .chips { gap: .5rem; }
.vdays { display: flex; gap: .5rem; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
.vday, .vtime { position: relative; flex: none; cursor: pointer; }
.vday input, .vtime input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.vday span { display: grid; place-items: center; gap: .1rem; min-width: 86px; padding: .6rem .8rem; border: 1px solid var(--hair-strong); border-radius: 3px; background: #fff; transition: background-color 200ms, color 200ms, border-color 200ms; }
.vday small { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.vday b { font: 600 1.15rem/1.1 "Cormorant", serif; white-space: nowrap; }
.vtimes { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .45rem; }
.vtime span { display: grid; place-items: center; min-height: 46px; border: 1px solid var(--hair-strong); border-radius: 3px; background: #fff; font-variant-numeric: tabular-nums; font-size: .95rem; transition: background-color 200ms, color 200ms, border-color 200ms; }
.vtime small { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
.vday:hover span, .vtime:hover span { border-color: var(--ink); }
.vday input:checked + span, .vtime input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.vday input:checked + span small { color: color-mix(in oklab, var(--paper) 75%, transparent); }
.vday input:focus-visible + span, .vtime input:focus-visible + span { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
.vtime.is-off, .vtime.is-off input { cursor: default; }
.vtime.is-off span { opacity: .38; text-decoration: line-through; background: transparent; }
.visit-done { text-align: center; justify-items: center; }
@media (max-width: 860px) {
  .test__visit { text-align: center; }
  .vpick legend { justify-content: center; width: 100%; }
  .vpick .chips { justify-content: center; }
  .visit-form > .label, .visit-form > .display, .visit-form > .hint { text-align: center; }
}

/* credit on each commercial: small, centred at the foot of the film */
.asset-credit { position: absolute; left: 50%; translate: -50% 0; bottom: clamp(.8rem, 2.4vh, 1.4rem); z-index: 6; margin: 0; pointer-events: none; white-space: nowrap;
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(247,241,231,.86); text-shadow: 0 1px 8px rgba(16,11,7,.7); }
@media (max-width: 860px) { .asset-credit { top: calc(var(--bar-h) + 60svh - 1.9rem); bottom: auto; font-size: .56rem; } }
.visit-form[hidden], .visit-done[hidden] { display: none; }
@media (max-width: 860px) { .visit-form, .visit-done { padding-top: 3.2rem; } }
/* coverflow pushes side reels back in 3D, behind the track: let taps fall through the track to the reels */
.reels .swiper-wrapper { pointer-events: none; } .reels .swiper-slide { pointer-events: auto; }
.bar__links a.bar__book { padding: 7px 14px; border: 1px solid var(--hair-strong); border-radius: 99px; } @media (max-width: 860px) { .bar__links a.bar__book { padding: .9rem 0; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; color: var(--gold-ink); } }

/* hero desk, final (Clive, 22 Oct): one line at the bottom — "Find your scent" left, the welcome line centre,
   "Order online" right */
@media (min-width: 861px) {
  .invites { top: auto; bottom: clamp(1.2rem, 4.5vh, 2.6rem); display: grid; grid-template-areas: "line"; align-items: center; }
  .invites__row, .invites__lead { grid-area: line; }
  .invites__lead { position: static; translate: none; justify-self: center; width: auto; max-width: max(18rem, calc(100% - 2 * (var(--gutter) + 270px))); }
}

/* Visit: the booking card sits in the centre, between the gallery film and the building (Clive, 22 Oct).
   Phones: the card comes first. */
.visit__cols .visit__film { order: 1; } .visit__cols .visit__card { order: 2; } .visit__cols .landmark { order: 3; }
.visit__card { text-align: center; border-top: 3px solid var(--gold); }
.visit__card .hours div { text-align: left; }
@media (max-width: 1100px) and (min-width: 861px) { .visit__cols .visit__card { order: 0; } }
@media (max-width: 860px) { .visit__cols .visit__card { order: 0; } }

/* the four prices (Clive, 22 Oct: "animate the prices"): they rise one by one, count up, a gold line draws under each,
   then a slow shine passes over the numbers in turn; "most chosen" keeps a soft glow */
.prices__list li { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: calc(var(--n, 0) * 160ms); position: relative; }
.prices__list li:nth-child(1) { --n: 0; } .prices__list li:nth-child(2) { --n: 1; } .prices__list li:nth-child(3) { --n: 2; } .prices__list li:nth-child(4) { --n: 3; }
.prices.is-on .prices__list li { opacity: 1; transform: none; }
.prices__rand { background: linear-gradient(100deg, var(--ink) 0 44%, #C9A23E 50%, var(--ink) 56% 100%) 100% 0 / 300% 100% no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; }
.prices.is-on .prices__rand { animation: priceShine 6s ease-in-out calc(1.6s + var(--n, 0) * 0.5s) infinite; }
.prices__list li:nth-child(1) .prices__rand { --n: 0; } .prices__list li:nth-child(2) .prices__rand { --n: 1; } .prices__list li:nth-child(3) .prices__rand { --n: 2; } .prices__list li:nth-child(4) .prices__rand { --n: 3; }
@keyframes priceShine { 0%, 70% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
.prices__hint { position: relative; justify-self: start; padding-bottom: .3rem; }
.prices__hint::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform 900ms var(--ease); transition-delay: calc(600ms + var(--n, 0) * 160ms); }
.prices__list li:nth-child(1) .prices__hint { --n: 0; } .prices__list li:nth-child(2) .prices__hint { --n: 1; } .prices__list li:nth-child(3) .prices__hint { --n: 2; } .prices__list li:nth-child(4) .prices__hint { --n: 3; }
.prices.is-on .prices__hint::after { transform: scaleX(1); }
.prices__list li:nth-child(3)::before { content: ""; position: absolute; inset: -14px 4px; border-radius: 4px; background: radial-gradient(ellipse at 50% 60%, rgba(201,162,62,.18), transparent 70%); opacity: 0; z-index: -1; }
.prices.is-on .prices__list li:nth-child(3)::before { animation: chosenGlow 3.4s ease-in-out 1.6s infinite alternate; }
@keyframes chosenGlow { from { opacity: .25; } to { opacity: 1; } }
@media (max-width: 860px) { .prices__hint { justify-self: center; } }

/* the four business tiers (Start with five): they rise one by one when the room reaches them, the metal bar draws
   across, then a metal shine passes over each card in turn */
.tier { position: relative; overflow: hidden; border-top: 0; padding-top: calc(.7rem + 3px); opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.tier::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--metal); transform: scaleX(0); transform-origin: 0 50%; transition: transform 800ms var(--ease); }
.tier::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, color-mix(in oklab, var(--metal) 30%, #fff) 50%, transparent 65%); transform: translateX(-120%); opacity: .55; pointer-events: none; }
.tiers__list li:nth-child(1) { --n: 0; } .tiers__list li:nth-child(2) { --n: 1; } .tiers__list li:nth-child(3) { --n: 2; } .tiers__list li:nth-child(4) { --n: 3; }
.tier { transition-delay: calc(var(--n, 0) * 140ms); } .tier::before { transition-delay: calc(300ms + var(--n, 0) * 140ms); }
.tiers.is-on .tier { opacity: 1; transform: none; }
.tiers.is-on .tier::before { transform: scaleX(1); }
.tiers.is-on .tier::after { animation: tierShine 5.6s ease-in-out calc(1.2s + var(--n, 0) * 0.7s) infinite; }
@keyframes tierShine { 0% { transform: translateX(-120%); } 22%, 100% { transform: translateX(120%); } }
.tier:hover { transform: translateY(-4px); }

/* the wall: a card turns like a pane of glass and comes back as another scent */
.labels { perspective: 1200px; }
.wlabel { position: relative; transform-style: preserve-3d; }
.wlabel.is-turning { animation: glassOut 380ms cubic-bezier(.5, 0, .75, 0) forwards; }
.wlabel.is-turned { animation: glassIn 520ms cubic-bezier(.2, .8, .2, 1) both; }
.wlabel.is-turning::after, .wlabel.is-turned::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.65) 48%, rgba(255,255,255,.15) 56%, rgba(255,255,255,0) 70%), rgba(247,241,231,.35);
  backdrop-filter: blur(2px); animation: glassSheen 900ms ease-out both; }
@keyframes glassOut { to { transform: rotateY(88deg); opacity: .4; } }
@keyframes glassIn { from { transform: rotateY(-88deg); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes glassSheen { from { background-position: -140% 0, 0 0; opacity: 1; } to { background-position: 140% 0, 0 0; opacity: 0; } }
.wlabel.is-turning::after, .wlabel.is-turned::after { background-size: 220% 100%, auto; background-repeat: no-repeat; }
@media (prefers-reduced-motion: reduce) {
  .prices__list li, .tier { opacity: 1; transform: none; transition: none; }
  .prices__rand, .tier::after, .prices__list li::before { animation: none !important; }
  .tier::before, .prices__hint::after { transform: none; transition: none; }
}

/* the wall in even rows: 4 across on desktop (8 cards = two full rows); lines drawn by the cards themselves so an
   unfilled last row never shows a grey block */
.labels { background: none; gap: 0; border: 0; border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
.wlabel { border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
@media (min-width: 861px) { .labels { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) and (min-width: 560px) { .labels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* photo rooms (Gift a scent, The first five, Inside the gallery): the campaign photos as they are, no words on them;
   the same paper cards as the founders, tap one to see it large */
.pgrid { display: grid; gap: clamp(1rem, 2.4vw, 2rem); margin: 0 auto; align-items: start; }
.pgrid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1240px; }
.pgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1040px; }
.pgrid .fcard figcaption { text-align: center; }
.pgrid__cta { margin: clamp(2rem, 5vh, 3rem) 0 0; text-align: center; }
@media (max-width: 1100px) {
  .pgrid--4, .pgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
}
@media (max-width: 560px) {
  .pgrid--4 { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
  .pgrid--3 { gap: .8rem; }   /* the gift products stay two across on phones */
  .pgrid--3 .fcard figcaption b { font-size: 1.1rem; } .pgrid--3 .fcard figcaption span { font-size: .8rem; }
}

/* The first five: Palesa's film beside the four story photos (phones: the film first) */
.first5 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(1rem, 2.4vw, 2rem); max-width: 1100px; margin: 0 auto; align-items: start; }
.first5__film .fcard__media { aspect-ratio: 9 / 16; }
.first5__film figcaption { text-align: center; }
.pgrid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .first5 { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .first5__film { max-width: 360px; width: 100%; justify-self: center; }
}