/* ============================================================
   GOLDEN FLOWER VEGGIE — brand system v2
   Real photography · editorial type · scroll-driven motion
   Palette: botanical green · warm cream · marigold gold
   Type: Fraunces (display) · Outfit (body)
   ============================================================ */

:root {
  --green-950: #0c1f15;
  --green-900: #12291e;
  --green-800: #173a2b;
  --green-500: #3f7d54;

  --cream-50: #faf6ec;
  --cream-100: #f4ecda;
  --cream-300: #e6d5b0;

  --gold-300: #f2d38c;
  --gold-400: #e8b64c;
  --gold-500: #d9a441;
  --gold-600: #b9862f;
  --gold-700: #8a6423;   /* text-on-cream gold: ≥4.5:1 on --cream-50 (the lighter golds fail contrast on light bg) */

  --terra-500: #c04b2f;

  --ink: var(--green-950);
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Lexend", system-ui, sans-serif;  /* Outfit ships no Vietnamese glyphs */

  --pad-x: clamp(24px, 5vw, 80px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--font-body);
  font-weight: 340;
  color: var(--ink);
  background: var(--cream-50);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 440; line-height: 1.02; letter-spacing: -0.015em; }
h2 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }
h1 em, h2 em, blockquote em { font-style: italic; color: var(--gold-500); }

.sec-label {
  font-size: .74rem; font-weight: 620; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-700); margin-bottom: 22px;
}
.sec-label--gold { color: var(--gold-400); }

.text-link { color: var(--green-500); font-weight: 560; text-decoration: none; font-size: .95rem; }
.text-link:hover { color: var(--gold-700); }

/* gold emphasis reads gold-500 on the dark sections; on cream it needs the darker gold to stay legible */
.manifesto-text .mword, .story-text h2 em, .menu-head h2 em, .review p em, .social-copy h2 em { color: var(--gold-700); }

/* ---------- grain ---------- */
.grain {
  position: fixed; inset: -50%; z-index: 2000; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 3000;
  background: var(--green-950); color: var(--cream-50);
  display: grid; place-items: center;
}
.loader-inner { text-align: center; padding: 0 24px; }
.loader-mark { width: 84px; height: 84px; margin: 0 auto 20px; }
.loader-word {
  font-family: var(--font-display); font-style: italic; font-size: 1.6rem; letter-spacing: .02em;
  color: var(--cream-50); margin: 0;
  animation: word-in .55s .35s ease backwards;
}
.loader-sub {
  margin: 7px 0 0;
  font-family: var(--font-body); font-size: .68rem; font-weight: 560;
  letter-spacing: .22em; text-transform: uppercase; color: var(--gold-500);
  animation: word-in .55s .6s ease backwards;
}

/* ------------------------------------------------------------------
   The intro must NEVER need an animation in order to be VISIBLE.
   Previously every part started hidden (opacity 0 / scale 0) and relied
   on a keyframe to reveal it — so when the loader was dismissed before
   the sequence finished, visitors got a green screen with no mark and no
   name. Measured: at 1.0s the bowl and the wordmark were both still at
   opacity 0, and the loader was gone by 1.3s, while the word alone
   needed 1.55s to finish fading in. It could never appear.

   So: the RESTING state is the finished state, and each keyframe animates
   FROM hidden with fill-mode `backwards` (which covers the delay only).
   Drop the animation, throttle it, cut it short — the logo and the name
   are still there. The whole sequence now lands by ~1.25s.
   ------------------------------------------------------------------ */
@keyframes word-in { from { opacity: 0; transform: translateY(10px); } }

.loader-mark .bl-bowl { animation: rise .40s cubic-bezier(.22, 1, .36, 1) backwards; }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } }

.loader-mark .bl-stem { stroke-dasharray: 17; animation: draw .35s .28s ease-out backwards; }
@keyframes draw { from { stroke-dashoffset: 17; } }

.loader-mark .bl-leaf {
  transform-origin: 47px 57px;
  animation: pop-leaf .30s .50s cubic-bezier(.34, 1.5, .5, 1) backwards;
}
@keyframes pop-leaf { from { transform: scale(0); } }

.loader-mark .bp {
  transform-origin: 48px 48px;
  animation: bloom .55s calc(.45s + var(--i) * 60ms) cubic-bezier(.34, 1.45, .5, 1) backwards;
}
@keyframes bloom { from { transform: scale(0) rotate(-30deg); } }

