@charset "UTF-8";
/* ==========================================================================
   HAVELI INDIAN CUISINE — North Conway, NH
   Design system
   --------------------------------------------------------------------------
   A "haveli" is a Punjabi courtyard mansion: carved sandstone arches, jali
   lattice screens, deep shaded verandas opening onto bright courtyards. The
   whole site is built from that one idea.

   The brand's saffron is kept, but demoted. It appears as hairlines, small
   caps and a single call to action — never as a large flat fill. Big surfaces
   are charred wood and parchment; the food photography supplies the colour.

   CONTENTS
     1. Tokens
     2. Reset & base
     3. Typography
     4. Ornament (rules, phulkari, jali, arches)
     5. Buttons, pills & tags
     6. Top bar, header & navigation
     7. Hero
     8. Sections — welcome, favourites, specials, categories, spice, reviews
     9. Visit & map
    10. Menu page
    11. Contact page
    12. Footer
    13. Motion, utilities, print
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* ---- Ink: warm charred wood, taken from the dish photography ---- */
  --ink:        #120e0b;
  --ink-1:      #171210;
  --ink-2:      #1e1815;
  --ink-3:      #26201b;
  --ink-4:      #322922;

  /* ---- Parchment ---- */
  --cream:      #f4ecdd;
  --cream-1:    #fbf6ec;
  --cream-2:    #f0e5d1;
  --cream-3:    #e4d6bd;

  /* ---- Accents ---- */
  --saffron:    #e0a028;   /* the brand yellow, deepened and calmed */
  --saffron-1:  #f0bd60;
  --saffron-2:  #a8741a;
  --madder:     #9a3324;   /* tandoori red / deep chilli */
  --madder-1:   #b8442f;
  --jade:       #6f8259;   /* cilantro, and the green in phulkari thread */
  --brass:      #c08f4e;   /* hairlines, ornament */
  --brass-dim:  #7d5c34;

  /* ---- Semantic ---- */
  --bg:            var(--ink);
  --surface:       var(--ink-2);
  --surface-hi:    var(--ink-3);
  --text:          var(--cream);
  --text-dim:      rgb(244 236 221 / 68%);
  --text-faint:    rgb(244 236 221 / 56%);   /* 5.6:1 on ink — AA at 11px */
  --line:          rgb(192 143 78 / 24%);
  --line-soft:     rgb(244 236 221 / 10%);
  --line-strong:   rgb(192 143 78 / 52%);

  /* Saffron as *text*. On parchment the brand yellow only reaches ~2.5:1, so
     light sections swap in a deep antique gold (5.0:1) and keep the bright
     saffron for button fills, where the dark ink sits on top of it. */
  --accent-text:   var(--saffron);
  --chip-bg:       rgb(18 14 11 / 45%);

  /* ---- Type ---- */
  --display: "Marcellus", "Playfair Display", Georgia, "Times New Roman", serif;
  --script:  "Cormorant Garamond", Georgia, serif;
  --body:    "Karla", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gurmukhi: "Noto Serif Gurmukhi", var(--display), serif;

  --fs-hero:  clamp(2.9rem, 8.2vw, 6.4rem);
  --fs-h1:    clamp(2.4rem, 5.6vw, 4.1rem);
  --fs-h2:    clamp(1.95rem, 4vw, 3rem);
  --fs-h3:    clamp(1.35rem, 2.1vw, 1.7rem);
  --fs-h4:    clamp(1.1rem, 1.5vw, 1.25rem);
  --fs-body:  clamp(1rem, 0.35vw + 0.94rem, 1.09rem);
  --fs-lead:  clamp(1.09rem, 0.7vw + 0.95rem, 1.28rem);
  --fs-small: 0.875rem;
  --fs-micro: 0.72rem;

  --track-caps: 0.2em;   /* small caps eyebrows */
  --track-wide: 0.08em;

  /* ---- Space & shape ---- */
  --gut:  clamp(1.15rem, 4vw, 2.5rem);
  --wrap: 78rem;
  --wrap-narrow: 46rem;
  --sec:  clamp(4.5rem, 9vw, 8.5rem);
  --r-sm: 3px;
  --r:    5px;

  --shadow-1: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px -12px rgb(0 0 0 / 55%);
  --shadow-2: 0 2px 4px rgb(0 0 0 / 32%), 0 26px 60px -26px rgb(0 0 0 / 72%);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --slow: 0.7s var(--ease);
  --med:  0.38s var(--ease);
  --fast: 0.18s var(--ease);

  --nav-h: 4.75rem;

  /* ---- Jali: an eight-point star lattice, the screen of a haveli window ---- */
  --jali: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cg fill='none' stroke='%23c08f4e' stroke-width='0.9'%3E%3Cpath d='M26 1 51 26 26 51 1 26Z'/%3E%3Cpath d='M8.3 8.3h35.4v35.4H8.3z'/%3E%3Ccircle cx='26' cy='26' r='6.2'/%3E%3Cpath d='M26 1v-2M26 51v2M1 26h-2M51 26h2'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-body)/1.7 var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; height: auto; }
img { background: var(--ink-3); }

/* The <picture> wrapper is a delivery detail, not a layout box. Removing it
   from the box tree means every rule written against the <img> — including
   height:100% against an arch mount — keeps resolving exactly as it did
   before responsive sources were introduced. */
picture { display: contents; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: 3px;
  border-radius: 2px;
}

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

hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

.skip {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -120%;
  z-index: 200;
  padding: 0.7rem 1.3rem;
  background: var(--saffron);
  color: var(--ink);
  font: 600 var(--fs-small)/1 var(--body);
  letter-spacing: var(--track-wide);
  border-radius: 0 0 var(--r) var(--r);
  transition: translate var(--fast);
}
.skip:focus { translate: -50% 0; }

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

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- Layout ---- */

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

.wrap--narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--sec); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

/* Parchment sections — the sunlit courtyard against the shaded veranda */
.section--light {
  background: var(--cream-1);
  color: var(--ink);
  --text: var(--ink);
  --text-dim: rgb(18 14 11 / 72%);
  --text-faint: rgb(18 14 11 / 62%);
  --line: rgb(154 51 36 / 22%);
  --line-soft: rgb(18 14 11 / 10%);
  --line-strong: rgb(154 51 36 / 42%);
  --surface: #fff;
  --surface-hi: var(--cream-2);
  --accent-text: #8f6118;
  --brass: #9c7433;
  --chip-bg: var(--cream-2);
}

.section--deep { background: var(--ink-1); }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.62;
  color: var(--text-dim);
}

/* Small-caps eyebrow — carries the saffron so headlines don't have to */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.1rem;
  font: 500 var(--fs-micro)/1 var(--body);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}

/* Gurmukhi — Punjabi script, used as quiet ornament, never as sole meaning.
   Gurmukhi sits low and needs more room than Latin at the same size, so it is
   set slightly larger wherever it shares a line with English. */
.gur {
  font-family: var(--gurmukhi);
  font-size: 0.95em;
  letter-spacing: 0.02em;
  color: var(--brass);
  line-height: 1.9;
}
.eyebrow .gur {
  font-size: 1.35em;
  line-height: 1;
  color: inherit;
  letter-spacing: 0;
}

.section-head { max-width: 44rem; margin-bottom: clamp(2.4rem, 4vw, 3.6rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--fs-h2); }
.section-head .lead { margin-top: 1.1rem; }

/* An initial capital, like the first letter of a hand-lettered menu */
.dropcap::first-letter {
  float: left;
  font-family: var(--display);
  font-size: 3.6em;
  line-height: 0.78;
  padding: 0.06em 0.14em 0 0;
  color: var(--accent-text);
}

/* ==========================================================================
   4. ORNAMENT
   ========================================================================== */

/* ---- Brass rule with a centred lozenge ---- */
.rule {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-block: 1.6rem;
}
.rule::before,
.rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.rule i {
  width: 7px;
  height: 7px;
  rotate: 45deg;
  border: 1px solid var(--brass);
  flex: none;
}
.rule--left::before { flex: 0 0 1.7rem; }

/* ---- Phulkari: Punjabi darning-stitch embroidery, woven from gradients ---- */
.phulkari {
  height: 9px;
  border: 0;
  background:
    repeating-linear-gradient(135deg,
      var(--madder) 0 5px, transparent 5px 10px),
    repeating-linear-gradient(45deg,
      var(--saffron) 0 5px, transparent 5px 10px),
    var(--jade);
  opacity: 0.9;
}
.phulkari--thin { height: 5px; }

/* ---- Jali lattice overlay ---- */
.jali-bg { position: relative; isolation: isolate; }
.jali-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--jali);
  background-size: 52px 52px;
  opacity: 0.075;
  pointer-events: none;
}
.jali-bg--faint::before { opacity: 0.045; }

/* ---- Arches: the carved openings of a haveli facade ----
   An arch-shaped mount. Both the mat and the image carry the same clip path,
   so the padding between them reads as a brass surround that follows the
   curve. A stroked border cannot do this — a clipped rectangle keeps only its
   straight edges — which is why the mat is a background, not a border. */
