/* ─────────────────────────────────────────────────────────
   YUN BAR & LOUNGE · ONE-PAGE
   Design system + scroll choreography
   ───────────────────────────────────────────────────────── */

/* ====== TOKENS ====== */
:root {
  /* Brand palette — black + gold luxury */
  --c-ink:        #000000;          /* true black */
  --c-bg:         #050505;          /* near-black — slight warmth */
  --c-bg-2:       #0C0A07;          /* lifted black, warm undertone */
  --c-bg-3:       #15110A;          /* warm dark for cards */
  --c-bg-card:    #0F0D08;          /* card surface */
  --c-cream:      #E8D6B0;          /* signature cream — warmer */
  --c-cream-hi:   #F5E9CD;          /* off-white warm */
  --c-cream-lo:   #B8A47A;          /* deep cream */
  --c-gold:       #C9A961;          /* refined champagne gold */
  --c-gold-bright:#E5C77B;          /* bright gold (highlights) */
  --c-gold-deep:  #8B6914;          /* deep gold */
  --c-gold-shadow:#3D2D08;          /* shadow gold */
  --c-amber:      #D4A574;          /* warm amber */
  --c-mahogany:   #2A1A05;          /* deep brown — almost black */
  --c-rust:       #5A3A12;
  /* Olive green — the third brand colour (owner 2026-09-30, brand guide p.51: olive green · brushed
     gold · matte black). Used as DEPTH only: deep green-black gradients under the black-and-gold,
     never as text or lines, so gold stays the accent and black the base. */
  --c-olive:        #3F6B3A;        /* brand olive, a touch desaturated so it sits with the gold */
  --c-olive-bright: #5C8A4E;
  --c-olive-deep:   #234426;
  --c-olive-ink:    #0B1F14;        /* green-black — the guide's green card, near black */
  /* Gold gradient — used for borders, CTAs, accents */
  --grad-gold:    linear-gradient(135deg, #E5C77B 0%, #C9A961 35%, #8B6914 65%, #C9A961 100%);
  --grad-gold-soft: linear-gradient(135deg, #C9A961 0%, #8B6914 100%);
  --grad-gold-shine: linear-gradient(135deg, #FFE9A8 0%, #C9A961 25%, #8B6914 55%, #C9A961 80%, #FFE9A8 100%);
  --grad-bg:      radial-gradient(ellipse at top, #0C0A07 0%, #050505 60%, #000000 100%);
  --grad-bg-warm: radial-gradient(ellipse at center, #1A1408 0%, #0A0805 60%, #000000 100%);
  --grad-olive:   linear-gradient(135deg, #5C8A4E 0%, #3F6B3A 35%, #234426 70%, #0B1F14 100%);
  --grad-bg-olive: radial-gradient(ellipse at top, #0B1F14 0%, #050807 55%, #000000 100%);   /* green-black atmosphere */
  --grad-card-olive: linear-gradient(160deg, #101C13 0%, #0F0D08 55%);                        /* card surface: faint olive cast top-left → warm black */

  /* Per-flavor accents */
  --f-fruity:     #E08A5C;          /* warm peach */
  --f-floral:     #C898A8;          /* dusty rose */
  --f-tea:        #8FA079;          /* sage */
  --f-spice:      #B8602E;          /* paprika */
  --f-herb:       #A8B883;          /* fresh mint-olive */
  --f-creamy:     #E5C896;          /* vanilla */
  --f-other:      #D4A574;          /* amber */
  --f-cigar:      #5A3520;          /* mahogany */

  /* Typography */
  --ff-display: 'Gloock', 'Marcellus', serif;
  --ff-sub:     'Marcellus', 'Fahkwang', serif;
  --ff-body:    'Fahkwang', 'Inter', sans-serif;
  --ff-num:     'Inknut Antiqua', serif;

  /* Type scale (fluid) */
  --t-tiny:     0.6875rem;          /* 11px — kickers */
  --t-small:    0.875rem;           /* 14px */
  --t-base:     clamp(0.95rem, 0.92rem + 0.18vw, 1.0625rem);
  --t-lede:     clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --t-h3:       clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --t-h2:       clamp(2.5rem, 2rem + 3.5vw, 5rem);
  --t-h1:       clamp(3rem, 2.5rem + 6vw, 7.5rem);
  --t-display:  clamp(4rem, 3rem + 12vw, 14rem);
  --t-giant:    clamp(7rem, 6rem + 20vw, 22rem);

  /* Spacing */
  --gap-xs: 0.5rem;
  --gap-s:  1rem;
  --gap-m:  2rem;
  --gap-l:  4rem;
  --gap-xl: 8rem;
  --pad-page: clamp(1.25rem, 4vw, 4rem);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.5, 0, 0.2, 1);
}

/* ====== RESET / BASE ====== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html, body { background: var(--c-ink); color: var(--c-cream); }
html { scroll-behavior: auto; } /* JS handles smooth scroll for nav anchors */
/* Global scale (owner request 2026-09-02: "exactly 90% of the current version").
   Previous build: desktop 80%, phones 100%. Now desktop 72% (= 80% x 0.9) and
   phones 90%: every rem-based size — type, spacing, buttons, cards — scales
   down like a browser zoom. */
html { font-size: 90%; }
@media (min-width: 901px) { html { font-size: 72%; } }
body {
  background-image: var(--grad-bg-olive);   /* olive-black atmosphere (owner 2026-09-30) */
  background-attachment: fixed;
}
body {
  font-family: var(--ff-body);
  font-size: var(--t-base);
  line-height: 1.55;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  cursor: none; /* hides system cursor; custom cursor below */
}

@media (max-width: 900px) { body { cursor: auto; } .cursor { display: none; } }

img, video { display: block; max-width: 100%; }
button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

::selection { background: var(--c-gold-bright); color: var(--c-ink); }
::-moz-selection { background: var(--c-gold-bright); color: var(--c-ink); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ====== TYPOGRAPHY UTILITIES ====== */
.kicker {
  font-family: var(--ff-num);
  font-size: var(--t-tiny);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  background: var(--grad-gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.kicker::before {
  content: "";
  width: 2.5em; height: 1px;
  background: var(--grad-gold-soft);
  opacity: 0.85;
}

h1, h2, h3 { font-family: var(--ff-display); font-weight: 400; line-height: 0.92; letter-spacing: -0.02em; color: var(--c-cream-hi); }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.01em; line-height: 1.05; }
p  { color: var(--c-cream-lo); max-width: 60ch; }

/* ====== LOADER ====== */
.loader {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--c-ink);
  background-image: radial-gradient(ellipse at center, rgba(201, 169, 97, 0.06) 0%, transparent 50%);
  display: grid; place-items: center;
  pointer-events: none;
}
.loader__inner { display: grid; gap: 1.5rem; place-items: center; padding: 2rem; }
.loader__mark {
  font-family: var(--ff-display);
  font-size: clamp(4rem, 12vw, 8rem);
  letter-spacing: -0.04em;
  background: var(--grad-gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.loader__line {
  display: block; width: 0; height: 1px;
  background: var(--grad-gold-shine);
  transition: width 1.4s var(--ease-io);
  box-shadow: 0 0 10px rgba(229, 199, 123, 0.5);
}
.loader.is-loading .loader__line { width: 22vw; }
.loader__count {
  font-family: var(--ff-num);
  font-size: var(--t-tiny);
  letter-spacing: 0.3em;
  background: var(--grad-gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.loader.is-done {
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}

/* ====== CUSTOM CURSOR ====== */
.cursor {
  position: fixed; left: 0; top: 0;
  pointer-events: none; z-index: 2000; /* above every overlay incl. the brand pop-up (1100) — it used to vanish behind it */
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cursor__dot, .cursor__ring {
  position: absolute; left: 0; top: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cursor__dot {
  width: 6px; height: 6px;
  background: var(--c-gold-bright);
  box-shadow: 0 0 8px rgba(229, 199, 123, 0.6);
}
.cursor__ring {
  width: 36px; height: 36px;
  border: 1px solid var(--c-gold);
  transition: transform 0.25s var(--ease-out), opacity 0.25s var(--ease-out), border-color 0.25s;
}
.cursor.is-hover .cursor__ring { transform: translate(-50%, -50%) scale(1.6); border-color: var(--c-gold-bright); }

/* ====== NAV ====== */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 1.25rem var(--pad-page);
  gap: 2rem;
  mix-blend-mode: normal;
  transition: background-color 0.4s var(--ease-out), backdrop-filter 0.4s var(--ease-out);
}
.nav.is-scrolled {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(201, 169, 97, 0.18);
}
.nav__brand { display: grid; gap: 2px; line-height: 1; }
.nav__brand-mark {
  font-family: var(--ff-display);
  font-size: 1.55rem;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, var(--c-cream-hi) 0%, var(--c-gold-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nav__brand-sub {
  font-family: var(--ff-num);
  font-size: 0.625rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  background: var(--grad-gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.nav__links {
  display: flex; justify-content: center; gap: 2rem;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-cream);
  font-weight: 400;
}
.nav__links a { position: relative; padding: 0.25rem 0; transition: color 0.2s; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px; background: currentColor;
  transform-origin: left; transform: scaleX(0);
  transition: transform 0.4s var(--ease-out);
}
.nav__links a:hover { color: var(--c-cream-hi); }
.nav__links a:hover::after { transform: scaleX(1); }

@media (max-width: 800px) { .nav__links { display: none; } }

/* Phones hide the link row, so a plain "Menu" link rides beside the Book pill — the menu is a
   separate page and guests had no way to reach it (owner 2026-10-08). Desktop keeps the row. */
.nav__menu { display: none; }
@media (max-width: 800px) {
  .nav { gap: 0.75rem; }
  .nav__brand-sub { white-space: nowrap; letter-spacing: 0.22em; }   /* keeps "Bar & Lounge · Penang" on one line beside the new link */
  .nav__cta { white-space: nowrap; padding: 0.65rem 1rem; }
  .nav__cta-tail { display: none; }                                    /* the pill reads "Book →" on phones; "Book a Table" from 801px up */
  .nav__menu {
    display: inline-flex; align-items: center;
    justify-self: end;
    padding: 0.25rem 0;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-cream);
    border-bottom: 1px solid rgba(201, 169, 97, 0.55);
    white-space: nowrap;
  }
}

.nav__cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.7rem 1.25rem;
  border-radius: 999px;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-cream-hi);
  /* black pill inside the gold ring (an olive fill was tried 2026-09-30; owner: "revert it to the last colour") */
  background: linear-gradient(var(--c-bg), var(--c-bg)) padding-box,
              var(--grad-gold) border-box;
  border: 1px solid transparent;
  transition: color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.nav__cta::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--grad-gold-shine);
  opacity: 0; transition: opacity 0.3s var(--ease-out);
  z-index: -1;
}
.nav__cta:hover { color: var(--c-ink); transform: translateY(-1px); }
.nav__cta:hover::before { opacity: 1; }
.nav__cta > * { position: relative; z-index: 1; }
.nav__cta svg { transition: transform 0.3s var(--ease-out); }
.nav__cta:hover svg { transform: translateX(4px); }

/* ====== SHARED CTA ====== */
.cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 1rem 1.6rem;
  border-radius: 999px;
  font-family: var(--ff-num);
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: transform 0.3s var(--ease-out), background 0.3s, color 0.3s, border-color 0.3s;
  white-space: nowrap;
}
.cta--primary {
  background: var(--grad-gold-shine);
  background-size: 200% 200%;
  background-position: 0% 0%;
  color: var(--c-ink);
  border: 1px solid var(--c-gold-bright);
  box-shadow: 0 4px 24px -8px rgba(201, 169, 97, 0.5),
              inset 0 1px 0 rgba(255, 233, 168, 0.4);
  font-weight: 500;
}
.cta--primary:hover {
  background-position: 100% 100%;
  color: var(--c-ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px -8px rgba(201, 169, 97, 0.7),
              inset 0 1px 0 rgba(255, 233, 168, 0.5);
}
.cta--ghost {
  color: var(--c-cream);
  background: linear-gradient(var(--c-bg), var(--c-bg)) padding-box,
              linear-gradient(135deg, rgba(201,169,97,0.5), rgba(139,105,20,0.3)) border-box;
  border: 1px solid transparent;
}
.cta--ghost em { font-style: normal; transition: transform 0.3s; }
.cta--ghost:hover {
  color: var(--c-gold-bright);
  background: linear-gradient(var(--c-bg-2), var(--c-bg-2)) padding-box,
              var(--grad-gold) border-box;
}
.cta--ghost:hover em { transform: translate(3px, -3px); }

/* ====== ACT (section) shared ====== */
.act { position: relative; }


/* ============================================================
   ACT I — HERO
   ============================================================ */
.act--hero {
  height: 100vh; min-height: 576px;
  overflow: hidden;
  background: var(--c-ink);
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.45) saturate(0.85) contrast(1.1) sepia(0.15);
  will-change: transform, opacity;
}
.hero__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(60, 42, 12, 0.15) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.96) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 65%, rgba(0,0,0,0.92) 100%);
  z-index: 1;
}
.hero__veil::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(201, 169, 97, 0.08) 0%, transparent 40%);
  pointer-events: none;
}
.hero__grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
  opacity: 0.06;
  mix-blend-mode: overlay;
  z-index: 2;
  pointer-events: none;
}

.hero__content {
  position: relative; z-index: 3;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto auto auto auto;
  align-content: center;
  justify-items: start;
  padding: 0 var(--pad-page) clamp(3rem, 6vh, 5rem);
  gap: 1.25rem;
  max-width: 1600px;
  margin: 0 auto;
}

.hero__kicker {
  font-family: var(--ff-num);
  font-size: var(--t-tiny);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-cream);
  display: flex; gap: 1rem; align-items: center;
  align-self: end;
  opacity: 0.85;
}
.hero__kicker .dot { color: var(--c-gold); opacity: 0.6; }

.hero__pre {
  font-family: var(--ff-sub);
  font-style: italic;
  font-size: clamp(1.3rem, 1.05rem + 1.2vw, 2.2rem);
  font-weight: 400;
  color: var(--c-cream);
  line-height: 0.95;
  display: grid;
  position: relative;
  letter-spacing: -0.005em;
}
.hero__pre .line {
  display: block;
  opacity: 0;
  transform: translateY(28px);
}
.hero__pre .line:nth-child(2) {
  background: var(--grad-gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__pre .line:nth-child(3) { color: var(--c-cream-lo); transform: translateY(28px) translateX(8px); }

.hero__title {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 7.4vw, 9.2rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  margin: 0;
  filter: drop-shadow(0 8px 40px rgba(0,0,0,0.65));
  width: 100%;
  max-width: 1120px;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
}
.hero__title-row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  column-gap: 0.22em; /* word spacing for "YUN BAR & LOUNGE" (flex drops literal spaces) */
}
/* Word groups: the title may only break between words (after the "·"),
   never mid-word — prevents "CLOUD·CHASI / NG" on narrow phones */
.hero__title-word {
  display: inline-flex;
  white-space: nowrap;
}
.hero__title .char {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  will-change: transform;
  background: linear-gradient(180deg, #EBD9A8 0%, #D4B574 60%, #B89556 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.hero__lede {
  max-width: 52ch;
  font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.1rem);
  line-height: 1.5;
  color: var(--c-cream-lo);
  font-weight: 300;
  opacity: 0;
  transform: translateY(20px);
}

.hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; opacity: 0; transform: translateY(20px); }

.hero__cue {
  position: absolute;
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  right: var(--pad-page);
  display: grid; gap: 0.6rem; justify-items: center;
  font-family: var(--ff-num);
  font-size: 0.625rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: 0.7;
  z-index: 4;
}
.hero__cue-line {
  width: 1px; height: 60px;
  background: linear-gradient(180deg, transparent, var(--c-gold), transparent);
  background-size: 1px 200%;
  animation: cue-flow 2.4s linear infinite;
}
@keyframes cue-flow {
  0%   { background-position: 0 -100%; }
  100% { background-position: 0 200%; }
}


/* ============================================================
   ACT II — ABOUT
   ============================================================ */
.act--about {
  background: linear-gradient(180deg, var(--c-ink) 0%, var(--c-olive-ink) 50%, var(--c-ink) 100%);   /* olive depth (2026-09-30) */
  /* One-screen fit (owner request 2026-09-03): tighter vertical padding, section
     fills exactly one viewport and centres its content. */
  padding: calc(clamp(2.5rem, 5vh, 4rem) + 2rem) 0 clamp(2.5rem, 5vh, 4rem); /* extra top room under the fixed nav */
  min-height: 100vh;
  display: grid;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.act--about::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 75% 50%, rgba(201, 169, 97, 0.06) 0%, transparent 50%);
  pointer-events: none;
}
.about__pin {
  display: grid;
  /* wider stage + copy column gets the extra room so the paragraphs wrap into fewer lines */
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  width: 100%;
  max-width: 1500px;
  padding: 0 var(--pad-page);
  margin: 0 auto;
}
@media (max-width: 880px) { .about__pin { grid-template-columns: 1fr; } }

.about__art-frame {
  position: relative;
  aspect-ratio: 4 / 5;
  /* never taller than the viewport minus the section padding (4:5 → width = 0.8 × height) */
  width: min(100%, calc((100vh - 10rem) * 0.8));
  margin: 0 auto;
  overflow: hidden;
  border-radius: 4px;
  background: var(--c-ink);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.8),
              0 0 0 1px rgba(201, 169, 97, 0.15);
}
.about__art-frame::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 60%, rgba(201, 169, 97, 0.12) 100%);
  pointer-events: none;
}
.about__art-img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.12);
  filter: brightness(0.85) saturate(0.95) contrast(1.05);
  will-change: transform;
}
.about__art-label {
  position: absolute; left: 1rem; bottom: 1rem;
  font-family: var(--ff-num);
  font-size: 0.625rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-gold-bright);
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(201, 169, 97, 0.25);
  z-index: 2;
}