.loader-mark .bloom-ring { stroke-dasharray: 51; animation: ring-draw .45s .80s ease-out backwards; }
@keyframes ring-draw { from { stroke-dashoffset: 51; } }

.loader-mark .bloom-dot {
  transform-origin: 48px 48px;
  animation: pop-dot .30s .95s ease-out backwards;
}
@keyframes pop-dot { from { transform: scale(0); } }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px var(--pad-x);
  color: var(--cream-50);
  transition: background .3s ease, color .3s ease, padding .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled {
  background: rgba(250, 246, 236, .88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--ink);
  padding-block: 12px;
  box-shadow: 0 1px 0 rgba(12, 31, 21, .08);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { width: 38px; height: 38px; color: var(--gold-500); flex: none; will-change: transform; }
.brand:hover .brand-mark { filter: drop-shadow(0 0 10px rgba(217,164,65,.55)); }
.brand-name { font-family: var(--font-display); font-size: 1.22rem; font-weight: 520; line-height: 1.05; display: block; }
.brand-sub { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; opacity: .66; display: block; margin-top: 2px; }

.site-nav { display: flex; gap: clamp(18px, 3vw, 40px); }
.site-nav a {
  text-decoration: none; font-weight: 460; font-size: .92rem;
  display: inline-flex; gap: 5px; align-items: baseline; opacity: .92;
  white-space: nowrap;
  transition: opacity .2s;
}
.site-nav a sup { font-size: .58rem; color: var(--gold-500); font-weight: 620; }
.site-nav a:hover { opacity: 1; color: var(--gold-500); }
.site-header.is-scrolled .site-nav a:hover { color: var(--gold-700); }
/* only shown inside the mobile menu overlay — must out-rank `.site-nav a` above */
.site-nav a.nav-order { display: none; }

.header-actions { display: flex; align-items: center; gap: 14px; }
.btn-pill {
  position: relative; overflow: hidden; isolation: isolate;
  font-weight: 560; font-size: .86rem; text-decoration: none;
  padding: 11px 22px; border-radius: 999px;
  border: 1.5px solid var(--gold-500); color: inherit;
  white-space: nowrap;
  transition: color .3s var(--ease-out), transform .25s var(--ease-out);
}
/* gold sweeps in from the left, like a brushstroke */
.btn-pill::before {
  content: ""; position: absolute; inset: -1px; z-index: -1;
  background: linear-gradient(100deg, var(--gold-400), var(--gold-500));
  transform: translateX(-101%) skewX(-12deg) scaleX(1.2);
  transform-origin: left;
  transition: transform .38s var(--ease-out);
}
.btn-pill:hover { color: var(--green-950); transform: translateY(-2px); }
.btn-pill:hover::before { transform: translateX(0) skewX(0) scaleX(1.2); }
.btn-pill--gold { background: var(--gold-500); color: var(--green-950); }
.btn-pill--gold::before { background: linear-gradient(100deg, var(--gold-300), var(--gold-400)); }

/* language toggle */
.lang-toggle { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.lang-btn {
  background: none; border: 0; cursor: pointer; padding: 4px 5px;
  font-family: var(--font-body); font-size: .82rem; font-weight: 620; letter-spacing: .05em;
  color: inherit; opacity: .5; border-radius: 6px;
  transition: opacity .2s ease, color .2s ease;
}
.lang-btn:hover { opacity: .85; }
.lang-btn.is-active { opacity: 1; color: var(--gold-500); }
.site-header.is-scrolled .lang-btn.is-active { color: var(--gold-700); }
.lang-sep { opacity: .32; font-size: .75rem; }

.nav-toggle { color: inherit; display: none; flex-direction: column; gap: 6px; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle span { width: 26px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s var(--ease-out); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 120px var(--pad-x) 28px;
  color: var(--cream-50);
  overflow: hidden;
}
/* the fallback colour lives on the MEDIA layer, never on .hero — .hero-media is a
   negative-z-index child, so a background on .hero would paint on top of the video */
.hero-media { position: absolute; inset: 0; z-index: -1; background: var(--green-950); }
.hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-scrim {
  position: absolute; inset: 0;
  /* neutral, light-handed — protect the text zones, let the footage breathe */
  background: linear-gradient(to top, rgba(10,10,9,.82) 0%, rgba(10,10,9,.22) 42%, rgba(10,10,9,.02) 65%, rgba(10,10,9,.28) 100%);
}
.hero-kicker {
  font-size: .78rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase;
  color: var(--gold-400); margin-bottom: 18px;
}
.hero-title {
  font-size: clamp(3.2rem, 10.5vw, 9.2rem);
  font-weight: 400; line-height: .98; letter-spacing: -0.02em;
  max-width: 12ch;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span { display: block; transform: translateY(110%); }
.hero-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 30px;
  margin-top: clamp(28px, 4vw, 54px); flex-wrap: wrap;
}
.hero-lede { max-width: 46ch; font-size: clamp(1rem, 1.4vw, 1.18rem); color: rgba(250,246,236,.85); }
.hero-meta { display: flex; align-items: center; gap: 12px; font-size: .92rem; color: rgba(250,246,236,.75); white-space: nowrap; }
.stars { color: var(--gold-400); letter-spacing: 2px; }
.stars i { opacity: .45; font-style: normal; }
.hero-bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 30px; padding-top: 18px;
  border-top: 1px solid rgba(250,246,236,.2);
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(250,246,236,.65);
}
.scroll-cue { display: inline-flex; align-items: center; gap: 10px; }
.scroll-cue i {
  width: 1px; height: 34px; background: var(--gold-400); display: inline-block;
  animation: cue 1.8s var(--ease-out) infinite;
  transform-origin: top;
}
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ============================================================
   TICKER
   ============================================================ */
/* hybrid strips: CSS keyframes give an unstoppable compositor-driven base
   drift; JS layers scroll-velocity shove + shear on the wrapper element */
.ticker { overflow: hidden; background: var(--gold-500); color: var(--green-950); padding: 13px 0; will-change: transform; }
.ticker-track {
  display: flex; width: max-content;
  font-family: var(--font-display); font-style: italic; font-size: 1.1rem;
  animation: strip-ltr 26s linear infinite;
}
.ticker-track .strip-half { display: flex; gap: 40px; padding-right: 40px; flex: none; align-items: center; }
.ticker-track i { font-style: normal; opacity: .55; }
/* each .strip-half includes its own trailing gap, so one period is EXACTLY
   50% of the track — the wrap lands pixel-perfect and the belt never snaps */
@keyframes strip-ltr { to { transform: translate3d(-50%, 0, 0); } }
@keyframes strip-rtl { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto { padding: clamp(90px, 12vw, 170px) var(--pad-x); max-width: 1250px; margin-inline: auto; }
.manifesto-label { font-size: .78rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 620; color: var(--gold-700); margin-bottom: 34px; }
.manifesto-label span { margin-left: 10px; color: var(--ink); }
.manifesto-text {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.7rem, 3.9vw, 3.4rem); line-height: 1.22; letter-spacing: -0.01em;
}
.manifesto-text .mword { color: var(--gold-700); }   /* dark gold: the light gold fails contrast on cream */
.manifesto-text .word { opacity: .16; transition: opacity .3s ease; }
.manifesto-text .word.on { opacity: 1; }
.minline {
  display: inline-block; width: clamp(70px, 8vw, 130px); height: clamp(44px, 5vw, 78px);
  border-radius: 999px; overflow: hidden; vertical-align: middle;
  margin: 0 6px; transform: rotate(-3deg);
  box-shadow: 0 8px 24px rgba(12,31,21,.2);
}
.minline ~ .minline { transform: rotate(2.5deg); }   /* structure-safe: the word-split wraps text in spans, breaking nth-of-type */
.minline img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   SIGNATURE — horizontal scroll
   ============================================================ */
.signature { background: var(--green-950); color: var(--cream-50); }
.sig-pin { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 90px 0 60px; }
.sig-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: 0 var(--pad-x); margin-bottom: clamp(30px, 4vh, 60px);
}
.sig-head .sec-label { color: var(--gold-400); margin-bottom: 12px; }
.sig-progress { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.sig-hint { font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(250,246,236,.5); }
.sig-bar-track {
  width: 160px; height: 2px; border-radius: 2px;
  background: rgba(250,246,236,.18); overflow: hidden; display: block;
}
.sig-bar {
  display: block; width: 100%; height: 100%;
  background: var(--gold-400);
  transform: scaleX(0); transform-origin: left;
}

.sig-track { display: flex; gap: clamp(20px, 2.5vw, 40px); padding: 0 var(--pad-x); will-change: transform; width: max-content; }
.sig-card {
  position: relative; flex: none;
  width: clamp(300px, 34vw, 460px);
}
.sig-num {
  position: absolute; top: -14px; left: -6px; z-index: 2;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem); color: var(--gold-500);
}
.sig-img {
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
/* GSAP owns the img transform (reveal zoom), so do the hover lift on the CONTAINER — no conflict */
.sig-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.sig-card:hover .sig-img { transform: scale(1.025); box-shadow: 0 30px 70px rgba(0,0,0,.55); }
.sig-info { padding: 20px 4px 0; }
.sig-info h3 { font-size: clamp(1.3rem, 1.9vw, 1.7rem); margin-bottom: 8px; }
.sig-info p { font-size: .92rem; color: rgba(250,246,236,.68); max-width: 38ch; }

.sig-card--cta {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 26px;
  padding: 40px;
  border: 1px solid rgba(217,164,65,.4); border-radius: 14px;
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.25;
  color: var(--gold-300);
}

/* ============================================================
   STORY
   ============================================================ */
.story { padding: clamp(100px, 13vw, 190px) var(--pad-x); }
.story-grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(50px, 7vw, 110px); max-width: 1360px; margin-inline: auto;
}
.story-text { position: sticky; top: 110px; align-self: start; }
.story-p { margin-top: 22px; font-size: 1.06rem; color: rgba(12,31,21,.78); max-width: 46ch; }
.story-p strong { color: var(--ink); font-weight: 560; }
.story-list { list-style: none; margin-top: 38px; border-top: 1px solid rgba(12,31,21,.16); }
.story-list li {
  display: flex; align-items: baseline; gap: 20px;
  padding: 16px 0; border-bottom: 1px solid rgba(12,31,21,.16);
  font-size: .98rem;
}
.story-list li span {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.5rem; color: var(--gold-700); min-width: 92px;
}

.story-media { display: flex; flex-direction: column; gap: clamp(26px, 3vw, 48px); }
.sm-item { position: relative; border-radius: 14px; overflow: hidden; box-shadow: 0 20px 50px rgba(12,31,21,.22); }
.sm-item img, .sm-item video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.sm-1 { width: 78%; align-self: flex-start; rotate: -1.2deg; }
.sm-2 { width: 68%; align-self: flex-end; rotate: 1.4deg; margin-top: -6%; }
.sm-3 { width: 74%; align-self: flex-start; rotate: -0.8deg; margin-top: -4%; }
.sm-item figcaption {
  position: absolute; left: 14px; bottom: 12px;
  font-family: var(--font-display); font-style: italic; font-size: .95rem;
  color: var(--cream-50); text-shadow: 0 2px 12px rgba(0,0,0,.6);
}

/* ============================================================
   KITCHEN BAND
   ============================================================ */
.kitchen {
  position: relative; min-height: 88vh;
  display: grid; place-items: center;
  overflow: hidden; color: var(--cream-50);
}
/* same rule as .hero: the fallback colour goes on the media layer, not the section */
.kitchen-media { position: absolute; inset: -12% 0; z-index: -1; will-change: transform; background: var(--green-900); }
.kitchen-media video { width: 100%; height: 100%; object-fit: cover; }
.kitchen-scrim {
  position: absolute; inset: 0;
  background: radial-gradient(75% 65% at 50% 50%, rgba(10,10,9,.5) 0%, rgba(10,10,9,.18) 100%);
}
.kitchen-quote p, .kitchen-quote cite { text-shadow: 0 2px 30px rgba(0,0,0,.55); }
.kitchen-quote { text-align: center; padding: 60px var(--pad-x); }
.kitchen-quote p {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 6rem); line-height: 1.04; letter-spacing: -0.015em;
}
.kitchen-quote cite {
  display: block; margin-top: 28px; font-style: normal;
  font-size: .82rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-300);
}

