/* =========================================================================
   Zenon Karaoke · sections.css — the chapters.
   --p (0..1) is written by motion.js on each tracked wrapper and inherited.
   Sub-ranges are declared as custom properties on the stage, then mapped.
   ========================================================================= */

/* ---------- shared chapter furniture ----------------------------------- */
.chapter { padding-block: clamp(48px, 5vw, 84px); }
.chapter .sec-head { position: relative; z-index: 1; }
.sec-head.center { text-align: center; align-items: center; }
.sec-head .lede.center { text-align: center; }
.sec-head .eyebrow.bare { justify-content: center; }
.watermark {
  position: absolute; top: -.08em; right: -.04em; z-index: 0;
  font-family: var(--font-display); font-size: clamp(240px, 42vw, 720px); line-height: .8; letter-spacing: .02em;
  color: rgba(237, 235, 233, .04);           /* tonal, felt rather than read */
  pointer-events: none; user-select: none;
  transform: translate3d(0, calc((var(--p) - .5) * -14vh), 0);
}
.leader { flex: 1; height: 1px; background: var(--line); align-self: center; min-width: 24px; transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--ease-expo) .1s; }
.b { position: absolute; background: var(--line); transition: transform .7s var(--ease-expo); }
.b-top { top: 0; left: 0; right: 0; height: 1px; transform: scaleX(0); transform-origin: 0 50%; }
.b-right { top: 0; right: 0; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: 50% 0; transition-delay: .18s; }
.b-bottom { bottom: 0; left: 0; right: 0; height: 1px; transform: scaleX(0); transform-origin: 100% 50%; transition-delay: .36s; }
.b-left { top: 0; left: 0; bottom: 0; width: 1px; transform: scaleY(0); transform-origin: 50% 100%; transition-delay: .54s; }
.in > .b { transform: none; }

/* =========================================================================
   COVER / HERO — pinned 200vh. The cover closes into a letterboxed frame.
   ========================================================================= */
