/* ==========================================================================
   GOGGI'S GULLY — 100% Vegetarian Indian Street Food, Edmonton
   Design system + components
   --------------------------------------------------------------------------
   Palette follows the brand brief: saffron/kesari leads, generous off-white
   space, green as a grounding secondary, a single deliberate touch of indigo
   (Ashoka Chakra) used sparingly. "Golden hour in a busy market", not a flag.
   --------------------------------------------------------------------------
   1.  Tokens          9.  Hero + video
   2.  Reset & base    10. Cards / dish grid
   3.  Typography      11. Menu page
   4.  Layout          12. Dish detail (region video)
   5.  Ornament        13. India map
   6.  Buttons         14. Gallery + lightbox
   7.  Header / nav    15. Forms
   8.  Footer          16. Motion
   ========================================================================== */

/* ------------------------------------------------------------------ 1. TOKENS */
:root {
  /* --- Kesari / saffron: the brand's handshake --- */
  --kesari-100: #FDEBD2;
  --kesari-200: #FAD9AE;
  --kesari-300: #F7BC72;
  --kesari-400: #F79420;   /* graphic / large only */
  --kesari-500: #E2680C;   /* brand saffron */
  --kesari-600: #B8500A;   /* button fill, white text — 5.0:1 */
  --kesari-700: #8A3B06;   /* saffron-toned text on cream — 7.6:1 */

  /* --- Off-white: the space the food lives in --- */
  --paper-0:  #FFFFFF;
  --paper-50: #FFFBF5;
  --paper-100:#FDF6EA;
  --paper-200:#F7EDDC;
  --paper-300:#EFE1CA;

  /* --- Warm ink --- */
  --ink-900: #21160F;
  --ink-800: #2A1D14;
  --ink-700: #3D2C20;
  --ink-500: #6B5647;
  --ink-400: #8A7362;

  /* --- Green: grounding secondary. Dividers, veg marks, success. --- */
  --green-700: #10632F;
  --green-600: #15803D;
  --green-100: rgba(21,128,61,.10);

  /* --- Indigo: the Ashoka nod. Used sparingly, never a surface. --- */
  --indigo-700: #1B2A6B;
  --indigo-500: #2C3F8F;

  --chilli: #B3341F;

  /* --- Semantic --- */
  --bg: var(--paper-50);
  --bg-raised: var(--paper-0);
  --bg-sunken: var(--paper-100);
  --bg-deep: var(--ink-900);
  --fg: var(--ink-900);
  --fg-muted: var(--ink-500);
  --fg-inverse: var(--paper-50);
  --fg-inverse-muted: #CBBBAA;
  --accent: var(--kesari-700);
  --accent-graphic: var(--kesari-500);
  --accent-on-dark: var(--kesari-300);
  --border: #EADCC6;
  --border-strong: #DCC8AB;
  --border-inverse: rgba(247,188,114,.24);
  --ring: var(--kesari-600);
  --error: #A62015;

  /* --- Type --- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-display: clamp(3rem, 9vw, 7rem);
  --fs-h1: clamp(2.35rem, 5.6vw, 4.25rem);
  --fs-h2: clamp(1.95rem, 3.9vw, 3.1rem);
  --fs-h3: clamp(1.35rem, 2.1vw, 1.75rem);
  --fs-lead: clamp(1.09rem, 1.4vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-sm: 0.9375rem;
  --fs-label: 0.8125rem;

  /* --- Spacing --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  --section-y: clamp(60px, 8vw, 120px);
  --gutter: clamp(20px, 5vw, 56px);
  --container: 1280px;
  --container-narrow: 740px;

  /* --- Shape & depth (warm shadows, never grey) --- */
  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 10px rgba(64,38,12,.06);
  --shadow-md: 0 10px 30px -14px rgba(64,38,12,.24);
  --shadow-lg: 0 26px 60px -28px rgba(64,38,12,.34);
  --shadow-xl: 0 44px 90px -40px rgba(48,28,8,.46);

  /* --- Motion --- */
  --ease-out: cubic-bezier(.22,.8,.3,1);
  --dur-fast: 160ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  /* --- Layers --- */
  --z-sticky: 40; --z-header: 60; --z-drawer: 80; --z-modal: 100; --z-toast: 120;

  --header-h: 74px;

  /* --- Motifs: block print + jali, used as texture not wallpaper --- */
  --motif-block: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23E2680C' stroke-width='1.1'%3E%3Ccircle cx='32' cy='32' r='9'/%3E%3Cpath d='M32 14v-8M32 58v-8M14 32H6M58 32h-8M19.3 19.3l-5.6-5.6M50.3 50.3l-5.6-5.6M44.7 19.3l5.6-5.6M13.7 50.3l5.6-5.6'/%3E%3C/g%3E%3C/svg%3E");
  --motif-jali: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23E2680C' stroke-width='1'%3E%3Cpath d='M20 0 40 20 20 40 0 20z'/%3E%3Cpath d='M20 10 30 20 20 30 10 20z'/%3E%3C/g%3E%3C/svg%3E");
}

@media (min-width: 1024px) { :root { --header-h: 86px; } }

/* ------------------------------------------------------------- 2. RESET & BASE */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
/* Sideways-scroll backstop. `overflow-x: hidden` on body alone does not hold:
   the value propagates to the viewport, which keeps a scrollable overflow
   region, so a phone still pans right. It has to be set on html as well —
   and as `clip`, not `hidden`, because `hidden` makes html a scroll container
   and `.menu-nav`'s `position: sticky` then has nothing to stick to.
   `clip` clips without creating one, so sticky survives. */
html, body { overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html:has(.menu-nav) { scroll-padding-top: calc(var(--header-h) + 84px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x lives in the `html, body` rule above — repeating `hidden` here
     would win on source order and turn body into a scroll container. */
}
body.is-locked { overflow: hidden; }

[hidden] { display: none !important; }

img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; background-color: var(--paper-200); }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }

h1,h2,h3,h4,h5,h6,p,figure,blockquote,ul,ol,dl,dd { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }

:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 3px; }
.on-dark :focus-visible, .site-header--over-hero :focus-visible { outline-color: var(--kesari-300); }

::selection { background: var(--kesari-500); color: #fff; }

/* --------------------------------------------------------------- 3. TYPOGRAPHY */
.display, h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: var(--fg);
  text-wrap: balance;
  font-variation-settings: "SOFT" 30, "WONK" 1;
}
.display {
  font-size: var(--fs-display);
  line-height: .96;
  letter-spacing: -0.035em;
  font-weight: 700;
}
h1, .h1 { font-size: var(--fs-h1); line-height: 1.03; letter-spacing: -0.03em; font-weight: 700; }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.025em; }
h3, .h3 { font-size: var(--fs-h3); }

.serif-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; }

p { text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink-500); max-width: 60ch; }
.on-dark .lead { color: var(--fg-inverse-muted); }
.muted { color: var(--fg-muted); }
.on-dark .muted { color: var(--fg-inverse-muted); }
.prose { max-width: 66ch; }
.prose p + p { margin-top: var(--sp-5); }

/* Eyebrow with a saffron rule */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--sp-4);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; flex: none; border-radius: 2px; }
.eyebrow--center { justify-content: center; }
.eyebrow--center::after { content: ""; width: 26px; height: 2px; background: currentColor; flex: none; border-radius: 2px; }
.on-dark .eyebrow { color: var(--accent-on-dark); }

/* -------------------------------------------------------------- 4. LAYOUT */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: 1520px; }

.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(44px, 5.5vw, 76px); }
.section--sunken { background: var(--bg-sunken); }
.section--raised { background: var(--bg-raised); }
.section-deep { background: var(--bg-deep); color: var(--fg-inverse); }
.section-deep h1, .section-deep h2, .section-deep h3 { color: var(--fg-inverse); }
.section-warm { background: linear-gradient(180deg, var(--paper-100), var(--paper-200)); }

.section-head { max-width: 60ch; margin-bottom: clamp(30px, 4vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head p { margin-top: var(--sp-4); }

.grid { display: grid; gap: clamp(20px, 2.6vw, 36px); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3,1fr); }
  .grid-4 { grid-template-columns: repeat(4,1fr); }
}

.split { display: grid; gap: clamp(30px, 5vw, 72px); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--media-right > :first-child { order: -1; }
  .split--wide-text { grid-template-columns: 1.06fr .94fr; }
}

.stack > * + * { margin-top: var(--sp-5); }
.stack-sm > * + * { margin-top: var(--sp-3); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.cluster--center { justify-content: center; }

/* --------------------------------------------------------- 5. ORNAMENT */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: 0; left: var(--sp-4); transform: translateY(-140%);
  z-index: var(--z-toast); background: var(--kesari-600); color: #fff;
  padding: var(--sp-3) var(--sp-5); border-radius: 0 0 var(--radius) var(--radius);
  font-size: var(--fs-sm); font-weight: 700;
  transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }
.text-center { text-align: center; }

/* Block-print texture band — texture, not wallpaper */
.texture {
  position: absolute; inset: 0;
  background-image: var(--motif-block);
  background-size: 58px 58px;
  opacity: .045;
  pointer-events: none;
}
.section-deep .texture { opacity: .07; }

/* Rangoli-inspired divider */
.rangoli { display: block; width: 100%; max-width: 190px; height: 20px; margin-inline: auto; color: var(--kesari-400); }
.rangoli--left { margin-inline: 0; }

/* Media + jali frame */
.media { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--paper-200); }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.media--portrait { aspect-ratio: 4/5; }
.media--square   { aspect-ratio: 1/1; }
.media--landscape{ aspect-ratio: 3/2; }
.media--wide     { aspect-ratio: 16/9; }
.media--tall     { aspect-ratio: 3/4; }

/* Jali (lattice) cutout frame for images */
.jali-frame { position: relative; }
.jali-frame > .media { border-radius: var(--radius-xl) var(--radius-xl) var(--radius-lg) var(--radius-lg); }
.jali-frame::before {
  content: ""; position: absolute; inset: -10px -10px auto -10px; height: 56px;
  background-image: var(--motif-jali); background-size: 26px 26px;
  opacity: .3; z-index: -1; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.jali-frame::after {
  content: ""; position: absolute; inset: 12px -12px -12px 12px;
  border: 1.5px solid var(--kesari-300); border-radius: var(--radius-lg);
  z-index: -1; pointer-events: none;
}
@media (max-width: 640px) { .jali-frame::after { inset: 8px -8px -8px 8px; } }

/* Arched (mihrab-ish) media — restrained, no heavy ornament */
.media--arch { border-radius: 50% 50% var(--radius-lg) var(--radius-lg) / 22% 22% var(--radius-lg) var(--radius-lg); }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: var(--paper-200); color: var(--ink-700); border: 1px solid var(--border);
}
.badge--veg   { background: var(--green-100); color: var(--green-700); border-color: rgba(21,128,61,.3); }
.badge--kesari{ background: rgba(226,104,12,.12); color: var(--kesari-700); border-color: rgba(226,104,12,.32); }
.badge--indigo{ background: rgba(27,42,107,.09); color: var(--indigo-700); border-color: rgba(27,42,107,.28); }
.badge--dark  { background: rgba(247,188,114,.15); color: var(--kesari-200); border-color: var(--border-inverse); }

/* Location tag — the brief wants one on every dish and gallery photo */
.place {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--indigo-700);
}
.place svg { flex: none; opacity: .85; }
.place--on-dark { color: var(--kesari-300); }
.place--on-photo {
  background: rgba(24,15,9,.72); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: 6px 12px; border-radius: var(--radius-pill);
}

/* 100% veg mark */
.veg-mark {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--green-700);
}
.veg-mark__dot {
  width: 15px; height: 15px; border: 2px solid currentColor; border-radius: 3px;
  position: relative; flex: none;
}
.veg-mark__dot::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: currentColor; }
.on-dark .veg-mark { color: #7BD69B; }

/* ------------------------------------------------------------------ 6. BUTTONS */
.btn {
  --btn-bg: var(--kesari-600); --btn-fg: #fff; --btn-border: var(--kesari-600);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: 13px 28px;
  background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer; text-align: center;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:hover { --btn-bg: var(--kesari-700); --btn-border: var(--kesari-700); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(1px); box-shadow: none; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--kesari-700); --btn-border: var(--border-strong); }
.btn--ghost:hover { --btn-bg: var(--kesari-600); --btn-fg: #fff; --btn-border: var(--kesari-600); }

.btn--kesari { --btn-bg: transparent; --btn-fg: var(--kesari-300); --btn-border: rgba(247,188,114,.55); }
.btn--kesari:hover { --btn-bg: var(--kesari-300); --btn-fg: var(--ink-900); --btn-border: var(--kesari-300); }

.btn--light { --btn-bg: var(--paper-50); --btn-fg: var(--ink-900); --btn-border: var(--paper-50); }
.btn--light:hover { --btn-bg: #fff; --btn-fg: var(--kesari-700); --btn-border: #fff; }

.btn--green { --btn-bg: var(--green-600); --btn-fg: #fff; --btn-border: var(--green-600); }
.btn--green:hover { --btn-bg: var(--green-700); --btn-border: var(--green-700); }

.btn--sm { min-height: 42px; padding: 9px 19px; font-size: var(--fs-label); }
.btn--lg { min-height: 56px; padding: 17px 36px; }
.btn--block { width: 100%; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn .btn__spinner { display: none; width: 17px; height: 17px; flex: none; }
.btn.is-loading .btn__spinner { display: block; animation: spin 750ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.link {
  display: inline-flex; align-items: center; gap: 8px; position: relative;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--kesari-700); padding-block: 4px; cursor: pointer;
}
.link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: currentColor; transform-origin: right; transform: scaleX(1);
  transition: transform var(--dur) var(--ease-out); border-radius: 2px;
}
.link:hover::after { transform-origin: left; transform: scaleX(0); }
.link svg { transition: transform var(--dur) var(--ease-out); }
.link:hover svg { transform: translateX(4px); }
.on-dark .link, .section-deep .link { color: var(--accent-on-dark); }

/* ----------------------------------------------------- 7. HEADER / NAV */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: var(--z-header); height: var(--header-h);
  display: flex; align-items: center; background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.site-header__inner {
  width: 100%; max-width: 1520px; margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
}
.site-header--solid, .site-header.is-stuck {
  background: rgba(255,251,245,.94);
  -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--border);
}
@supports not (backdrop-filter: blur(4px)) {
  .site-header--solid, .site-header.is-stuck { background: var(--paper-50); }
}

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.logo__mark { width: 40px; height: 40px; flex: none; transition: transform var(--dur) var(--ease-out); }
.logo:hover .logo__mark { transform: rotate(-6deg); }
.logo__type { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
  font-family: var(--font-display); font-size: 1.3rem; font-weight: 700;
  letter-spacing: -.01em; color: var(--ink-900);
  transition: color var(--dur) var(--ease-out);
}
.logo__tagline {
  font-size: 9px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--kesari-700); margin-top: 4px;
  transition: color var(--dur) var(--ease-out);
}
@media (max-width: 400px) { .logo__name { font-size: 1.12rem; } .logo__mark { width: 34px; height: 34px; } }

.site-header--over-hero:not(.is-stuck) .logo__name { color: #fff; }
.site-header--over-hero:not(.is-stuck) .logo__tagline { color: var(--kesari-300); }
.site-header--over-hero:not(.is-stuck) .nav__link { color: rgba(255,255,255,.92); }
.site-header--over-hero:not(.is-stuck) .nav__link::after { background: var(--kesari-300); }
.site-header--over-hero:not(.is-stuck) .nav__link[aria-current="page"] { color: #fff; }
.site-header--over-hero:not(.is-stuck) .nav-toggle { color: #fff; border-color: rgba(255,255,255,.4); }
.site-header--over-hero:not(.is-stuck) .header-cta {
  --btn-bg: transparent; --btn-fg: #fff; --btn-border: rgba(255,255,255,.6);
}
.site-header--over-hero:not(.is-stuck) .header-cta:hover {
  --btn-bg: #fff; --btn-fg: var(--ink-900); --btn-border: #fff;
}

.nav { display: none; }
@media (min-width: 1060px) { .nav { display: flex; align-items: center; gap: clamp(16px,2vw,30px); margin-inline: auto; } }
.nav__link {
  position: relative; display: inline-block; padding: 10px 2px;
  font-size: .875rem; font-weight: 600; letter-spacing: .05em;
  color: var(--ink-700); transition: color var(--dur) var(--ease-out);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--kesari-500); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease-out); border-radius: 2px;
}
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--kesari-700); font-weight: 700; }

.header-actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }
.header-cta { display: none; }
@media (min-width: 640px) { .header-cta { display: inline-flex; } }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-pill); color: var(--ink-800); cursor: pointer;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  touch-action: manipulation;
}
.nav-toggle:hover { background: rgba(226,104,12,.09); }
@media (min-width: 1060px) { .nav-toggle { display: none; } }
.nav-toggle__bars { width: 20px; height: 12px; position: relative; }
.nav-toggle__bars span {
  position: absolute; left: 0; height: 2px; width: 100%; background: currentColor; border-radius: 2px;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.nav-scrim {
  position: fixed; inset: 0; background: rgba(24,15,9,.58); z-index: var(--z-drawer);
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 88vw);
  z-index: calc(var(--z-drawer) + 1);
  background: var(--ink-900); color: var(--fg-inverse);
  transform: translateX(100%); visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  padding: max(20px, env(safe-area-inset-top)) 0 max(28px, env(safe-area-inset-bottom));
  box-shadow: var(--shadow-xl);
}
.drawer.is-open {
  transform: translateX(0); visibility: visible;
  transition: transform var(--dur-slow) var(--ease-out), visibility 0s;
}
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 8px var(--sp-6) var(--sp-5); }
.drawer__close {
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-inverse); border-radius: var(--radius-pill);
  color: var(--paper-50); cursor: pointer; transition: background var(--dur) var(--ease-out);
}
.drawer__close:hover { background: rgba(247,188,114,.16); }
.drawer__nav { padding: var(--sp-4) var(--sp-6); display: flex; flex-direction: column; }
.drawer__link {
  display: flex; align-items: baseline; gap: var(--sp-4); padding: 15px 0;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--paper-50);
  border-bottom: 1px solid var(--border-inverse);
  transition: color var(--dur) var(--ease-out), padding-left var(--dur) var(--ease-out);
}
.drawer__link:hover, .drawer__link:focus-visible { color: var(--kesari-300); padding-left: 8px; }
.drawer__link[aria-current="page"] { color: var(--kesari-300); }
.drawer__link .num { font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: .12em; color: var(--kesari-500); flex: none; min-width: 22px; }
.drawer__foot { margin-top: auto; padding: var(--sp-6); display: grid; gap: var(--sp-4); }
.drawer__meta { font-size: var(--fs-sm); color: var(--fg-inverse-muted); line-height: 1.7; }
.drawer__meta a:hover { color: var(--kesari-300); }

