/* ==========================================================
   Nǎm Viet Kitchen – brand font (Chap by Schick Toikka – needs a web licence)
   Chap has no Vietnamese tone marks; those letters fall back to Be Vietnam Pro.
   ========================================================== */
@font-face { font-family: "Chap"; src: url("assets/fonts/Chap-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Chap"; src: url("assets/fonts/Chap-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; }

/* ==========================================================
   Nǎm Viet Kitchen – design tokens
   ========================================================== */
:root {
  /* brand */
  --teal-950: #0b1f1e;
  --teal-900: #0f2726;
  --teal-800: #163331;
  --teal-700: #1f4441;
  --olive-700: #46553a;
  --olive-600: #56663f;
  --olive-400: #8a9a6d;
  --paper: #eeeadf;
  --paper-2: #e4dfd1;
  --lilac: #dcd8df;
  --coral: #f06a54;
  --coral-600: #d9533e;
  --orange: #e9952f;
  --brown: #6b3a1e;

  /* semantic */
  --bg: var(--teal-900);
  --surface: var(--teal-800);
  --text: #f3efe6;
  --text-muted: #b9c3b8;
  --ink: #1b2a28;          /* text on paper */
  --ink-muted: #56605a;
  --accent: var(--coral);
  --on-accent: #1b0f0b;
  --line: rgba(243, 239, 230, .16);

  /* type */
  --font-display: "Chap", "Be Vietnam Pro", system-ui, sans-serif;
  --font-body: "Chap", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: .8125rem;
  --fs-sm: .9375rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --fs-2xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
  --fs-3xl: clamp(2.6rem, 1.6rem + 4.5vw, 5rem);

  /* space (8pt) */
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 4rem; --s7: 6rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --container: 1200px;
  --radius: 14px;
  --radius-lg: 22px;
  --header-h: 72px;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur: 220ms;
}

/* ==========================================================
   Base
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 64px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.1; }
/* Brand voice: everything short and functional is set in Chap */
.btn, .main-nav a, .eyebrow, .menu-tab, .lang-switch button, .info-list dt, .info-list dd,
.price, .fc-price, .action-bar a, .hero-kicker, .brand-sub, .flavours li, .sticker text,
.dish-no, .v-code, .insta-line a, .reserve-phone, .hero-meta, .menu-legend, .sisters {
  font-family: var(--font-display); font-weight: 600;
}
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 1000; background: var(--coral); color: var(--on-accent); padding: .75rem 1rem; border-radius: 8px; font-weight: 600; }
.skip-link:focus { top: 1rem; }
.nowrap { white-space: nowrap; }
.muted { color: var(--text-muted); }
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: clamp(4rem, 8vw, 7.5rem); position: relative; }

.ico { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }
.ico.flip { transform: scaleX(-1); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: .28em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--olive-400);
  margin-bottom: var(--s2);
}
.display { font-family: var(--font-display); font-size: var(--fs-2xl); letter-spacing: .01em; margin-bottom: var(--s3); text-wrap: balance; }
.h3 { font-family: var(--font-display); font-size: var(--fs-xl); margin: var(--s4) 0 var(--s1); }
.lead { font-size: var(--fs-lg); color: var(--text); max-width: 60ch; }