.about__copy { display: grid; gap: 1.2rem; }
.about__title {
  font-size: var(--t-h1);
  line-height: 0.92;
  letter-spacing: -0.03em;
  display: grid;
  margin-top: 0.25rem;
}
.about__title .word { display: block; }
.about__title-mark {
  background: var(--grad-gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}
.about__lede { font-size: var(--t-lede); color: var(--c-cream); max-width: 66ch; }

.about__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  position: relative;
}
.about__stats::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold) 30%, var(--c-gold) 70%, transparent);
  opacity: 0.5;
}
.stat { display: grid; gap: 0.4rem; }
.stat__num {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  background: linear-gradient(180deg, var(--c-cream-hi) 0%, var(--c-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.stat__label {
  font-family: var(--ff-num);
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-gold);
  opacity: 0.85;
}


/* ============================================================
   ACT III — FLAVOR ATLAS (the showcase)
   ============================================================ */
.act--flavors {
  background: var(--c-ink);
  position: relative;
}
.act--flavors::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.3) 50%, transparent);
}

.flavors__intro {
  padding: clamp(8rem, 16vh, 12rem) var(--pad-page) clamp(4rem, 8vh, 6rem);
  max-width: 1200px;
  margin: 0 auto;
  display: grid; gap: 1.6rem;
}
.flavors__intro-title {
  font-size: var(--t-h1);
  line-height: 0.9;
  margin-top: 0.6rem;
}
.flavors__intro-lede { max-width: 48ch; font-size: var(--t-lede); }

/* Pinned stage — height controls scroll budget (8 panels × ~80vh) */
.flavors__pin { height: 800vh; position: relative; }
.flavors__stage {
  position: sticky; top: 0;
  width: 100%; height: 100vh;
  overflow: hidden;
  background: var(--c-ink);
}

/* Videos stack — only the active is visible */
.flavors__videos { position: absolute; inset: 0; }
.fv {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: brightness(0.62) saturate(0.9) contrast(1.08) sepia(0.1); /* was 0.4 — owner: "背景需要亮点" 2026-09-01 */
  transition: opacity 0.9s var(--ease-out);
  will-change: opacity;
}
.fv.is-active { opacity: 1; }

.flavors__overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 25% 50%, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.42) 70%, rgba(0,0,0,0.8) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.12) 30%, rgba(0,0,0,0.72) 100%);
  z-index: 2; pointer-events: none;
}
.flavors__overlay::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 75% 30%, rgba(201, 169, 97, 0.06) 0%, transparent 45%);
}

