/* ==========================================================================
   Bếp Chay An — bếp chay Việt, nấu chậm theo mùa
   --------------------------------------------------------------------------
   CONCEPT
   Temple-modern ledger. The page is built like a printed thực đơn: ink-green
   ground sections (the "temple" weight) alternating with rice-paper cream,
   saffron used only as a mark of emphasis — never as decoration. Type does the
   ornamenting; the menu is a typographic ledger with dotted leaders, so the
   page reads as a document rather than a set of cards.

   PALETTE (all text pairs measured, WCAG 2.2 AA)
   --paper        #F4EEE1  rice-paper cream, page ground
   --paper-2      #EAE2D2  recessed cream, chips / inputs
   --ink          #16241E  ink green, dark ground
   --ink-deep     #0F1A15  footer ground
   --ink-900      #14211B  primary text on cream           14.38:1
   --muted        #5B6257  secondary text on cream          5.46:1
   --muted-ink    #A6B1A7  secondary text on ink            7.25:1
   --saffron      #E4B04E  accent mark / accent text on ink 8.14:1
   --saffron-deep #7E5611  accent text on cream             5.63:1
   --sage         #566B5C  tertiary text on cream           4.97:1
   --error        #8C2F22  error text on cream              7.14:1
   --field-line   #7F8177  control boundary, not text
                           3.42:1 on --paper, 3.07:1 on --paper-2
                           (WCAG 1.4.11 wants 3:1 — --rule-strong
                           composited to 2.07:1 and failed)
   --paper on --ink 13.92:1 · --ink-900 on --saffron 8.41:1 (primary button)
   Focus ring: --ink-900 on cream 14.38:1, --saffron on ink 8.14:1 (both ≥ 3:1)
   Rule ink: --rule-strong / --rule are dividers only — never a control edge.
   The menu hairline is rgba(126, 86, 17, 0.68) = #A48754, 2.94:1 on --paper,
   so the signature draw is visible; the dark hero keeps --rule-ink (quiet).

   TYPE — Playfair Display (display) / Be Vietnam Pro (text)
   h1       clamp(2.3rem, 6.6vw, 5.4rem)  / 1.09 / -0.022em / 400
   h2       clamp(2.05rem, 4.6vw, 3.6rem) / 1.06 / -0.018em / 400
   h2-sm    clamp(1.9rem, 3.9vw, 3.15rem) / 1.08 / -0.018em / 400 (story)
   h3       1.375rem / 1.3 / -0.008em / 500  (ledger names)
   body     1.0625rem / 1.72 / 0 / 400       (17px)
   small    0.875rem / 1.62 / 0.005em / 400  (14px)
   meta     0.75rem / 1.4 / 0.16em / 500, uppercase (12px)
   Only weights 400 and 500 are loaded — the Google Fonts request asks for
   exactly those two, so nothing unused is fetched on the critical path.

   LAYOUT
   12-column editorial grid, max 1200px, 24px gutters. The structural idea is
   the ledger: every list — hero board, full menu — shares one right-aligned
   price edge and a dotted leader, so the page has a single typographic spine
   from top to bottom. Grounds alternate cream → ink → cream → ink.
   The one drawn element is the bowl-and-steam seal reserved in the foot of the
   dark hero board; the cream sections stay pure typography.

   SIGNATURE MOTION
   On reveal, a hairline rule draws across the full width of each menu row
   (scaleX 0 → 1, transform-origin left), staggered in batches of six, 55 ms
   apart. Nothing else on the page draws a line; everything else is a quiet
   fade-and-rise. The rule is inked with --rule-menu (2.94:1 on cream) so the
   draw is legible at a glance rather than a near-invisible 1.44:1 ghost.

   PORTFOLIO — the "Thực đơn" section stands in for the project grid
   The menu IS the portfolio here: twelve dishes, each carrying data-category,
   filtered by five chips (Tất cả / Khai vị / Món chính / Tráng miệng / Trà).
   Filtering re-lays-out the ledger with FLIP, updates a live count, writes
   ?cat= to the URL, and announces the result through a debounced role="status".
   The chip rail scrolls horizontally under 720px rather than wrapping.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  --paper: #F4EEE1;
  --paper-2: #EAE2D2;
  --ink: #16241E;
  --ink-deep: #0F1A15;
  --ink-700: #1D3028;
  --ink-900: #14211B;
  --muted: #5B6257;
  --muted-ink: #A6B1A7;
  --saffron: #E4B04E;
  --saffron-deep: #7E5611;
  --sage: #566B5C;
  --error: #8C2F22;
  --field-line: #7F8177;

  --rule: rgba(20, 33, 27, 0.18);
  --rule-strong: rgba(20, 33, 27, 0.34);
  --rule-menu: rgba(126, 86, 17, 0.68);
  --rule-ink: rgba(244, 238, 225, 0.18);
  --rule-ink-strong: rgba(244, 238, 225, 0.34);
  --focus: var(--ink-900);

  --font-display: "Playfair Display", "Times New Roman", serif;
  --font-text: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;

  --shell: 1200px;
  --gutter: 24px;
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  --ease-enter: cubic-bezier(.16, 1, .3, 1);
  --ease-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-move: cubic-bezier(.65, 0, .35, 1);
  --ease-exit: cubic-bezier(.7, 0, .84, 0);
  --ease-pop: cubic-bezier(.34, 1.4, .64, 1);
  --dur-micro: 140ms;
  --dur-small: 220ms;
  --dur-med: 320ms;
  --dur-large: 480ms;
  --dur-reveal: 680ms;
  --dur-hero: 900ms;
}

/* ----------------------------------------------------------------- base -- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

::selection {
  background: var(--saffron);
  color: var(--ink-900);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 2px;
  transform: translateY(-160%);
  transition: transform var(--dur-small) var(--ease-enter);
}
.skip-link:focus {
  transform: translateY(0);
  outline-color: var(--saffron);
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* -------------------------------------------------------------- eyebrow -- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow__mark {
  width: 26px;
  height: 1px;
  background: var(--saffron-deep);
  flex: none;
}
.eyebrow--on-dark { color: var(--muted-ink); }
.eyebrow--on-dark .eyebrow__mark { background: var(--saffron); }

/* -------------------------------------------------------------- buttons -- */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink-900);
  --btn-line: var(--field-line);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-line);
  border-radius: 2px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-small) var(--ease-move),
    border-color var(--dur-small) var(--ease-move),
    color var(--dur-small) var(--ease-move),
    transform var(--dur-micro) var(--ease-move);
}
.btn--sm { min-height: 44px; padding: 0 18px; font-size: 0.875rem; }
.btn--primary {
  --btn-bg: var(--saffron);
  --btn-fg: var(--ink-900);
  --btn-line: var(--saffron);
}
.btn--ghost { --btn-fg: var(--ink-900); --btn-line: var(--field-line); }
.btn:active { transform: translateY(1px); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { --btn-bg: #EFC471; --btn-line: #EFC471; }
  .btn--ghost:hover { --btn-line: var(--ink-900); background: rgba(20, 33, 27, 0.04); }
}

/* --------------------------------------------------------------- header -- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 238, 225, 0.88);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  isolation: isolate;
}
.site-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
}
.header__hair {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--rule);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  text-decoration: none;
  color: var(--ink-900);
}
.brand__mark {
  color: var(--ink);
  flex: none;
  transform-origin: left center;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1;
}

/* nav */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 34px);
}
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1.4vw, 22px);
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  font-size: 0.9375rem;
  color: var(--ink-900);
  text-decoration: none;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 12px;
  height: 1px;
  background: var(--ink-900);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-med) var(--ease-enter);
}
/* The current section is set by main.js (aria-current="true", not "page" —
   this is a single page, not a set of pages). The underline is the shared
   treatment for hover, focus and current so no state is colour-only. */