/* ==========================================================
   Buttons
   ========================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 48px; padding: .75rem 1.4rem;
  border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 500; font-size: var(--fs-sm); letter-spacing: .02em;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform 120ms var(--ease-out);
  touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn-coral { background: var(--coral); color: var(--on-accent); }
.btn-coral:hover { background: #ff7c66; }
.btn-ghost { background: rgba(15, 39, 38, .35); color: var(--text); border-color: rgba(243, 239, 230, .7); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: var(--text); color: var(--teal-900); }
.btn-outline { border-color: var(--line); color: var(--text); }
.btn-outline:hover { border-color: var(--text); }
.btn-sm { min-height: 44px; padding: .55rem 1.1rem; }
.btn-lg { min-height: 56px; padding: .95rem 1.8rem; font-size: var(--fs-base); }

.round-btn {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid var(--line); background: transparent;
  transition: background-color var(--dur), border-color var(--dur);
}
.round-btn:hover { background: var(--teal-700); border-color: var(--text); }

/* ==========================================================
   Header
   ========================================================== */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.site-header.is-solid { background: rgba(11, 31, 30, .94); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.header-inner {
  height: var(--header-h);
  width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto;
  display: flex; align-items: center; gap: var(--s4);
}
.brand { display: inline-flex; flex-direction: column; align-items: flex-end; text-decoration: none; color: var(--text); line-height: 1; }
.brand-mark { width: 92px; height: 42px; }
.brand-sub { font-size: .55rem; letter-spacing: .3em; text-transform: uppercase; margin-top: 4px; margin-right: -.3em; }
.main-nav { display: flex; gap: var(--s4); margin-left: auto; }
.main-nav a {
  text-decoration: none; font-size: var(--fs-sm); letter-spacing: .08em; text-transform: uppercase; font-weight: 400;
  padding-block: .5rem; position: relative;
}
.main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: var(--coral); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); }
.main-nav a:hover::after, .main-nav a[aria-current="true"]::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: var(--s2); }
.lang-switch { display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px; padding: 3px; }
.lang-switch button { background: none; border: 0; min-width: 40px; min-height: 36px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 500; letter-spacing: .08em; color: var(--text-muted); }
.lang-switch button[aria-pressed="true"] { background: var(--text); color: var(--teal-900); }
.nav-toggle { display: none; width: 48px; height: 48px; background: none; border: 1.5px solid var(--line); border-radius: 50%; place-items: center; }
.burger, .burger::before, .burger::after { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; transition: transform var(--dur) var(--ease-out), opacity var(--dur); }
.burger::before, .burger::after { content: ""; position: absolute; left: 0; }
.burger::before { top: -6px; } .burger::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .burger { background: transparent; }
.nav-toggle[aria-expanded="true"] .burger::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger::after { transform: translateY(-6px) rotate(-45deg); }
.mobile-nav {
  background: var(--teal-950); border-top: 1px solid var(--line);
  padding: var(--s2) var(--gutter) var(--s4);
  display: grid; gap: var(--s1);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav a:not(.btn) { font-family: var(--font-display); font-size: 1.75rem; text-decoration: none; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.mobile-nav .btn { margin-top: var(--s2); }

/* ==========================================================
   Hero
   ========================================================== */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; }
.hero-media, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(11, 31, 30, .72) 0%, rgba(11, 31, 30, .15) 28%, rgba(11, 31, 30, .25) 50%, rgba(11, 31, 30, .92) 100%),
    linear-gradient(90deg, rgba(11, 31, 30, .55), transparent 65%);
}
.hero-content { width: min(100% - 2 * var(--gutter), var(--container)); margin: 0 auto; padding: calc(var(--header-h) + var(--s5)) 0 clamp(3rem, 8vh, 6rem); }
.hero-logo { width: clamp(220px, 34vw, 440px); aspect-ratio: 660 / 300; color: var(--text); filter: drop-shadow(0 2px 18px rgba(0,0,0,.35)); }
.hero-kicker { font-size: clamp(.8rem, .6rem + .6vw, 1.05rem); letter-spacing: .42em; text-transform: uppercase; margin: .4rem 0 var(--s4); width: clamp(220px, 34vw, 440px); text-align: right; }
.hero h1 { font-family: var(--font-display); font-size: var(--fs-3xl); text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero-lede { font-size: var(--fs-lg); max-width: 34ch; margin-top: var(--s2); color: #e9e4d8; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.hero-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); margin: var(--s4) 0 0; font-size: var(--fs-sm); color: #e9e4d8; }
.hero-meta > span, .hero-map-link { display: inline-flex; align-items: center; gap: .5em; }
.hero-map-link { color: inherit; text-decoration: none; min-height: 44px; }
.hero-map-link .js-address { border-bottom: 1px solid var(--coral); }
.hero-map-link:hover { color: var(--coral); }

/* stickers */
.sticker text { font-family: var(--font-body); }
.sticker-burst { position: absolute; right: clamp(1rem, 7vw, 8rem); bottom: clamp(9rem, 26vh, 16rem); width: clamp(150px, 17vw, 240px); transform: rotate(-14deg); filter: drop-shadow(0 8px 20px rgba(0,0,0,.3)); }
.sticker-burst polygon { fill: var(--coral); }
.sticker-burst text { fill: var(--teal-950); font-size: 26px; font-weight: 500; }
.sticker-nothot { position: absolute; right: 0; top: -10px; width: 104px; transform: rotate(-18deg); }
.sticker-nothot circle { fill: var(--coral); }
.sticker-nothot text { fill: var(--teal-950); font-family: var(--font-display); font-size: 36px; letter-spacing: .06em; }

@media (prefers-reduced-motion: no-preference) {
  .sticker-burst { animation: wobble 7s ease-in-out infinite; }
  @keyframes wobble { 0%, 100% { transform: rotate(-14deg) translateY(0); } 50% { transform: rotate(-9deg) translateY(-8px); } }
}

/* ==========================================================
   Band (marquee)
   ========================================================== */
.band { background: var(--olive-600); overflow: hidden; border-block: 1px solid rgba(0,0,0,.15); }
.band-track { display: flex; width: max-content; }
.band-track span { font-family: var(--font-display); font-size: clamp(1rem, .8rem + .8vw, 1.4rem); letter-spacing: .22em; text-transform: uppercase; padding: 1rem 1.5rem; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .band-track { animation: marquee 48s linear infinite; }
  @keyframes marquee { to { transform: translateX(-50%); } }
}

/* faint N pattern backdrop */
.about {
  background-color: var(--teal-900);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23f3efe6' stroke-opacity='.045' stroke-width='3'%3E%3Cpath d='M18 64V24l26 40V24'/%3E%3Cpath d='M78 116V76l26 40V76'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================
   About
   ========================================================== */
.about-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.about-text p { color: var(--text-muted); max-width: 58ch; }
.about-text .lead { color: var(--text); }
.flavours { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--s3); }
.flavours li { padding: .4rem 1rem; border-radius: 999px; border: 1.5px solid var(--olive-400); font-size: var(--fs-sm); color: var(--text); }
.flavours li:nth-child(1) { background: var(--olive-600); border-color: var(--olive-600); }
.flavours li:nth-child(3) { background: var(--orange); border-color: var(--orange); color: var(--teal-950); }
.flavours li:nth-child(4) { background: var(--coral); border-color: var(--coral); color: var(--teal-950); }
/* storefront on the left, a column of three dishes on the right that runs a little past it top and bottom */
.about-media { display: grid; grid-template-columns: 1fr .62fr; gap: clamp(12px, 1.6vw, 20px); align-items: center; }
.about-photo { margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-photo-main { aspect-ratio: 3 / 4.3; max-width: 100%; }
.about-photo-main img { object-position: 50% 40%; }
.about-trio { display: grid; gap: clamp(12px, 1.6vw, 20px); }
.about-photo-small { aspect-ratio: 1 / 1; max-width: 100%; border-radius: var(--radius); }

/* ==========================================================
   Food strip
   ========================================================== */
.food { background: var(--teal-950); padding-bottom: clamp(3rem, 6vw, 5rem); }
.food-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s3); }
.strip-nav { display: flex; gap: var(--s1); margin-bottom: var(--s3); }
.food-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 26vw, 320px);
  gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: var(--s2) max(var(--gutter), (100% - var(--container)) / 2) var(--s3);
  scroll-padding-inline: max(var(--gutter), (100% - var(--container)) / 2);
  scrollbar-width: thin; scrollbar-color: var(--teal-700) transparent;
}
.food-card { scroll-snap-align: start; }
.food-card a { display: block; text-decoration: none; color: inherit; border-radius: var(--radius-lg); }
.food-card figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 5; background: var(--teal-800); }
.food-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.food-card a:hover img { transform: scale(1.04); }
.food-card .fc-meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s1); margin-top: var(--s2); }
.food-card .fc-name { font-family: var(--font-display); font-size: 1.35rem; }
.food-card .fc-price { color: var(--orange); font-weight: 500; white-space: nowrap; }
.food-card .fc-desc { color: var(--text-muted); font-size: var(--fs-sm); margin: .2rem 0 0; }

