/* Holi Diwali, Sagres
   One idea runs through the page: the logo's arch, lit by its diya. The hero is daylight (the
   logo on an off-white ground under a maroon bar), the dishes sit in arched windows,
   and the colour fields after it are the restaurant's own: marigold gold, maroon, the cream
   of the logo panel, and the green the printed menu uses for vegan dishes. */

@font-face { font-family: "Rozha One"; src: url("/assets/fonts/rozha-one.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Anek Latin"; src: url("/assets/fonts/anek-text.woff2") format("woff2"); font-weight: 400 650; font-display: swap; }
@font-face { font-family: "Anek Condensed"; src: url("/assets/fonts/anek-condensed.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --night: #2b0d08;
  --night-2: #3d150c;
  --day: #fcf7ee;          /* hero and menu header ground */
  --maroon: #86331e;       /* logo band */
  --maroon-deep: #6b2414;
  --gold: #d7a542;         /* logo gold */
  --gold-light: #ecc56f;
  --marigold: #eba937;
  --cream: #f7ecd3;
  --panel: #e6d3ab;        /* logo panel */
  --panel-2: #efe0bd;
  --ink: #2a120b;
  --ink-soft: #5c3b2c;
  --leaf: #2e5326;
  --vegan: #336a23;
  --chili: #7c1907;
  --name: #812b16;         /* "Holi Diwali" lettering */
  --tagline: #4e2514;      /* "Indian Restaurant" lettering */
  --focus: var(--maroon);

  --f-display: "Rozha One", Georgia, serif;
  --f-text: "Anek Latin", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-label: "Anek Condensed", "Anek Latin", system-ui, sans-serif;

  --arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M0 140V52C0 37 13 30 27 24.5C39 19.5 49.2 12 50 0C50.8 12 61 19.5 73 24.5C87 30 100 37 100 52V140Z'/%3E%3C/svg%3E");
  --head-h: 64px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); }
body { margin: 0; font: 400 1.0625rem/1.6 var(--f-text); color: var(--ink); background: var(--cream); font-kerning: normal; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; font-weight: 400; }
h1, h2 { font-family: var(--f-display); line-height: 1.04; letter-spacing: -0.005em; text-wrap: balance; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
small { font-size: 0.85em; }
.wrap { width: 100%; max-width: 1220px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--gold); color: var(--night); font-weight: 600; }
.skip:focus { top: 12px; }
.icon { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; }
.price { font-family: var(--f-label); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }

/* dark surfaces use the gold focus ring */
.masthead, .footer, .vegan, .reviews, .actionbar { --focus: var(--gold-light); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em; padding: 0.8em 1.3em 0.75em;
  font: 600 1.06rem/1.1 var(--f-label); letter-spacing: 0.01em; text-decoration: none;
  border: 1.5px solid transparent; border-radius: 3px; transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn--gold { background: var(--gold); color: var(--night); }
.btn--gold:hover { background: var(--gold-light); }
.btn--maroon { background: var(--maroon); color: var(--cream); }
.btn--maroon:hover { background: var(--maroon-deep); }
.btn--outline { border-color: var(--maroon); color: var(--maroon); }
.btn--outline:hover { background: rgb(134 51 30 / 0.08); }

/* ---------- tags ---------- */
.tag { display: inline-block; padding: 0.18em 0.5em 0.12em; font: 600 0.78rem/1.2 var(--f-label); letter-spacing: 0.02em; border-radius: 2px; vertical-align: 0.1em; }
.tag--vegan { background: var(--vegan); color: #f3f7e8; }
.tag--option { box-shadow: inset 0 0 0 1.5px var(--vegan); color: var(--vegan); }

/* ---------- masthead ---------- */
.masthead { position: sticky; top: 0; z-index: 50; background: var(--maroon-deep); color: var(--cream); }
.masthead__inner { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px); height: var(--head-h); max-width: 1220px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
.masthead__logo { flex: none; display: block; width: 62px; transition: width 0.35s, margin 0.35s, opacity 0.3s, visibility 0s; }
.masthead__logo img { display: block; width: 100%; height: auto; }
.js .masthead--home:not(.show-logo) .masthead__logo { width: 0; margin-right: calc(-1 * clamp(14px, 2.4vw, 32px)); opacity: 0; visibility: hidden; transition: width 0.35s, margin 0.35s, opacity 0.3s, visibility 0s 0.35s; }
.masthead__nav { flex: 1; min-width: 0; }
.masthead__nav ul { display: flex; gap: clamp(14px, 2.2vw, 30px); }
.masthead__nav a, .masthead__lang { font: 600 1.02rem/1 var(--f-label); text-decoration: none; padding: 8px 0; color: var(--cream); }
.masthead__nav a:hover, .masthead__nav a[aria-current] { color: var(--gold-light); }
.masthead__nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.35em; }
.masthead__lang:hover { color: var(--gold-light); }
.masthead__call { display: inline-flex; align-items: center; gap: 0.5em; padding: 9px 14px 8px; background: var(--gold); color: var(--night); border-radius: 3px; font: 600 1rem/1 var(--f-label); text-decoration: none; font-variant-numeric: tabular-nums; }
.masthead__call:hover { background: var(--gold-light); }

/* ---------- hero (daylight) ---------- */
.hero {
  position: relative; overflow: hidden; color: var(--ink); background: var(--day);
  padding: clamp(24px, 4vw, 44px) 0 clamp(72px, 9vw, 120px);
}
.hero__inner { text-align: center; }
.hero__lamp { position: relative; isolation: isolate; width: min(520px, 84vw, (100svh - 430px) * 1.13); min-width: min(300px, 84vw); margin: 0 auto; }
.hero__glow { position: absolute; z-index: -1; left: 50%; top: 5.5%; width: 260%; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgb(240 170 60 / 0.24), rgb(240 170 60 / 0.07) 38%, rgb(240 170 60 / 0) 72%); }
.lamp { display: block; width: 100%; height: auto; overflow: visible; }
.hero__title { margin-top: clamp(20px, 3vw, 30px); font-size: clamp(2.35rem, 5.6vw, 4.5rem); color: var(--maroon-deep); }
.hero__lede { max-width: 34em; margin: 16px auto 0; font-size: clamp(1.06rem, 1.5vw, 1.24rem); line-height: 1.55; color: var(--ink-soft); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; margin: 22px 0 0; font-size: 0.98rem; color: var(--maroon); }
.hero__meta a { color: inherit; }
.status::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-right: 0.5em; border-radius: 50%; background: currentColor; vertical-align: 0.08em; opacity: 0.7; }
.status:empty { display: none; }
.status.is-open::before { background: var(--vegan); opacity: 1; }