/* Giant scroll-driven flavor word (background mark) */
.flavors__giant {
  position: absolute;
  bottom: -1vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  font-family: var(--ff-display);
  font-size: var(--t-giant);
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: -0.05em;
  color: rgba(225, 208, 182, 0.07);
  white-space: nowrap;
}
.flavors__giant .fgiant {
  display: none;
  text-align: center;
  background: linear-gradient(180deg, rgba(229, 199, 123, 0.12) 0%, rgba(201, 169, 97, 0.05) 60%, transparent 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.flavors__giant .fgiant.is-active { display: block; }

/* Chrome — chrome on top */
.flavors__chrome {
  position: absolute; inset: 0;
  z-index: 5;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(5rem, 8vh, 7rem) var(--pad-page) clamp(2rem, 4vh, 3rem);
  pointer-events: none;
}

.flavors__counter {
  font-family: var(--ff-num);
  font-size: var(--t-tiny);
  letter-spacing: 0.32em;
  background: var(--grad-gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: flex; align-items: baseline; gap: 0.4em;
  justify-self: end;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 999px;
  background-color: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.flavors__counter-cur {
  background: linear-gradient(180deg, var(--c-cream-hi), var(--c-gold-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 1rem; letter-spacing: 0.1em;
}

.flavors__names {
  align-self: end;
  display: grid;
  position: relative;
  height: clamp(5rem, 9vw, 8rem);
  overflow: hidden;
}
.fname {
  position: absolute; inset: 0;
  font-family: var(--ff-display);
  font-size: clamp(3rem, 8vw, 7rem);
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--c-cream-hi) 0%, var(--c-gold-bright) 50%, var(--c-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  opacity: 0;
  transform: translateY(40%);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.fname.is-active { opacity: 1; transform: translateY(0); }
.fname.is-past { transform: translateY(-40%); }

.flavors__notes {
  margin-top: 1rem;
  max-width: 38ch;
  position: relative;
  min-height: 7rem;
}
.fnote {
  position: absolute; inset: 0;
  font-size: 1rem;
  color: var(--c-cream);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  pointer-events: none;
}
.fnote.is-active { opacity: 1; transform: translateY(0); }
.fnote strong {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 1.25rem;
  background: var(--grad-gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: block;
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}

.flavors__progress {
  grid-column: 1 / -1;
  height: 1px;
  background: rgba(201, 169, 97, 0.15);
  position: relative;
  overflow: hidden;
  margin-top: 1.5rem;
  pointer-events: none;
}
.flavors__progress-fill {
  display: block; height: 100%;
  background: var(--grad-gold-shine);
  width: 0%;
  transition: width 0.3s linear;
  box-shadow: 0 0 12px rgba(229, 199, 123, 0.6);
}


/* ============================================================
   ACT IV — BRANDS
   ============================================================ */
.act--brands {
  background: linear-gradient(180deg, var(--c-ink) 0%, var(--c-bg-2) 50%, var(--c-ink) 100%);
  /* condensed (owner request 2026-09-03): bowls + brand logos land within the first screen */
  padding: clamp(4rem, 7vh, 6rem) 0 clamp(3rem, 6vh, 5rem);
  overflow: hidden;
  position: relative;
}
.act--brands::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.3) 50%, transparent);
}
.brands__head {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad-page) clamp(1.5rem, 3vh, 2.5rem);
  display: grid; gap: 1rem;
}
.brands__title {
  font-size: clamp(1.9rem, 4.2vw, 3.5rem);
  letter-spacing: -0.025em;
  line-height: 1;
  text-wrap: balance;
  background: linear-gradient(180deg, var(--c-cream-hi) 0%, var(--c-gold-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brands__lede { max-width: 68ch; font-size: var(--t-lede); line-height: 1.6; }

.marquee {
  width: 100%;
  overflow: hidden;
  padding: 1.15rem 0;
  margin-top: clamp(4rem, 8vh, 6rem);     /* breathing room under the leaf bowls (owner: "sticking together", widened again 2026-09-24) */
  position: relative;
  background: linear-gradient(90deg, var(--c-ink) 0%, var(--c-bg-2) 50%, var(--c-ink) 100%);
}
.marquee::before, .marquee::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold) 30%, var(--c-gold) 70%, transparent);
  opacity: 0.4;
  z-index: 2;
}
.marquee::before { top: 0; }
.marquee::after { bottom: 0; }
/* Edge fade for marquee — the logos dissolve into the bg at edges */
.marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.marquee__track {
  display: flex; gap: 4rem;
  width: max-content;
  animation: marquee 40s linear infinite; /* track is 2/3 as wide now — 40s keeps the same scroll speed */
  will-change: transform;
}
.brand {
  flex: 0 0 auto;
  width: clamp(173px, 14.7vw, 267px);
  height: 100px;           /* fixed, consistent height; 2/3 of the 150px 2026-09-02 size (owner request 2026-09-24) */
  display: grid;
  place-items: center;
  padding: 0 1rem;
}
.brand img {
  max-width: 100%;
  height: 100px;           /* normalize all logos to same visual height (2/3 of 150px, 2026-09-24) */
  width: auto;
  object-fit: contain;
  /* unify diverse logos by converting to single-tone gold at reduced presence */
  filter:
    brightness(0)
    invert(74%)
    sepia(33%)
    saturate(424%)
    hue-rotate(2deg)
    brightness(95%)
    contrast(88%);
  opacity: 0.5;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), filter 0.4s var(--ease-out);
}
.brand:hover img {
  opacity: 1;
  filter:
    brightness(0)
    invert(89%)
    sepia(47%)
    saturate(556%)
    hue-rotate(2deg)
    brightness(106%)
    contrast(94%);
  transform: scale(1.06);
}
/* ---- Tobacco lines (Brands act, 2026-09-02) — three bowls, hover/tap reveals notes ---- */
.leaf {
  --bowl: clamp(117px, 11.7vw, 169px); /* bowl diameter (halved, then +30%, owner requests 2026-09-24) — the hover card is placed relative to it */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad-page);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.leaf__item {
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  cursor: pointer;
  outline: none;
  position: relative;
  z-index: 1;
}
.leaf__item:hover,
.leaf__item:focus-visible,
.leaf__item.is-open { z-index: 6; }
.leaf__bowl {
  width: var(--bowl);
  aspect-ratio: 1;
  border-radius: 50%;
  transition: transform 0.6s var(--ease-out), filter 0.6s var(--ease-out);
  filter: drop-shadow(0 0 0 rgba(201, 169, 97, 0));
}
.leaf__bowl img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; display: block; }
.leaf__item:hover .leaf__bowl,
.leaf__item:focus-visible .leaf__bowl,
.leaf__item.is-open .leaf__bowl {
  transform: scale(1.06);
  filter: drop-shadow(0 0 28px rgba(201, 169, 97, 0.35));
}
.leaf__name {
  font-family: var(--ff-sub);
  font-size: 0.8rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-gold);
  text-align: center;
  display: grid; gap: 0.3rem;
}
.leaf__name span {
  font-family: var(--ff-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--c-cream-lo);
}
.leaf__card {
  /* popover anchored to the bowl's lower-right (owner mock 2026-09-03): top edge ~62%
     down the bowl, left edge just past the bowl's centre, ~1.25 bowl-widths wide.
     Floats over the page instead of reserving layout space while hidden. */
  position: absolute;
  top: calc(var(--bowl) * 0.62);
  left: calc(50% + var(--bowl) * 0.26);
  width: calc(var(--bowl) * 2.4);    /* bowls halved 2026-09-24 — keep the card readable */
  max-width: 360px;
  padding: 1.4rem 1.5rem 1.5rem;
  border: 1px solid rgba(201, 169, 97, 0.35);
  background: linear-gradient(180deg, rgba(20, 23, 15, 0.92), rgba(0, 0, 0, 0.92));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), visibility 0s linear 0.45s;
}
/* last bowl sits at the right edge — mirror its card to the left so it never runs off-screen */
.leaf__item:last-child .leaf__card {
  left: auto;
  right: calc(50% + var(--bowl) * 0.26);
}
.leaf__item:hover .leaf__card,
.leaf__item:focus-visible .leaf__card,
.leaf__item.is-open .leaf__card {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), visibility 0s;
}
.leaf__card h3 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.1;
  margin: 0 0 0.9rem;
  background: var(--grad-gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.leaf__card h3 em { font-style: normal; font-size: 0.85em; }
.leaf__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.leaf__card li {
  font-family: var(--ff-body);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--c-cream);
  padding-left: 1rem;
  position: relative;
}
.leaf__card li::before { content: "◆"; position: absolute; left: 0; top: 0.45em; font-size: 0.45rem; color: var(--c-gold); }
.leaf__card strong { font-weight: 500; color: var(--c-gold-bright); }
@media (max-width: 900px) {
  .leaf { grid-template-columns: 1fr; gap: 2.5rem; }
  .leaf__bowl { width: min(39vw, 156px); }
  /* touch: no hover — the card stays in flow and only takes space once tapped open */
  .leaf__card { display: none; position: static; transform: none; width: min(100%, 360px); }
  .leaf__item.is-open .leaf__card { display: block; transform: none; }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.brands__list {
  max-width: 1200px;
  margin: 4rem auto 0;
  padding: 0 var(--pad-page);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem 2rem;
  font-family: var(--ff-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  color: var(--c-cream-hi);
}
@media (max-width: 800px) { .brands__list { grid-template-columns: repeat(2, 1fr); } }
.brands__list li {
  display: flex; align-items: baseline; gap: 0.8rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(201, 169, 97, 0.18);
  letter-spacing: -0.01em;
  transition: border-color 0.3s, padding-left 0.3s;
}
.brands__list li:hover {
  border-bottom-color: var(--c-gold);
  padding-left: 0.5rem;
}
.brands__list .num {
  font-family: var(--ff-num);
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  background: var(--grad-gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ============================================================
   ACT V — MENU
   ============================================================ */
.act--menu {
  background: linear-gradient(180deg, var(--c-ink) 0%, var(--c-olive-ink) 100%);   /* olive depth (2026-09-30) */
  padding: clamp(6rem, 14vh, 10rem) 0;
  position: relative;
}
.act--menu::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.3) 50%, transparent);
}
.menu__hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad-page);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 880px) { .menu__hero { grid-template-columns: 1fr; } }

.menu__hero img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  filter: saturate(1.05) contrast(1.05);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.8),
              0 0 0 1px rgba(201, 169, 97, 0.15);
}
.menu__hero-copy { display: grid; gap: 1.4rem; }
.menu__hero-title {
  font-size: var(--t-h1);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin-top: 0.6rem;
}

.menu__cols {
  max-width: 1200px;
  margin: 5rem auto 0;
  padding: 0 var(--pad-page);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
}
@media (max-width: 800px) { .menu__cols { grid-template-columns: 1fr; gap: 4rem; } }