.hero { position: relative; height: 100vh; height: 100svh; background: #0E0D0C; }
.hero-stage { position: relative; height: 100%; overflow: clip; background: #0E0D0C; }
.hero-media { position: absolute; inset: 0; transform: scale(calc(1 + var(--p) * .08)); }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0E0D0C; }
.hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: opacity .8s ease; }
.hero-media:has([data-playing]) .hero-poster { opacity: 0; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 13, 12, .55) 0%, rgba(14, 13, 12, .12) 36%, rgba(17, 16, 15, .5) 70%, rgba(14, 13, 12, .92) 100%); }
.hero-tint { position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 110%, rgba(0, 51, 102, .42), rgba(0, 51, 102, 0) 60%); }
.hero-media::after { content: ""; position: absolute; inset: 0; background: #0E0D0C; opacity: calc(var(--p) * .35); will-change: opacity; z-index: 2; }
.hero-shade, .hero-tint { z-index: 2; }

.hero-body { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + 12vh); z-index: 2; display: flex; flex-direction: column; justify-content: flex-start; gap: clamp(18px, 2.6vh, 32px); }
.hero-eyebrow { color: #CFC9C1; }
.hero-eyebrow::before { background: rgba(237, 235, 233, .55); width: 56px; }
.hero-h1 { font-size: clamp(52px, min(9.4vw, 14.5vh), 160px); line-height: .96; letter-spacing: .01em; color: #F4F2EF; }
.hero-h1 em { font-size: .9em; }
.hero-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero-line > span { display: inline-block; }
.l2 em { display: inline-block; }
.hero-row { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.hero-sub { font-size: clamp(17px, 1.4vw, 21px); color: #D8D3CC; max-width: 46ch; line-height: 1.55; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-dateline { position: absolute; right: var(--gutter); top: calc(var(--nav-h) + 6vh); z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; font-weight: 600; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: #CFC9C1; text-align: right; }
.hero-dateline span { position: relative; padding-right: 18px; }
.hero-dateline span::after { content: ""; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: var(--accent); transform: rotate(45deg); }

/* load choreography: hidden only while the loader runs, then staggered in */
.hero-el { transition: opacity 1.1s var(--ease-out), transform 1.25s var(--ease-expo); transition-delay: var(--d, 0ms); }
html[data-loaded="false"] .hero-el { opacity: 0; transform: translate3d(0, 26px, 0); transition: none; }
html[data-loaded="false"] .hero-line .hero-el { opacity: 1; transform: translate3d(0, 112%, 0); }
/* scroll overrides for elements that also have a load transition */
.hero-pause { align-self: flex-end; margin-top: 6px; padding: 4px 0; font-weight: 600; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: rgba(207, 201, 193, .75); border-bottom: 1px solid rgba(237, 235, 233, .3); transition: color .3s ease, border-color .3s ease; }
.hero-pause:hover { color: var(--ink); border-color: var(--ink); }

/* =========================================================================
   FRIEZE / TICKER — scrubbed by scroll (see site.js)
   ========================================================================= */
.ticker { position: relative; z-index: 2; overflow: hidden; padding: 18px 0; background: var(--bg); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.ticker-track { display: flex; gap: 64px; width: max-content; will-change: transform; }
.ticker-track span { display: flex; align-items: center; gap: 64px; font-family: var(--font-display); font-size: 14px; letter-spacing: .38em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.ticker-track b { font-family: var(--font-text); font-weight: 400; color: var(--accent); font-size: 13px; }

/* =========================================================================
   No. I — THE EXPERIENCE: manifesto lights up; sticky plate swaps
   ========================================================================= */
.exp { overflow: clip; }      /* clip, not hidden: hidden would turn the section into a scroll container and break the sticky plate */
.exp-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.exp-text { display: flex; flex-direction: column; gap: 30px; }
.exp-h2 { font-size: clamp(40px, 4.6vw, 78px); line-height: 1; }
.manifesto { display: flex; flex-direction: column; gap: 1.1em; font-size: clamp(22px, 2.15vw, 34px); line-height: 1.32; max-width: 24em; color: var(--ink); }
.manifesto p { margin: 0; }
.manifesto em { font-style: italic; }
.manifesto em .wi { color: var(--accent); }
.manifesto-cap { font-size: .68em; letter-spacing: .02em; margin-top: .2em; }
.exp-plates { position: relative; align-self: stretch; }
/* the reveal is observed on .exp-plates (the parent): a clip-path on the observed element itself reports zero intersection */
.plate-stack { position: sticky; top: calc(var(--nav-h) + 4vh); aspect-ratio: 4 / 3; max-height: calc(100svh - var(--nav-h) - 10svh); clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ease-expo); }
.exp-plates.in .plate-stack { clip-path: inset(0 0 0 0); }
.plate { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s var(--ease-out); }
.plate img { height: 100%; transform: scale(1.06); transition: transform 1.6s var(--ease-expo); }
.exp-grid[data-active="a"] .plate[data-swap-view="a"], .exp-grid[data-active="b"] .plate[data-swap-view="b"] { opacity: 1; }
.exp-grid[data-active="a"] .plate[data-swap-view="a"] img, .exp-grid[data-active="b"] .plate[data-swap-view="b"] img { transform: scale(1); }
.plate figcaption { z-index: 3; }

.stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(28px, 3.5vw, 48px); }
.stats::before, .stats::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.3s var(--ease-expo); }
.stats::before { top: 0; }
.stats::after { bottom: 0; transition-delay: .2s; }
.stats.in::before, .stats.in::after { transform: scaleX(1); }
.stat { padding: 30px 24px 32px 24px; border-left: 1px solid var(--line-soft); opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms + 350ms); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stats.in .stat { opacity: 1; transform: none; }
.stat b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 4vw, 72px); line-height: 1; color: var(--ink); margin-bottom: 12px; }
.stat .dash { display: inline-block; width: .55em; height: 1px; background: currentColor; vertical-align: middle; margin: 0 .06em; transform: scaleX(0); transition: transform .9s var(--ease-expo) 1s; }
.stats.in .dash { transform: scaleX(1); }
.stat > span { font-weight: 600; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink); }

/* =========================================================================
   No. II — THE NIGHT: three acts pass a sticky frame that wipes
   ========================================================================= */