/* ============================================================
   MENU
   ============================================================ */
.menu { position: relative; padding: clamp(100px, 13vw, 190px) var(--pad-x); max-width: 1150px; margin-inline: auto; }
.menu-head { margin-bottom: clamp(40px, 5vw, 70px); }
.menu-note { margin-top: 18px; font-size: .92rem; color: rgba(12,31,21,.6); }

.menu-cat {
  font-family: var(--font-body); font-size: .76rem; font-weight: 640;
  letter-spacing: .26em; text-transform: uppercase;
  /* gold-700, not the original gold-600 — 600 fails contrast on cream */
  color: var(--gold-700);
  margin: 46px 0 8px;
}
.menu-cat:first-child { margin-top: 0; }

.menu-row {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 13px 4px; text-decoration: none;
  border-bottom: 1px solid rgba(12,31,21,.14);
  transition: padding .25s var(--ease-out), background .25s;
}
.menu-row:hover { padding-left: 14px; }
.mr-name {
  font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.55rem);
  font-weight: 440; transition: color .2s;
}
.menu-row:hover .mr-name { color: var(--gold-700); }
.mr-tag {
  white-space: nowrap;
  font-family: var(--font-body); font-style: normal; font-size: .64rem; font-weight: 620;
  letter-spacing: .12em; text-transform: uppercase;
  color: #2f6140; background: rgba(63,125,84,.1);
  border-radius: 999px; padding: 3px 10px; margin-left: 10px; vertical-align: middle;
}
.mr-tag--spicy { color: #9c3a22; background: rgba(192,75,47,.1); }
.mr-en {
  display: block; font-family: var(--font-body); font-size: .74rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold-700);
  margin-top: 3px;
}
.menu-row { align-items: flex-start; }
.mr-price { padding-top: 2px; }
.mr-dots { flex: 1; border-bottom: 1.5px dotted rgba(12,31,21,.28); transform: translateY(-5px); }
.mr-price { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--gold-700); }
.mr-price::before { content: "$"; font-size: .78em; }