.arch {
  clip-path: url(#archPointed);
  overflow: hidden;
}
.arch-cusp { clip-path: url(#archCusped); }

.arch-mount {
  position: relative;
  clip-path: url(#archPointed);
  padding: var(--mat, 5px);
  background:
    linear-gradient(170deg, var(--line-strong) 0%, var(--line) 55%, var(--line-strong) 100%);
  transition: background var(--med);
}
.arch-mount > img,
.arch-mount > picture > img {
  clip-path: url(#archPointed);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A mounted opening with a second arch set behind it, like a niche cut into
   the wall behind the frame. The offset is reserved as margin rather than
   allowed to spill, so the niche never pushes past its column. */
.arch-frame {
  position: relative;
  --mat: 7px;
  --niche: clamp(0.7rem, 2.4vw, 1.4rem);
  margin-right: var(--niche);
  margin-bottom: var(--niche);
}
.arch-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  translate: var(--niche) var(--niche);
  clip-path: url(#archPointed);
  background: var(--brass);
  opacity: 0.22;
  pointer-events: none;
}

/* ==========================================================================
   5. BUTTONS, PILLS & TAGS
   ========================================================================== */

.btn {
  --btn-bg: var(--saffron);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: var(--r-sm);
  font: 600 var(--fs-small)/1 var(--body);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--fast), border-color var(--fast),
              color var(--fast), translate var(--fast), box-shadow var(--fast);
}
.btn:hover {
  --btn-bg: var(--saffron-1);
  translate: 0 -2px;
  box-shadow: 0 10px 26px -12px rgb(224 160 40 / 55%);
}
.btn:active { translate: 0; box-shadow: none; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover {
  --btn-bg: transparent;
  --btn-fg: var(--saffron);
  border-color: var(--saffron);
  box-shadow: none;
}

.btn--sm { padding: 0.68rem 1.2rem; font-size: var(--fs-micro); }
.btn--block { width: 100%; }

/* Quiet text link with an animated underline */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: 600 var(--fs-small)/1.4 var(--body);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--accent-text);
  padding-bottom: 2px;
  background: linear-gradient(currentColor 0 0) 0 100% / 0 1px no-repeat;
  transition: background-size var(--med), color var(--fast);
}
.link:hover { background-size: 100% 1px; }
.link svg { transition: translate var(--fast); }
.link:hover svg { translate: 3px 0; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

/* ---- Dietary & heat tags ---- */
.tags { display: inline-flex; gap: 0.32rem; vertical-align: 2px; }

.tag {
  display: inline-grid;
  place-items: center;
  min-width: 1.42em;
  height: 1.42em;
  padding-inline: 0.34em;
  border: 1px solid currentColor;
  border-radius: 2px;
  font: 600 0.63rem/1 var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: help;
}
.tag--veg   { color: var(--jade); }
.tag--vegan { color: var(--jade); }
.tag--gf    { color: var(--brass); }
.tag--spicy { color: var(--madder-1); border-color: currentColor; }

.section--light .tag--veg,
.section--light .tag--vegan { color: #4d5f39; }
.section--light .tag--gf { color: #8a5f28; }

/* Status chip — "Open now" / "Closed" */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.85rem 0.42rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 100px;
  background: var(--chip-bg);
  backdrop-filter: blur(6px);
  font: 500 var(--fs-micro)/1 var(--body);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-dim);
}
.status b { color: var(--text); font-weight: 600; }
.status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-faint);
  flex: none;
}
.status[data-open="true"]::before {
  background: #6fb56f;
  box-shadow: 0 0 0 3px rgb(111 181 111 / 22%);
}
.status[data-open="false"]::before { background: var(--madder-1); }

/* ==========================================================================
   6. TOP BAR, HEADER & NAVIGATION
   ========================================================================== */

.topbar {
  background: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}
.topbar__in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, 3vw, 2rem);
  min-height: 2.4rem;
  text-align: center;
}
.topbar a { transition: color var(--fast); }
.topbar a:hover { color: var(--saffron); }
.topbar__sep { color: var(--brass-dim); }
.topbar__cta { color: var(--saffron); font-weight: 600; }

@media (max-width: 40rem) {
  .topbar__in { min-height: 2.2rem; }
  .topbar__hide { display: none; }
}

/* ---- Header ---- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line-soft);
  transition: border-color var(--med);
}

/* The translucent bar is painted by a pseudo-element rather than by .header
   itself. This is load-bearing: backdrop-filter (like transform and filter)
   makes an element the containing block for any position:fixed descendant, and
   the mobile drawer is nested inside the header. With the filter on .header,
   the drawer's inset:0 resolved against the header bar — roughly 76px tall —
   so it never covered the screen and the page showed straight through it. */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(18 14 11 / 82%);
  backdrop-filter: blur(14px) saturate(140%);
  transition: background var(--med);
  pointer-events: none;
}
.header[data-stuck="true"] {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 34px -20px rgb(0 0 0 / 85%);
}
.header[data-stuck="true"]::before { background: rgb(18 14 11 / 96%); }

.header__in {
  position: relative;
  z-index: 2;            /* keeps the wordmark and burger above the open drawer */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--nav-h);
}

/* ---- Wordmark: a typographic refinement of the existing logo lockup ---- */
.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  flex: none;
}
.mark__seal {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-family: var(--gurmukhi);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--saffron);
  transition: border-color var(--fast), color var(--fast);
}
.mark:hover .mark__seal { border-color: var(--saffron); }
.mark__txt { display: grid; gap: 0.16rem; }
.mark__name {
  font-family: var(--display);
  font-size: 1.42rem;
  line-height: 0.9;
  letter-spacing: 0.01em;
  color: var(--text);
}
.mark__sub {
  font: 500 0.6rem/1 var(--body);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-dim);
}

@media (max-width: 26rem) {
  .mark__seal { display: none; }
}

/* ---- Desktop nav ---- */