/* the dishes, in arched windows at the foot of the hero */
.kitchen { margin-top: clamp(64px, 9vw, 112px); }
.kitchen__title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); color: var(--maroon); text-align: center; }
.dish-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 30px); margin-top: clamp(28px, 4vw, 44px); }
.dish-card { text-align: center; }
.arch { filter: drop-shadow(0 6px 14px rgb(80 30 10 / 0.18)); }
.arch__frame, .arch__frame img { -webkit-mask: var(--arch) center / 100% 100% no-repeat; mask: var(--arch) center / 100% 100% no-repeat; }
.arch__frame { aspect-ratio: 5 / 7; padding: 4px; background: var(--gold); }
.arch__frame img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--panel); }
.dish-card__name { margin-top: 16px; font: 400 1.32rem/1.15 var(--f-display); color: var(--maroon-deep); }
.dish-card__desc { margin: 6px 0 8px; font-size: 0.93rem; line-height: 1.42; color: var(--ink-soft); }
.dish-card__meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; margin: 0; }
.dish-card__meta .price { color: var(--maroon); font-size: 1.08rem; }
.kitchen__more { margin: clamp(32px, 4vw, 48px) 0 0; text-align: center; }

/* ---------- spice (marigold) ---------- */
.spice { background: var(--marigold); padding: clamp(64px, 9vw, 120px) 0; }
.spice__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.spice h2 { font-size: clamp(2.2rem, 4.6vw, 3.7rem); color: var(--maroon-deep); margin-bottom: 0.45em; }
.spice__text > p { max-width: 34em; font-size: 1.1rem; }
.heat { margin: 22px 0 26px; padding-left: 20px; border-left: 12px solid; border-image: linear-gradient(#f9e2a6, #e2741b 55%, var(--chili)) 1; }
.heat__step { display: grid; gap: 2px; padding: 9px 0; }
.heat__step + .heat__step { border-top: 1px solid rgb(42 18 11 / 0.18); }
.heat__label { font: 600 1.12rem/1.2 var(--f-label); color: var(--maroon-deep); }
.heat__step--2 .heat__label { color: var(--chili); }
.heat__dishes { font-size: 1.02rem; }
.framed { margin: 0; }
.framed img { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: 0 0 0 4px var(--cream), 0 0 0 10px var(--maroon); }
.spice__photo { padding: 10px; }

/* ---------- vegan (leaf green) ---------- */
.vegan { background: var(--leaf); color: var(--cream); padding: clamp(64px, 9vw, 120px) 0; }
.vegan__intro { max-width: 40em; }
.vegan h2 { font-size: clamp(2.2rem, 4.6vw, 3.7rem); color: var(--gold-light); margin-bottom: 0.4em; }
.vegan__intro p { font-size: 1.1rem; color: rgb(247 236 211 / 0.9); }
.vegan-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 64px); margin-top: clamp(32px, 4vw, 48px); align-items: start; }
.vegan-list h3 { font: 600 1.15rem/1.2 var(--f-label); color: var(--gold-light); padding-bottom: 10px; border-bottom: 2px solid rgb(236 197 111 / 0.55); }
.vegan-list__group:nth-child(2) ul { columns: 2; column-gap: clamp(24px, 3vw, 44px); }
.vegan-list li { break-inside: avoid; display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid rgb(247 236 211 / 0.16); }
.vegan-list .price { color: rgb(247 236 211 / 0.82); }
.vegan-list__star, .vegan__star span { color: var(--gold-light); font-weight: 650; margin-left: 2px; }
.vegan__star { margin: 22px 0 0; font-size: 0.95rem; color: rgb(247 236 211 / 0.82); }