.nav__link[aria-current]::after { transform: scaleX(1); background: var(--saffron-deep); }
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover::after { transform: scaleX(1); }
}
.nav__link:focus-visible::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--field-line);
  border-radius: 2px;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-move);
}
.nav-toggle:active { transform: scale(0.97); }
.nav-toggle__bars {
  position: relative;
  width: 20px;
  height: 10px;
}
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 20px;
  height: 1.5px;
  background: var(--ink-900);
  transition: transform var(--dur-med) var(--ease-enter), opacity var(--dur-micro) linear;
}
.nav-toggle__bars span:first-child { top: 0; }
.nav-toggle__bars span:last-child { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:first-child {
  transform: translateY(4.25px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:last-child {
  transform: translateY(-4.25px) rotate(-45deg);
}

/* ------------------------------------------------------------- reveal ---- */
html.js-motion [data-reveal] {
  opacity: 0;
  translate: 0 18px;
  transition:
    opacity var(--dur-reveal) var(--ease-enter),
    translate var(--dur-reveal) var(--ease-enter);
  transition-delay: var(--d, 0ms);
}
html.js-motion [data-reveal].is-revealed {
  opacity: 1;
  translate: none;
}

/* ----------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 5vw, 4.25rem) 0;
  background:
    radial-gradient(120% 70% at 78% 8%, rgba(228, 176, 78, 0.10), transparent 62%),
    radial-gradient(90% 60% at 0% 100%, rgba(22, 36, 30, 0.05), transparent 60%),
    var(--paper);
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero__lede { padding-block: clamp(0.5rem, 2vw, 1.5rem); }

.hero__title {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 6.6vw, 5.4rem);
  line-height: 1.09;
  letter-spacing: -0.022em;
  color: var(--ink-900);
  text-wrap: balance;
  animation: title-rise var(--dur-hero) var(--ease-enter) both;
}
.hero__title em {
  font-style: italic;
  color: var(--saffron-deep);
}
@keyframes title-rise {
  from { translate: 0 0.16em; }
  to { translate: 0 0; }
}

.hero__intro {
  margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--muted);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  max-width: 46ch;
}
.hero__meta-item dt {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage);
}
.hero__meta-item dd {
  margin-top: 6px;
  font-size: 0.875rem;
  line-height: 1.62;
  color: var(--ink-900);
}

/* the board — a dark ledger panel inside the cream hero */
.board {
  --focus: var(--saffron);
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(1.5rem, 2.6vw, 2.125rem);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(20, 33, 27, 0.06);
}
.board::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--rule-ink);
  border-radius: 1px;
  pointer-events: none;
}
.board > * { position: relative; z-index: 1; }
.board__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--saffron);
}
.board__foot {
  margin-top: 18px;
  max-width: 30ch;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted-ink);
}