.nav { display: contents; }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.6vw, 2.3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__link {
  position: relative;
  display: block;
  padding-block: 0.5rem;
  font: 500 var(--fs-small)/1 var(--body);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color var(--fast);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--saffron);
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--med);
}
.nav__link:hover { color: var(--text); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { scale: 1 1; }
.nav__link[aria-current="page"] { color: var(--text); }

.nav__end { display: flex; align-items: center; gap: 1.3rem; }

.nav__tel {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font: 500 var(--fs-small)/1 var(--body);
  letter-spacing: 0.02em;
  color: var(--text-dim);
  transition: color var(--fast);
}
.nav__tel:hover { color: var(--saffron); }

/* ---- Burger ---- */

/* The three bars are positioned from the button's centre rather than stacked
   in flow. As grid items each bar took its own auto row, so the gaps compounded
   and the two strokes of the close "X" landed 17.6px apart instead of crossing.
   Anchoring every bar to the same point makes the X exact by construction. */
.burger {
  display: none;
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.6rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
}
.burger span {
  position: absolute;
  top: calc(50% - 0.75px);
  left: calc(50% - 9px);
  width: 18px;
  height: 1.5px;
  background: var(--text);
  transition: translate var(--med), rotate var(--med), opacity var(--fast);
}
.burger span:nth-child(1) { translate: 0 -6px; }
.burger span:nth-child(3) { translate: 0 6px; }

.burger[aria-expanded="true"] span:nth-child(1) { translate: 0 0; rotate: 45deg; }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { translate: 0 0; rotate: -45deg; }

/* ---- Drawer ---- */

@media (max-width: 60rem) {
  .burger { display: grid; }

  /* The drawer is a child of .header__in, not a sibling, so raising the bar
     raises the drawer with it. The wordmark and burger are lifted above the
     drawer individually — otherwise the open drawer covers the burger and
     there is no way to dismiss it. */
  .header__in > a,
  .burger {
    position: relative;
    z-index: 2;
  }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;          /* inside .header's stacking context, under .header__in */
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    /* Clears the top bar as well as the header bar, since the drawer covers
       the full viewport */
    padding: calc(var(--nav-h) + 3rem) var(--gut) 3rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Solid ink underneath, jali knocked back to a whisper by the flat wash
       above it. The last layer is opaque, so nothing can bleed through. */
    background-color: var(--ink);
    background-image:
      linear-gradient(rgb(18 14 11 / 95%), rgb(18 14 11 / 95%)),
      var(--jali);
    background-size: cover, 52px 52px;
    opacity: 0;
    visibility: hidden;
    translate: 0 -1.2rem;
    transition: opacity var(--med), translate var(--med), visibility var(--med);
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; translate: 0; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-block: 1px solid var(--line-soft);
  }
  .nav__list li + li { border-top: 1px solid var(--line-soft); }
  .nav__link {
    padding: 1.15rem 0;
    font-family: var(--display);
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text);
  }
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--saffron); }

  .nav__end { flex-direction: column; align-items: stretch; gap: 1rem; }
  .nav__tel { justify-content: center; font-size: var(--fs-body); }
}

/* ==========================================================================
   7. HERO
   ========================================================================== */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(94svh, 54rem);
  padding-block: clamp(4rem, 10vw, 7.5rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* Pull the photograph back a step so the type, not the turmeric, leads */
  filter: saturate(0.82) brightness(0.86) contrast(1.04);
}

/* Warm scrim: readable type, food still glowing through */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(88% 62% at 50% 46%, rgb(18 14 11 / 74%) 0%, rgb(18 14 11 / 52%) 58%, rgb(18 14 11 / 30%) 100%),
    radial-gradient(130% 84% at 50% 42%, transparent 0%, rgb(18 14 11 / 62%) 66%, rgb(18 14 11 / 92%) 100%),
    linear-gradient(180deg, rgb(18 14 11 / 90%) 0%, rgb(18 14 11 / 34%) 24%, rgb(18 14 11 / 56%) 66%, var(--ink) 100%);
}

.hero__jali {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--jali);
  background-size: 58px 58px;
  opacity: 0.06;
  pointer-events: none;
}

.hero__in {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0;
}

/* The brass arch that frames the headline — the haveli window itself.
   Anchored to the foot of the hero so both legs are visible: without them the
   curve alone just reads as a stray circle. preserveAspectRatio is "none" so
   the arch stretches to the content, and the strokes are non-scaling so they
   stay hairlines at any size. */
.hero__arch {
  position: absolute;
  z-index: -1;
  bottom: -2px;
  left: 50%;
  translate: -50% 0;
  width: min(41rem, 86vw);
  height: min(112%, 46rem);
  color: var(--brass);
  opacity: 0.42;
  pointer-events: none;
}
.hero__arch svg { width: 100%; height: 100%; }

.hero__gur {
  font-family: var(--gurmukhi);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  color: var(--saffron);
  opacity: 0.9;
  margin-bottom: 0.85rem;
}

.hero__title {
  font-size: var(--fs-hero);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin-bottom: 0.15em;
}
.hero__title em {
  display: block;
  font-family: var(--script);
  font-style: italic;
  font-weight: 500;
  font-size: 1.06em;
  letter-spacing: -0.015em;
  color: var(--saffron);
}

.hero__sub {
  max-width: 34rem;
  font-size: var(--fs-lead);
  color: var(--text-dim);
  margin-bottom: 2rem;
}

.hero .rule { width: min(20rem, 60vw); margin-block: 1.35rem 1.5rem; }

.hero__ctas { margin-bottom: 2rem; justify-content: center; }

/* Three arch-framed dishes rising into the hero */
.hero__peek {
  display: flex;
  justify-content: center;
  gap: clamp(0.7rem, 2vw, 1.4rem);
  width: 100%;
  margin-top: clamp(1rem, 4vw, 2.5rem);
}
.hero__peek figure {
  margin: 0;
  width: clamp(5.5rem, 14vw, 10rem);
  aspect-ratio: 3 / 4;
  --mat: 4px;
}
.hero__peek figure:nth-child(2) { translate: 0 -1.4rem; }

@media (max-width: 34rem) {
  .hero__peek figure:nth-child(3) { display: none; }
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  font: 500 var(--fs-micro)/1 var(--body);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-faint);
}
.hero__scroll i {
  width: 1px;
  height: 2.2rem;
  background: linear-gradient(var(--brass), transparent);
}