.menu__col-head {
  display: flex; align-items: baseline; gap: 1rem;
  padding-bottom: 1rem;
  position: relative;
  margin-bottom: 1.5rem;
}
.menu__col-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--c-gold), rgba(201, 169, 97, 0.05));
}
.menu__col-num {
  font-family: var(--ff-num);
  font-size: 0.625rem;
  letter-spacing: 0.32em;
  background: var(--grad-gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.menu__col-head h3 {
  font-size: var(--t-h2);
  font-family: var(--ff-display);
  background: linear-gradient(180deg, var(--c-cream-hi), var(--c-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}

.menu-list { display: grid; gap: 1.2rem; }
.menu-item {
  display: grid;
  grid-template-columns: 88px 1fr auto;   /* photo · name+notes · price (price column added 2026-09-24) */
  gap: 1.2rem;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(201, 169, 97, 0.08);
  transition: padding 0.3s var(--ease-out), border-color 0.3s;
}
.menu-item:hover { padding-left: 0.6rem; border-bottom-color: rgba(201, 169, 97, 0.3); }
.menu-item img {
  width: 88px; height: 88px;
  object-fit: cover;
  border-radius: 4px;
  filter: saturate(1.05) brightness(0.95);
  border: 1px solid rgba(201, 169, 97, 0.15);
  transition: transform 0.4s var(--ease-out), border-color 0.3s;
}
.menu-item:hover img {
  transform: scale(1.05);
  border-color: var(--c-gold);
}
.menu-item h4 {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 1.45rem;
  color: var(--c-cream-hi);
  line-height: 1.1;
  letter-spacing: -0.01em;
  transition: color 0.3s;
}
.menu-item:hover h4 { color: var(--c-gold-bright); }
.menu-item p {
  font-size: 0.875rem;
  color: var(--c-cream-lo);
  margin-top: 0.3rem;
  font-style: italic;
}

/* ---- Full POS menu on menu.html (generated by tools/build-menu.py, 2026-09-24) ---- */
.menu__note {
  max-width: 1200px; margin: 1.2rem auto 0; padding: 0 var(--pad-page);
  font-family: var(--ff-num); font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-cream-lo); opacity: 0.85;
}
.menu__jump {
  position: sticky; top: var(--nav-h, 60px); z-index: 20;   /* --nav-h is measured by menu.html's script */
  margin-top: 2.5rem;
  background: linear-gradient(180deg, rgba(10, 10, 9, 0.96), rgba(10, 10, 9, 0.88));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(201, 169, 97, 0.14); border-bottom: 1px solid rgba(201, 169, 97, 0.14);
}
.menu__jump-track {
  max-width: 1200px; margin: 0 auto; padding: 0.7rem var(--pad-page);
  display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.menu__jump-track::-webkit-scrollbar { display: none; }
.menu__jump a {
  flex: 0 0 auto;
  font-family: var(--ff-num); font-size: 0.6875rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--c-cream); text-decoration: none;
  padding: 0.5rem 0.95rem; border: 1px solid rgba(201, 169, 97, 0.25); border-radius: 999px;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.menu__jump a:hover, .menu__jump a:focus-visible { color: var(--c-gold-bright); border-color: var(--c-gold); background: rgba(201, 169, 97, 0.08); }
.menu__sections { max-width: 1200px; margin: 0 auto; padding: 0 var(--pad-page); display: grid; gap: clamp(3.5rem, 7vh, 5.5rem); }
.menu__cat { scroll-margin-top: calc(var(--nav-h, 60px) + 4.5rem); }
.menu__cat .menu__col-head { align-items: baseline; flex-wrap: wrap; }
.menu__cat-sub {
  margin-left: auto;
  font-family: var(--ff-body); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-cream-lo);
}
.menu__subcat {
  font-family: var(--ff-num); font-size: 0.6875rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--c-gold); margin: 1.6rem 0 0.4rem;
}
.menu-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); row-gap: 0.4rem; align-items: start; }
.menu-item__ph {
  width: 88px; height: 88px; border-radius: 4px; display: grid; place-items: center;
  border: 1px solid rgba(201, 169, 97, 0.15);
  background: radial-gradient(ellipse at 50% 40%, rgba(201, 169, 97, 0.12), rgba(201, 169, 97, 0.02) 70%);
  font-family: var(--ff-display); font-size: 1.6rem; color: rgba(201, 169, 97, 0.55);
}
.menu-item__price {
  font-family: var(--ff-num); font-size: 1.05rem; letter-spacing: 0.04em; color: var(--c-gold-bright);
  white-space: nowrap; align-self: center;
}
.menu-item__price small { font-size: 0.6em; letter-spacing: 0.18em; margin-right: 0.3em; color: var(--c-gold); }
.menu-item__price--ask { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-cream-lo); }
.menu-item h4 { text-wrap: balance; }
@media (max-width: 900px) {
  .menu-list--grid { grid-template-columns: 1fr; }
  .menu__cat .menu__col-head h3 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .menu__cat-sub { margin-left: 0; width: 100%; }
  .menu-item { grid-template-columns: 72px 1fr auto; gap: 0.9rem; }
  .menu-item img, .menu-item__ph { width: 72px; height: 72px; }
  .menu-item h4 { font-size: 1.2rem; }
}

/* ---- POS-style menu list on menu.html (owner 2026-09-27: "similar to the ordering page, but without
   being able to order"). Same bones as the POS order page: sticky chips, a hairline seam + small-caps
   category kicker, one column of dark cards (48px thumb · serif name · gold price · italic note),
   and a tap-to-open sheet listing the item's sizes / servings — read-only, no add, no tab. ---- */
.pm-wrap { max-width: 48rem; margin: 0 auto; padding: 0 var(--pad-page) 4rem; }
.pm-cat { padding: 2rem 0 0.5rem; scroll-margin-top: calc(var(--nav-h, 60px) + 4rem); }
.pm-seam { height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.3) 50%, transparent); margin-bottom: 1.75rem; }
.pm-kicker {
  display: inline-block; margin-bottom: 1.25rem;
  font-family: var(--ff-num); font-size: 0.6875rem; letter-spacing: 0.32em; text-transform: uppercase;
  background: var(--grad-gold-shine); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pm-list { display: grid; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.pm-card {
  background: var(--grad-card-olive); border: 1px solid rgba(201, 169, 97, 0.12); border-radius: 6px;
  padding: 1.1rem 1.2rem; cursor: pointer; transition: border-color 0.3s;
}
.pm-card:hover, .pm-card:focus-visible { border-color: rgba(201, 169, 97, 0.3); outline: none; }
.pm-card__row { display: flex; align-items: baseline; gap: 1rem; }
.pm-card__thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; border: 1px solid rgba(201, 169, 97, 0.15); align-self: center; flex-shrink: 0; }
.pm-card__name { flex: 1; font-family: var(--ff-display); font-weight: 400; font-size: 1.25rem; line-height: 1.15; color: var(--c-cream-hi); }
.pm-card__low { font-family: var(--ff-num); font-size: 0.55rem; letter-spacing: 0.32em; text-transform: uppercase; color: #D4A574; margin-left: 0.6rem; }
.pm-card__price {
  font-family: var(--ff-display); font-size: 1.125rem; white-space: nowrap;
  background: var(--grad-gold-shine); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pm-card__price small { font-family: var(--ff-num); font-size: 0.6rem; letter-spacing: 0.18em; margin-right: 0.25rem; vertical-align: top; }
.pm-card__ask { font-family: var(--ff-num); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; font-style: italic; color: rgba(184, 164, 122, 0.7); white-space: nowrap; }
.pm-card__sub { font-size: 0.75rem; line-height: 1.35; color: var(--c-cream-lo); font-style: italic; margin-top: 0.35rem; white-space: pre-line; }
.pm-card__sub--indent { padding-left: 4rem; }
.pm-card__more { font-family: var(--ff-num); font-size: 0.55rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-gold); margin-top: 0.5rem; }
/* Laptops (owner 2026-09-30, laptop photo of the Promotions list: "make it two rows instead, there's
   still a lot of spaces on the side"): the list widens to the same 1200px as the chips row above it
   and the cards run two per row, equal height per row. Phones and tablets keep the single column. */
@media (min-width: 901px) {
  .pm-wrap { max-width: 1200px; }
  .pm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
}
/* the read-only item sheet */
.pm-sheet { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 1rem; }
.pm-sheet[hidden] { display: none; }
.pm-sheet__panel {
  width: 100%; max-width: 28rem; max-height: 82vh; overflow-y: auto;
  background: var(--grad-card-olive); border: 1px solid rgba(201, 169, 97, 0.2); border-radius: 16px; padding: 1.75rem;
  margin-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 640px) { .pm-sheet { align-items: center; } }
.pm-sheet__name { font-family: var(--ff-display); font-weight: 400; font-size: 1.5rem; color: var(--c-cream-hi); margin: 0.4rem 0 0.25rem; }
.pm-sheet__sub { font-size: 0.8rem; color: var(--c-cream-lo); font-style: italic; margin-bottom: 1.2rem; white-space: pre-line; }
.pm-sheet__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; border: 1px solid rgba(201, 169, 97, 0.15); margin-bottom: 1rem; display: block; }
.pm-sheet__group { margin-bottom: 1.2rem; }
.pm-sheet__rows { display: grid; gap: 0.5rem; margin-top: 0.6rem; }
.pm-sheet__rowv { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border: 1px solid rgba(201, 169, 97, 0.2); border-radius: 12px; }
.pm-sheet__rowv span:first-child { font-family: var(--ff-display); color: var(--c-cream-hi); }
.pm-sheet__rowv span:last-child { font-family: var(--ff-display); white-space: nowrap; background: var(--grad-gold-shine); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pm-sheet__foot { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid rgba(201, 169, 97, 0.1); padding-top: 1rem; margin-top: 0.5rem; }
.pm-sheet__hint { font-family: var(--ff-num); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-cream-lo); line-height: 1.6; }
.pm-sheet__close {
  font-family: var(--ff-num); font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-cream-lo);
  border: 1px solid rgba(201, 169, 97, 0.25); border-radius: 999px; padding: 0.55rem 1.1rem; background: none; cursor: pointer; flex-shrink: 0;
  transition: color 0.3s, border-color 0.3s;
}
.pm-sheet__close:hover { color: var(--c-gold-bright); border-color: var(--c-gold); }
body.pm-sheet-open { overflow: hidden; }
.pm-sheet__img[hidden] { display: none; }
.pm-sheet__panel { scrollbar-width: thin; scrollbar-color: rgba(201, 169, 97, 0.35) transparent; }
/* Laptop / desktop (owner 2026-09-28, laptop video): the phone-width sheet looked lost on a big screen.
   Widen it, and when the item has a photo lay it out as one wide card — photo on the left filling the
   full height, details + prices on the right, the hint and Close pinned to the bottom edge. */