.night { padding-bottom: clamp(64px, 8vw, 120px); }
.night .sec-head { margin-bottom: clamp(28px, 3vw, 48px); }
.acts { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
.acts-list { display: flex; flex-direction: column; }
.act { position: relative; min-height: 54vh; min-height: 54svh; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 4vh 6% 4vh 0; transition: opacity .6s ease; }
.act:first-child { justify-content: flex-start; padding-top: 6vh; min-height: 48vh; min-height: 48svh; }
.act[data-state="after"] { opacity: .32; }
.act-label { font-weight: 600; font-size: 12px; letter-spacing: .4em; text-transform: uppercase; color: var(--ink); transition: color .45s ease; }
.act.is-active .act-label { color: var(--accent); }
.act-title { font-size: clamp(34px, 3.4vw, 58px); line-height: 1.02; color: var(--ink); transition: color .5s ease; }
.act.is-active .act-title { color: var(--ink); }
.act p { color: var(--ink-2); font-size: 18px; max-width: 40ch; opacity: .55; transition: opacity .5s ease; }
.act.is-active p { opacity: 1; }
.act .link-line { font-size: inherit; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--ink); }
.act-rule { display: block; width: 100%; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease-expo); margin-top: 8px; }
.act.is-active .act-rule, .act[data-state="after"] .act-rule { transform: scaleX(1); }
.acts-stage { position: sticky; top: calc(var(--nav-h) + 3vh); height: calc(100vh - var(--nav-h) - 6vh); height: calc(100svh - var(--nav-h) - 6svh); display: flex; gap: 18px; }
.acts-frame { flex: 1; height: 100%; background: #0E0D0C; }
.acts-frame figure { position: absolute; inset: 0; margin: 0; clip-path: inset(0 0 100% 0); transition: clip-path 1.05s var(--ease-in-out); }
.acts-frame figure img { height: 100%; transform: translate3d(0, calc((var(--p) - .5) * -6%), 0) scale(1.08); }
.acts[data-active="1"] figure[data-swap-view="1"],
.acts[data-active="2"] figure[data-swap-view="1"], .acts[data-active="2"] figure[data-swap-view="2"],
.acts[data-active="3"] figure[data-swap-view="1"], .acts[data-active="3"] figure[data-swap-view="2"], .acts[data-active="3"] figure[data-swap-view="3"] { clip-path: inset(0 0 0 0); }
.acts-cap { position: absolute; left: 16px; right: 16px; bottom: 12px; z-index: 3; height: 1.4em; }
.acts-cap span { position: absolute; left: 0; bottom: 0; opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; color: rgba(237, 235, 233, .75); text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.acts[data-active="1"] .acts-cap span[data-swap-view="1"], .acts[data-active="2"] .acts-cap span[data-swap-view="2"], .acts[data-active="3"] .acts-cap span[data-swap-view="3"] { opacity: 1; transform: none; }
.acts-ruler { position: relative; width: 1px; height: 100%; background: var(--line-soft); flex: none; }
.acts-ruler::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--ink); transform: scaleY(var(--p)); transform-origin: 50% 0; }
.acts-ruler i { position: absolute; left: -4px; width: 9px; height: 1px; background: var(--line); }
.acts-ruler i:nth-child(1) { top: 33.33%; } .acts-ruler i:nth-child(2) { top: 66.66%; } .acts-ruler i:nth-child(3) { top: 100%; }

/* =========================================================================
   MIDNIGHT — the letterbox opens at 00:00 (pinned 320vh)
   ========================================================================= */