@media (max-width: 50rem) { .hero__scroll { display: none; } }

/* ---- Page hero (interior pages) ---- */

.phero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(58svh, 30rem);
  padding-block: clamp(4.5rem, 9vw, 7rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
}
.phero__media { position: absolute; inset: 0; z-index: -2; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; }
.phero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(18 14 11 / 76%) 0%, rgb(18 14 11 / 52%) 42%, rgb(18 14 11 / 92%) 100%);
}
.phero__in { max-width: 46rem; }
.phero h1 { font-size: var(--fs-h1); }
.phero .lead { margin-top: 1.1rem; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
  font: 500 var(--fs-micro)/1 var(--body);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}
.crumbs a { transition: color var(--fast); }
.crumbs a:hover { color: var(--saffron); }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--brass-dim); }

/* ==========================================================================
   8. SECTIONS
   ========================================================================== */

/* ---- Welcome / story ---- */

.welcome {
  display: grid;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
  .welcome { grid-template-columns: 0.92fr 1.08fr; }
  .welcome--flip > :first-child { order: 2; }
}

.welcome__media { position: relative; }
.welcome__media figure { margin: 0; }
.welcome__media figure { aspect-ratio: 4 / 5; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 1.4rem;
  margin-top: 2.3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-soft);
}
.stat b {
  display: block;
  font-family: var(--display);
  font-size: 1.85rem;
  font-weight: 400;
  line-height: 1;
  color: var(--accent-text);
  margin-bottom: 0.4rem;
}
.stat span {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---- Favourites grid ---- */

.dish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: clamp(1.1rem, 2.4vw, 2rem) clamp(0.9rem, 2vw, 1.6rem);
}

.dish {
  display: grid;
  gap: 0.9rem;
  text-align: center;
}
.dish__media { aspect-ratio: 3 / 4; }
.dish__media img { transition: scale var(--slow); }
.dish:hover .dish__media {
  background: linear-gradient(170deg, var(--brass) 0%, var(--line-strong) 60%, var(--brass) 100%);
}
.dish:hover .dish__media img { scale: 1.055; }

.dish__name {
  font-size: var(--fs-h4);
  line-height: 1.25;
}
.dish__price {
  font: 500 var(--fs-small)/1 var(--body);
  letter-spacing: var(--track-wide);
  color: var(--accent-text);
}
.dish__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

/* ---- Specials ---- */

.specials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
  counter-reset: sp;
}

.special {
  position: relative;
  display: grid;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  transition: border-color var(--med), translate var(--med), box-shadow var(--med);
}
.special:hover {
  border-color: var(--line);
  translate: 0 -4px;
  box-shadow: var(--shadow-2);
}
.special__media { aspect-ratio: 16 / 10; overflow: hidden; }
.special__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: scale var(--slow);
}
.special:hover .special__media img { scale: 1.06; }

.special__body { padding: clamp(1.3rem, 2.4vw, 1.9rem); }
.special__no {
  counter-increment: sp;
  display: block;
  font-family: var(--display);
  font-size: 0.95rem;
  color: var(--brass);
  margin-bottom: 0.6rem;
}
.special__no::before { content: "0" counter(sp); }
.special__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.6rem;
}
.special__head h3 { font-size: var(--fs-h3); }
.special__head b {
  font: 500 var(--fs-body)/1 var(--body);
  color: var(--accent-text);
  white-space: nowrap;
}
.special__body p { color: var(--text-dim); font-size: var(--fs-small); }

/* ---- Category cards ---- */

/* Nine photographed sections. auto-fit would tile them 4-up and leave a
   single orphan on the last row, so the column count is pinned: 3 divides 9
   exactly, and the 2-up case stretches its last card across the empty slot. */
.cats {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: clamp(0.9rem, 2vw, 1.4rem);
}
@media (min-width: 38rem) {
  .cats { grid-template-columns: repeat(2, 1fr); }
  .cats > :last-child:nth-child(odd) { grid-column: span 2; }
}
@media (min-width: 62rem) {
  .cats { grid-template-columns: repeat(3, 1fr); }
  .cats > :last-child:nth-child(odd) { grid-column: auto; }
}

.cat {
  position: relative;
  display: grid;
  align-content: end;
  min-height: 15rem;
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line-soft);
  transition: border-color var(--med);
}
.cat:hover { border-color: var(--line-strong); }
.cat img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: scale var(--slow);
}
.cat:hover img { scale: 1.07; }
.cat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(18 14 11 / 22%) 0%, rgb(18 14 11 / 68%) 55%, rgb(18 14 11 / 93%) 100%);
  transition: background var(--med);
}
.cat:hover::before {
  background: linear-gradient(180deg, rgb(18 14 11 / 34%) 0%, rgb(18 14 11 / 74%) 55%, rgb(18 14 11 / 95%) 100%);
}
.cat__gur {
  font-family: var(--gurmukhi);
  font-size: 0.9rem;
  color: var(--saffron-1);
  opacity: 0.85;
  margin-bottom: 0.3rem;
}
.cat h3 { font-size: var(--fs-h3); color: #fff; }
.cat__count {
  margin-top: 0.5rem;
  font: 500 var(--fs-micro)/1 var(--body);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: rgb(255 255 255 / 62%);
}
.cat__arrow {
  position: absolute;
  top: clamp(1.2rem, 2.4vw, 1.7rem);
  right: clamp(1.2rem, 2.4vw, 1.7rem);
  width: 2.1rem; height: 2.1rem;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 26%);
  border-radius: 50%;
  color: #fff;
  opacity: 0;
  translate: -6px 0;
  transition: opacity var(--med), translate var(--med), background var(--fast);
}
.cat:hover .cat__arrow {
  opacity: 1; translate: 0;
  background: var(--saffron);
  border-color: var(--saffron);
  color: var(--ink);
}
/* ---- Spice scale ---- */