@media (min-width: 901px) {
  .pm-sheet { padding: 2rem; }
  .pm-sheet__panel { max-width: 38rem; max-height: 86vh; padding: 2.25rem 2.5rem; border-radius: 18px; }
  .pm-sheet__name { font-size: 2rem; }
  .pm-sheet__sub { font-size: 0.85rem; }
  .pm-sheet__rowv { padding: 0.85rem 1.1rem; }
  .pm-sheet__rowv span { font-size: 1.05rem; }
  .pm-sheet__panel:has(.pm-sheet__img:not([hidden])) {
    max-width: 64rem; min-height: 32rem;
    display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr); column-gap: 2.5rem;
  }
  .pm-sheet__panel:has(.pm-sheet__img:not([hidden])) > * { grid-column: 2; }
  .pm-sheet__panel:has(.pm-sheet__img:not([hidden])) > .kicker { grid-row: 1; }
  .pm-sheet__panel:has(.pm-sheet__img:not([hidden])) > .pm-sheet__name { grid-row: 2; }
  .pm-sheet__panel:has(.pm-sheet__img:not([hidden])) > .pm-sheet__sub { grid-row: 3; }
  .pm-sheet__panel:has(.pm-sheet__img:not([hidden])) > #pm-sheet-groups { grid-row: 4; }
  .pm-sheet__panel:has(.pm-sheet__img:not([hidden])) > .pm-sheet__foot { grid-row: 5; align-self: end; }
  .pm-sheet__panel:has(.pm-sheet__img:not([hidden])) > .pm-sheet__img {
    grid-column: 1; grid-row: 1 / 6;
    height: 0; min-height: 100%; aspect-ratio: auto; margin: 0; border-radius: 12px;
  }
}


/* ============================================================
   ACT VI — EXPERT
   ============================================================ */
.act--expert {
  position: relative;
  padding: clamp(8rem, 16vh, 12rem) 0;
  overflow: hidden;
  background: var(--c-ink);
  isolation: isolate;
}
.expert__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: brightness(0.32) saturate(0.85);
}
.expert__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.96) 100%);
  z-index: 1;
}
.expert__veil::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(201, 169, 97, 0.08) 0%, transparent 50%);
}
.act--expert::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.3) 50%, transparent);
  z-index: 3;
}
.expert__head {
  position: relative; z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad-page) clamp(4rem, 8vh, 6rem);
  display: grid; gap: 1.4rem;
  text-align: center;
  justify-items: center;
}
.expert__title { font-size: var(--t-h1); line-height: 0.9; letter-spacing: -0.03em; }
.expert__lede { max-width: 50ch; }

.expert__cards {
  position: relative; z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad-page);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 900px) { .expert__cards { grid-template-columns: 1fr; gap: 1.5rem; } }

.ecard {
  position: relative;
  background: rgba(10, 8, 5, 0.65);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-radius: 6px;
  padding: 2rem;
  display: grid; gap: 1rem;
  align-content: start;
  transition: transform 0.5s var(--ease-out), background 0.4s;
  overflow: hidden;
  border: 1px solid transparent;
  background-clip: padding-box;
}
.ecard::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 6px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.4), rgba(201, 169, 97, 0.05) 50%, rgba(201, 169, 97, 0.3) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: background 0.4s;
}
.ecard:hover {
  transform: translateY(-6px);
  background: rgba(15, 13, 8, 0.85);
}
.ecard:hover::before {
  background: var(--grad-gold);
}
.ecard__num {
  font-family: var(--ff-num);
  font-size: 0.625rem;
  letter-spacing: 0.32em;
  background: var(--grad-gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ecard__art {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}
.ecard__art img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
  filter: saturate(0.95) brightness(0.95);
}
.ecard:hover .ecard__art img { transform: scale(1.06); }
.ecard h3 { font-size: var(--t-h3); }
.ecard p { color: var(--c-cream); }
.ecard__cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-top: 0.8rem;
  font-family: var(--ff-num);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-gold-bright);
  padding-bottom: 4px;
  width: max-content;
  transition: gap 0.3s, color 0.3s;
}
.ecard__cta::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--grad-gold-shine);
  transform-origin: left;
  transition: transform 0.3s;
}
.ecard__cta em { font-style: normal; }
.ecard__cta:hover { color: var(--c-cream-hi); gap: 0.8rem; }
.ecard__cta:hover::after { transform: scaleX(1.05); }


/* ============================================================
   ACT VI½ — CLOUDCHASER MEMBERSHIP
   ============================================================ */
.act--membership {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(63, 107, 58, 0.16) 0%, transparent 50%),   /* olive glow (2026-09-30) */
    radial-gradient(ellipse at 80% 80%, rgba(201, 169, 97, 0.04) 0%, transparent 50%),
    linear-gradient(180deg, var(--c-ink) 0%, var(--c-olive-ink) 50%, var(--c-ink) 100%);
  padding: clamp(8rem, 16vh, 12rem) 0;
  position: relative;
  overflow: hidden;
}
.act--membership::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.3) 50%, transparent);
}

.membership__intro {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad-page) clamp(4rem, 8vh, 6rem);
  display: grid; gap: 1.6rem;
  text-align: center;
  justify-items: center;
}
.membership__title {
  font-size: var(--t-h1);
  line-height: 0.92;
  letter-spacing: -0.03em;
  display: grid; gap: 0.1em;
}
.membership__title .word { display: block; }
.membership__title-mark {
  background: var(--grad-gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
}
.membership__lede {
  max-width: 56ch;
  font-size: var(--t-lede);
}

.membership__split {
  max-width: 1200px;
  margin: 0 auto clamp(5rem, 10vh, 8rem);
  padding: 0 var(--pad-page);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 980px) { .membership__split { grid-template-columns: 1fr; } }

/* ----- 4-tier card stack ------------------------------- */
.tier-stage {
  position: sticky;
  top: clamp(6rem, 12vh, 8rem);
  display: grid;
  gap: clamp(1.2rem, 2vh, 1.6rem);
  --tier-accent: #FFC9A8;
  --tier-deep: #5C2E2E;
}

.tier-card-stack {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  perspective: 1400px;
  transform-style: preserve-3d;
}

.mcard {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #050505;
  box-shadow:
    0 40px 100px -20px rgba(0,0,0,0.85),
    0 0 0 1px rgba(201, 169, 97, 0.18),
    inset 0 0 60px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(36px) scale(0.98);
  transition: opacity 0.55s var(--ease-out), transform 0.7s var(--ease-out);
  pointer-events: none;
  z-index: 1;
  will-change: opacity, transform;
}
.mcard.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  z-index: 2;
}

.mcard__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.05);
  transition: transform 6s var(--ease-out);
}
.mcard.is-active .mcard__bg { transform: scale(1); }

.mcard__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.55) 0%,
      rgba(0,0,0,0.18) 30%,
      rgba(0,0,0,0.18) 60%,
      rgba(0,0,0,0.78) 100%
    ),
    radial-gradient(ellipse at 80% 95%, rgba(201,169,97,0.16) 0%, transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 25%, transparent 75%, rgba(201,169,97,0.12) 100%);
  pointer-events: none;
}

.mcard__chrome {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  z-index: 2;
}

/* Brand block (云 yún + YÚN) */
.mcard__brand {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0.65rem;
  justify-self: start;
}
.mcard__brand-glyph {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 400;
  color: var(--c-cream-hi);
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}
.mcard__brand-mark {
  font-family: var(--ff-display);
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  letter-spacing: 0.4em;
  color: var(--c-cream-hi);
  padding-left: 0.5rem;
  border-left: 1px solid rgba(255,255,255,0.35);
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}

/* Tier label block (centered) */
.mcard__tier {
  align-self: center;
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  text-align: center;
}
.mcard__tier-num {
  font-family: var(--ff-num);
  font-size: 0.625rem;
  letter-spacing: 0.5em;
  color: var(--tier-accent, var(--c-gold-bright));
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
  opacity: 0.95;
}
.mcard__tier-name {
  font-family: var(--ff-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 300;
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--c-cream-hi);
  text-shadow: 0 4px 22px rgba(0,0,0,0.7);
  background: linear-gradient(180deg, #FFFAF0 0%, var(--tier-accent, #E5C77B) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mcard__tier-tag {
  font-family: var(--ff-num);
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: 0.85;
  text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}

/* Foot — member number */
.mcard__foot {
  align-self: end;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ff-num);
  font-size: 0.625rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.mcard__foot-label {
  color: var(--c-cream);
  opacity: 0.7;
}
.mcard__foot-value {
  color: var(--tier-accent, var(--c-gold-bright));
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}

/* ----- Per-tier color treatments ----- */
.mcard--stratus {
  --tier-accent: #FFD2B0;
  --tier-deep: #4F2D2A;
}
.mcard--stratus .mcard__tier-name {
  background: linear-gradient(180deg, #FFFAF0 0%, #FFC9A8 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.mcard--cirrus {
  --tier-accent: #D9C4E8;
  --tier-deep: #2E2447;
}
.mcard--cirrus .mcard__tier-name {
  background: linear-gradient(180deg, #FFFAF0 0%, #C9AEDA 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.mcard--cumulus {
  --tier-accent: #B8D4E0;
  --tier-deep: #1F3848;
}
.mcard--cumulus .mcard__tier-name {
  background: linear-gradient(180deg, #FFFAF0 0%, #A6CADB 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.mcard--nimbus {
  --tier-accent: #FFE9A8;
  --tier-deep: #0A0F1E;
}
.mcard--nimbus .mcard__veil {
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.65) 0%,
      rgba(0,0,0,0.25) 30%,
      rgba(0,0,0,0.25) 60%,
      rgba(0,0,0,0.85) 100%
    ),
    radial-gradient(ellipse at 80% 95%, rgba(201,169,97,0.32) 0%, transparent 50%),
    linear-gradient(135deg, rgba(229,199,123,0.06) 0%, transparent 25%, transparent 75%, rgba(201,169,97,0.18) 100%);
}
.mcard--nimbus .mcard__tier-name {
  background: var(--grad-gold-shine);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(229,199,123,0.35));
}
.mcard--nimbus .mcard__brand-mark {
  color: var(--c-gold-bright);
  border-left-color: rgba(229,199,123,0.5);
}

/* ----- Tier dot selector ----- */
.tier-dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  padding: 0;
  margin: 0;
}
.tier-dot {
  position: relative;
  appearance: none;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0.5rem;
  display: grid;
  place-items: center;
}
.tier-dot span {
  display: block;
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(201,169,97,0.22);
  border: 1px solid rgba(201,169,97,0.45);
  transition: all 0.4s var(--ease-out);
}
.tier-dot:hover span {
  background: rgba(229,199,123,0.45);
  transform: scale(1.15);
}
.tier-dot.is-active span {
  width: 28px;
  border-radius: 4px;
  background: var(--grad-gold-shine);
  border-color: transparent;
  box-shadow: 0 0 12px rgba(229,199,123,0.4);
}
.tier-dot:focus-visible {
  outline: 1px solid var(--c-gold-bright);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ----- Live progress bar ----- */
.tier-progress {
  height: 1px;
  width: 100%;
  background: rgba(201,169,97,0.12);
  overflow: hidden;
  position: relative;
}
.tier-progress__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, transparent, var(--c-gold-bright) 50%, transparent 100%);
  transition: width 0.45s var(--ease-out);
  box-shadow: 0 0 12px rgba(229,199,123,0.55);
}