/* ---------- reviews (maroon) ---------- */
.reviews { background: var(--maroon); color: var(--cream); padding: clamp(64px, 9vw, 112px) 0; }
.reviews h2 { font-size: clamp(2.2rem, 4.6vw, 3.7rem); }
.reviews__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); margin-top: clamp(32px, 4vw, 52px); }
.quote { margin: 0; display: flex; flex-direction: column; }
.quote blockquote { margin: 0; }
.quote blockquote p { font: 400 clamp(1.3rem, 1.9vw, 1.55rem)/1.3 var(--f-display); margin: 0; }
.quote__tr { margin: 12px 0 0; font-size: 0.95rem; color: rgb(247 236 211 / 0.8); }
.quote figcaption { margin-top: 18px; padding-top: 14px; border-top: 2px solid rgb(236 197 111 / 0.5); font: 600 1.05rem/1.3 var(--f-label); color: var(--gold-light); }
.quote figcaption span { font-family: var(--f-text); font-weight: 400; color: rgb(247 236 211 / 0.78); }
.reviews__links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: clamp(36px, 4vw, 52px) 0 0; }

/* ---------- visit (cream) ---------- */
.visit { padding: clamp(64px, 9vw, 120px) 0; }
.visit__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.visit h2 { font-size: clamp(2.2rem, 4.6vw, 3.7rem); color: var(--maroon); margin-bottom: 0.45em; }
.visit__text > p { max-width: 34em; font-size: 1.1rem; }
/* the address, hours and phone set like a shop sign, without labels */
.visit__sign { display: grid; gap: 22px; margin: 32px 0 26px; padding: 26px 0; border-block: 2px solid rgb(134 51 30 / 0.28); }
.visit__sign p { margin: 0; color: var(--ink-soft); }
.visit__sign .big { display: block; font: 400 clamp(1.4rem, 2.3vw, 1.75rem)/1.2 var(--f-display); color: var(--ink); }
.visit__sign a.big { color: var(--maroon); text-decoration: none; font-variant-numeric: lining-nums; }
.visit__sign a.big:hover { text-decoration: underline; }
.visit__sign .status { margin-top: 6px; font-weight: 600; }
.visit__amenities { color: var(--ink-soft); }
.visit__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.visit__media { display: grid; gap: 34px; padding: 10px; }
.visit__photo figcaption { margin-top: 18px; font-size: 0.95rem; color: var(--ink-soft); }
.visit__map iframe { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; border-radius: 2px; box-shadow: 0 0 0 4px var(--panel), 0 0 0 10px var(--maroon); background: var(--panel); }
.visit__map a { display: inline-block; margin-top: 18px; font-size: 0.95rem; }