.spice {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 56rem) { .spice { grid-template-columns: 0.85fr 1.15fr; } }

.spice__scale { display: grid; gap: 0.55rem; }

.spice__btn {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.95rem 1.15rem;
  text-align: left;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  color: var(--text-dim);
  transition: border-color var(--fast), background var(--fast), color var(--fast);
}
.spice__btn:hover { border-color: var(--line); color: var(--text); }
.spice__btn[aria-selected="true"] {
  border-color: var(--madder-1);
  background: rgb(154 51 36 / 12%);
  color: var(--text);
}
.spice__lvl {
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--madder-1);
}
.spice__btn[aria-selected="true"] .spice__lvl { color: var(--accent-text); }
.spice__name {
  font: 500 var(--fs-body)/1.3 var(--body);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  font-size: var(--fs-small);
}
.spice__dots { display: flex; gap: 3px; }
.spice__dots i {
  width: 5px; height: 12px;
  border-radius: 3px;
  background: var(--line-soft);
}
.spice__dots i.on { background: var(--madder-1); }
.spice__btn[aria-selected="true"] .spice__dots i.on { background: var(--saffron); }

.spice__note {
  min-height: 4.5rem;
  font-size: var(--fs-lead);
  font-family: var(--script);
  font-style: italic;
  color: var(--text);
  line-height: 1.5;
}

/* ---- Reviews ---- */

/* Multi-column, not grid. Quotes are wildly different lengths, so a grid
   leaves ragged rows and strands the last card alone; columns let them flow
   and balance, with no orphan row at any count. */
.reviews {
  columns: 3 20rem;
  column-gap: clamp(1rem, 2vw, 1.6rem);
}

.review {
  break-inside: avoid;
  margin-bottom: clamp(1rem, 2vw, 1.6rem);
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--line-strong);
}
.review__stars { display: flex; gap: 2px; color: var(--accent-text); }
.review__stars svg { width: 14px; height: 14px; }
.review p {
  font-family: var(--script);
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.62;
  color: var(--text);
}
.review footer {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}
.review footer b { color: var(--text-dim); font-weight: 600; letter-spacing: var(--track-wide); }
.review footer span::before { content: "· "; color: var(--brass-dim); }

/* ---- Ordering strip ---- */

.strip {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink-1);
  border-block: 1px solid var(--line);
}
.strip__in {
  display: grid;
  gap: 1.8rem;
  justify-items: center;
  text-align: center;
  padding-block: clamp(3.2rem, 7vw, 5.5rem);
}
.strip h2 { font-size: var(--fs-h2); max-width: 32rem; }
.strip .lead { max-width: 38rem; }

/* ==========================================================================
   9. VISIT & MAP
   ========================================================================== */

.visit {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 56rem) { .visit { grid-template-columns: 1fr 1.15fr; } }

.info-card {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--surface);
  border: 1px solid var(--line-soft);
}
.info-card + .info-card { margin-top: 1rem; }

.info-block + .info-block {
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
}
.info-block h3 {
  font: 500 var(--fs-micro)/1 var(--body);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 0.9rem;
}
.info-block p { color: var(--text-dim); }
.info-block a:not(.btn):not(.link) {
  color: var(--text);
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--fast), border-color var(--fast);
}
.info-block a:not(.btn):not(.link):hover { color: var(--saffron); border-color: var(--saffron); }

/* Hours list with dotted leaders */
.hours { margin: 0; padding: 0; list-style: none; }
.hours li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-block: 0.44rem;
  font-size: var(--fs-small);
  color: var(--text-dim);
}
.hours li + li { border-top: 1px dotted var(--line-soft); }
.hours dt, .hours .d { flex: none; }
.hours .dots {
  flex: 1;
  height: 0;
  border-bottom: 1px dotted var(--line-soft);
  translate: 0 -0.28em;
}
.hours .t { flex: none; font-variant-numeric: tabular-nums; }
.hours li[data-today="true"] { color: var(--text); }
.hours li[data-today="true"] .d { font-weight: 700; }
.hours li[data-today="true"] .t { color: var(--accent-text); font-weight: 600; }

.map {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  padding: 5px;
  background: var(--surface-hi);
}
.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: saturate(0.72) contrast(1.04) brightness(0.92);
}
@media (min-width: 56rem) { .map { aspect-ratio: 1 / 1; } }

/* ==========================================================================
   10. MENU PAGE
   ========================================================================== */

/* ---- Sticky category rail ---- */