.menu-preview {
  position: fixed; z-index: 90; width: 250px; height: 320px;
  border-radius: 12px; overflow: hidden; pointer-events: none;
  box-shadow: 0 30px 70px rgba(12,31,21,.4);
  opacity: 0; transform: scale(.85) rotate(3deg);
  transition: opacity .28s var(--ease-out), transform .28s var(--ease-out);
}
.menu-preview.on { opacity: 1; transform: scale(1) rotate(0deg); }
.menu-preview img { width: 100%; height: 100%; object-fit: cover; }
/* branded card for house-made drinks that have no photo — keeps hover consistent */
.mp-fallback {
  display: none; width: 100%; height: 100%;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(150deg, var(--green-800), var(--green-950));
}
.menu-preview.is-fallback img { display: none; }
.menu-preview.is-fallback .mp-fallback { display: flex; }
.mp-fallback svg { width: 74px; height: 74px; }
.mp-fallback span {
  font-family: var(--font-display); font-style: italic; font-size: 1.15rem;
  color: var(--gold-300); letter-spacing: .02em;
}

/* ============================================================
   ORDER ONLINE
   ============================================================ */
.order { background: var(--green-900); color: var(--cream-50); padding: clamp(70px, 9vw, 120px) var(--pad-x); }
.order-inner {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 90px); max-width: 1360px; margin-inline: auto; align-items: center;
}
.order-p { margin-top: 20px; max-width: 42ch; color: rgba(250,246,236,.78); font-size: 1.02rem; }
.order-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.order-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 22px 24px; border-radius: 14px; text-decoration: none;
  border: 1px solid rgba(217,164,65,.35); background: rgba(250,246,236,.04);
  transition: transform .25s var(--ease-out), border-color .25s, background .25s;
}
.order-card:hover { transform: translateY(-3px); border-color: var(--gold-400); background: rgba(217,164,65,.08); }
.oc-name { font-family: var(--font-display); font-size: 1.35rem; }
.oc-sub { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-300); }
.order-card--pickup { background: var(--gold-500); border-color: var(--gold-500); color: var(--green-950); }
.order-card--pickup:hover { background: var(--gold-400); border-color: var(--gold-400); }
.order-card--pickup .oc-sub { color: rgba(12,31,21,.75); }