/* ==========================================================
   Menu
   ========================================================== */
.menu { background: var(--teal-900); }
.menu-head { position: relative; text-align: center; }
.menu-head .display { font-size: var(--fs-3xl); }
.menu-tabs {
  position: sticky; top: var(--header-h); z-index: 20;
  display: flex; gap: var(--s1); justify-content: center;
  padding: var(--s2) 0; margin-bottom: var(--s3);
  background: var(--teal-900);
}
.menu-tab {
  min-height: 44px; padding: .55rem 1.25rem; border-radius: 999px;
  background: transparent; border: 1.5px solid var(--line);
  font-size: var(--fs-sm); letter-spacing: .04em; white-space: nowrap;
  transition: background-color var(--dur), color var(--dur), border-color var(--dur);
}
.menu-tab:hover { border-color: var(--text); }
.menu-tab[aria-selected="true"] { background: var(--paper); color: var(--ink); border-color: var(--paper); font-weight: 600; }

.paper {
  position: relative; color: var(--ink);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .28 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  border-radius: 6px;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 6vw, 5.5rem);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
}
.corner { position: absolute; width: clamp(48px, 7vw, 80px); height: clamp(48px, 7vw, 80px); color: var(--olive-600); }
.c-tl { top: 12px; left: 12px; }
.c-tr { top: 12px; right: 12px; transform: scaleX(-1); }
.c-bl { bottom: 12px; left: 12px; transform: scaleY(-1); }
.c-br { bottom: 12px; right: 12px; transform: scale(-1); }