/* ------------------------------------------------------------- ledger ---- */
.ledger { position: relative; }
.ledger__row,
.menu-row {
  position: relative;
  padding-block: 15px;
}
.ledger__rule,
.menu-row__rule {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--rule);
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform var(--dur-reveal) var(--ease-enter) var(--rule-delay, 0ms);
  pointer-events: none;
}
html.js-motion .ledger__row:not(.is-revealed) .ledger__rule,
html.js-motion .menu-row:not(.is-revealed) .menu-row__rule { transform: scaleX(0); }
html.js-motion .ledger__row.is-revealed .ledger__rule,
html.js-motion .menu-row.is-revealed .menu-row__rule { transform: scaleX(1); }

.ledger--compact .ledger__rule { background: var(--rule-ink); }
.ledger--compact .ledger__row { padding-block: 13px; }
.ledger--compact .ledger__row:first-child .ledger__rule { opacity: 0; }

/* The signature moment is the only line on the page that has to read at
   thumbnail size. --rule (1.44:1 on cream) drew it invisibly; --rule-menu is
   2.94:1, still a hairline, but the scaleX draw now actually lands. The dark
   hero board deliberately keeps --rule-ink so it stays quiet. */
.menu-row__rule { background: var(--rule-menu); }

.ledger__line,
.menu-row__line {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ledger__name,
.menu-row__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--ink-900);
  min-width: 0;
  overflow-wrap: break-word;
}
.ledger--compact .ledger__name {
  font-size: 1.125rem;
  color: var(--paper);
  font-weight: 400;
}
.ledger__leader,
.menu-row__leader {
  flex: 1 1 auto;
  min-width: 6px;
  height: 0;
  border-bottom: 1px dotted var(--rule-strong);
  translate: 0 -0.32em;
}
.ledger--compact .ledger__leader { border-bottom-color: var(--rule-ink-strong); }