.midnight { background: #0B0A0A; }
.mid-stage {
  background: #0B0A0A;
  --slit: clamp(0, var(--p) / .10, 1);
  --count: clamp(0, (var(--p) - .10) / .40, 1);
  --hold: clamp(0, (var(--p) - .50) / .06, 1);
  --snap: clamp(0, (var(--p) - .56) / .06, 1);
  --snap3: calc(var(--snap) * var(--snap) * var(--snap));
  --settle: clamp(0, (var(--p) - .56) / .26, 1);
  --lede: clamp(0, (var(--p) - .62) / .2, 1);
  --rule: clamp(0, (var(--p) - .78) / .1, 1);
  --dwell: clamp(0, (var(--p) - .86) / .14, 1);
}
.mid-media { position: absolute; inset: 0; transform: scale(calc(1.22 - .22 * (1 - (1 - var(--settle)) * (1 - var(--settle))))) translate3d(0, calc(var(--dwell) * -3%), 0); }
.mid-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.mid-media::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(11, 10, 10, .2), rgba(11, 10, 10, 0) 30%, rgba(11, 10, 10, 0) 60%, rgba(11, 10, 10, .72) 100%); }
.mid-bar { position: absolute; left: 0; right: 0; height: 50vh; height: 50svh; background: #0B0A0A; z-index: 3; }
.mid-bar::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: rgba(237, 235, 233, .7); opacity: calc(.3 + .7 * var(--hold)); }
.mid-bar-top { top: 0; transform: translate3d(0, calc(-9vh * var(--slit) - 41vh * var(--snap3)), 0); }
.mid-bar-top::after { bottom: 0; }
.mid-bar-bottom { bottom: 0; transform: translate3d(0, calc(9vh * var(--slit) + 41vh * var(--snap3)), 0); }
.mid-bar-bottom::after { top: 0; }
.mid-bar .caption { position: absolute; color: var(--ink-3); opacity: calc(var(--slit) * (1 - var(--snap))); }
.mid-bar-top .caption { left: var(--gutter); bottom: 18px; }
.mid-bar-bottom .caption { right: var(--gutter); top: 18px; }
.mid-clock {
  position: absolute; left: 50%; top: 74vh; top: 74svh; z-index: 4;
  display: flex; align-items: baseline;
  font-size: clamp(88px, 15vw, 240px); line-height: 1; color: var(--ink);
  letter-spacing: .05em;
  opacity: calc(.35 + .65 * var(--count));
  transform: translate(-50%, -50%) translate3d(0, calc(-22vh * var(--snap) - 2vh * var(--dwell)), 0) scale(calc(.86 + .14 * var(--snap)));
  transition: color .5s ease;
}
.mid-stage[data-mid="after"] .mid-clock { color: var(--accent); }
/* the fuse: a hairline burns under the clock while it holds at 23:59, gone at the snap */
.mid-fuse { position: absolute; left: 50%; top: 84vh; top: 84svh; z-index: 4; width: 32vw; max-width: 420px; height: 1px; background: rgba(237, 235, 233, .6); transform: translateX(-50%) scaleX(var(--hold)); transform-origin: 0 50%; opacity: calc(1 - var(--snap)); }
.mid-clock .dg { display: inline-block; width: .62em; text-align: center; }
.mid-clock .colon { display: inline-block; width: .32em; text-align: center; transform: translateY(-.06em); }
.mid-copy { position: absolute; left: 0; right: 0; top: 71vh; top: 71svh; z-index: 4; text-align: center; opacity: var(--snap); }
.mid-lede { font-size: clamp(18px, 1.7vw, 26px); line-height: 1.5; max-width: 44ch; margin: 0 auto; color: var(--ink); }
.mid-lede .wi { opacity: calc(.14 + .86 * clamp(0, var(--lede) * (var(--n, 20) + 2) - var(--i, 0), 1)); }
.mid-rule { margin: 26px auto 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mid-rule i { display: block; width: 32vw; max-width: 420px; height: 1px; background: rgba(237, 235, 233, .45); transform: scaleX(var(--rule)); }
.mid-rule span { font-weight: 600; font-size: 12px; letter-spacing: .42em; text-transform: uppercase; color: var(--accent); opacity: var(--rule); transform: translateY(calc((1 - var(--rule)) * 10px)); }
.midnight .folio { z-index: 5; color: rgba(237, 235, 233, .5); bottom: 120px; }   /* clear of the WhatsApp button */

.quote-band { position: relative; background: #0B0A0A; padding: clamp(110px, 14vw, 200px) 0; overflow: clip; --ql: clamp(0, (var(--p) - .1) / .28, 1); }
.quote-bg { position: absolute; inset: -12% 0; z-index: 0; }
.quote-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: translate3d(0, calc((var(--p) - .5) * 10%), 0); }
.quote-band[data-state="active"] .quote-bg img { will-change: transform; }
.quote-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 10, .6) 0%, rgba(11, 10, 10, .42) 50%, rgba(21, 19, 18, .9) 100%); }
.quote-in { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.quote { font-size: clamp(30px, 3.8vw, 64px); line-height: 1.15; letter-spacing: .03em; max-width: 22ch; color: var(--ink); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.quote .wi { opacity: calc(.14 + .86 * clamp(0, var(--ql) * (var(--n, 10) + 2) - var(--i, 0), 1)); }
.qrule { display: block; width: 48px; height: 1px; background: var(--accent); transform: scaleX(clamp(0, (var(--ql) - .7) / .3, 1)); }

/* =========================================================================
   No. III — THE BAR: lit rows, sticky stage that pours a new frame
   ========================================================================= */
.bar { background: linear-gradient(180deg, var(--bg) 0%, #171513 42%, var(--bg) 100%); }
.bar .sec-head { margin-bottom: clamp(32px, 4vw, 56px); }
.bar-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 110px); align-items: start; }
.bar-stage { position: sticky; top: calc(var(--nav-h) + 3vh); }
.bar-frame { aspect-ratio: 4 / 5; max-height: calc(100vh - var(--nav-h) - 6vh); max-height: calc(100svh - var(--nav-h) - 6svh); background: #0E0D0C; }
.bar-frame figure { position: absolute; inset: 0; margin: 0; clip-path: inset(0 0 100% 0); transition: clip-path .95s var(--ease-in-out); }
.bar-frame figure img { height: 100%; transform: scale(1.06); transition: transform 1.6s var(--ease-expo); }
.bar-grid[data-active="0"] figure[data-swap-view="0"],
.bar-grid[data-active="1"] figure[data-swap-view="0"], .bar-grid[data-active="1"] figure[data-swap-view="1"],
.bar-grid[data-active="2"] figure[data-swap-view="0"], .bar-grid[data-active="2"] figure[data-swap-view="1"], .bar-grid[data-active="2"] figure[data-swap-view="2"],
.bar-grid[data-active="3"] figure[data-swap-view="0"], .bar-grid[data-active="3"] figure[data-swap-view="1"], .bar-grid[data-active="3"] figure[data-swap-view="2"], .bar-grid[data-active="3"] figure[data-swap-view="3"],
.bar-grid[data-active="4"] figure { clip-path: inset(0 0 0 0); }
.bar-grid[data-active="0"] figure[data-swap-view="0"] img, .bar-grid[data-active="1"] figure[data-swap-view="1"] img, .bar-grid[data-active="2"] figure[data-swap-view="2"] img, .bar-grid[data-active="3"] figure[data-swap-view="3"] img, .bar-grid[data-active="4"] figure[data-swap-view="4"] img { transform: scale(1); }
.bar-cap { position: absolute; left: 16px; bottom: 12px; z-index: 3; color: rgba(237, 235, 233, .8); text-shadow: 0 1px 12px rgba(0, 0, 0, .6); font-style: normal; font-weight: 600; font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; }
.bar-cap i { font-style: italic; font-weight: 400; letter-spacing: .02em; text-transform: none; font-size: 14px; }
.serves { display: flex; flex-direction: column; }
.serve { position: relative; min-height: 40vh; min-height: 40svh; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 32px 0 32px 28px; border-bottom: 1px solid var(--line-soft); }
.serve::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 30px; margin-top: -15px; background: #D9A066; transform: scaleY(0); transition: transform .5s var(--ease-expo); }
.serve.is-active::before { transform: scaleY(1); }
.serve-top { display: flex; align-items: baseline; gap: 16px; }
.serve h3 { font-size: clamp(24px, 2.3vw, 38px); letter-spacing: .06em; line-height: 1.05; color: var(--ink); transition: color .45s ease; }
.serve.is-active h3 { color: var(--ink); }
.serve.is-active .leader { transform: scaleX(1); }
.price { font-weight: 500; font-size: 22px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; transition: color .45s ease .15s; }
.price small { font-weight: 600; font-size: 11px; letter-spacing: .2em; color: var(--ink-3); }
.serve.is-active .price { color: var(--ink); }
.ing { font-style: italic; font-size: 18px; color: var(--ink-2); opacity: .72; transition: opacity .5s ease; max-width: 48ch; }
.serve.is-active .ing { opacity: 1; }
.tags { font-weight: 600; font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent); opacity: .8; transition: opacity .5s ease .2s; }
.serve.is-active .tags { opacity: 1; }

.wine { margin-top: clamp(48px, 6vw, 88px); }
.wine-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.wine-h { font-size: clamp(24px, 2.2vw, 34px); letter-spacing: .1em; }
.wrow { display: flex; align-items: baseline; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.wrow .nm { font-weight: 500; font-size: 18px; color: var(--ink); }
.wrow .rg { font-weight: 600; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.wrow .leader { transition-delay: calc(var(--i, 0) * 90ms + .2s); }
.wrow.in .leader { transform: scaleX(1); }
.wrow .pr { font-weight: 500; font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; }
.wine-note { margin-top: 22px; font-style: italic; color: var(--ink-3); font-size: 15px; }

.menus { margin-top: clamp(40px, 5vw, 72px); scroll-margin-top: calc(var(--nav-h) + 24px); }
.menus-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(30px, 3.5vw, 48px); }
.menus-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); perspective: 1200px; }
.mplate { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 300px; padding: 30px; background: var(--bg-2); transition: background .5s var(--ease-out), transform .6s var(--ease-out), opacity 1s var(--ease-out); }
.mplate.rv { transition: background .5s var(--ease-out), transform .9s var(--ease-out), opacity 1s var(--ease-out); }
.mc-kind { font-weight: 600; font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink); transition: color .4s ease; }
.mc-name { display: block; margin-top: 10px; font-size: clamp(24px, 2vw, 32px); letter-spacing: .06em; line-height: 1.1; color: var(--ink); transition: color .4s ease; }
.mc-sub { display: block; margin-top: 12px; font-style: italic; font-size: 15px; color: var(--ink-3); transition: color .4s ease; }
.mplate:hover .mc-sub { color: var(--ink-2); }
.mc-dl { display: flex; align-items: center; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line-soft); font-weight: 600; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); transition: color .4s ease, border-color .4s ease; }
.mc-dl svg { transition: transform .4s var(--ease-out); }
.mplate:hover .mc-kind { color: var(--ink-2); }
.mplate:hover .mc-dl { color: var(--ink); border-color: var(--line); }
.mplate:hover .mc-dl svg { transform: translateY(3px); }
.mplate:hover > .b { background: var(--ink); }