#menu-panel:focus-visible { outline-offset: 12px; }
.menu-cols { columns: 2 380px; column-gap: clamp(2rem, 6vw, 5rem); }
.menu-group { break-inside: avoid; margin-bottom: var(--s5); }
.menu-group h3 {
  font-family: var(--font-display); font-size: 1.6rem; color: var(--teal-800);
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  padding-bottom: .5rem; margin-bottom: var(--s2); border-bottom: 1.5px solid var(--olive-600);
}
.menu-group h3 small { font-family: var(--font-body); font-size: var(--fs-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.group-note { font-size: var(--fs-sm); color: var(--ink-muted); margin-top: -.5rem; }

.dish { padding: .7rem 0; border-radius: 8px; scroll-margin-top: calc(var(--header-h) + 90px); }
.dish + .dish { border-top: 1px dashed rgba(27, 42, 40, .18); }
.dish.is-flash { animation: flash 1.6s var(--ease-out); }
@keyframes flash { 0%, 40% { background: rgba(233, 149, 47, .28); } 100% { background: transparent; } }
.dish-line { display: flex; align-items: baseline; gap: .5rem; }
.dish-no { font-size: var(--fs-xs); font-weight: 600; color: var(--olive-600); min-width: 2.2em; font-variant-numeric: tabular-nums; }
.dish-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--teal-900); }
.dish-name .tr { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-sm); color: var(--ink-muted); }
.dish-tags { display: inline-flex; gap: .25rem; align-self: center; }
.dish-tags .ico { width: 1rem; height: 1rem; }
.ico-chili { color: var(--coral-600); }
.ico-leaf { color: var(--olive-600); }
.dots { flex: 1; border-bottom: 1.5px dotted rgba(27, 42, 40, .35); transform: translateY(-.3em); min-width: 1.5rem; }
.price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--teal-900); }
.price::after { content: ",-"; }
.price.no-suffix::after { content: ""; }
.dish-desc { font-size: var(--fs-sm); color: var(--ink-muted); margin: .15rem 0 0 calc(2.2em + .5rem); line-height: 1.5; }
.variants { margin: .45rem 0 0 calc(2.2em + .5rem); display: grid; gap: .15rem; }
.variants li { display: flex; align-items: baseline; gap: .5rem; font-size: var(--fs-sm); }
.variants .v-code { font-weight: 600; color: var(--olive-600); width: 1em; }
/* allergen numbers, set small like on the printed menu */
.v-name { min-width: 0; }
.v-name .al { margin-left: .2rem; }
.al { align-self: center; font-size: .72rem; font-weight: 600; color: var(--olive-600); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: .02em; cursor: help; }
.allergen-list { margin-top: var(--s3); border-top: 1px dashed rgba(27, 42, 40, .25); padding-top: var(--s2); color: var(--ink-muted); font-size: var(--fs-sm); }
.allergen-list summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; color: var(--teal-900); text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: .5rem; list-style: none; }
.allergen-list summary::-webkit-details-marker { display: none; }
.allergen-list summary::after { content: "+"; font-size: 1.2em; color: var(--olive-600); }
.allergen-list[open] summary::after { content: "–"; }
.allergen-list ol { list-style: none; margin: var(--s2) 0; padding: 0; columns: 2 220px; column-gap: var(--s4); }
.allergen-list li { display: flex; gap: .6rem; padding: .25rem 0; break-inside: avoid; }
.al-no { min-width: 1.6em; font-weight: 600; color: var(--olive-600); font-variant-numeric: tabular-nums; }
.allergen-list p { margin: 0; font-size: var(--fs-xs); text-align: center; }
.compact .dish { padding: .35rem 0; }
.compact .dish + .dish { border-top: 0; }
.compact .dish-name { font-size: 1.05rem; }