.ledger__price,
.menu-row__price {
  flex: none;
  font-size: 0.9375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--ink-900);
  white-space: nowrap;
}
.ledger--compact .ledger__price {
  font-size: 0.875rem;
  color: var(--saffron);
  font-weight: 400;
}
.ledger__note {
  margin-top: 3px;
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--muted-ink);
}

/* ------------------------------------------------------- season strip ---- */
.season-strip {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: clamp(14px, 3vw, 40px);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-block: 20px;
  border-top: 1px solid var(--rule);
}
.season-strip__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--saffron-deep);
}
.season-strip__items {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.0625rem, 1.9vw, 1.375rem);
  line-height: 1.4;
  color: var(--ink-900);
}
.season-strip__note {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: right;
}

/* ---------------------------------------------------------------- story -- */
.story {
  --focus: var(--saffron);
  position: relative;
  margin-top: clamp(3rem, 7vw, 6rem);
  padding-block: var(--section-y);
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(228, 176, 78, 0.07), transparent 60%),
    var(--ink);
  color: var(--paper);
}
.story__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.story__title {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.9vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--paper);
  text-wrap: balance;
}
.story__intro { position: sticky; top: 108px; }
.story__lede {
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 2.1vw, 1.5rem);
  line-height: 1.52;
  letter-spacing: -0.004em;
  color: var(--paper);
}
.story__text {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--muted-ink);
  max-width: 54ch;
}

.principles {
  margin-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule-ink);
}
.principles__item {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(12px, 3vw, 32px);
  padding-block: 20px;
  border-bottom: 1px solid var(--rule-ink);
}
.principles__item dt {
  display: flex;
  gap: 12px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--paper);
}
.principles__num {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--saffron);
  padding-top: 4px;
}
.principles__item dd {
  font-size: 0.9375rem;
  line-height: 1.66;
  color: var(--muted-ink);
}

/* ----------------------------------------------------------------- menu -- */
.menu {
  padding-block: var(--section-y);
  background: var(--paper);
  position: relative;
}
.menu__head {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.menu__title {
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.05rem, 4.6vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--ink-900);
  text-wrap: balance;
}
.menu__title em { font-style: italic; color: var(--saffron-deep); }
.menu__intro {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted);
  max-width: 44ch;
  padding-bottom: 6px;
}

.menu__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(2.25rem, 4vw, 3.25rem);
  padding-bottom: 8px;
  min-width: 0;
}

/* filter chips — a horizontally scrollable rail on small screens */
.filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* 6px clears the 4px the focus ring occupies (2px outline + 2px offset);
     the negative margin keeps the rail's visual alignment identical. */
  padding: 6px;
  margin: -6px;
  min-width: 0;
  flex: 1 1 auto;
  /* fade the rail's right edge so the overflow reads as deliberate */
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.filters:focus-within {
  -webkit-mask-image: none;
  mask-image: none;
}
.filters::-webkit-scrollbar { display: none; }

.chip {
  position: relative;
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  background: transparent;
  color: var(--ink-900);
  border: 1px solid var(--field-line);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--dur-small) var(--ease-move),
    border-color var(--dur-small) var(--ease-move),
    color var(--dur-small) var(--ease-move),
    transform var(--dur-micro) var(--ease-move);
}
.chip:active { transform: scale(0.97); }
.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
@media (hover: hover) and (pointer: fine) {
  .chip:not([aria-pressed="true"]):hover { border-color: var(--ink-900); background: var(--paper-2); }
}

.menu__count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: none;
  font-variant-numeric: tabular-nums;
}
.menu__count-num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-900);
}
.menu__count-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* the ledger proper */
.menu-row {
  padding-block: 20px;
}