/* ------------------------------------------------------------------- 8. FOOTER */
.site-footer { background: var(--ink-900); color: var(--fg-inverse); padding-block: clamp(52px,7vw,92px) 0; position: relative; overflow: hidden; }
.site-footer h2, .site-footer h3 { color: var(--fg-inverse); }
.footer-grid { display: grid; gap: clamp(34px,5vw,54px); grid-template-columns: 1fr; position: relative; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1.1fr 1.2fr; } }
.site-footer .logo__name { color: #fff; }
.site-footer .logo__tagline { color: var(--kesari-300); }
.footer-title {
  font-family: var(--font-body); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--kesari-300); margin-bottom: var(--sp-5);
}
.footer-list { display: grid; gap: 11px; font-size: var(--fs-sm); color: var(--fg-inverse-muted); }
.footer-list a { transition: color var(--dur) var(--ease-out); display: inline-block; padding-block: 2px; }
.footer-list a:hover { color: var(--kesari-300); }
.hours-row {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  font-size: var(--fs-sm); color: var(--fg-inverse-muted);
  padding-block: 7px; border-bottom: 1px dashed rgba(247,188,114,.18);
}
.hours-row span:last-child { font-variant-numeric: tabular-nums; color: var(--paper-50); white-space: nowrap; }
.hours-row.is-today span:last-child { color: var(--kesari-300); font-weight: 700; }
.social { display: flex; gap: 10px; }
.social a {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--border-inverse); border-radius: var(--radius-pill); color: var(--paper-50);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.social a:hover { background: var(--kesari-300); color: var(--ink-900); border-color: var(--kesari-300); }
.footer-bottom {
  margin-top: clamp(38px,5vw,60px); border-top: 1px solid rgba(247,188,114,.16);
  padding-block: var(--sp-5) max(var(--sp-5), env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6);
  align-items: center; justify-content: space-between; font-size: .875rem; color: #9E8B7A;
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.footer-bottom a:hover { color: var(--kesari-300); }

/* --------------------------------------------------------- 9. HERO + VIDEO */
.hero {
  position: relative; min-height: 100svh; min-height: 100dvh;
  display: flex; align-items: flex-end; color: #fff; overflow: hidden; isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
/* The poster and the video are stacked LAYERS, not flow siblings.
   site.js appends the <video> after the <img>; left as static children of a
   height:100% box the video landed exactly one viewport BELOW the poster and
   was clipped away by overflow:hidden — it played the whole time, out of view,
   so the hero looked like a still. Both have to be absolute layers, the same
   arrangement .dish-stage__poster / .dish-stage__video already use.
   The video fades in only once it really starts (site.js adds .is-playing on
   the `playing` event), so a slow connection shows the poster, never a gap. */
.hero__media > img, .hero__media > video { position: absolute; inset: 0; }
.hero__media > video { opacity: 0; transition: opacity 900ms var(--ease-out); }
.hero__media.is-playing > video { opacity: 1; }
/* Consistent dark overlay under text on video — brief §9 */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  /* The headline sits in the upper third, where this gradient used to fall to
     .28 — fine over the dark wok clip it was tuned against, invisible once the
     hero media is bright (white type on saturated orange). Raised through the
     middle and top so white text clears contrast on ANY frame, which is what
     the brief asks for; the bottom stays heaviest so the scroll cue and lead
     keep their footing. */
  background:
    linear-gradient(to top, rgba(24,15,9,.94) 0%, rgba(24,15,9,.74) 35%, rgba(24,15,9,.58) 65%, rgba(24,15,9,.66) 100%);
}
.hero__inner { width: 100%; padding-block: clamp(90px,13vh,140px) clamp(44px,7vh,80px); padding-top: calc(var(--header-h) + clamp(44px,9vh,88px)); }
.hero__title { color: #fff; max-width: 15ch; }
.hero__title em { font-style: italic; color: var(--kesari-300); }
.hero__lead { color: rgba(255,255,255,.88); max-width: 46ch; margin-top: var(--sp-5); font-size: var(--fs-lead); }
.hero__actions { margin-top: clamp(26px,3.6vw,38px); }
.hero__meta {
  margin-top: clamp(34px,5vw,56px); padding-top: var(--sp-5);
  border-top: 1px solid rgba(255,255,255,.22);
  display: grid; gap: var(--sp-4) var(--sp-7);
  grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); max-width: 820px;
}
.hero__meta dt { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--kesari-300); margin-bottom: 5px; }
.hero__meta dd { margin: 0; color: rgba(255,255,255,.92); font-size: var(--fs-sm); }

/* Sound toggle — muted by default, opt-in only (brief §8) */
.sound-toggle {
  position: absolute; right: var(--gutter); bottom: clamp(22px,4vh,40px); z-index: 2;
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 18px;
  border: 1.5px solid rgba(255,255,255,.4); border-radius: var(--radius-pill);
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  background: rgba(24,15,9,.4); cursor: pointer;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.sound-toggle:hover { background: rgba(24,15,9,.7); border-color: #fff; }

/* Page hero for inner pages */
.page-hero {
  position: relative; padding-top: calc(var(--header-h) + clamp(52px,8vw,96px));
  padding-bottom: clamp(52px,8vw,96px);
  background: var(--ink-900); color: var(--fg-inverse); overflow: hidden; isolation: isolate;
}
.page-hero h1, .page-hero .display { color: #fff; }
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(24,15,9,.94) 0%, rgba(24,15,9,.78) 50%, rgba(24,15,9,.55) 100%);
}
.page-hero__lead { color: rgba(255,255,255,.85); margin-top: var(--sp-5); max-width: 56ch; }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: var(--fs-label); letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.66); margin-bottom: var(--sp-5);
}
.breadcrumb a { padding-block: 4px; transition: color var(--dur) var(--ease-out); }
.breadcrumb a:hover { color: var(--kesari-300); }
.breadcrumb svg { opacity: .5; flex: none; }
.breadcrumb [aria-current] { color: var(--kesari-300); }

/* Ticker — street-food energy, pure decoration so it's aria-hidden */
.ticker {
  overflow: hidden; border-block: 1.5px solid var(--border);
  background: var(--paper-100); padding-block: 14px;
}
.ticker__track { display: flex; gap: var(--sp-6); width: max-content; will-change: transform; }
.ticker__item {
  display: inline-flex; align-items: center; gap: var(--sp-6);
  font-family: var(--font-display); font-size: clamp(1.1rem,2vw,1.6rem); font-weight: 600;
  color: var(--kesari-700); white-space: nowrap;
}
.ticker__item::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--kesari-400); flex: none; }