.menu-legend {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: center;
  border-top: 1.5px solid var(--olive-600); padding-top: var(--s3); margin-top: var(--s2);
  font-size: var(--fs-sm); color: var(--ink-muted); text-align: center;
}
.menu-legend > span { display: inline-flex; align-items: center; gap: .35rem; }

/* ==========================================================
   Gallery
   ========================================================== */
.gallery { background: var(--teal-950); }
.gallery-head { max-width: 680px; }
.gallery-head .lead { color: var(--text-muted); }
.gallery-grid {
  display: grid; gap: var(--s2); margin-top: var(--s4);
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(140px, 15vw, 210px);
}
/* wide hall + doorway on top, three portrait details below */
.gallery-grid li:nth-child(1) { grid-column: span 8; grid-row: span 3; }
.gallery-grid li:nth-child(n+2) { grid-column: span 4; grid-row: span 3; }
.g-btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: var(--teal-800); cursor: zoom-in; }
.g-btn img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out), opacity 300ms; }
.g-btn:hover img { transform: scale(1.04); }
.insta-line { margin-top: var(--s4); text-align: center; }
.insta-line a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; text-decoration: none; border-bottom: 1px solid var(--coral); color: var(--text); }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100dvh; }
.lightbox::backdrop { background: rgba(6, 18, 17, .94); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: min(92vw, 1400px); max-height: 86dvh; border-radius: 8px; object-fit: contain; }
.lightbox .round-btn { position: fixed; background: rgba(15, 39, 38, .7); color: var(--text); }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: 50%; translate: 0 -50%; }
.lb-next { right: 16px; top: 50%; translate: 0 -50%; }

/* ==========================================================
   Reserve band
   ========================================================== */
/* Olive band with a faint, tilted N pattern (tilt taken from the brand's Facebook cover) */
.reserve { position: relative; overflow: hidden; isolation: isolate; background-color: var(--olive-700); padding-block: clamp(3.5rem, 7vw, 6rem); }
.reserve::before {
  content: ""; position: absolute; inset: -60%; z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62' height='60' viewBox='0 0 62 60'%3E%3Cpath d='M14 9v42M14 9l28 42M42 9v32' fill='none' stroke='%23f3efe6' stroke-opacity='.07' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: 80px 77px;
  transform: rotate(28deg);
}
.reserve-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.reserve .eyebrow { color: #d6dcc6; }
.reserve .display { margin-bottom: var(--s2); }
.reserve p { max-width: 50ch; color: #e7e8dc; margin: 0; }
.reserve-phone {
  display: inline-flex; align-items: center; gap: .75rem;
  font-family: var(--font-display); font-size: clamp(1.6rem, 1rem + 2.6vw, 3rem); text-decoration: none; white-space: nowrap;
  background: var(--coral); color: var(--on-accent);
  padding: .8rem 2rem; border-radius: 999px; min-height: 64px;
  box-shadow: 0 16px 40px -16px rgba(0,0,0,.5);
  transition: background-color var(--dur), transform 120ms var(--ease-out);
}
.reserve-phone:hover { background: #ff7c66; }
.reserve-phone:active { transform: scale(.98); }

/* ==========================================================
   Contact
   ========================================================== */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: stretch; }
.info-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s4); margin: 0 0 var(--s3); }
.info-list dt { display: flex; align-items: center; gap: .5rem; font-size: var(--fs-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--olive-400); margin-bottom: .35rem; font-weight: 500; }
.info-list dd { margin: 0; font-size: var(--fs-lg); line-height: 1.45; }
.info-list a { text-decoration: none; border-bottom: 1px solid var(--coral); }
.getting-here { color: var(--text-muted); max-width: 46ch; }
.contact-ctas { display: flex; gap: var(--s2); flex-wrap: wrap; }
.map-wrap { border-radius: var(--radius-lg); overflow: hidden; min-height: 380px; background: var(--teal-800); }
.map-wrap iframe { width: 100%; height: 100%; min-height: 380px; border: 0; filter: grayscale(.35) contrast(1.05); }