.menu-row__name { font-size: clamp(1.25rem, 2.2vw, 1.5rem); }
.menu-row__price { font-size: 1rem; }
.menu-row__note {
  margin-top: 4px;
  max-width: 62ch;
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--muted);
}
.menu-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.menu-row__body { min-width: 0; }
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 9px;
  border: 1px solid rgba(126, 86, 17, 0.34);
  border-radius: 999px;
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--saffron-deep);
  background: rgba(228, 176, 78, 0.10);
}
.tag--quiet {
  border-color: var(--rule);
  color: var(--sage);
  background: transparent;
}

.menu-row[data-hidden="true"] { display: none; }

/* FLIP: rows animate from their measured previous position.
   Selector is scoped under html so it outranks the reveal transition. */
html .menu-row.is-flipping {
  transition:
    transform var(--dur-large) var(--ease-expo),
    opacity var(--dur-med) var(--ease-move);
}
.menu-row.is-entering {
  animation: row-in var(--dur-med) var(--ease-enter) both;
}
@keyframes row-in {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}

.menu__empty {
  margin-top: 8px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px dashed var(--rule-strong);
  border-radius: 2px;
  background: var(--paper-2);
}
.menu__empty-title {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.3;
  color: var(--ink-900);
}
.menu__empty-text {
  margin-top: 6px;
  margin-bottom: 18px;
  max-width: 52ch;
  font-size: 0.9375rem;
  line-height: 1.66;
  color: var(--muted);
}

.menu__foot {
  margin-top: 22px;
  max-width: 68ch;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--sage);
}

/* -------------------------------------------------------------- booking -- */
.booking {
  --focus: var(--saffron);
  position: relative;
  padding-block: var(--section-y);
  background: var(--ink-700);
  color: var(--paper);
  overflow: hidden;
}
.booking::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 50% at 8% 0%, rgba(228, 176, 78, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(15, 26, 21, 0.35), transparent 40%);
  pointer-events: none;
}
.booking__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.booking__title {
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.05rem, 4.6vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--paper);
  text-wrap: balance;
}
.booking__title em { font-style: italic; color: var(--saffron); }
.booking__text {
  margin-top: 1.25rem;
  max-width: 42ch;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--muted-ink);
}
.booking__hours {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: 20px;
  border-top: 1px solid var(--rule-ink);
  max-width: 42ch;
}
.booking__hours-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--saffron);
}
.booking__hours-value {
  margin-top: 8px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--paper);
}
.booking__hours-note {
  margin-top: 6px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted-ink);
}

.booking__panel {
  --focus: var(--ink-900);
  position: relative;
  background: var(--paper);
  color: var(--ink-900);
  border-radius: 2px;
  padding: clamp(1.375rem, 3vw, 2.5rem);
  box-shadow: 0 24px 60px -32px rgba(15, 26, 21, 0.6);
}

/* ----------------------------------------------------------------- form -- */
.form { display: grid; gap: 18px; }
.form__head { padding-bottom: 4px; }
.form__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink-900);
}
.form__sub {
  margin-top: 4px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
}

.form__field { display: grid; gap: 6px; min-width: 0; }
.form__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 14px;
}
.form__fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.form__label {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-900);
  padding: 0;
}
.form__optional {
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.form__input {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  background: var(--paper-2);
  color: var(--ink-900);
  border: 1px solid var(--field-line);
  border-radius: 2px;
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.5;
  transition:
    background-color var(--dur-small) var(--ease-move),
    border-color var(--dur-small) var(--ease-move);
}
.form__input::placeholder { color: var(--muted); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .form__input:hover { border-color: var(--ink-900); }
}
.form__input:focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: 2px;
  border-color: var(--ink-900);
  background: #F8F3E8;
}
.form__input--area { min-height: 74px; resize: vertical; }
.form__help {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}
.form__error {
  display: flex;
  gap: 6px;
  font-size: 0.8125rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--error);
}
.form__error::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 8px;
  border-radius: 50%;
  background: currentColor;
}
.form__input[aria-invalid="true"] {
  border-color: var(--error);
  box-shadow: inset 0 0 0 1px var(--error);
}