/* --------------------------------------------------------------- 10. CARDS */
.card {
  position: relative; background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.card:hover { box-shadow: var(--shadow-lg); border-color: var(--kesari-300); }
.card__media { position: relative; overflow: hidden; background: var(--paper-200); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 720ms var(--ease-out); }
.card:hover .card__media img, .card:has(:focus-visible) .card__media img { transform: scale(1.06); }
.card__media .place--on-photo { position: absolute; left: 12px; bottom: 12px; z-index: 2; }
.card__body { padding: clamp(18px,2.2vw,26px); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.card__title { font-size: 1.3rem; }
.card__text { font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.58; }
.card__foot { margin-top: auto; padding-top: var(--sp-4); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.card__link:focus-visible { outline: none; }
.card:has(.card__link:focus-visible) { outline: 3px solid var(--ring); outline-offset: 3px; }

.price { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: var(--kesari-700); font-variant-numeric: tabular-nums; white-space: nowrap; }
.on-dark .price, .section-deep .price { color: var(--kesari-300); }

/* Steam micro-interaction on dish cards (brief §8) */
.steam { position: absolute; top: 8px; left: 50%; width: 90px; height: 60px; transform: translateX(-50%); pointer-events: none; opacity: 0; z-index: 2; transition: opacity var(--dur-slow) var(--ease-out); }
.card:hover .steam, .dish-tile:hover .steam { opacity: .8; }
.steam span {
  position: absolute; bottom: 0; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.75); filter: blur(3px);
}
.steam span:nth-child(1) { left: 16px; animation: steam 2.8s ease-in-out infinite; }
.steam span:nth-child(2) { left: 40px; animation: steam 2.8s ease-in-out .5s infinite; }
.steam span:nth-child(3) { left: 64px; animation: steam 2.8s ease-in-out 1s infinite; }
@keyframes steam {
  0%   { transform: translateY(0) scale(.7); opacity: 0; }
  25%  { opacity: .85; }
  100% { transform: translateY(-46px) scale(1.9); opacity: 0; }
}

/* Asymmetric editorial dish grid (brief §8) */
.dish-grid { display: grid; gap: clamp(16px,2vw,28px); grid-template-columns: 1fr; }
@media (min-width: 700px) { .dish-grid { grid-template-columns: repeat(6,1fr); } }
.dish-tile { grid-column: span 1; }
@media (min-width: 700px) {
  .dish-tile { grid-column: span 3; }
  .dish-tile--wide  { grid-column: span 6; }
  .dish-tile--third { grid-column: span 2; }
  .dish-tile--twothird { grid-column: span 4; }
}
.dish-tile .card__media { aspect-ratio: 4/3; }
.dish-tile--wide .card { flex-direction: column; }
@media (min-width: 860px) {
  .dish-tile--wide .card { flex-direction: row; align-items: stretch; }
  .dish-tile--wide .card__media { flex: 0 0 46%; aspect-ratio: auto; min-height: 320px; }
  .dish-tile--wide .card__body { padding: clamp(24px,3vw,44px); justify-content: center; }
  .dish-tile--wide .card__title { font-size: clamp(1.6rem,2.4vw,2.2rem); }
  .dish-tile--wide .card__text { font-size: var(--fs-body); }
}
.dish-tile--third .card__media { aspect-ratio: 1/1; }

/* Feature / step */
.feature { position: relative; padding-top: clamp(20px,2.4vw,30px); border-top: 2px solid var(--kesari-200); }
.feature__num { font-family: var(--font-display); font-size: .9rem; font-weight: 700; color: var(--kesari-600); letter-spacing: .08em; display: block; margin-bottom: var(--sp-4); }
.feature h3 { margin-bottom: 9px; }
.feature p { font-size: var(--fs-sm); color: var(--fg-muted); }
.section-deep .feature { border-top-color: rgba(247,188,114,.35); }
.section-deep .feature p { color: var(--fg-inverse-muted); }

/* Testimonial */
.testimonial { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(24px,3vw,40px); display: flex; flex-direction: column; gap: var(--sp-5); height: 100%; }
.testimonial blockquote { font-family: var(--font-display); font-size: clamp(1.1rem,1.5vw,1.3rem); line-height: 1.5; color: var(--ink-800); font-style: italic; }
.testimonial__foot { margin-top: auto; display: flex; align-items: center; gap: var(--sp-4); }
.testimonial__avatar { width: 46px; height: 46px; border-radius: 50%; flex: none; background: var(--kesari-500); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; }
.testimonial__name { font-weight: 700; font-size: var(--fs-sm); }
.testimonial__meta { font-size: var(--fs-label); color: var(--fg-muted); }
.stars { display: flex; gap: 3px; color: var(--kesari-500); }
.stars svg { width: 16px; height: 16px; }

/* Info tile */
.info-tile { padding: clamp(20px,2.4vw,30px); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); height: 100%; }
.info-tile__icon { width: 44px; height: 44px; border-radius: var(--radius-pill); background: rgba(226,104,12,.12); color: var(--kesari-700); display: grid; place-items: center; margin-bottom: var(--sp-4); }
.info-tile h3 { font-size: 1.16rem; margin-bottom: 8px; }
.info-tile p, .info-tile address { font-size: var(--fs-sm); color: var(--fg-muted); font-style: normal; line-height: 1.7; }
.info-tile a { color: var(--kesari-700); text-decoration: underline; text-underline-offset: 3px; }
.info-tile a:hover { color: var(--kesari-500); }

.stat { text-align: center; }
.stat__num { font-family: var(--font-display); font-size: clamp(2.2rem,4vw,3.2rem); font-weight: 700; line-height: 1; color: var(--kesari-300); }
.stat__label { font-size: var(--fs-label); letter-spacing: .13em; text-transform: uppercase; color: var(--fg-inverse-muted); margin-top: 9px; }

/* CTA band */
.cta-band { position: relative; padding-block: clamp(60px,8vw,110px); background: var(--ink-900); color: var(--fg-inverse); text-align: center; overflow: hidden; isolation: isolate; }
.cta-band__media { position: absolute; inset: 0; z-index: -2; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band__media::after { content: ""; position: absolute; inset: 0; background: rgba(24,15,9,.84); }
.cta-band h2 { color: #fff; }

/* Journey through India — scroll-triggered (brief §4, §8) */
.journey { position: relative; background: var(--ink-900); color: var(--fg-inverse); overflow: hidden; }
.journey__stage { position: relative; min-height: 100svh; display: grid; align-items: center; }
.journey__bg { position: absolute; inset: 0; z-index: 0; }
.journey__bg-item { position: absolute; inset: 0; opacity: 0; transition: opacity 700ms var(--ease-out); }
.journey__bg-item.is-current { opacity: 1; }
.journey__bg-item img, .journey__bg-item video { width: 100%; height: 100%; object-fit: cover; }
.journey__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24,15,9,.93) 0%, rgba(24,15,9,.72) 46%, rgba(24,15,9,.42) 100%); z-index: 1; }
.journey__inner { position: relative; z-index: 2; padding-block: clamp(70px,11vh,130px); }
.journey__step { max-width: 40ch; }
.journey__step + .journey__step { margin-top: clamp(60px, 22vh, 190px); }
.journey__place { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--kesari-300); margin-bottom: var(--sp-3); display: flex; align-items: center; gap: 10px; }
.journey__place::before { content: ""; width: 30px; height: 2px; background: currentColor; border-radius: 2px; }
.journey h3 { font-size: clamp(1.9rem,4vw,3rem); color: #fff; }
.journey p { color: rgba(255,255,255,.82); margin-top: var(--sp-4); font-size: var(--fs-lead); }
.journey__dish { margin-top: var(--sp-5); display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 700; color: var(--kesari-300); }
.journey__progress { position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 3; display: none; flex-direction: column; gap: 12px; }
@media (min-width: 1024px) { .journey__progress { display: flex; } .journey__inner { padding-left: 68px; } }
.journey__dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(247,188,114,.5); background: transparent; transition: all var(--dur) var(--ease-out); cursor: pointer; padding: 0; }
.journey__dot.is-current { background: var(--kesari-400); border-color: var(--kesari-400); transform: scale(1.35); }

/* ----------------------------------------------------------- 11. MENU PAGE */
.menu-nav {
  position: sticky; top: var(--header-h); z-index: var(--z-sticky);
  background: rgba(255,251,245,.95);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.menu-nav__scroll { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; padding: 12px var(--gutter); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.menu-nav__scroll::-webkit-scrollbar { display: none; }
.chip {
  flex: none; scroll-snap-align: center; min-height: 44px; display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 17px; border-radius: var(--radius-pill); border: 1.5px solid var(--border);
  background: transparent; color: var(--ink-700);
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .05em;
  white-space: nowrap; cursor: pointer; touch-action: manipulation;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.chip:hover { background: var(--paper-200); border-color: var(--border-strong); }
.chip.is-active, .chip[aria-current="true"], .chip[aria-pressed="true"] {
  background: var(--kesari-600); color: #fff; border-color: var(--kesari-600);
}
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: clamp(26px,4vw,44px); }

.menu-section + .menu-section { margin-top: clamp(52px,7vw,84px); }
.menu-section__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4);
  padding-bottom: var(--sp-4); border-bottom: 2px solid var(--kesari-400); margin-bottom: clamp(22px,3vw,34px);
}
.menu-section__head h2 { flex: 1 1 auto; }
.menu-section__note { font-size: var(--fs-sm); color: var(--fg-muted); font-style: italic; }