.catnav {
  position: sticky;
  top: var(--nav-h);
  z-index: 60;
  background: rgb(18 14 11 / 94%);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.catnav__in {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 0.7rem;
  scroll-snap-type: x proximity;
}
.catnav__in::-webkit-scrollbar { display: none; }
.catnav a {
  flex: none;
  padding: 0.5rem 0.95rem;
  border: 1px solid transparent;
  border-radius: 100px;
  font: 500 var(--fs-micro)/1 var(--body);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-faint);
  scroll-snap-align: center;
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.catnav a:hover { color: var(--text); border-color: var(--line); }
.catnav a[aria-current="true"] {
  color: var(--ink);
  background: var(--saffron);
  border-color: var(--saffron);
}

/* ---- Tools: search + filters ---- */

.tools {
  display: grid;
  gap: 1rem;
  align-items: center;
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
}
@media (min-width: 48rem) {
  .tools { grid-template-columns: minmax(14rem, 22rem) 1fr; }
}

.search {
  position: relative;
  display: flex;
  align-items: center;
}
.search svg {
  position: absolute;
  left: 0.85rem;
  width: 15px; height: 15px;
  color: var(--text-faint);
  pointer-events: none;
}
.search input {
  width: 100%;
  padding: 0.8rem 2.4rem 0.8rem 2.4rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-small);
  transition: border-color var(--fast);
}
.search input::placeholder { color: var(--text-faint); }
/* Suppress the browser's own clear button — we ship our own, and two
   overlapping crosses is worse than none */
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search input:focus { border-color: var(--line-strong); outline: none; }
.search input:focus-visible { outline: 2px solid var(--saffron); outline-offset: 2px; }
.search__clear {
  position: absolute;
  right: 0.5rem;
  width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--text-faint);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fast), color var(--fast);
}
.search__clear.on { opacity: 1; pointer-events: auto; }
.search__clear:hover { color: var(--text); }

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.filters__label {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-faint);
  margin-right: 0.35rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.48rem 0.9rem;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 100px;
  font: 500 var(--fs-micro)/1 var(--body);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.chip:hover { color: var(--text); border-color: var(--line); }
.chip[aria-pressed="true"] {
  color: var(--ink);
  background: var(--saffron);
  border-color: var(--saffron);
}

.result-note {
  padding-bottom: 1.4rem;
  font-size: var(--fs-small);
  color: var(--text-faint);
}

/* ---- Category block ---- */

.mcat { padding-block: clamp(2.6rem, 5vw, 4.5rem); }
.mcat + .mcat { border-top: 1px solid var(--line-soft); }
.mcat[hidden] { display: none; }

.mcat__banner {
  position: relative;
  height: clamp(8rem, 16vw, 13rem);
  margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line-soft);
}
.mcat__banner img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.mcat__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgb(18 14 11 / 92%) 0%, rgb(18 14 11 / 70%) 48%, rgb(18 14 11 / 34%) 100%);
}
.mcat__banner > div {
  display: grid;
  align-content: center;
  height: 100%;
  padding: clamp(1.1rem, 2.5vw, 2rem);
}

.mcat__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem 1.5rem;
  margin-bottom: 0.5rem;
}
.mcat__head h2 { font-size: var(--fs-h2); }
.mcat__gur {
  font-family: var(--gurmukhi);
  font-size: 1rem;
  color: var(--accent-text);
  margin-bottom: 0.35rem;
}
.mcat__blurb { max-width: 40rem; color: var(--text-dim); font-size: var(--fs-small); }
.mcat__note {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.4rem 0.8rem;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--brass);
}

/* ---- Item list: classic dotted-leader menu setting ---- */

.items {
  display: grid;
  gap: clamp(1.2rem, 2.4vw, 1.9rem) clamp(2rem, 5vw, 4.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 50rem) { .items { grid-template-columns: 1fr 1fr; } }

.item { display: grid; gap: 0.3rem; }
.item[hidden] { display: none; }

.item__top {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.55rem;
}
.item__name {
  font-family: var(--display);
  font-size: 1.14rem;
  line-height: 1.3;
  letter-spacing: 0;
  flex: 0 1 auto;
}
.item__dots {
  flex: 1 1 1.5rem;
  min-width: 1.2rem;
  height: 0;
  border-bottom: 1px dotted var(--line-strong);
  translate: 0 -0.35em;
  opacity: 0.7;
}
.item__price {
  flex: none;
  font: 500 var(--fs-small)/1.4 var(--body);
  letter-spacing: 0.02em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.item__desc {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 40rem;
}
.item mark {
  background: rgb(224 160 40 / 26%);
  color: inherit;
  border-radius: 2px;
  padding-inline: 1px;
}

.empty {
  padding: clamp(3rem, 8vw, 6rem) 0;
  text-align: center;
  color: var(--text-faint);
}
.empty h3 { font-size: var(--fs-h3); color: var(--text); margin-bottom: 0.7rem; }

/* Allergen / dietary disclaimer */
.disclaimer {
  display: grid;
  gap: 0.8rem;
  padding: clamp(1.3rem, 2.5vw, 1.9rem);
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--brass);
  background: var(--surface);
  font-size: var(--fs-small);
  color: var(--text-dim);
}
.disclaimer h3 {
  font: 500 var(--fs-micro)/1 var(--body);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--accent-text);
}
.legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; }
.legend span { display: inline-flex; align-items: center; gap: 0.45rem; }

/* ==========================================================================
   11. CONTACT PAGE
   ========================================================================== */

.form { display: grid; gap: 1.1rem; }

.field { display: grid; gap: 0.45rem; }
.field label {
  font: 500 var(--fs-micro)/1 var(--body);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--text-dim);
}
.field label .req { color: var(--madder-1); }
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: var(--fs-small);
  transition: border-color var(--fast);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--line-strong);
  outline: none;
}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--saffron);
  outline-offset: 2px;
}
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--madder-1); }