/* time slots */
.slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.slot { position: relative; display: block; cursor: pointer; }
.slot input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.slot__face {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: var(--paper-2);
  border: 1px solid var(--field-line);
  border-radius: 2px;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
  transition:
    background-color var(--dur-small) var(--ease-move),
    border-color var(--dur-small) var(--ease-move),
    color var(--dur-small) var(--ease-move);
}
.slot input:checked + .slot__face {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.slot input:focus-visible + .slot__face {
  outline: 2px solid var(--ink-900);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .slot:hover .slot__face { border-color: var(--ink-900); }
}

.form__submit { width: 100%; margin-top: 4px; }
.form__honest {
  display: flex;
  gap: 9px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted);
}
.form__honest-mark {
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  border: 1px solid var(--saffron-deep);
  background: rgba(228, 176, 78, 0.35);
}
.form__status {
  min-height: 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--error);
}
.form__status:empty { display: none; }

/* the preview ticket that replaces the form */
.ticket {
  display: grid;
  gap: 18px;
  animation: ticket-in var(--dur-large) var(--ease-enter) both;
}
@keyframes ticket-in {
  from { opacity: 0; translate: 0 10px; }
  to { opacity: 1; translate: 0 0; }
}
.ticket__kicker {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--saffron-deep);
}
.ticket__title {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink-900);
}
.ticket__rows {
  border-top: 1px solid var(--rule-strong);
}
.ticket__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-block: 11px;
  border-bottom: 1px dotted var(--rule-strong);
}
.ticket__row dt {
  flex: none;
  min-width: 88px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.ticket__row dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-900);
}
.ticket__row--note dd { font-size: 0.9375rem; color: var(--muted); }
.ticket__foot {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted);
}
.ticket__edit { justify-self: start; }

/* --------------------------------------------------------------- footer -- */
.site-footer {
  --focus: var(--saffron);
  background: var(--ink-deep);
  color: var(--paper);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule-ink);
}
.brand--footer { color: var(--paper); }
.brand--footer .brand__mark { color: var(--paper); }
.footer__line {
  margin-top: 14px;
  max-width: 34ch;
  font-size: 0.9375rem;
  line-height: 1.66;
  color: var(--muted-ink);
}
.footer__nav-title {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--saffron);
}
.footer__nav ul { margin-top: 8px; }
.footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-small) var(--ease-move), color var(--dur-small) var(--ease-move);
}
@media (hover: hover) and (pointer: fine) {
  .footer__nav a:hover { border-bottom-color: var(--saffron); }
}
.footer__hours {
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1.66;
  color: var(--paper);
}
.footer__closed {
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--muted-ink);
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px 32px;
  padding-top: 22px;
}
.footer__demo {
  max-width: 68ch;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--muted-ink);
}
.footer__demo a {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--saffron);
  /* Inline padding widens the hit area to 44px tall without disturbing the
     line box — inline boxes do not contribute vertical padding to layout. */
  padding-block: 15px;
}
.footer__year {
  font-size: 0.8125rem;
  color: var(--muted-ink);
  white-space: nowrap;
}