.menu-search { max-width: 460px; }
.menu-search__control { position: relative; display: block; }
.menu-search__control .input { padding-left: 46px; padding-right: 44px; }
.menu-search__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--fg-muted); pointer-events: none; }
.menu-search__clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: var(--radius-pill);
  color: var(--fg-muted); cursor: pointer; transition: background var(--dur) var(--ease-out);
}
.menu-search__clear:hover { background: var(--paper-200); color: var(--fg); }
.menu-search__control .input:placeholder-shown ~ .menu-search__clear { display: none; }
.menu-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.menu-empty { display: none; text-align: center; padding: clamp(44px,8vw,84px) var(--sp-5); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); }
.menu-empty.is-visible { display: block; }

.menu-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); padding: var(--sp-5); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); }

/* --------------------------------------------- 12. DISH DETAIL (REGION VIDEO) */
.dish-stage {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  color: #fff; overflow: hidden; isolation: isolate;
}
.dish-stage__media { position: absolute; inset: 0; z-index: -2; background: var(--ink-900); }
.dish-stage__media img, .dish-stage__media video { width: 100%; height: 100%; object-fit: cover; }
/* Poster sits under the video and shows instantly — never a blank flash */
.dish-stage__poster { position: absolute; inset: 0; }
.dish-stage__video { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease-out); }
.dish-stage__video.is-playing { opacity: 1; }
.dish-stage__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(20,12,7,.95) 0%, rgba(20,12,7,.72) 38%, rgba(20,12,7,.34) 68%, rgba(20,12,7,.55) 100%);
}
.dish-stage__inner { width: 100%; padding-block: calc(var(--header-h) + clamp(40px,7vh,80px)) clamp(40px,7vh,80px); }
.dish-stage h1 { color: #fff; max-width: 16ch; }
.dish-stage__desc { color: rgba(255,255,255,.88); max-width: 52ch; margin-top: var(--sp-5); font-size: var(--fs-lead); }
.dish-stage__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); margin-top: var(--sp-6); }
.dish-stage__price { font-family: var(--font-display); font-size: clamp(1.7rem,3vw,2.4rem); font-weight: 700; color: var(--kesari-300); font-variant-numeric: tabular-nums; }

.video-note {
  display: inline-flex; align-items: center; gap: 8px; margin-top: var(--sp-5);
  font-size: 12px; color: rgba(255,255,255,.62); letter-spacing: .04em;
}

.spec-list { display: grid; border-top: 1px solid var(--border); }
.spec-list > div { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.spec-list dt { color: var(--fg-muted); }
.spec-list dd { margin: 0; font-weight: 600; text-align: right; }

.pairing { display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-raised); transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); }
.pairing:hover { border-color: var(--kesari-300); box-shadow: var(--shadow-sm); }
.pairing__media { width: 62px; height: 62px; border-radius: var(--radius-sm); overflow: hidden; flex: none; background: var(--paper-200); }
.pairing__media img { width: 100%; height: 100%; object-fit: cover; }

.sticky-order {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  background: rgba(255,251,245,.97);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 11px var(--gutter) max(11px, env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
body:has(.sticky-order) { padding-bottom: 78px; }
@media (min-width: 900px) { .sticky-order { display: none; } body:has(.sticky-order) { padding-bottom: 0; } }

/* ------------------------------------------------------------ 13. INDIA MAP */
.map-wrap { display: grid; gap: clamp(24px,4vw,52px); grid-template-columns: minmax(0,1fr); align-items: start; }
.map-wrap > * { min-width: 0; }
@media (min-width: 940px) { .map-wrap { grid-template-columns: minmax(0,1fr) minmax(300px,.85fr); } }

.map-figure { position: relative; background: var(--paper-100); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: clamp(14px,2.5vw,28px); overflow: hidden; }
.map-figure .texture { opacity: .05; }
.map-svg { width: 100%; height: auto; display: block; position: relative; z-index: 1; overflow: visible; }

.map__state {
  fill: var(--paper-300); stroke: var(--paper-50); stroke-width: 1.1;
  stroke-linejoin: round; transition: fill var(--dur) var(--ease-out);
}
.map__state.is-active { fill: var(--kesari-200); cursor: pointer; }
.map__state.is-active:hover, .map__state.is-lit { fill: var(--kesari-400); }
.map__state.is-selected { fill: var(--kesari-500); }

.map__pin { cursor: pointer; }
.map__pin-pulse { display: none; }                      /* visual-only pulse; enabled under no-preference */
.map__pin-halo { fill: rgba(27,42,107,.001); }        /* invisible but ≥44px tap target */
.map__pin-dot  { fill: var(--indigo-700); stroke: var(--paper-50); stroke-width: 2.5; transition: transform var(--dur) var(--ease-out), fill var(--dur) var(--ease-out); transform-box: fill-box; transform-origin: center; }
.map__pin:hover .map__pin-dot, .map__pin.is-selected .map__pin-dot { fill: var(--kesari-600); transform: scale(1.45); }
.map__pin-label {
  font-family: var(--font-body); font-size: 15px; font-weight: 700; fill: var(--ink-800);
  text-anchor: middle; paint-order: stroke; stroke: var(--paper-50); stroke-width: 4px; stroke-linejoin: round;
  pointer-events: none; letter-spacing: .02em;
}
.map__pin:hover .map__pin-label, .map__pin.is-selected .map__pin-label { fill: var(--kesari-700); }
.map__pin:focus-visible .map__pin-dot { stroke: var(--ring); stroke-width: 4; }

.map-panel { position: relative; min-width: 0; }
.map-results { min-width: 0; }
.map-credit { position: relative; z-index: 1; font-size: 11px; margin-top: var(--sp-2); text-align: right; }
.map-panel__head { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.map-panel__head [hidden], .map-more[hidden], .map-result[hidden] { display: none; }
.map-results { display: grid; gap: var(--sp-3); }
.map-list { display: grid; gap: 8px; }

/* Desktop: the panel sits beside the map and may never be taller than it.
   `contain: size` stops the panel's own content from sizing the grid row, so the
   row is exactly the map's height; the panel stretches to it and scrolls inside.
   A bottom fade (.has-more, set by site.js) hints that more is below. */
@media (min-width: 940px) {
  .map-panel {
    align-self: stretch; contain: size; overflow-y: auto; overscroll-behavior: contain;
    padding: 8px 10px 8px 8px; scrollbar-width: thin;
  }
  .map-panel.has-more {
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 44px), transparent);
            mask-image: linear-gradient(to bottom, black calc(100% - 44px), transparent);
  }
}

/* Places overview: wrapping chips on desktop, one scroll-snap strip on mobile
   and whenever a place is selected. The strip scrolls inside itself. */
.map-places { display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.map-places.is-compact { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 3px 3px 6px; margin: -3px -3px 0; }
.map-places.is-compact::-webkit-scrollbar { display: none; }
@media (max-width: 939px) {
  .map-places { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 3px 3px 6px; margin: -3px -3px 0; }
  .map-places::-webkit-scrollbar { display: none; }
}
.map-place {
  display: inline-flex; align-items: center; gap: 8px; flex: none; scroll-snap-align: start; white-space: nowrap;
  padding: 8px 8px 8px 14px; min-height: 40px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border); background: var(--bg-raised); color: var(--fg);
  font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.map-place:hover { background: var(--paper-200); border-color: var(--kesari-300); }
.map-place__count {
  min-width: 24px; padding: 1px 7px; border-radius: var(--radius-pill); text-align: center;
  font-size: 12px; font-weight: 700; background: var(--kesari-100); color: var(--kesari-700);
}
.map-place[aria-pressed="true"] { background: var(--kesari-600); border-color: var(--kesari-600); color: var(--paper-50); }
.map-place[aria-pressed="true"] .map-place__count { background: var(--paper-50); color: var(--kesari-700); }

.map-more {
  justify-self: start; padding: 9px 16px; border-radius: var(--radius-pill); cursor: pointer;
  border: 1.5px solid var(--border-strong); background: var(--bg-raised); color: var(--fg);
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
}
.map-more:hover { background: var(--paper-200); }
.map-empty { font-size: var(--fs-sm); color: var(--fg-muted); padding: var(--sp-3) 0; }
.map-empty a { color: var(--kesari-700); text-decoration: underline; }
.map-result__body { flex: 1; min-width: 0; }
.map-result__price { margin-left: auto; font-weight: 700; font-size: var(--fs-sm); color: var(--kesari-700); flex: none; }
.map-result {
  display: flex; gap: var(--sp-3); align-items: center; padding: 8px 12px 8px 8px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg-raised); position: relative;
  transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.map-result:has(a:focus-visible) { outline: 3px solid var(--ring); outline-offset: 2px; }
.map-result a:focus-visible { outline: none; }
.map-result:hover { border-color: var(--kesari-300); transform: translateX(3px); box-shadow: var(--shadow-sm); }
.map-result__media { width: 48px; height: 48px; border-radius: var(--radius-sm); overflow: hidden; flex: none; background: var(--paper-200); }
.map-result__media img { width: 100%; height: 100%; object-fit: cover; }
.map-result h4 { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; }
.map-result p { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
.map-result a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.map-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-5); font-size: 12px; color: var(--fg-muted); }
.map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.map-legend i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }

/* ---------------------------------------------------- 14. GALLERY + LIGHTBOX */
.masonry { columns: 1; column-gap: 14px; }
@media (min-width: 560px)  { .masonry { columns: 2; } }
@media (min-width: 1000px) { .masonry { columns: 3; column-gap: 18px; } }
@media (min-width: 1400px) { .masonry { columns: 4; } }

.gallery-item {
  position: relative; display: block; width: 100%; break-inside: avoid; margin-bottom: 14px;
  border-radius: var(--radius-lg); overflow: hidden; cursor: zoom-in; background: var(--paper-200);
  padding: 0; border: 0; -webkit-tap-highlight-color: transparent;
}
@media (min-width: 1000px) { .gallery-item { margin-bottom: 18px; } }
.gallery-item img { width: 100%; height: auto; display: block; transition: transform 800ms var(--ease-out); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item__overlay {
  position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
  background: linear-gradient(to top, rgba(24,15,9,.85) 0%, rgba(24,15,9,.14) 46%, transparent 70%);
  display: flex; flex-direction: column; justify-content: flex-end; padding: var(--sp-5); text-align: left; gap: 7px;
}
.gallery-item:hover .gallery-item__overlay, .gallery-item:focus-visible .gallery-item__overlay { opacity: 1; }
.gallery-item__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: #fff; }
@media (hover: none) { .gallery-item__overlay { opacity: 1; background: linear-gradient(to top, rgba(24,15,9,.8) 0%, transparent 52%); } }
.gallery-item.is-hidden { display: none; }

.lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(16,10,6,.96);
  display: grid; grid-template-rows: auto 1fr auto; opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: 4px 4px 10px; color: #fff; }
.lightbox__count { font-size: var(--fs-label); letter-spacing: .1em; color: var(--kesari-300); font-variant-numeric: tabular-nums; }
.lightbox__stage { position: relative; display: grid; place-items: center; min-height: 0; }
.lightbox__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); }
.lightbox__caption { text-align: center; color: #fff; padding: 14px 8px 4px; font-size: var(--fs-sm); }
.lightbox__caption span { display: block; color: var(--kesari-300); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 5px; }
.lightbox__btn { width: 48px; height: 48px; flex: none; display: inline-grid; place-items: center; border-radius: var(--radius-pill); border: 1.5px solid rgba(255,255,255,.3); color: #fff; cursor: pointer; transition: background var(--dur) var(--ease-out); }
.lightbox__btn:hover { background: rgba(255,255,255,.16); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 0; } .lightbox__nav--next { right: 0; }
@media (min-width: 768px) { .lightbox { padding: 24px; } .lightbox__nav--prev { left: 8px; } .lightbox__nav--next { right: 8px; } }

/* ------------------------------------------------------------------ 15. FORMS */
.form-card { background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(22px,3.4vw,44px); box-shadow: var(--shadow-sm); }
.fieldset { border: 0; padding: 0; margin: 0; }
.fieldset + .fieldset { margin-top: clamp(28px,4vw,44px); }
.fieldset > legend { padding: 0; font-family: var(--font-display); font-size: 1.28rem; font-weight: 700; margin-bottom: var(--sp-2); }
.fieldset__hint { font-size: var(--fs-sm); color: var(--fg-muted); margin-bottom: var(--sp-5); }

.field-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 620px) { .field-grid--2 { grid-template-columns: repeat(2,1fr); } }
.field--full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 7px; }
.field > label, .field__label { font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-700); }
.req { color: var(--error); margin-left: 3px; }
.field__hint { font-size: .8125rem; color: var(--fg-muted); line-height: 1.5; }

.input, .select, .textarea {
  width: 100%; min-height: 50px; padding: 13px 16px;
  background: var(--paper-50); border: 1.5px solid var(--border-strong); border-radius: var(--radius);
  font-size: 1rem; color: var(--fg); appearance: none; -webkit-appearance: none;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.6; padding-top: 14px; }
.input::placeholder, .textarea::placeholder { color: #A8927C; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-400); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--kesari-500);
  box-shadow: 0 0 0 3px rgba(226,104,12,.18); background-color: #fff;
}
.select {
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B5647' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--error); background-color: #FEF6F5; }
.field.has-error .check input { border-color: var(--error); background-color: #FEF6F5; }
.field.has-error .check input:checked { background-color: var(--kesari-600); }
.field__error { display: none; align-items: flex-start; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--error); line-height: 1.45; }
.field__error svg { flex: none; margin-top: 2px; }
.field.has-error .field__error { display: flex; }
.field.has-error .field__hint { display: none; }

.choice-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 11px 18px;
  border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--paper-50);
  font-size: var(--fs-sm); font-weight: 600; cursor: pointer; user-select: none;
  transition: all var(--dur) var(--ease-out);
}
.choice:hover span { border-color: var(--ink-400); background: #fff; }
.choice input:checked + span { background: var(--kesari-600); border-color: var(--kesari-600); color: #fff; }
.choice input:focus-visible + span { outline: 3px solid var(--ring); outline-offset: 3px; }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.55; cursor: pointer; padding: 4px 0; }
.check input {
  appearance: none; -webkit-appearance: none; width: 22px; height: 22px; flex: none; margin-top: 1px;
  border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--paper-50); cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.check input:checked {
  background: var(--kesari-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;
  border-color: var(--kesari-600);
}
.check input:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

.char-count { font-size: .8125rem; color: var(--fg-muted); text-align: right; font-variant-numeric: tabular-nums; }
.char-count.is-over { color: var(--error); font-weight: 700; }

.form-alert { display: none; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--radius); font-size: var(--fs-sm); line-height: 1.55; margin-bottom: var(--sp-5); border: 1.5px solid; }
.form-alert.is-visible { display: flex; }
.form-alert svg { flex: none; margin-top: 2px; }
.form-alert--error { background: #FDF1F0; border-color: rgba(166,32,21,.35); color: #7C1810; }
.form-alert--error a { color: inherit; text-decoration: underline; font-weight: 700; }
.form-alert--error ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }

.form-success { display: none; text-align: center; padding: clamp(30px,5vw,60px) clamp(18px,3vw,38px); }
.form-success.is-visible { display: block; }
.form-success__icon { width: 70px; height: 70px; margin: 0 auto var(--sp-5); border-radius: 50%; background: var(--green-100); color: var(--green-700); display: grid; place-items: center; }
.form-success__ref { display: inline-block; margin-top: var(--sp-5); padding: 10px 20px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius); font-size: var(--fs-sm); letter-spacing: .09em; font-variant-numeric: tabular-nums; }

.form-foot { margin-top: clamp(26px,3.4vw,38px); padding-top: var(--sp-5); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; }
.form-foot p { font-size: .8125rem; color: var(--fg-muted); max-width: 44ch; }

.toast-wrap { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(20px, env(safe-area-inset-bottom)); z-index: var(--z-toast); display: grid; gap: 10px; width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.toast { display: flex; gap: 12px; align-items: flex-start; background: var(--ink-900); color: var(--paper-50); border: 1.5px solid var(--border-inverse); border-radius: var(--radius); padding: 14px 18px; font-size: var(--fs-sm); box-shadow: var(--shadow-xl); pointer-events: auto; animation: toastIn var(--dur-slow) var(--ease-out); }
.toast svg { flex: none; margin-top: 2px; color: var(--kesari-300); }
.toast.is-leaving { animation: toastOut 260ms var(--ease-out) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px); } }

/* Accordion */
.accordion { border-top: 1px solid var(--border); }
.accordion__item { border-bottom: 1px solid var(--border); }
.accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) 0; text-align: left; font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; color: var(--fg); cursor: pointer; min-height: 56px; transition: color var(--dur) var(--ease-out); }
.accordion__trigger:hover { color: var(--kesari-700); }
.accordion__icon { flex: none; width: 22px; height: 22px; transition: transform var(--dur) var(--ease-out); color: var(--kesari-600); }
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-out); }
.accordion__panel > div { overflow: hidden; }
.accordion__panel.is-open { grid-template-rows: 1fr; }
.accordion__panel p { font-size: var(--fs-sm); color: var(--fg-muted); padding-bottom: var(--sp-5); max-width: 68ch; }
.accordion__panel a { color: var(--kesari-700); text-decoration: underline; text-underline-offset: 3px; }