/* tier-list rows are clickable — make that clear */
.tier-list__item {
  cursor: pointer;
  user-select: none;
}
.tier-list__item:focus-visible {
  outline: 1px solid var(--c-gold);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Right: tier ladder + benefits */
.membership__details { display: grid; gap: clamp(2rem, 4vh, 3rem); }

.tier-block {
  display: grid; gap: 1.2rem;
}
.tier-block__head {
  display: flex; align-items: baseline; gap: 1rem;
  padding-bottom: 0.8rem;
  position: relative;
}
.tier-block__head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--c-gold), rgba(201, 169, 97, 0.05));
}
.tier-block__num {
  font-family: var(--ff-num);
  font-size: 0.625rem;
  letter-spacing: 0.32em;
  background: var(--grad-gold-shine);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.tier-block__title {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  letter-spacing: -0.015em;
  line-height: 1.1;
  background: linear-gradient(180deg, var(--c-cream-hi), var(--c-gold));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.tier-block__lede {
  color: var(--c-cream);
  max-width: 50ch;
}

.tier-list { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.tier-list__item {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  align-items: baseline;
  gap: 1.2rem;
  padding: 0.85rem 0.4rem;
  border-bottom: 1px solid rgba(201, 169, 97, 0.1);
  transition: padding 0.3s var(--ease-out), border-color 0.3s;
}
.tier-list__item:hover {
  padding-left: 0.9rem;
  border-bottom-color: rgba(201, 169, 97, 0.35);
}
.tier-list__item.is-current {
  border-bottom-color: var(--c-gold);
  padding-left: 0.9rem;
}
.tier-list__item.is-current::before {
  content: ""; display: block; width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-gold-bright);
  box-shadow: 0 0 8px rgba(229, 199, 123, 0.7);
  position: absolute;
  margin-left: -0.6rem; margin-top: 0.55rem;
}
.tier-list__lvl {
  font-family: var(--ff-num);
  font-size: 0.625rem;
  letter-spacing: 0.32em;
  color: var(--c-gold);
  opacity: 0.65;
}
.tier-list__item.is-current .tier-list__lvl { opacity: 1; color: var(--c-gold-bright); }
.tier-list__name {
  font-family: var(--ff-display);
  font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  color: var(--c-cream-hi);
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.tier-list__item.is-current .tier-list__name {
  background: var(--grad-gold-shine);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.tier-list__perk {
  font-size: 0.875rem;
  color: var(--c-cream-lo);
  text-align: right;
  font-style: italic;
}
@media (max-width: 600px) {
  .tier-list__item { grid-template-columns: auto 1fr; }
  .tier-list__perk { grid-column: 1 / -1; text-align: left; }
}

.benefit-list { display: grid; gap: 1rem; }
.benefit-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 1rem;
  padding: 1rem 0.4rem;
  border-bottom: 1px solid rgba(201, 169, 97, 0.08);
}
.benefit-list__icon {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(201, 169, 97, 0.08);
  border: 1px solid rgba(201, 169, 97, 0.25);
  font-size: 0.95rem;
  color: var(--c-gold-bright);
}
.benefit-list strong {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--c-cream-hi);
  display: block;
  margin-bottom: 0.2rem;
}
.benefit-list li > div { color: var(--c-cream); }


/* ─── Cloudchaser Chains ─── */
.chains-block {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--pad-page);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: stretch;
  position: relative;
}
.chains-block::before {
  content: ""; display: block;
  grid-column: 1 / -1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold) 50%, transparent);
  opacity: 0.3;
  margin-bottom: clamp(2rem, 5vh, 4rem);
}
@media (max-width: 980px) { .chains-block { grid-template-columns: 1fr; } }

.chains-block__hero {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 40px 100px -20px rgba(0,0,0,0.85),
    0 0 0 1px rgba(201, 169, 97, 0.15);
}
.chains-block__hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.92) saturate(0.95) contrast(1.05);
  transition: transform 0.8s var(--ease-out);
}
.chains-block__hero:hover img { transform: scale(1.04); }

.chains-block__copy {
  display: grid; gap: 1.4rem;
  align-content: start;
  padding-top: 1rem;
}
.chains-block__title {
  font-family: var(--ff-display);
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  letter-spacing: -0.025em;
  line-height: 1;
  background: linear-gradient(180deg, var(--c-cream-hi) 0%, var(--c-gold-bright) 60%, var(--c-gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin-top: 0.6rem;
}
.chains-block__copy p { color: var(--c-cream); max-width: 50ch; }

.chains-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-top: 1rem;
}
@media (max-width: 600px) { .chains-grid { grid-template-columns: 1fr; } }

.chains-card {
  position: relative;
  background: var(--c-bg-card);
  border-radius: 6px;
  padding: 1.4rem 1.2rem;
  display: grid;
  gap: 0.5rem;
  text-align: left;
  border: 1px solid transparent;
  background-clip: padding-box;
  overflow: hidden;
  transition: transform 0.4s var(--ease-out);
}
.chains-card::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 6px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.3), rgba(201, 169, 97, 0.05) 50%, rgba(201, 169, 97, 0.25) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: background 0.4s;
}
.chains-card:hover { transform: translateY(-3px); }
.chains-card:hover::before { background: var(--grad-gold); }

.chains-card__lvl {
  font-family: var(--ff-num);
  font-size: 0.625rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.chains-card__price {
  font-family: var(--ff-display);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1;
  background: linear-gradient(180deg, var(--c-cream-hi), var(--c-gold));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}
.chains-card__price em {
  font-family: var(--ff-num);
  font-style: normal;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  margin-right: 0.25em;
  vertical-align: 0.6em;
  opacity: 0.7;
}
.chains-card__hint {
  font-size: 0.8rem;
  color: var(--c-cream-lo);
  font-style: italic;
}
.chains-card--featured {
  background: linear-gradient(180deg, rgba(201, 169, 97, 0.08) 0%, var(--c-bg-card) 100%);
}
.chains-card--featured::before {
  background: var(--grad-gold) !important;
}
.chains-card--featured .chains-card__lvl {
  background: var(--grad-gold-shine);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.chains-meta {
  display: grid; gap: 0.6rem;
  margin-top: 0.8rem;
  padding: 1.4rem 0;
  border-top: 1px solid rgba(201, 169, 97, 0.12);
  border-bottom: 1px solid rgba(201, 169, 97, 0.12);
  font-size: 0.875rem;
}
.chains-meta li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1rem;
  align-items: baseline;
}
.chains-meta li span {
  font-family: var(--ff-num);
  font-size: 0.625rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-gold);
}
.chains-meta li strong {
  color: var(--c-cream);
  font-weight: 400;
  font-family: var(--ff-display);
  font-size: 1rem;
  letter-spacing: -0.005em;
}


/* ============================================================
   ACT VII — ATMOSPHERE GALLERY
   ============================================================ */
.act--atmosphere {
  background: linear-gradient(180deg, var(--c-bg-2) 0%, var(--c-ink) 100%);
  overflow: hidden;
  position: relative;
}
.act--atmosphere::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.3) 50%, transparent);
}
.atmosphere__intro {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(8rem, 16vh, 12rem) var(--pad-page) clamp(3rem, 6vh, 5rem);
  display: grid; gap: 1.4rem;
}
.atmosphere__title { font-size: var(--t-h1); letter-spacing: -0.03em; line-height: 0.9; max-width: 16ch; }

/* Pinned single-pane stage: photos cycle one at a time on scroll */
.atmosphere__pin { position: relative; }
.atmosphere__stage {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--c-ink);
}

.apane {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
.apane.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.apane__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* zoom-in feel: starts slightly large, eases to natural while active */
  transform: scale(1.18);
  transition: transform 5.5s var(--ease-out), filter 1s var(--ease-out);
  filter: saturate(0.92) brightness(0.78) contrast(1.05);
}
.apane.is-active .apane__bg {
  transform: scale(1.0);
  filter: saturate(1) brightness(0.9) contrast(1.06);
}

/* Ambient light (owner 2026-09-30, "ambient light for the photos, not the videos — the black borders
   around it"): the same photo, blurred wide and warmed up, fills the whole stage UNDER the sharp copy,
   so the dark margins around the photo glow in its own colours instead of staying black — the
   feathered photo edges now melt into that glow. Added by app.js from each pane's own image (the
   brand wall has none). Oversized so the blur never leaves a soft transparent rim inside the stage. */
.apane__glow {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(64px) saturate(1.5) brightness(1.05);
  opacity: 0.9;
  pointer-events: none;
  transition: opacity 1.9s var(--ease-out);
}
.apane:not(.is-active) .apane__glow { opacity: 0.4; }   /* the light warms up as the photo resolves */

/* Vignette + bottom gradient on every pane */
.apane::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 35%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 22%, transparent 65%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
  z-index: 1;
}