/* ---------- questions (logo-panel cream) ---------- */
.faq { background: var(--panel); padding: clamp(64px, 9vw, 112px) 0; }
.faq__wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq h2 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); color: var(--maroon); }
.faq__item { border-top: 1.5px solid rgb(134 51 30 / 0.3); }
.faq__item:last-child { border-bottom: 1.5px solid rgb(134 51 30 / 0.3); }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { font: 600 1.14rem/1.3 var(--f-text); }
.faq__item summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2.5px solid var(--maroon); border-bottom: 2.5px solid var(--maroon); transform: translateY(-3px) rotate(45deg); transition: transform 0.2s; }
.faq__item[open] summary::after { transform: translateY(3px) rotate(-135deg); }
.faq__item p { max-width: 40em; margin: -4px 0 20px; color: var(--ink-soft); }

/* ---------- footer ---------- */
.footer { background: var(--night); color: rgb(247 236 211 / 0.86); padding: clamp(56px, 7vw, 88px) 0 32px; font-size: 1rem; }
.footer__grid { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.footer__logo { display: block; width: 170px; }
.footer__logo img { display: block; width: 100%; height: auto; }
.footer__name { font: 400 1.4rem/1.2 var(--f-display); color: var(--gold-light); margin-bottom: 0.6em; }
.footer__col a { color: var(--cream); }
.footer__col small { color: rgb(247 236 211 / 0.7); }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; margin-top: clamp(40px, 5vw, 64px); padding-top: 20px; border-top: 1px solid rgb(236 197 111 / 0.22); font-size: 0.92rem; }
.footer__bottom p { margin: 0; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__legal a { color: inherit; }

.actionbar { display: none; }

/* ---------- menu page ---------- */
.menu-head { background: var(--day); color: var(--ink); box-shadow: inset 0 -1px 0 rgb(134 51 30 / 0.22); padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 48px); }
.menu-head h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); color: var(--maroon-deep); }
.menu-head__lede { margin: 14px 0 0; font-size: 1.14rem; color: var(--ink-soft); }
.menu-head__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 18px 0 0; font-size: 0.96rem; color: var(--ink-soft); }
.menu-head__legend .tag { margin-right: 4px; }
.filter { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font: 600 1.05rem/1.2 var(--f-label); cursor: pointer; }
.filter input { width: 20px; height: 20px; margin: 0; accent-color: var(--vegan); }
.menu-nav { position: sticky; top: var(--head-h); z-index: 40; background: var(--cream); box-shadow: 0 1px 0 rgb(134 51 30 / 0.22); }
.menu-nav ul { display: flex; gap: clamp(16px, 2vw, 28px); overflow-x: auto; scrollbar-width: none; padding-block: 12px; }
.menu-nav ul::-webkit-scrollbar { display: none; }
.menu-nav a { flex: none; font: 600 1rem/1 var(--f-label); color: var(--maroon); text-decoration: none; white-space: nowrap; padding: 6px 0; }
.menu-nav a:hover { text-decoration: underline; }
.menu-nav li { flex: none; }
.menu-body { padding-bottom: clamp(56px, 7vw, 96px); }
.menu-sec { margin-top: clamp(40px, 5vw, 64px); scroll-margin-top: calc(var(--head-h) + 60px); }
.menu-sec__bar { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 20px 10px; background: var(--maroon); color: var(--cream); font-size: clamp(1.5rem, 2.6vw, 1.95rem); border-radius: 2px; }
.menu-sec__alt { font: 600 1rem/1 var(--f-label); color: var(--gold-light); }
.menu-sec__note { margin: 14px 0 0; color: var(--ink-soft); font-style: italic; }
.menu-sec__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); }
.item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; column-gap: 16px; padding: 15px 0 14px; border-bottom: 1px solid rgb(134 51 30 / 0.16); }
.item__name { font: 600 1.1rem/1.3 var(--f-text); }
.item__price { font: 600 1.1rem/1.3 var(--f-label); color: var(--maroon); font-variant-numeric: tabular-nums lining-nums; text-align: right; white-space: nowrap; }
.item__desc { grid-column: 1 / -1; margin: 3px 0 0; font-size: 0.97rem; line-height: 1.45; color: var(--ink-soft); }
.item .tag { grid-column: 1 / -1; justify-self: start; margin-top: 7px; }
.vegan-only .item:not([data-v]) { display: none; }
.menu-note { margin: 44px 0 0; max-width: 44em; color: var(--ink-soft); }
.menu-cta { margin: 24px 0 0; }