/* Timeline */
.timeline { position: relative; padding-left: 32px; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(to bottom, var(--kesari-400), rgba(247,148,32,.12)); border-radius: 2px; }
.timeline__item { position: relative; padding-bottom: var(--sp-7); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before { content: ""; position: absolute; left: -32px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 3px solid var(--kesari-500); }
.section-deep .timeline__item::before { background: var(--ink-900); }
.timeline__year { font-size: var(--fs-label); font-weight: 700; letter-spacing: .14em; color: var(--kesari-700); text-transform: uppercase; margin-bottom: 6px; }
.section-deep .timeline__year { color: var(--kesari-300); }
.timeline h3 { font-size: 1.22rem; margin-bottom: 8px; }
.timeline p { font-size: var(--fs-sm); color: var(--fg-muted); }
.section-deep .timeline p { color: var(--fg-inverse-muted); }

.map-embed { position: relative; aspect-ratio: 16/10; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--paper-200); }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: sepia(.16) saturate(1.05); }
@media (min-width: 900px) { .map-embed { aspect-ratio: 21/9; } }

/* ------------------------------------------------------------------ 16. MOTION */
/* Baseline (no-GSAP) reveal — GSAP takes over when it loads */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-22px); }
[data-reveal="right"] { transform: translateX(22px); }
[data-reveal="scale"] { transform: scale(.965); }
.no-js [data-reveal] { opacity: 1; transform: none; }
/* Once GSAP owns the timeline it sets its own from-state; drop the CSS one */
.gsap-ready [data-reveal] { opacity: 1; transform: none; transition: none; }

/* Split-text lines for the hero headline */
.split-line { display: block; overflow: hidden; }
.split-line > span { display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .card:hover .card__media img, .card:has(:focus-visible) .card__media img, .gallery-item:hover img { transform: none; }
  .steam { display: none; }
  .ticker__track { transform: none !important; }
  .map-result:hover { transform: none; }
}

@media print {
  .site-header, .drawer, .nav-scrim, .site-footer, .lightbox, .sticky-order, .menu-nav, .btn, .ticker { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 12pt; }
  .card { break-inside: avoid; }
}

/* ==========================================================================
   LOGO — wordmark
   --------------------------------------------------------------------------
   The supplied logo is a complete wordmark: it already carries the name and
   the "Pure veg street food" line, so the old .logo__type text block is gone
   and the accessible name lives on the <a> and the <img alt>.

   Two files rather than one recoloured inline SVG: an <img> cannot be
   restyled by the page, and the header has to flip to the reversed mark while
   it sits over the hero video. Both ship on the header and CSS chooses; the
   footer and drawer only ever need the white one.
   ========================================================================== */