.apane__cap {
  position: absolute;
  left: clamp(1.5rem, 4vw, 3.5rem);
  bottom: clamp(4.5rem, 9vh, 6rem);
  z-index: 3;
  display: grid;
  gap: 0.55rem;
  max-width: 38ch;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out) 0.15s, transform 0.7s var(--ease-out) 0.15s;
}
.apane.is-active .apane__cap {
  opacity: 1;
  transform: translateY(0);
}
.apane__cap-num {
  font-family: var(--ff-num);
  font-size: 0.625rem;
  letter-spacing: 0.5em;
  background: var(--grad-gold-shine);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.apane__cap-label {
  font-family: var(--ff-num);
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: 0.8;
}
.apane__cap-title {
  font-family: var(--ff-display);
  font-size: clamp(2.4rem, 5.2vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.015em;
  background: linear-gradient(180deg, var(--c-cream-hi) 0%, var(--c-gold-bright) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 4px 22px rgba(0,0,0,0.45);
}

/* Counter + progress chrome — fixed at bottom of stage */
.atmos-chrome {
  position: absolute;
  left: clamp(1.5rem, 4vw, 3.5rem);
  right: clamp(1.5rem, 4vw, 3.5rem);
  bottom: clamp(1.5rem, 3vh, 2.4rem);
  z-index: 4;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  pointer-events: none;
}
.atmos-counter {
  font-family: var(--ff-num);
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.atmos-counter__cur {
  background: var(--grad-gold-shine);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-weight: 500;
  min-width: 1.6em;
}
.atmos-counter__sep { color: var(--c-cream-lo); opacity: 0.5; }
.atmos-counter__tot { color: var(--c-cream); opacity: 0.7; }

.atmos-progress {
  position: relative;
  height: 1px;
  background: rgba(201, 169, 97, 0.14);
  overflow: hidden;
}
.atmos-progress__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, transparent, var(--c-gold-bright) 60%, var(--c-gold) 100%);
  box-shadow: 0 0 14px rgba(229, 199, 123, 0.55);
  transition: width 0.45s var(--ease-out);
}

@media (max-width: 700px) {
  .apane__cap { bottom: clamp(5.5rem, 12vh, 8rem); }
  .apane__cap-title { font-size: clamp(2rem, 9vw, 3rem); }
  /* Phones: show more of each photo instead of a tight cover-crop (owner: "zoom out a bit more",
     2026-09-24). The photo sits as a wide band mid-pane on the dark stage; no zoom-in drift. */
  .apane__bg {
    background-size: 128% auto;
    background-position-y: 50% !important;   /* inline styles carry the per-photo x focus */
    transform: none;
  }
  .apane.is-active .apane__bg { transform: none; }
}
@media (min-width: 701px) {
  /* Laptops: the WHOLE photo, always (owner 2026-09-24 → 2026-09-27). The photo sits inside a
     3vh top/bottom safe band and is fitted to whichever side hits first, so nothing is cropped
     tall or wide; dark margins fill the rest. No zoom drift — the settle used to nibble the edges. */
  /* The photo box is sized to the photo itself (aspect ratio set by app.js from the image), so the
     feathered mask below lands exactly on the photo's own edges: it melts into the black margins on
     both sides and softly top/bottom, no hard vertical cut (owner 2026-09-27, "blend into the
     black borders"). Whole photo always shown; extra-wide shots on a narrow window trim a sliver. */
  .apane__bg {
    top: 3vh; bottom: 3vh; left: 50%; right: auto;
    width: auto; max-width: 100%;
    aspect-ratio: var(--ar, 4 / 3);
    background-size: cover;
    transform: translateX(-50%);
    transition: transform 1.9s var(--ease-out), filter 1.9s var(--ease-out);
    -webkit-mask-image:
      linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent 0, #000 10%, #000 90%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-composite: intersect;
  }
  .apane.is-active .apane__bg { transform: translateX(-50%); }
  /* while out of focus the photo sits a touch larger, so it "settles" as it sharpens */
  .apane:not(.is-active) .apane__bg { transform: translateX(-50%) scale(1.035); }
  /* Lighter shade on laptops so the top and bottom of the photo stay visible; the caption sits on
     the dark side margin, so it no longer needs the heavy bottom gradient. */
  .apane::after {
    background:
      radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0,0,0,0.35) 100%),
      linear-gradient(180deg, rgba(0,0,0,0.25) 0%, transparent 14%, transparent 82%, rgba(0,0,0,0.45) 100%);
  }
}

/* Smoke transition between photos (owner 2026-09-27) ------------------------------------------
   Two things happen on every change: the outgoing photo dissolves through a blur while the next
   one clears, and a plume of smoke rolls up across the stage. Panes are hidden (not just faded)
   once out, so the blur only ever renders on the two photos crossing over. */
/* Defocus dissolve (owner 2026-09-27, "add a blurry transition"): the outgoing photo softens
   out of focus and dims while the next one resolves from a blur — 1.7 s, no hard cut anywhere. */
.apane {
  visibility: hidden;
  transition: opacity 1.7s var(--ease-out), visibility 0s linear 1.7s;
}
.apane.is-active {
  visibility: visible;
  transition: opacity 1.7s var(--ease-out), visibility 0s;
}
.apane__bg { transition: transform 5.5s var(--ease-out), filter 1.9s var(--ease-out); }
.apane:not(.is-active) .apane__bg { filter: blur(28px) saturate(0.7) brightness(0.5); }

.atmos-smoke {
  position: absolute;
  inset: -12% -8%;
  z-index: 3;                 /* above the photos and captions, below the counter */
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
}
.atmos-smoke__layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 150% 150%;
  background-position: 50% 60%;
  /* Cream-tinted fractal noise, thresholded to alpha = soft wisps, no image asset needed */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.0075 0.011' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 0.92  0 0 0 0 0.86  0 0 0 0 0.74  0 0 0 1.9 -0.62'/></filter><rect width='100%25' height='100%25' filter='url(%23s)'/></svg>");
  filter: blur(22px) contrast(1.6) brightness(0.85);
  -webkit-mask-image: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,1) 12%, rgba(0,0,0,0.55) 38%, transparent 64%);
  mask-image: radial-gradient(ellipse at 50% 60%, rgba(0,0,0,1) 12%, rgba(0,0,0,0.55) 38%, transparent 64%);
  will-change: transform, opacity;
}
.atmos-smoke__layer--2 {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='900'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='0.005 0.009' numOctaves='3' seed='19'/><feColorMatrix values='0 0 0 0 0.88  0 0 0 0 0.84  0 0 0 0 0.78  0 0 0 1.6 -0.58'/></filter><rect width='100%25' height='100%25' filter='url(%23s)'/></svg>");
  background-size: 210% 210%;
  filter: blur(36px) contrast(1.2);
  opacity: 0.7;
}
/* Real smoke clip (owner 2026-09-27, "more natural"): filmed-looking plumes on true black, so the
   screen blend keeps only the smoke. Feathered at the edges so the clip never reads as a rectangle. */
.atmos-smoke__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  /* thin amber-lit wisps (re-shot 2026-09-27): kept almost as filmed, just softened at the edges.
     Bottom-weighted mask so the smoke reads as rising from the scene, not a full-frame overlay. */
  filter: blur(0.8px) contrast(1.05);
  -webkit-mask-image: radial-gradient(ellipse 110% 95% at 50% 78%, rgba(0,0,0,1) 22%, rgba(0,0,0,0.55) 52%, transparent 82%);
  mask-image: radial-gradient(ellipse 110% 95% at 50% 78%, rgba(0,0,0,1) 22%, rgba(0,0,0,0.55) 52%, transparent 82%);
  will-change: transform, opacity;
}
/* Second copy of the clip: slower, larger, mirrored by the script, offset in time — two layers that
   never line up read as depth and motion instead of one flat piece of footage ("stale"). */
.atmos-smoke__video--2 { opacity: 0.5; filter: blur(2.5px) contrast(0.95); }
.atmos-smoke.has-video .atmos-smoke__video { display: block; }
.atmos-smoke.has-video .atmos-smoke__layer,
.atmos-smoke.has-video .atmos-smoke__anim { display: none; }
.atmos-smoke.is-mirrored .atmos-smoke__video,
.atmos-smoke.is-mirrored .atmos-smoke__anim { transform: scaleX(-1); }

/* No-video fallback: the same smoke as an animated image with transparency */
.atmos-smoke__anim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  /* the animated copy loses the amber rim light in its alpha; warm it back to match the clip */
  filter: blur(0.8px) contrast(1.05) sepia(0.45) saturate(1.3) brightness(0.92);
  -webkit-mask-image: radial-gradient(ellipse at 50% 55%, rgba(0,0,0,1) 30%, rgba(0,0,0,0.6) 60%, transparent 86%);
  mask-image: radial-gradient(ellipse at 50% 55%, rgba(0,0,0,1) 30%, rgba(0,0,0,0.6) 60%, transparent 86%);
  will-change: transform, opacity;
}
.atmos-smoke.has-anim:not(.has-video) .atmos-smoke__anim { display: block; }
.atmos-smoke.has-anim:not(.has-video) .atmos-smoke__layer { display: none; }

/* Brand wall — pane 12 (owner 2026-09-27). Cream marks on the site's black inside a gold hairline
   frame; same defocus settle as the photos; logos fade up one after another once the pane is in. */
.apane__wall {
  position: absolute;
  top: 3vh; bottom: 3vh; left: 21vw; right: 7vw;   /* clear of the caption on the left */
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(201,169,97,0.07), transparent 70%),
    linear-gradient(180deg, #0d0b09 0%, #060504 100%);
  border: 1px solid rgba(201, 169, 97, 0.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6), 0 40px 90px -40px rgba(0,0,0,0.9);
  transition: transform 1.9s var(--ease-out), filter 1.9s var(--ease-out);
  z-index: 0;
}
.apane:not(.is-active) .apane__wall { filter: blur(28px) brightness(0.5); transform: scale(1.035); }
.apane__wall-grid {
  position: absolute;
  inset: clamp(1.2rem, 4vh, 3rem) clamp(1.2rem, 3vw, 3rem);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));   /* minmax(0,…): the marks' natural size must never grow a row */
}
.apane__wall-grid span {
  position: relative;
  min-width: 0; min-height: 0; overflow: hidden;
  border-right: 1px solid rgba(201, 169, 97, 0.12);
  border-bottom: 1px solid rgba(201, 169, 97, 0.12);
}
.apane__wall-grid span:nth-child(6n) { border-right: 0; }
.apane__wall-grid span:nth-child(n+13) { border-bottom: 0; }
.apane__wall-grid img {
  /* absolutely placed inside the cell: percentage limits then resolve against the cell itself
     (a grid child's % height came out indefinite on phones and square marks overflowed the row) */
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto; height: auto;
  max-width: 80%;
  max-height: 72%;
  opacity: 0;
  transform: translateY(8px);
  filter: drop-shadow(0 0 14px rgba(201, 169, 97, 0.12));
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms + 0.5s);
}
.apane.is-active .apane__wall-grid img { opacity: 0.92; transform: translateY(0); }
@media (max-width: 700px) {
  .apane__wall { top: 14vh; bottom: 26vh; left: 4vw; right: 4vw; }   /* below the nav, above the caption */
  .apane:not(.is-active) .apane__wall { filter: blur(20px) brightness(0.5); }
  .apane__wall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); inset: 0.8rem; }
  .apane__wall-grid img { max-width: 78%; max-height: 70%; }
  .apane__wall-grid span:nth-child(6n) { border-right: 1px solid rgba(201, 169, 97, 0.12); }
  .apane__wall-grid span:nth-child(3n) { border-right: 0; }
  .apane__wall-grid span:nth-child(n+13) { border-bottom: 1px solid rgba(201, 169, 97, 0.12); }
  .apane__wall-grid span:nth-child(n+16) { border-bottom: 0; }
}

@media (max-width: 700px) {
  /* phones: a clearly visible defocus too, just a little lighter on the GPU than the laptop one */
  .apane:not(.is-active) .apane__bg { filter: blur(20px) saturate(0.7) brightness(0.5); }
  /* the ambient glow above and below the photo band: same look, a smaller blur for the phone GPU */
  .apane__glow { filter: blur(40px) saturate(1.5) brightness(1.05); }
  .atmos-smoke__layer { filter: blur(14px) contrast(1.3); }
  .atmos-smoke__layer--2 { filter: blur(22px) contrast(1.2); }
}


/* ============================================================
   ACT VIII — VISIT
   ============================================================ */