/* ============================================================
   GALLERY MARQUEE
   ============================================================ */
/* film strips: base drift via CSS, shear + shove via JS on the row */
.gallery { overflow: hidden; padding: 10px 0 0; background: var(--cream-100); }
.gal-row { padding: 12px 0; overflow: hidden; will-change: transform; }
.gal-track { display: flex; width: max-content; }
.gal-track .strip-half { display: flex; gap: 18px; padding-right: 18px; flex: none; }
.gal-row--ltr .gal-track { animation: strip-ltr 48s linear infinite; }
.gal-row--rtl .gal-track { animation: strip-rtl 54s linear infinite; }
/* hold the strip still while hovering so the zoom actually lands on the target */
.gal-row:hover .gal-track { animation-play-state: paused; }
.gal-track img {
  width: clamp(220px, 24vw, 340px); height: clamp(150px, 16vw, 230px);
  object-fit: cover; border-radius: 12px; flex: none;
  transition: transform .5s var(--ease-out);
}
.gal-track img:hover { transform: scale(1.045); }

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews { padding: clamp(100px, 13vw, 180px) var(--pad-x); max-width: 1000px; margin-inline: auto; text-align: center; }
.review-stack { display: grid; gap: clamp(50px, 6vw, 80px); margin-top: clamp(36px, 5vw, 60px); }
.review p {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.6rem, 3.6vw, 3rem); line-height: 1.18; letter-spacing: -0.01em;
}
.review cite {
  display: block; margin-top: 18px; font-style: normal;
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-700);
}
.review-links { margin-top: clamp(50px, 6vw, 80px); font-size: .94rem; color: rgba(12,31,21,.6); }
.review-links a { color: var(--green-500); font-weight: 560; }