/* =========================================================================
   No. IV — THE ATMOSPHERE: pinned horizontal filmstrip (1:1 scroll)
   ========================================================================= */
.strip { height: calc(var(--dist, 1800) * 1px + 100vh); height: calc(var(--dist, 1800) * 1px + 100svh); }
.strip-stage { display: flex; align-items: center; }
.wm-strip { top: auto; bottom: -.1em; right: auto; left: -.04em; transform: translate3d(calc(var(--p) * -30vw), 0, 0); }
.strip-track { position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(24px, 4vw, 64px); padding: 0 var(--gutter); width: max-content; transform: translate3d(calc(var(--p) * var(--dist, 0) * -1px), 0, 0); }
.strip-title { flex: none; width: 38vw; min-width: 320px; display: flex; flex-direction: column; gap: 22px; padding-right: 2vw; transform: translate3d(calc(var(--p) * var(--dist, 0) * .45px), 0, 0); }
.strip-h2 { font-size: clamp(56px, 7.5vw, 132px); line-height: .96; }
.strip-frame { flex: none; height: 66vh; height: 66svh; max-height: 760px; margin: 0; }
.strip-frame img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(calc((var(--p) - var(--c, .5)) * -9%), 0, 0) scale(1.12); }
.f1 { aspect-ratio: 16 / 10; }
.f2 { aspect-ratio: 2 / 3; height: 56vh; height: 56svh; }
.f3 { aspect-ratio: 3 / 2; }
.f4 { aspect-ratio: 16 / 9; height: 52vh; height: 52svh; }
.f5 { aspect-ratio: 4 / 5; height: 60vh; height: 60svh; }
.f6 { aspect-ratio: 21 / 9; height: 58vh; height: 58svh; }
.strip-end { flex: none; width: 34vw; min-width: 280px; display: flex; flex-direction: column; gap: 18px; padding-left: 4vw; border-left: 1px solid var(--line); }
.strip-end .display { font-size: clamp(36px, 4vw, 64px); line-height: 1; }
.strip-end .eyebrow { color: var(--accent); }
.strip-rail { position: absolute; left: var(--gutter); right: calc(var(--gutter) + 90px); bottom: 48px; height: 1px; background: var(--line-soft); z-index: 2; }
.rail-fill { position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--ink); transform: scaleX(var(--p)); transform-origin: 0 50%; }
.rail-count { position: absolute; right: 0; bottom: 14px; font-weight: 600; font-size: 12px; letter-spacing: .34em; color: var(--ink-3); }
.rail-count b { color: var(--ink); font-weight: 600; }
.strip .folio { bottom: 120px; z-index: 2; }