.act--visit {
  background: linear-gradient(180deg, var(--c-ink) 0%, var(--c-olive-ink) 50%, var(--c-ink) 100%);   /* olive depth (2026-09-30) */
  /* one-screen fit (owner request 2026-09-03): section = one viewport, content centred */
  padding: clamp(3rem, 6vh, 5rem) 0;
  min-height: 100vh;
  display: grid;
  align-content: center;
  position: relative;
}
.act--visit::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.3) 50%, transparent);
}
.visit__head {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--pad-page) clamp(1.5rem, 3vh, 2.5rem);
  display: grid; gap: 1rem;
}
.visit__title {
  /* one line, two-tone — "BEGIN BY" cream, "VISITING" gold (owner reference 2026-09-03) */
  font-size: clamp(2.5rem, 4.6vw, 5.75rem);
  font-family: var(--ff-display);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--c-cream-hi);
}
.visit__title span { display: inline; }
.visit__title-mark {
  background: var(--grad-gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.visit__grid {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--pad-page);
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.2rem;
}
@media (max-width: 900px) { .visit__grid { grid-template-columns: 1fr; grid-template-rows: auto; } }

.visit__card {
  position: relative;
  background: var(--grad-card-olive);
  border-radius: 6px;
  padding: 2rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
  transition: background 0.4s, transform 0.4s var(--ease-out);
  border: 1px solid transparent;
  background-clip: padding-box;
  overflow: hidden;
}
.visit__card::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 6px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(201, 169, 97, 0.25), rgba(201, 169, 97, 0.05) 50%, rgba(201, 169, 97, 0.2) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  transition: background 0.4s;
}
.visit__card:hover {
  background: linear-gradient(160deg, #15261A 0%, var(--c-bg-3) 55%);
  transform: translateY(-3px);
}
.visit__card:hover::before {
  background: var(--grad-gold);
}
.visit__card-label {
  font-family: var(--ff-num);
  font-size: 0.625rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  background: var(--grad-gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.visit__card-text {
  font-family: var(--ff-display);
  font-size: 1.6rem;
  color: var(--c-cream-hi);
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: none;
}
.visit__card-text a { transition: color 0.2s; border-bottom: 1px solid rgba(201, 169, 97, 0.45); padding-bottom: 1px; }
.visit__card-text a:hover { color: var(--c-gold-bright); border-bottom-color: var(--c-gold); }
.visit__card-text .muted { font-style: italic; color: var(--c-cream-lo); font-size: 1.15rem; }
.visit__card-link {
  font-family: var(--ff-num);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--grad-gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-flex; gap: 0.5rem; align-items: center;
}
.visit__card-link em { font-style: normal; transition: transform 0.3s; }
.visit__card-link:hover em { transform: translate(2px, -2px); }
.visit__card-socials {
  display: flex; gap: 1.1rem; /* real app logos, bigger + roomier (client request 2026-09-02) */
  margin-top: 1.4rem;
}
.visit__card-socials svg { width: 24px; height: 24px; display: block; }
.visit__card-socials a {
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border: 1px solid rgba(201, 169, 97, 0.3);
  border-radius: 999px;
  color: var(--c-cream);
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.visit__card-socials a:hover {
  background: var(--grad-gold-shine);
  color: var(--c-ink);
  border-color: var(--c-gold-bright);
}

.visit__card--map {
  grid-row: span 2;
  padding: 0;
  overflow: hidden;
  position: relative;
  min-height: clamp(320px, 52vh, 520px);
  background: #14110b;
  text-decoration: none;
  display: block;
}
.visit__map-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.85) contrast(1.15) brightness(0.55) hue-rotate(-8deg);
  transition: filter 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  pointer-events: none;
}
.visit__card--map:hover .visit__map-frame {
  filter: grayscale(0.4) contrast(1.1) brightness(0.75) hue-rotate(0);
  transform: scale(1.02);
}

/* Branded pin overlay (the iframe pin is generic; we add YUN's mark) */
.visit__map-pin {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -100%);
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.75));
}
.visit__map-pin::after {
  content: "";
  position: absolute;
  bottom: -10px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px; height: 14px;
  background: var(--c-gold-bright);
  z-index: -1;
  border-radius: 0 0 3px 0;
  box-shadow: 0 4px 14px rgba(229,199,123,0.55);
}
.visit__map-pin-glyph {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFE9A8 0%, #C9A961 60%, #8B6914 100%);
  color: var(--c-ink);
  font-family: var(--ff-display);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  box-shadow:
    0 0 0 3px rgba(20, 17, 11, 0.85),
    0 0 0 4px rgba(229,199,123,0.55),
    0 12px 30px rgba(0,0,0,0.7);
}
.visit__map-pin-mark {
  font-family: var(--ff-num);
  font-size: 0.625rem;
  letter-spacing: 0.4em;
  color: var(--c-cream-hi);
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.25rem 0.55rem;
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 2px;
  margin-bottom: 0.35rem;
}

.visit__map-foot {
  position: absolute;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.85rem;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 169, 97, 0.25);
  border-radius: 4px;
  font-family: var(--ff-num);
  font-size: 0.625rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  pointer-events: none;
}
.visit__map-foot-coords { color: var(--c-cream); opacity: 0.8; }
.visit__map-foot-cta {
  background: var(--grad-gold-shine);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* Vignette for atmosphere */
.visit__card--map::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 30%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.2) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 900px) {
  .visit__card--map { min-height: 360px; grid-row: span 1; }
}

.visit__card--cta {
  background: var(--grad-gold-shine);
  background-size: 200% 200%;
  background-position: 0% 0%;
  color: var(--c-ink);
  display: grid; grid-template-rows: auto 1fr auto;
  gap: 0.75rem;
  box-shadow: 0 12px 40px -10px rgba(201, 169, 97, 0.45),
              inset 0 1px 0 rgba(255, 233, 168, 0.5);
  transition: background-position 0.6s var(--ease-out), transform 0.4s var(--ease-out);
}
.visit__card--cta::before { display: none; }
.visit__card--cta:hover {
  background-position: 100% 100%;
  transform: translateY(-3px);
}
.visit__card--cta .visit__card-label {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--c-mahogany);
}
.visit__cta-text {
  font-family: var(--ff-display);
  font-size: clamp(1.8rem, 3.2vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--c-ink);
}
.visit__cta-text em { font-style: normal; transition: transform 0.3s; display: inline-block; }
.visit__card--cta:hover .visit__cta-text em { transform: translateX(6px); }
.visit__cta-sub {
  font-family: var(--ff-num);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-mahogany);
  opacity: 0.75;
}


/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  background: linear-gradient(180deg, var(--c-ink) 0%, var(--c-olive-ink) 100%);   /* settles into green-black (2026-09-30) */
  padding: clamp(4rem, 8vh, 6rem) var(--pad-page) 2rem;
  overflow: hidden;
  position: relative;
}
.foot::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold) 50%, transparent);
  opacity: 0.4;
}
.foot__giant {
  display: grid;
  font-family: var(--ff-display);
  font-size: clamp(3rem, 14vw, 14rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  margin-bottom: 3rem;
  -webkit-text-stroke: 1px rgba(201, 169, 97, 0.22);
  color: transparent;
  text-align: center;
}
.foot__giant span { display: block; }
.foot__row {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(201, 169, 97, 0.12);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--ff-num);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-cream-lo);
}
.foot__credit {
  background: var(--grad-gold-shine);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ============================================================
   SCROLL-IN ANIMATIONS — element states
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(30px); }
[data-reveal-mask] { opacity: 0; clip-path: inset(0 0 100% 0); }


/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .marquee__track { animation: none; }
  [data-reveal], [data-reveal-mask], .hero__pre .line, .hero__title .char, .hero__lede, .hero__actions {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
}


/* ============================================================
   MOBILE AUTOPLAY HARDENING
   ============================================================ */
/* Decorative videos must never swallow taps or show native controls
   (iOS Low Power Mode paints a big play button on blocked autoplay) */
.hero__video, .expert__bg, .fv { pointer-events: none; }
video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

/* Fallback: if the animation engine never arrives (slow 4G), force all
   intro-hidden wording visible instead of leaving a blank hero */
html.no-gsap [data-reveal], html.no-gsap [data-reveal-mask],
html.no-gsap .hero__pre .line, html.no-gsap .hero__title .char,
html.no-gsap .hero__lede, html.no-gsap .hero__actions {
  opacity: 1 !important; transform: none !important; clip-path: none !important;
}
html.no-gsap #loader { display: none !important; }

/* ---- Brand logos are buttons → pop-up card (2026-09-02) ---- */
.brand { background: none; border: 0; cursor: pointer; color: inherit; font: inherit; }
.brand:focus-visible { outline: 1px solid var(--c-gold); outline-offset: 6px; }
.marquee:hover .marquee__track { animation-play-state: paused; }

.bmodal { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 1.5rem; }
.bmodal[hidden] { display: none; }
.bmodal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.bmodal__dialog {
  position: relative;
  width: min(92vw, 760px);
  max-height: min(86vh, 640px);
  overflow: auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  background: linear-gradient(180deg, rgba(20, 23, 15, 0.98), rgba(0, 0, 0, 0.98));
  border: 1px solid rgba(201, 169, 97, 0.4);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7);
  animation: bmodal-in 0.45s var(--ease-out);
}
@keyframes bmodal-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.bmodal__media { display: grid; place-items: center; padding: 2.5rem; background: var(--c-bg-2); min-height: 260px; }
.bmodal__media img { max-width: 100%; max-height: 260px; object-fit: contain; }
.bmodal__media img.is-logo {
  height: 150px; width: auto;
  filter: brightness(0) invert(89%) sepia(47%) saturate(556%) hue-rotate(2deg) brightness(106%) contrast(94%);
}
.bmodal__body { padding: 2.5rem 2.5rem 2.5rem 2rem; display: grid; gap: 1rem; align-content: center; }
.bmodal__title {
  font-family: var(--ff-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; margin: 0;
  background: var(--grad-gold-shine); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bmodal__text { font-family: var(--ff-body); font-size: 0.95rem; line-height: 1.6; color: var(--c-cream); margin: 0; }
.bmodal__close {
  position: absolute; top: 0.8rem; right: 0.9rem; z-index: 2;
  width: 3rem; height: 3rem; border-radius: 50%;
  background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(201, 169, 97, 0.5); color: var(--c-gold-bright);
  font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
  transition: background 0.3s, transform 0.3s;
}
.bmodal__close:hover { background: rgba(201, 169, 97, 0.2); transform: rotate(90deg); }
@media (max-width: 700px) {
  .bmodal__dialog { grid-template-columns: 1fr; max-height: 88vh; }
  .bmodal__media { min-height: 180px; padding: 2rem; }
  .bmodal__media img.is-logo { height: 100px; }
  .bmodal__body { padding: 1.6rem; }
}

/* Standalone menu page (2026-09-02) — clear the fixed nav, keep the act's own rhythm */
.page-menu main { min-height: 100vh; }
.act--menu-page { padding-top: clamp(8rem, 18vh, 12rem); }