/* ------------------------------------------------------- scroll reaction -- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header::after {
      animation: header-solid linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 180px;
    }
    .header__hair {
      animation: header-hair linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 220px;
    }
  }
}
@keyframes header-solid { from { opacity: 0; } to { opacity: 1; } }
@keyframes header-hair { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@supports not (animation-timeline: scroll()) {
  .site-header { background: rgba(244, 238, 225, 0.94); }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .site-header { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--ink-900); }
  :root { --rule: rgba(20, 33, 27, 0.4); --rule-strong: rgba(20, 33, 27, 0.6); --rule-menu: var(--saffron-deep); --rule-ink: rgba(244, 238, 225, 0.4); --rule-ink-strong: rgba(244, 238, 225, 0.6); --muted: #3F463D; --muted-ink: #C3CCC4; --sage: #3F5345; --field-line: #4A4C45; }
}

/* ---------------------------------------------------------- responsive -- */
@media (max-width: 1080px) {
  .story__intro { position: static; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .board { max-width: 560px; }
  .story__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .menu__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .booking__grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .booking__panel { max-width: 620px; }
}

@media (max-width: 860px) {
  .header__inner { flex-wrap: wrap; padding-block: 8px; }
  .nav__list { display: grid; gap: 0; width: 100%; }
  .nav { flex: 1 1 100%; flex-direction: column; align-items: stretch; }
  .nav__link {
    min-height: 48px;
    padding: 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--rule);
  }
  .nav__link::after { display: none; }
  .nav__link[aria-current] { color: var(--saffron-deep); }
  .nav__cta { margin-top: 12px; justify-self: start; }

  /* Without JS the nav is always open, so the header must not stay pinned
     and the list wraps into a compact row instead of a tall stack. */
  html:not(.js) .site-header { position: static; }
  html:not(.js) .nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 20px;
  }
  html:not(.js) .nav__list { display: flex; flex-wrap: wrap; gap: 0 20px; width: auto; }
  html:not(.js) .nav__link { min-height: 44px; padding: 0; border-bottom: 0; font-size: 0.9375rem; }
  /* The panel CTA duplicates the "Đặt bàn" nav link — drop it when the list
     is already open, so the header stays one compact row. */
  html:not(.js) .nav__cta { display: none; }

  /* With JS: the same list becomes a disclosure panel. */
  html.js .nav-toggle { display: inline-flex; }
  html.js .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    gap: 4px;
    padding: 10px var(--gutter) 22px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 20px 30px -26px rgba(15, 26, 21, 0.45);
    opacity: 0;
    visibility: hidden;
    translate: 0 -8px;
    transition:
      opacity var(--dur-med) var(--ease-enter),
      translate var(--dur-med) var(--ease-enter),
      visibility 0s linear var(--dur-med);
  }
  html.js .nav.is-open {
    opacity: 1;
    visibility: visible;
    translate: none;
    transition:
      opacity var(--dur-med) var(--ease-enter),
      translate var(--dur-med) var(--ease-enter),
      visibility 0s;
  }
  html.js .header__inner { flex-wrap: nowrap; padding-block: 0; }
  html.js .nav { flex: 0 1 auto; }
}

@media (max-width: 700px) {
  :root { --gutter: 20px; }
  .season-strip {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .season-strip__note { text-align: left; }
  .menu__toolbar { flex-wrap: wrap; gap: 12px; }
  .filters { width: 100%; }
  .menu__count { margin-left: auto; }
  .principles__item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .form__pair { grid-template-columns: minmax(0, 1fr); }
  .footer__top { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .footer__nav ul { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 2px; }
}

@media (max-width: 420px) {
  :root { --gutter: 18px; }
  .slots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .slot__face { font-size: 0.875rem; }
  .hero__actions .btn { flex: 1 1 auto; }
}

@media (max-width: 360px) {
  .hero__title { font-size: 2.2rem; }
  .board { padding: 1.25rem;  }
  .booking__panel { padding: 1.25rem; }
}

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  html.js-motion [data-reveal] { opacity: 1 !important; translate: none !important; scale: none !important; }
  html.js-motion .ledger__row:not(.is-revealed) .ledger__rule,
  html.js-motion .menu-row:not(.is-revealed) .menu-row__rule { transform: scaleX(1); }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .hero__title { animation: none; }
  .menu-row.is-entering { animation: none; }
  html { scroll-behavior: auto; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .nav { transition: none; }
}

/* Editorial photography: one food spread, seasonal ingredients, one dish study. */
.hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.board__photo { margin: 0 0 24px; }
.board__photo img, .story__photo img, .menu__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.board__photo figcaption, .story__photo figcaption, .menu__photo figcaption { margin-top: 9px; font-size: 12px; line-height: 1.6; }
.board__photo figcaption, .story__photo figcaption { color: var(--muted-ink); }
.story__photo { margin: 28px 0 0; max-width: 520px; }
.menu__photo { margin: 0 0 18px; }
.menu__photo figcaption { color: var(--muted); }
.menu__editorial { min-width: 0; }
@media (max-width: 1080px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } .board { max-width: 620px; width: 100%; } }