/* =========================================================================
   No. V — INSTAGRAM: contact sheet with a shutter reveal
   ========================================================================= */
.ig { position: relative; padding: clamp(28px, 3.5vw, 56px) 0 clamp(16px, 2vw, 32px); }
.ig-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(30px, 3.4vw, 50px); }
.ig-head > .rv { display: flex; flex-direction: column; gap: 18px; }
.ig-h2 { font-size: clamp(34px, 4vw, 62px); line-height: 1; }
.ig-embed { min-height: 320px; }
.ig-embed .elfsight-app-74b6f757-e6a0-4c84-aa25-b81964251001 { min-height: 320px; }
.ig-note { margin-top: 18px; }

/* =========================================================================
   No. VI — VISIT: lit index rows + booking card
   ========================================================================= */
.visit { padding-block: clamp(56px, 7vw, 104px); overflow: clip; }
.visit-bg { position: absolute; inset: -10% 0; z-index: 0; opacity: .3; transform: translate3d(0, calc((var(--p) - .5) * 10%), 0); }
.visit-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; }
.visit::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, var(--bg) 0%, rgba(21, 19, 18, .5) 45%, var(--bg) 100%); pointer-events: none; }
.visit-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: start; }
.visit-info { display: flex; flex-direction: column; gap: 10px; }
.visit .h2 { font-size: clamp(38px, 4.6vw, 76px); margin: 10px 0 26px; }
/* Tablet of Hours: the venue's hours as an inscription; words converge into place with section progress */
.hours { display: flex; flex-direction: column; gap: 8px; padding: 24px 0 26px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow: hidden;
  --hp: clamp(0, (var(--p) - .1) / .28, 1); --he: calc(1 - (1 - var(--hp)) * (1 - var(--hp))); }