.logo__img {
  display: block;
  /* The global `img { background-color: var(--paper-200) }` rule exists so
     photographs do not flash white while they load. Behind a transparent logo
     it paints a cream slab — invisible on the light header, an obvious pale
     box on the dark footer and over the hero video. */
  background: none;
  height: 46px;
  width: auto;          /* 1008 x 331 - let the aspect ratio drive the width */
  max-width: 190px;
  flex: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.logo:hover .logo__img { transform: rotate(-1.5deg) scale(1.02); }

/* The header always shows the full-colour wordmark — including over the hero.
   Only the footer and the mobile drawer, which are dark surfaces by design,
   use the reversed mark. */

.site-footer .logo__img { height: 46px; max-width: 210px; }

.drawer__logo { height: 34px; max-width: 150px; }

@media (max-width: 400px) {
  .logo__img { height: 34px; max-width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .logo:hover .logo__img { transform: none; }
}

/* ==========================================================================
   HEADER SURFACE — tuned to the wordmark
   --------------------------------------------------------------------------
   The header used to go light-on-dark over the hero video: white logo, white
   nav, ghost CTA. That only worked because the old logo was type we could
   recolour. The supplied wordmark is a fixed three-colour lockup — its indigo
   "GULLY" and tagline disappear against dark video — so the header now carries
   its own light surface everywhere and shows the logo in full colour.

   Accents here use the wordmark's own inks rather than the site's kesari
   ramp, so the chrome around the logo agrees with it exactly.
   ========================================================================== */
:root {
  --logo-orange: #E86F2D;   /* the "GOGGI'S" letterforms + flag top */
  --logo-indigo: #16148C;   /* "GULLY" + the tagline */
  --logo-green:  #398D43;   /* flag bottom + the leaf */
}

/* Opaque over the hero. The wordmark is a fixed three-colour lockup, and the
   hero media is bright saturated food — anything showing through the bar
   fights the logo and the nav. A solid paper bar keeps both clean on any
   frame, and needs no backdrop-filter fallback.

   Scoped with :not(.is-stuck) deliberately — `.site-header--over-hero` and
   `.site-header.is-stuck` have identical specificity, so without it this rule
   would win by source order and also govern the scrolled state. */
.site-header--over-hero:not(.is-stuck) {
  background: var(--paper-50);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: var(--border);
}

/* Undo the light-on-dark treatment: on a paper surface it was invisible.
   Same selectors as the originals, later in the file, so source order wins. */
.site-header--over-hero:not(.is-stuck) .nav__link { color: var(--ink-700); }
.site-header--over-hero:not(.is-stuck) .nav__link::after { background: var(--logo-orange); }
.site-header--over-hero:not(.is-stuck) .nav__link[aria-current="page"] { color: var(--logo-indigo); }
.site-header--over-hero:not(.is-stuck) .nav-toggle {
  color: var(--logo-indigo);
  border-color: var(--border-strong);
}
.site-header--over-hero:not(.is-stuck) .header-cta {
  background: var(--logo-orange);
  border-color: var(--logo-orange);
  color: #fff;
}
.site-header--over-hero:not(.is-stuck) .header-cta:hover {
  background: var(--logo-indigo);
  border-color: var(--logo-indigo);
  color: #fff;
}
.site-header--over-hero :focus-visible { outline-color: var(--logo-orange); }

/* Match the solid state to the same palette, so scrolling changes nothing but
   the shadow. */
.nav__link::after { background: var(--logo-orange); }
.nav__link[aria-current="page"] { color: var(--logo-indigo); }
.header-cta { background: var(--logo-orange); border-color: var(--logo-orange); color: #fff; }
.header-cta:hover { background: var(--logo-indigo); border-color: var(--logo-indigo); color: #fff; }

/* ==========================================================================
   DARK-SURFACE COLOUR STEPS
   --------------------------------------------------------------------------
   The palette only ever defined dark steps for green and indigo (green-700,
   indigo-700 …) because both were designed for cream surfaces. The footer is
   ink-900, so `.veg-mark` and `.badge--indigo` were rendering near-black on
   near-black — the vegetarian line was barely legible and the dine-in badge
   was invisible.

   These are proper light steps in the existing ramp naming (lower = lighter),
   not one-off hexes, so anything else that lands on a dark surface can reuse
   them instead of inventing another value.
   ========================================================================== */
:root {
  --green-300:  #7ED09B;   /* veg mark on ink — ~9.5:1 */
  --indigo-300: #9AA8E8;   /* indigo badge on ink — ~8.4:1 */
}

/* The footer is the dark surface these were failing on. Scoped rather than
   global so the cream-surface usages keep their original, deliberate weight. */
.site-footer .veg-mark { color: var(--green-300); }

.site-footer .badge--indigo {
  color: var(--indigo-300);
  background: rgba(154, 168, 232, .12);
  border-color: rgba(154, 168, 232, .34);
}


/* ==========================================================================
   THE HEAT SYSTEM — "our food is spiced" as a standing brand fact
   --------------------------------------------------------------------------
   Spice is the third thing this kitchen says about itself, after "100%
   vegetarian" and "dine-in only", and it is presented the same way they are:
   a small mark with a short line of type, sitting wherever those two already
   sit. Not a notice, not a rating — the same single chilli appears beside
   "Mild" and beside "Hot", because the claim is about the kitchen, not the
   dish.

   Everything in this section is dead CSS unless Config\Features::$heatSystem
   is on: with the flag off no `.heat-mark` is rendered and no `[data-heat]`
   attribute is printed, so not one selector below can match and the site
   falls back to exactly its previous presentation.

   Palette is the wordmark's own inks (--logo-orange body, --logo-green stem),
   the same ones the header uses, so the chilli agrees with the logo rather
   than with the kesari ramp.
   ========================================================================== */

/* ----------------------------------------------------------- The chilli mark */
.heat-mark {
  --heat-pod:  var(--logo-orange);
  --heat-stem: var(--logo-green);
  display: inline-flex;
  align-items: center;
}

/* The `fact` variant is deliberately the twin of .veg-mark — same size, same
   weight, same tracking — so the two read as one row of standing facts. */
.heat-mark--fact {
  gap: 8px;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--kesari-700);
}
.heat-mark--fact.heat-mark--md { font-size: 1rem; letter-spacing: .07em; }

/* Centres the mark in a centred block; inline-flex alone cannot. */
.heat-mark--center { display: flex; justify-content: center; }

/* On ink surfaces the kesari ramp carries further than the wordmark inks do. */
.heat-mark--on-dark,
.site-footer .heat-mark--fact,
.section-deep .heat-mark--fact {
  color: var(--kesari-300);
  --heat-pod:  var(--kesari-400);
  --heat-stem: var(--kesari-200);
}

/* The `badge` variant rides on the existing .badge chip and changes nothing
   about it but the glyph in front of the text — the dish card's badge row
   keeps the shape and the rhythm it already had. */
.heat-mark--badge .heat-chilli { width: 13px; height: 13px; }

.heat-chilli { width: 15px; height: 15px; flex: none; }
.heat-mark--md .heat-chilli { width: 19px; height: 19px; }
.heat-chilli__pod {
  fill: var(--heat-pod);
  /* A hairline of the same ink on the outline: the pod is a thin crescent at
     13–19px and reads as a sliver without it. */
  stroke: var(--heat-pod); stroke-width: .9; stroke-linejoin: round;
}
.heat-chilli__stem { fill: none; stroke: var(--heat-stem); stroke-width: 2.1; stroke-linecap: round; }

/* --------------------------------------------------- The statement moment */
.heat-statement {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--paper-100) 0%, var(--paper-200) 100%);
  border-block: 1.5px solid var(--kesari-200);
}
.heat-statement .texture { opacity: .075; }
.heat-statement__title {
  font-size: clamp(1.95rem, 4.4vw, 3.3rem);
  margin-top: var(--sp-4);
  color: var(--ink-900);
}
.heat-statement__title .serif-italic { color: var(--kesari-700); }
.heat-statement__lead { margin: var(--sp-5) auto 0; max-width: 52ch; color: var(--ink-800); }
.heat-statement__note {
  margin: var(--sp-4) auto 0; max-width: 58ch;
  font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.68;
}

/* ------------------------------------------------------ Heat-tuned steam */
/* `.steam` already exists on every dish card and fades in on hover. All that
   changes here is its temperament, read straight off the card's data-heat:
   nothing at all with no chilli in the dish, a slow faint thread at mild, and
   a quicker, warmer plume once there is real heat in the pan. Pure CSS off the
   attribute — site.js is untouched and knows nothing about this. */
.card[data-heat="0"] .steam { display: none; }

.card[data-heat="1"]:hover .steam,
.dish-tile:hover .card[data-heat="1"] .steam { opacity: .4; }
.card[data-heat="1"] .steam span { animation-duration: 4.6s; background: rgba(255,255,255,.6); }
.card[data-heat="1"] .steam span:nth-child(2) { animation-delay: .95s; }
.card[data-heat="1"] .steam span:nth-child(3) { animation-delay: 1.9s; }

.card[data-heat="2"] .steam span { animation-duration: 2.3s; background: rgba(255,238,216,.8); }
.card[data-heat="2"] .steam span:nth-child(2) { animation-delay: .42s; }
.card[data-heat="2"] .steam span:nth-child(3) { animation-delay: .84s; }

.card[data-heat="3"]:hover .steam,
.dish-tile:hover .card[data-heat="3"] .steam { opacity: .92; }
.card[data-heat="3"] .steam span { animation-duration: 1.8s; background: rgba(255,226,194,.9); }
.card[data-heat="3"] .steam span:nth-child(2) { animation-delay: .32s; }
.card[data-heat="3"] .steam span:nth-child(3) { animation-delay: .64s; }

/* Steam is nothing but motion — frozen it is three blurred dots sitting on a
   photo — so for anyone who asked for less of it the plume goes entirely.
   Scoped to [data-heat] so this cannot reach the pre-flag behaviour. The
   chilli mark itself never animates and needs no guard. */
@media (prefers-reduced-motion: reduce) {
  .card[data-heat] .steam { display: none; }
}

/* House rules — the one-row strip on home/menu and the grouped lists on /visit. */
.rules-strip { background: var(--paper-100); border-block: 1.5px solid var(--border); padding-block: 12px; }
.rules-strip__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px var(--sp-5); margin: 0; padding: 0; }
.rules-strip__list li { font-size: var(--fs-sm); font-weight: 600; color: var(--ink-800); display: inline-flex; align-items: center; gap: 8px; }
.rules-strip__list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--kesari-400); flex: none; }
.rules-strip__more { color: var(--kesari-700); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.rules-strip__more:hover { color: var(--kesari-500); }
.rule-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.rule-list li { position: relative; padding-left: 22px; font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.6; }
.rule-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--kesari-400); }
.rule-list strong { color: var(--fg); }
.rule-note { margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.7; max-width: 70ch; }
.story-sign { text-align: center; padding: clamp(28px,5vw,56px) var(--sp-5); border-block: 2px solid var(--kesari-400); }
.story-sign__line { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: clamp(1.6rem,3.6vw,2.6rem); line-height: 1.25; color: var(--kesari-700); }
.story-sign__sub { margin-top: var(--sp-3); font-size: var(--fs-lg, 1.1rem); color: var(--fg-muted); }

/* ---- What goes in: ingredients strip ------------------------------------
   Desktop: one row of eight squares. Below 1000px the row scrolls inside its
   OWN overflow-x element (never the page), snapping tile by tile; the next
   tile peeks in and the hint line below says to swipe. */
.ingredients__scroller {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--sp-2);
  padding: 6px var(--sp-2) var(--sp-3); margin-inline: calc(var(--sp-2) * -1);
  scrollbar-width: thin; scrollbar-color: var(--kesari-400) transparent;
}
.ingredients__row {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 44%; gap: var(--sp-3);
}
.ingredients__tile { scroll-snap-align: start; min-width: 0; }
.ingredients__tile figure { margin: 0; }
.ingredients__img {
  display: block; aspect-ratio: 1 / 1; overflow: hidden;
  border-radius: var(--radius-lg); background: var(--paper-200);
}
.ingredients__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ingredients__tile figcaption {
  margin-top: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-800); line-height: 1.3;
}
.ingredients__hint { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--kesari-700); font-weight: 600; }
@media (min-width: 560px) { .ingredients__row { grid-auto-columns: 30%; } }
@media (min-width: 1000px) {
  .ingredients__scroller { overflow: visible; scroll-snap-type: none; padding-inline: 0; margin-inline: 0; }
  .ingredients__row { grid-auto-flow: row; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--sp-4); }
  .ingredients__hint { display: none; }
}

/* ---- Motion (owner notes: food / place animations, smooth transitions) ----
   Everything below is wrapped in no-preference, so reduced motion gets none. */
@media (prefers-reduced-motion: no-preference) {
  /* Cross-document page transition: header stays put, main content fades/rises. */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: gg-vt-out 140ms var(--ease-out, ease-out) both; }
  ::view-transition-new(root) { animation: gg-vt-in 250ms var(--ease-out, ease-out) both; }
  ::view-transition-group(site-header) { animation-duration: 0s; }
  @keyframes gg-vt-out { to { opacity: 0; } }
  @keyframes gg-vt-in  { from { opacity: 0; transform: translateY(10px); } }

  /* Map pins: a soft saffron halo breathes out, staggered across pins. */
  .map__pin-pulse {
    display: inline; fill: var(--kesari-400); opacity: 0; pointer-events: none;
    transform-box: fill-box; transform-origin: center;
    animation: gg-pin-pulse 3.6s ease-out infinite;
  }
  .map__pin:nth-child(3n+1) .map__pin-pulse { animation-delay: -1.2s; }
  .map__pin:nth-child(3n+2) .map__pin-pulse { animation-delay: -2.4s; }
  .map__pin:nth-child(5n) .map__pin-pulse   { animation-delay: -.6s; }
  .map__pin:hover .map__pin-pulse, .map__pin.is-selected .map__pin-pulse { animation-play-state: paused; }
  @keyframes gg-pin-pulse {
    0%   { transform: scale(.3); opacity: .38; }
    70%  { transform: scale(1);  opacity: 0; }
    100% { transform: scale(1);  opacity: 0; }
  }
}