/* ============================================================
   SOCIAL — meet Mai
   ============================================================ */
.social { background: var(--cream-100); padding: clamp(80px, 10vw, 140px) var(--pad-x); overflow: hidden; }
.social-inner {
  display: flex; align-items: center; gap: clamp(40px, 6vw, 90px);
  max-width: 1000px; margin-inline: auto;
}
.social-mascot {
  width: clamp(180px, 24vw, 300px); flex: none;
  filter: drop-shadow(0 18px 34px rgba(12,31,21,.18));
  animation: mai-bob 7s ease-in-out infinite;
  transform-origin: 50% 60%;
}
@keyframes mai-bob {
  0%, 100% { transform: rotate(-1.1deg) translateY(0); }
  50% { transform: rotate(1.1deg) translateY(-3px); }
}
/* keep it moving on hover (infinite) and start/end near the bob's rest pose so it doesn't snap or freeze */
.social-mascot:hover { animation: mai-bob 3.2s ease-in-out infinite; }
@keyframes mai-wiggle {
  0%, 100% { transform: rotate(-2deg) scale(1) translateY(0); }
  25% { transform: rotate(-7deg) scale(1.06) translateY(-4px); }
  60% { transform: rotate(6deg) scale(1.04) translateY(-2px); }
}
.footer-mascot { transition: transform .4s var(--ease-out); }
.footer-mascot:hover { transform: rotate(-2deg) scale(1.04); }
.social-p { margin-top: 20px; max-width: 40ch; color: rgba(12,31,21,.72); font-size: 1.04rem; }
.social-links { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.social-links .btn-pill { display: inline-flex; align-items: center; gap: 9px; border-color: var(--green-800); }
.social-links .btn-pill::before { background: var(--green-800); }   /* the sweep paints over the bg — keep it green here so cream hover text stays legible */
.social-links .btn-pill:hover { background: var(--green-800); color: var(--cream-50); }

.footer-mascot { width: 84px; margin-bottom: 14px; }

/* ============================================================
   VISIT
   ============================================================ */
.visit { background: var(--green-950); color: var(--cream-50); padding: clamp(90px, 11vw, 150px) var(--pad-x); }
.visit-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(44px, 6vw, 90px); max-width: 1360px; margin-inline: auto; align-items: center;
}
.visit-cols { display: flex; gap: clamp(36px, 5vw, 80px); margin-top: 40px; flex-wrap: wrap; }
.visit-block h3 {
  font-family: var(--font-body); font-size: .72rem; font-weight: 640;
  letter-spacing: .24em; text-transform: uppercase; color: var(--gold-400);
  margin-bottom: 10px;
}
.visit-block p { color: rgba(250,246,236,.85); }
.visit-block .text-link { color: var(--gold-300); display: inline-block; margin-top: 8px; }
.fine { font-size: .8rem; color: rgba(250,246,236,.5); margin-top: 6px; }

.visit-phone {
  display: inline-block; margin-top: 46px; text-decoration: none;
  border-top: 1px solid rgba(250,246,236,.25); padding-top: 24px;
}
.vp-label { display: block; font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: rgba(250,246,236,.6); margin-bottom: 6px; }
.vp-number {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem); color: var(--gold-400);
  transition: color .2s;
}
.visit-phone:hover .vp-number { color: var(--gold-300); }