.hours-line { display: flex; justify-content: space-between; align-items: baseline; font-size: clamp(40px, 5vw, 92px); line-height: 1; letter-spacing: .04em; white-space: nowrap; color: var(--ink); }
.hours-line .w { display: inline-block; transform: translate3d(calc((var(--i, 0) - (var(--n, 1) - 1) / 2) * .8em * (1 - var(--he))), 0, 0); opacity: calc(.15 + .85 * var(--he)); }
.index { display: flex; flex-direction: column; }
.irow { position: relative; display: flex; gap: 20px; align-items: flex-start; padding: 20px 0 20px 20px; border-bottom: 1px solid var(--line-soft); }
.irow::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 26px; margin-top: -13px; background: var(--accent); transform: scaleY(0); transition: transform .5s var(--ease-expo); }
.irow.lit::before { transform: scaleY(1); }
.irow svg { flex: none; margin-top: 5px; color: var(--accent); opacity: .45; transition: opacity .4s ease; }
.irow.lit svg { opacity: 1; }
.il { display: block; font-weight: 600; font-size: 11.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
.iv { font-size: 18.5px; color: var(--ink-2); line-height: 1.5; transition: color .4s ease; }
.irow.lit .iv { color: var(--ink); }
a.iv:hover { color: var(--accent); }
.card { position: relative; background: var(--bg-2); padding: clamp(30px, 3.6vw, 52px); scroll-margin-top: calc(var(--nav-h) + 24px); box-shadow: inset 0 1px 0 rgba(237, 235, 233, .06), 0 1px 0 rgba(0, 0, 0, .6); }
.card-in { display: flex; flex-direction: column; gap: 22px; margin: 0; }
.card-in > * { opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms + 450ms); }
.card.in .card-in > * { opacity: 1; transform: none; }
.card-h { font-size: clamp(28px, 2.6vw, 40px); letter-spacing: .05em; }
.card-p { color: var(--ink-2); }
.bk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field-wide { grid-column: 1 / -1; }
.card-btn { width: 100%; }
.card .small a { color: var(--ink); }

/* footer map paths use pathLength="1" */
.map-svg { --len: 1; }

/* compositor promotion only while the owning section is on screen (the engine sets data-state) */
.hero[data-state="active"] .hero-media, .hero[data-state="active"] .hero-line,
.exp[data-state="active"] .watermark,
.acts[data-state="active"] .acts-frame figure img,
.midnight[data-state="active"] .mid-media, .midnight[data-state="active"] .mid-bar, .midnight[data-state="active"] .mid-clock,
.strip[data-state="active"] .strip-track, .strip[data-state="active"] .strip-title, .strip[data-state="active"] .strip-frame img,
.visit[data-state="active"] .visit-bg { will-change: transform; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1100px) {
  .exp-grid, .acts, .bar-grid { gap: clamp(32px, 4vw, 60px); }
  .hero-h1 { font-size: clamp(52px, min(10vw, 14vh), 140px); }
}

@media (max-width: 900px) {
  .chapter { padding-block: clamp(40px, 8vw, 64px); }
  .watermark { font-size: 64vw; }

  /* hero */
  .hero-body { bottom: 96px; gap: 16px; }
  .hero-h1 { font-size: clamp(36px, min(12vw, 8.6vh), 72px); }
  .hero-sub { font-size: 16px; max-width: 40ch; line-height: 1.45; }
  .hero-ctas { width: 100%; flex-direction: column; gap: 10px; }
  .hero-ctas .btn { width: 100%; white-space: nowrap; min-height: 50px; }
  .hero-dateline { top: auto; bottom: 28px; left: var(--gutter); right: var(--gutter); flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 20px; font-size: 11px; letter-spacing: .26em; text-align: left; }
  .hero-dateline span { padding-right: 0; }
  .hero-dateline span::after { display: none; }

  /* I */
  /* flex column, not grid: a sticky grid item has no room to stick inside its own row */
  .exp-grid, .acts, .bar-grid { display: flex; flex-direction: column; align-items: stretch; }
  .exp-plates, .acts-stage, .bar-stage, .acts-list, .serves, .exp-text { width: 100%; }
  .exp-plates { order: -1; position: sticky; top: var(--nav-h); z-index: 2; }
  .plate-stack { position: relative; top: auto; height: 36vh; height: 36svh; aspect-ratio: auto; }
  .manifesto { font-size: clamp(21px, 5.4vw, 26px); max-width: none; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: 22px 16px 24px 16px; }
  .stat:nth-child(odd) { border-left: 0; padding-left: 0; }

  /* II */
  .acts-stage { order: -1; top: var(--nav-h); height: 36vh; height: 36svh; z-index: 2; }
  .acts-ruler { display: none; }
  .act, .act:first-child { min-height: 46vh; min-height: 46svh; padding: 28px 0 8px; justify-content: flex-start; }
  .act[data-state="after"] { opacity: .6; }

  /* midnight */
  .midnight { height: calc(2.4 * 100vh); height: calc(2.4 * 100svh); }
  .mid-bar-top { transform: translate3d(0, calc(-7vh * var(--slit) - 43vh * var(--snap3)), 0); }
  .mid-bar-bottom { transform: translate3d(0, calc(7vh * var(--slit) + 43vh * var(--snap3)), 0); }
  .mid-media img { object-position: 50% 36%; }
  .mid-clock { font-size: clamp(72px, 20vw, 120px); top: 72vh; top: 72svh; }
  .mid-copy { top: 74vh; top: 74svh; padding: 0 var(--gutter); }
  .mid-lede { font-size: 17px; }
  .mid-rule i { width: 48vw; }
  .mid-fuse { top: 81vh; top: 81svh; width: 48vw; }
  .mid-bar .caption { font-size: 12px; }
  .hero-eyebrow { font-size: 11px; letter-spacing: .28em; }
  .hero-body { top: auto; bottom: 88px; justify-content: flex-end; }
  .midnight .folio { display: none; }

  /* III */
  .bar-stage { top: var(--nav-h); z-index: 2; }
  .bar-frame { aspect-ratio: 16 / 10; max-height: 36vh; max-height: 36svh; }
  .serve { min-height: 50vh; min-height: 50svh; padding-left: 22px; }
  .hours-line { font-size: clamp(34px, 11vw, 56px); }
  .menus-grid { grid-template-columns: minmax(0, 1fr); }
  .mplate { min-height: 210px; gap: 28px; }

  /* V */
  .ig-head .btn { width: 100%; }

  /* VI */
  .visit-grid { grid-template-columns: minmax(0, 1fr); }
  .card { order: -1; }
  .visit-bg img { object-position: 85% 50%; }
}