.field-row { display: grid; gap: 1.1rem; }
@media (min-width: 34rem) { .field-row { grid-template-columns: 1fr 1fr; } }

.form__note { font-size: var(--fs-micro); color: var(--text-faint); }

.form__msg {
  display: none;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-sm);
  font-size: var(--fs-small);
}
.form__msg.on { display: block; }
.form__msg[data-kind="ok"] {
  background: rgb(111 130 89 / 16%);
  border: 1px solid rgb(111 130 89 / 45%);
  color: var(--text);
}
.form__msg[data-kind="err"] {
  background: rgb(154 51 36 / 14%);
  border: 1px solid rgb(184 68 47 / 48%);
  color: var(--text);
}

.contact-grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 56rem) { .contact-grid { grid-template-columns: 1.05fr 0.95fr; } }

/* ---- FAQ ---- */

.faq { border-top: 1px solid var(--line-soft); }

.faq__item { border-bottom: 1px solid var(--line-soft); }

.faq__item summary {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: var(--fs-h4);
  line-height: 1.35;
  color: var(--text);
  transition: color var(--fast);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent-text); }
.faq__item summary span { flex: 1; }

/* A plus that becomes a minus */
.faq__item summary::after {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 0.35em;
  background:
    linear-gradient(var(--accent-text) 0 0) 50% 50% / 100% 1.5px no-repeat,
    linear-gradient(var(--accent-text) 0 0) 50% 50% / 1.5px 100% no-repeat;
  transition: rotate var(--med), background-size var(--med);
}
.faq__item[open] summary::after {
  rotate: 90deg;
  background-size: 100% 1.5px, 0 100%;
}

.faq__item p {
  padding: 0 0 1.4rem;
  margin: 0;
  max-width: 44rem;
  color: var(--text-dim);
  font-size: var(--fs-small);
  line-height: 1.7;
}

@media print {
  .faq__item p { display: block !important; }
  .faq__item summary::after { display: none; }
}

/* ==========================================================================
   12. FOOTER
   ========================================================================== */

.footer {
  background: var(--ink);
  border-top: 1px solid var(--line);
  position: relative;
  isolation: isolate;
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--jali);
  background-size: 52px 52px;
  opacity: 0.04;
  pointer-events: none;
}

.footer__top {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
@media (min-width: 46rem) { .footer__top { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 68rem) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.1fr; } }

.footer h3 {
  font: 500 var(--fs-micro)/1 var(--body);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--saffron);
  margin-bottom: 1.1rem;
}
.footer p, .footer li { color: var(--text-dim); font-size: var(--fs-small); }
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.footer a { transition: color var(--fast); }
.footer a:hover { color: var(--saffron); }

.footer__brand .mark { margin-bottom: 1.2rem; }
.footer__brand p { max-width: 26rem; }

.socials { display: flex; gap: 0.55rem; margin-top: 1.4rem; }
.socials a {
  display: grid;
  place-items: center;
  width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  color: var(--text-dim);
  transition: color var(--fast), border-color var(--fast), translate var(--fast);
}
.socials a:hover { color: var(--saffron); border-color: var(--saffron); translate: 0 -2px; }
.socials svg { width: 16px; height: 16px; }

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-wide);
  color: var(--text-faint);
}
.footer__bar nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }

/* Designer credit — present but deferential, so it never competes with the
   restaurant's own copyright line */
.footer__credit { margin: 0; }
.footer__credit span { color: var(--text-dim); }

/* Once the three items no longer sit on one line, centring them keeps the bar
   from reading as ragged left-aligned rows */
@media (max-width: 62rem) {
  .footer__bar { justify-content: center; text-align: center; }
  .footer__bar nav { justify-content: center; }
}

/* Sticky mobile order bar */
.orderbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: 0.6rem;
  padding: 0.7rem var(--gut) calc(0.7rem + env(safe-area-inset-bottom));
  background: rgb(18 14 11 / 96%);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.orderbar .btn { flex: 1; padding-inline: 0.8rem; }
@media (max-width: 44rem) {
  .orderbar { display: flex; }
  body { padding-bottom: 4.4rem; }
}

/* ==========================================================================
   13. MOTION, UTILITIES, PRINT
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  translate: 0 1.5rem;
  transition: opacity 0.75s var(--ease), translate 0.75s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].in { opacity: 1; translate: 0; }

.center { text-align: center; }
.mt-lg { margin-top: clamp(2rem, 4vw, 3rem); }
.mx-auto { margin-inline: auto; }
.nowrap { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; translate: none; }
  .hero__peek figure:nth-child(2) { translate: 0; }
}

@media print {
  .topbar, .header, .catnav, .tools, .orderbar, .hero, .phero,
  .footer__top, .socials, .map, .hero__scroll { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  :root {
    --text: #000; --text-dim: #333; --text-faint: #666;
    --line: #bbb; --line-soft: #ddd; --line-strong: #999;
    --saffron: #6b4c0d; --surface: #fff;
  }
  .section { padding-block: 1.2rem; }
  .mcat { break-inside: avoid; padding-block: 0.8rem; }
  .mcat__banner { display: none; }
  .items { grid-template-columns: 1fr 1fr; }
  .item { break-inside: avoid; }
  a { text-decoration: none; }
  .disclaimer { border: 1px solid #999; }
}