.visit-map { border-radius: 16px; overflow: hidden; border: 1px solid rgba(217,164,65,.5); min-height: 440px; }
.visit-map iframe { width: 100%; height: 100%; min-height: 440px; border: 0; filter: saturate(.85); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--green-950); color: var(--cream-100); padding: 0 var(--pad-x) 34px; overflow: hidden; }
.footer-giant {
  font-family: var(--font-display); font-weight: 420;
  font-size: clamp(2.6rem, 13.4vw, 12.5rem); line-height: 1; letter-spacing: -0.02em;
  text-align: center; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(217,164,65,.5);
  padding: 40px 0 60px;
  user-select: none;
}
.footer-giant em { -webkit-text-stroke: 0; color: var(--gold-500); font-style: italic; }
.footer-inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
  max-width: 1360px; margin-inline: auto;
  border-top: 1px solid rgba(250,246,236,.14);
  padding: 44px 0 50px;
}
.footer-col h4 {
  font-family: var(--font-body); font-size: .7rem; font-weight: 640;
  letter-spacing: .24em; text-transform: uppercase; color: var(--gold-500);
  margin-bottom: 16px;
}
.footer-col a { display: block; text-decoration: none; opacity: .78; font-size: .94rem; padding: 4px 0; transition: opacity .2s, color .2s; }
.footer-col a:hover { opacity: 1; color: var(--gold-300); }
.footer-col--note p { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; line-height: 1.4; }
/* target the class, not any span — the Vietnamese tagline is itself wrapped in <span lang="vi"> */
.footer-col--note p .fc-en { font-family: var(--font-body); font-style: normal; font-size: .8rem; opacity: .55; }
.footer-base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  max-width: 1360px; margin-inline: auto;
  padding-top: 24px; border-top: 1px solid rgba(250,246,236,.1);
  font-size: .78rem; opacity: .5;
}

/* ---------- skip link (keyboard users) ---------- */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 4000;
  transform: translateY(-250%);
  background: var(--green-950); color: var(--cream-50);
  padding: 12px 22px; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-size: .9rem;
  transition: transform .2s ease;
}
.skip-link:focus-visible { transform: none; }

/* body lock while the mobile menu overlay is open */
body.nav-open { overflow: hidden; }

/* ---------- motion on/off control (WCAG 2.2.2 pause mechanism) ---------- */
.motion-toggle {
  position: fixed; left: 14px; bottom: 14px; z-index: 95;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid rgba(217,164,65,.55);
  background: rgba(12,31,21,.72); color: var(--cream-50);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  cursor: pointer; display: grid; place-items: center;
  /* hidden over the hero (it would sit on the scroll cue) — revealed once past it */
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .2s ease;
}
.motion-toggle.is-shown { opacity: .7; pointer-events: auto; }
html.static .motion-toggle { opacity: .7; pointer-events: auto; }  /* paused visitors always need the way back */
.motion-toggle.is-shown:hover, .motion-toggle:focus-visible { opacity: 1; transform: scale(1.06); }
.motion-toggle svg { width: 15px; height: 15px; }
.motion-toggle .mi-play { display: none; }
html.static .motion-toggle .mi-pause { display: none; }
html.static .motion-toggle .mi-play { display: block; }

/* ============================================================
   MOTION PRIMITIVES
   ============================================================ */
.split-up { opacity: 0; transform: translateY(30px); }

/* if JS never runs, nothing can reveal content — show everything, skip the loader */
.no-js .split-up { opacity: 1; transform: none; }
.no-js .loader { display: none; }
.no-js .hero-title .line > span { transform: none; }

/* ?static=1 — JS adds html.static: stop the CSS-driven motion too (ticker,
   marquees, mascot bob, scroll cue), not just the GSAP layer */
html.static *, html.static *::before, html.static *::after { animation: none !important; }
html.static .loader { display: none; }
/* Deliberate choice: the site animates for everyone.
   The OS reduced-motion flag is ignored because Windows sets it whenever
   "animation effects" is off, freezing the whole site for most visitors.
   ?static=1 in the URL gives a fully motion-free version. */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-text { position: static; }
  .visit-grid { grid-template-columns: 1fr; }
  .order-inner { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .order-actions { grid-template-columns: 1fr; }
}