/* landscape phones: the hero copy must fit between the nav and the bottom edge */
@media (max-width: 900px) and (max-height: 520px) {
  .hero-body { top: var(--nav-h); bottom: auto; gap: 10px; }
  .hero-h1 { font-size: 30px; }
  .hero-sub, .hero-dateline { display: none; }
  .hero-ctas { flex-direction: row; }
  .hero-ctas .btn { width: auto; }
  .menu { justify-content: flex-start; }
  .menu-links a span { font-size: 34px; }
}

/* the filmstrip unpins on small screens and under reduced motion */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .strip { height: auto; padding: clamp(40px, 8vw, 64px) 0; }
  .strip-stage { position: static; height: auto; overflow: visible; display: block; }
  .strip-track { display: flex; flex-direction: column; align-items: stretch; width: auto; gap: 40px; padding: 0 var(--gutter); transform: none; }
  .strip-title { width: auto; min-width: 0; transform: none; padding-right: 0; }
  .strip-frame { width: 100%; height: auto; max-height: none; }
  .strip-frame img { transform: scale(1.08); clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease-expo), transform 1.6s var(--ease-expo); }
  .strip-frame.in img { clip-path: inset(0 0 0 0); transform: none; }
  .f2, .f5 { aspect-ratio: 4 / 5; }
  .f4, .f6 { aspect-ratio: 16 / 10; }
  .strip-end { width: auto; min-width: 0; padding-left: 0; border-left: 0; padding-top: 30px; border-top: 1px solid var(--line); }
  .strip-rail, .strip .folio { display: none; }
  .wm-strip { transform: none; bottom: auto; top: -.1em; }
}

@media (max-width: 620px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat { border-left: 0; padding-left: 0; }
  .bk-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-row .btn { padding-inline: 20px; }
  .serve-top { flex-wrap: wrap; }
  .serve-top .leader { display: none; }
  .wine-head { flex-direction: column; gap: 6px; }
}

/* ---------- reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mid-bar { display: none; }
  .hero-media, .hero-line, .l2 em, .hero-row, .hero-h1 { transform: none; opacity: 1; }
  .pin.midnight { height: auto; }
  .mid-stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
  .hero-media::after { opacity: 0; }
  .hero-poster { opacity: 1; }
  .mid-clock { top: 46vh; top: 46svh; }
  .hours-line .w { transform: none; opacity: 1; }
  .hero-el { transition: none; }
  .mid-media, .mid-clock, .mid-copy, .mid-rule i, .mid-rule span, .watermark, .visit-bg, .acts-frame figure img, .strip-frame img { transform: none; opacity: 1; }
  .mid-fuse { display: none; }
  .mid-clock { transform: translate(-50%, -50%); }
  .plate-stack, .strip-frame { clip-path: none; }
  .leader, .b, .act-rule, .stat .dash, .stats::before, .stats::after, .serve::before, .irow::before, .rail-fill, .acts-ruler::after, .qrule { transform: none; }
  .stat, .card-in > * { opacity: 1; transform: none; }
  .act p, .tags, .ing, .irow svg { opacity: 1; }
  .act[data-state="after"] { opacity: 1; }
  .acts-frame figure, .bar-frame figure { clip-path: none; }
  .acts-frame figure:not(:first-of-type), .bar-frame figure:not(:first-of-type) { display: none; }
  .mid-lede .wi, .quote .wi, .manifesto .wi { opacity: 1; }
}