/* ==========================================================
   Footer
   ========================================================== */
.site-footer { background: var(--teal-950); border-top: 1px solid var(--line); padding: var(--s5) 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.footer-social { display: flex; gap: var(--s1); }
.footer-social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--line); border-radius: 50%; }
.footer-social a:hover { border-color: var(--text); }
.sisters, .copy { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.sisters a { margin-left: .5rem; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--coral); }
.sisters a:hover { color: var(--coral); }
.font-credit { flex-basis: 100%; margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.font-credit a { color: inherit; }

/* Mobile action bar */
.action-bar { display: none; }

/* ==========================================================
   Reveal on scroll
   ========================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* content is readable before the animation runs; it only drifts into place */
  .js .reveal { transform: translateY(18px); transition: transform 800ms var(--ease-out); }
  .js .reveal.is-in { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1080px) {
  .main-nav { gap: var(--s3); }
  .header-call > span { display: none; }
  .header-call { width: 44px; padding: 0; }
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .main-nav, .header-call { display: none; }
  .nav-toggle { display: grid; }
  .header-actions { margin-left: auto; }
  .brand-mark { width: 76px; height: 35px; }

  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .about-media { max-width: 520px; }
  .info-list { grid-template-columns: 1fr 1fr; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 56vw; }
  .gallery-grid li:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .gallery-grid li:nth-child(1) { grid-column: span 2; }
}

@media (max-width: 767px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .section { padding-block: 4rem; }

  .hero { min-height: calc(100svh - 68px); }
  .hero-content { padding-bottom: 2.25rem; }
  .hero-logo { width: min(50vw, 220px); }
  .hero-kicker { width: min(50vw, 220px); margin-bottom: var(--s3); font-size: .7rem; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .sticker-burst { width: 118px; right: 10px; top: calc(var(--header-h) + 40px); bottom: auto; }

  .food-head { align-items: start; }
  .strip-nav { display: none; }
  .food-strip { grid-auto-columns: 72vw; gap: var(--s2); }

  .menu-tabs { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .menu-tabs::-webkit-scrollbar { display: none; }
  .sticker-nothot { width: 64px; top: -78px; right: 0; }
  .paper { margin-inline: calc(-1 * var(--gutter) + 6px); padding-top: 4.25rem; }
  .corner { width: 44px; height: 44px; }
  .menu-cols { columns: 1; }
  .dish-desc, .variants { margin-left: 0; }
  .dish-no { min-width: 0; }

  .reserve-inner { flex-direction: column; align-items: stretch; }
  .reserve-phone { justify-content: center; font-size: 1.6rem; padding-inline: 1rem; }
  .info-list { grid-template-columns: 1fr; }
  .contact-ctas .btn { flex: 1; }
  .map-wrap, .map-wrap iframe { min-height: 300px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }

  .action-bar {
    position: fixed; inset: auto 0 0; z-index: 60;
    display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: rgba(11, 31, 30, .96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }
  .action-bar a {
    display: flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 52px; border-radius: 14px; text-decoration: none;
    font-size: var(--fs-sm); font-weight: 500; border: 1.5px solid var(--line);
  }
  .action-bar .ab-primary { background: var(--coral); color: var(--on-accent); border-color: var(--coral); }
}