/* the desktop nav only fits on one line from ~1100px up — below that, use the overlay menu */
@media (max-width: 1100px) {
  .site-nav {
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; align-items: center; justify-content: center; gap: 34px;
    background: rgba(12,31,21,.97);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    font-size: 1.5rem; color: var(--cream-50);
    opacity: 0; pointer-events: none; visibility: hidden;   /* visibility keeps closed links out of the tab order & a11y tree */
    /* scrollable, and "safe" centring so the first item can never be clipped
       above the top edge when the content is taller than the viewport */
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 92px 20px 40px;
    justify-content: safe center;
    transition: opacity .28s ease, visibility 0s linear .28s;
  }
  .site-nav.is-open { opacity: 1; pointer-events: auto; visibility: visible; z-index: 99; transition: opacity .28s ease; }
  .site-nav a { padding: 10px 18px; }          /* bigger tap targets in the overlay */
  /* prominent call-to-order button inside the overlay menu */
  .site-nav a.nav-order {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px; padding: 15px 30px; border-radius: 999px;
    background: var(--gold-500); color: var(--green-950);
    font-size: 1.05rem; font-weight: 600; text-decoration: none;
  }
  .nav-order sup { display: none; }
  .nav-toggle { display: flex; }
  /* short landscape phones: stack from the top rather than trying to centre */
  @media (max-height: 520px) {
    .site-nav { justify-content: flex-start; gap: clamp(14px, 4vh, 30px); }
  }
  /* keep the brand, language toggle and X above the open overlay (header is z-100; overlay z-99) */
  .brand, .header-actions { position: relative; z-index: 100; }
  /* ...and they now sit on the dark overlay, so the scrolled (dark-ink) header
     palette would render them nearly invisible — force the light one back */
  body.nav-open .site-header,
  body.nav-open .site-header.is-scrolled {
    background: transparent; color: var(--cream-50);
    box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  body.nav-open .site-header.is-scrolled .lang-btn.is-active { color: var(--gold-400); }
}

@media (max-width: 760px) {
  /* the row must be able to give: let the brand ellipsis rather than shove the
     hamburger past the right edge (where overflow-x:hidden swallows it) */
  .site-header { gap: 10px; padding-inline: 16px; }
  .brand { min-width: 0; }
  .brand-word { min-width: 0; overflow: hidden; }
  .brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .header-actions { flex: none; }
  .header-actions .btn-pill { display: none; }
  .brand-sub { display: none; }
  .brand-name { white-space: nowrap; font-size: 1.08rem; }
  .brand-mark { width: 34px; height: 34px; }
  .lang-btn { padding: 9px 11px; }             /* ≥40px tap target on mobile */
  .lang-sep { margin: 0 1px; }

  .hero-foot { flex-direction: column; align-items: flex-start; }
  .hero-bottom { font-size: .66rem; }
  .hero-add { display: none; }

  /* --- MOBILE SIGNATURE: "The Numbered Spread" — vertical editorial stack --- */
  .sig-head { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 40px; }
  .sig-progress { display: none; }                 /* no horizontal track to track */
  .sig-pin { min-height: auto; padding: 84px 0 88px; }
  .sig-track {
    display: block; width: auto;
    overflow: visible; scroll-snap-type: none;      /* kill the carousel */
    gap: 0; padding: 0 var(--pad-x);
  }
  .sig-card {
    width: 100%; scroll-snap-align: none;
    margin-bottom: clamp(64px, 12vw, 88px);
  }
  .sig-card:first-of-type { margin-top: 4px; }
  .sig-img { aspect-ratio: 4 / 5; border-radius: 16px; box-shadow: 0 22px 55px rgba(0,0,0,.5); }
  .sig-card:hover .sig-img { transform: none; box-shadow: 0 22px 55px rgba(0,0,0,.5); }
  /* oversized italic gold drop-folio kissing the photo's top-left */
  .sig-num {
    top: -0.35em; left: -0.02em;
    font-size: clamp(3.4rem, 20vw, 5rem); line-height: 1;
    text-shadow: 0 2px 18px rgba(8,20,14,.55);
  }
  .sig-info { padding: 22px 2px 0; }
  .sig-info h3 { font-size: 1.65rem; margin-bottom: 10px; }
  .sig-info p { font-size: 1.02rem; line-height: 1.65; color: rgba(250,246,236,.72); max-width: 40ch; }
  /* thin numbered-menu tick above each dish name */
  .sig-info h3::before {
    content: ""; display: block; width: 34px; height: 1px;
    background: linear-gradient(90deg, var(--gold-500), rgba(217,164,65,0)); margin-bottom: 14px;
  }
  /* closing CTA: solid deep-green terminal panel, centered */
  .sig-card--cta {
    margin-top: 8px; margin-bottom: 0;
    align-items: center; text-align: center; gap: 22px;
    padding: clamp(36px, 9vw, 52px) var(--pad-x);
    background: var(--green-900); border: 1px solid rgba(217,164,65,.4); border-radius: 16px;
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
  .sig-card--cta .btn-pill--gold { align-self: center; }

  .sm-1, .sm-2, .sm-3 { width: 92%; margin-top: 0; }

  .menu-preview { display: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-base { flex-direction: column; }

  .social-inner { flex-direction: column; text-align: center; }
  .social-p { margin-inline: auto; }
  .social-links { justify-content: center; }
}