/* ---------- 404 ---------- */
.nf { padding: clamp(72px, 10vw, 140px) 0; }
.nf h1 { font-size: clamp(2.4rem, 5vw, 4rem); color: var(--maroon); margin-bottom: 0.4em; }
.nf__links { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 32px; }

/* ---------- logo draw (hero) ----------
   The final state is the default, so without JS or with reduced motion the lit logo simply appears.
   1. two maroon pen lines trace the maroon band from the bottom point up both sides (pathLength=1:
      a dash grows around the start point until the halves meet at the top);
   2. the bands and the cream panel fill in behind them;
   3. the lettering writes itself letter by letter, left to right, outline first, then ink;
   4. as the lines meet, the diya lights: the flame grows from its stem, a halo blooms,
      and the room behind the logo warms up. The flame flickers three times and settles (under 5 s). */
.lamp__gold { fill: var(--gold); }
.lamp__band { fill: var(--maroon); }
.lamp__panel { fill: var(--panel); }
.lamp__core { fill: #fff2c6; }
.lamp__name { fill: var(--name); }
.lamp__tagline { fill: var(--tagline); }
.lamp__line { fill: none; stroke: none; }

@media (prefers-reduced-motion: no-preference) {
  .js .lamp__line {
    stroke: var(--maroon); stroke-width: 1.6; stroke-linecap: round;
    stroke-dasharray: 0 1; stroke-dashoffset: 0;
    animation: lamp-draw 1.3s cubic-bezier(0.55, 0, 0.3, 1) 0.2s forwards, lamp-out 0.6s ease-in 1.6s forwards;
  }
  .js .lamp__frame > * { opacity: 0; animation: lamp-in 0.55s ease-out forwards; }
  .js .lamp__frame > :nth-child(4) { animation-delay: 0.95s; } /* cream panel first, then the bands around it */
  .js .lamp__frame > :nth-child(3) { animation-delay: 1.1s; }
  .js .lamp__frame > :nth-child(2) { animation-delay: 1.18s; }
  .js .lamp__frame > :nth-child(1) { animation-delay: 1.26s; }
  .js .lamp__name path, .js .lamp__tagline path {
    fill-opacity: 0; stroke-width: 0.9; stroke-dasharray: 1 1; stroke-dashoffset: 1;
    animation: lamp-write 0.55s ease-in-out var(--d) forwards, lamp-ink 0.4s ease-out calc(var(--d) + 0.32s) forwards;
  }
  .js .lamp__name path { --d: calc(1.4s + var(--i) * 0.075s); stroke: var(--name); }
  .js .lamp__tagline path { --d: calc(2.2s + var(--i) * 0.028s); stroke: var(--tagline); stroke-width: 0.6; }
  .js .lamp__flame { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: lamp-ignite 0.8s cubic-bezier(0.2, 1.45, 0.4, 1) 1.42s forwards; }
  .js .lamp__core { transform-box: fill-box; transform-origin: 50% 88%; animation: lamp-flicker 1.1s ease-in-out 2.3s 3; }
  .js .lamp__halo { opacity: 0; transform-box: fill-box; transform-origin: center; animation: lamp-halo 1.3s ease-out 1.5s forwards; }
  .js .hero__glow { opacity: 0; animation: lamp-in 1.8s ease-out 1.55s forwards; }
}
@keyframes lamp-draw { to { stroke-dasharray: 1 0; stroke-dashoffset: 0.5; } }
@keyframes lamp-out { to { opacity: 0; } }
@keyframes lamp-in { to { opacity: 1; } }
@keyframes lamp-write { to { stroke-dashoffset: 0; } }
@keyframes lamp-ink { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes lamp-ignite { 0% { opacity: 0; transform: scale(0.25); } 35% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@keyframes lamp-flicker { 0%, 100% { transform: scale(1); } 30% { transform: scale(0.93, 1.07); } 62% { transform: scale(1.04, 0.97); } }
@keyframes lamp-halo { 0% { opacity: 0; transform: scale(0.3); } 45% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .masthead__logo, .faq__item summary::after { transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1099px) {
  .dish-row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 44px; }
}
@media (max-width: 899px) {
  .spice__grid, .visit__grid, .faq__wrap { grid-template-columns: minmax(0, 1fr); }
  .spice__photo { max-width: 560px; }
  .vegan-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vegan-list__group:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .reviews__grid { grid-template-columns: minmax(0, 1fr); max-width: 40em; }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__logo { grid-column: 1 / -1; width: 140px; }
}
@media (max-width: 759px) {
  :root { --head-h: 58px; }
  .masthead__nav li:not(:first-child) { display: none; }
  .masthead__call span { display: none; }
  .masthead__call { padding: 9px 11px; }
  .masthead__logo { width: 54px; }
  .menu-sec__items { grid-template-columns: minmax(0, 1fr); }
  .menu-sec__bar { padding: 10px 14px 8px; }
  .actionbar {
    display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; inset: auto 0 0 0; z-index: 60;
    background: var(--maroon-deep); border-top: 1px solid rgb(236 197 111 / 0.3); padding-bottom: env(safe-area-inset-bottom);
  }
  .actionbar a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 9px; color: var(--cream); text-decoration: none; font: 600 0.9rem/1 var(--f-label); }
  .actionbar a .icon { color: var(--gold-light); width: 1.3em; height: 1.3em; }
  .actionbar a + a { border-left: 1px solid rgb(236 197 111 / 0.18); }
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
}
@media (max-width: 699px) {
  .dish-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; }
  .dish-card__name { font-size: 1.18rem; }
  .vegan-list { grid-template-columns: minmax(0, 1fr); }
  .vegan-list__group:nth-child(2) { grid-row: auto; grid-column: auto; }
  .vegan-list__group:nth-child(2) ul { columns: 1; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
}