/* ============================================================
   Hope Restaurant — public stylesheet
   Dark, warm and editorial: charcoal ground, ember accents,
   Playfair display type against Inter for everything else.
   Colour tokens are injected per-request from the admin theme
   settings in <style id="theme-vars">; the values below are
   only fallbacks for a page rendered without them.
   ============================================================ */

:root {
  --primary: #c0392b;
  --primary-light: #e74c3c;
  --primary-dark: #7b1414;
  --gold: #d4a849;
  --bg: #0a0908;
  --surface: #151110;
  --text: #f3ede6;
  --muted: #a89588;
  --radius: 14px;

  /* Derived */
  --surface-2: color-mix(in srgb, var(--surface) 78%, #fff 6%);
  --line: color-mix(in srgb, var(--text) 12%, transparent);
  --line-strong: color-mix(in srgb, var(--primary) 42%, transparent);
  --ember: color-mix(in srgb, var(--primary) 30%, transparent);
  --glow: 0 10px 40px -12px color-mix(in srgb, var(--primary) 55%, transparent);
  --shadow: 0 18px 48px -24px rgba(0, 0, 0, .9);

  --font-display: "Playfair Display", "Georgia", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1240px;
  --gutter: clamp(18px, 4vw, 48px);
  --section: clamp(64px, 9vw, 128px);

  --ease: cubic-bezier(.22, .68, .28, 1);
  --t: .38s var(--ease);
}

/* ── Reset ─────────────────────────────────────────────── */

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

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

body {
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.7 var(--font-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
[hidden] { display: none !important; }

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

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

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--primary) 55%, #000);
  border-radius: 99px;
  border: 3px solid var(--bg);
}

/* Film grain: a single tiled SVG, fixed so it never scrolls with content. */
body.has-grain::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: .32;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 18px;
  background: var(--primary);
  color: #fff;
  border-radius: 0 0 10px 10px;
  transition: top .2s var(--ease);
}
.skip:focus { top: 0; }

/* ── Layout ────────────────────────────────────────────── */

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

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }

/* ── Type ──────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.d1 { font-size: clamp(2.5rem, 5.6vw, 4.4rem); font-weight: 700; }
.d2 { font-size: clamp(2rem, 4.4vw, 3.3rem); }
.d3 { font-size: clamp(1.4rem, 2.4vw, 1.95rem); }

p { text-wrap: pretty; }
.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  line-height: 1.65;
  color: color-mix(in srgb, var(--text) 82%, transparent);
}
.muted { color: var(--muted); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: .7;
}

.s-head { max-width: 62ch; margin-bottom: clamp(36px, 5vw, 58px); }
.s-head--center { margin-inline: auto; text-align: center; }
.s-head--center .eyebrow::before { display: none; }
.s-head p { margin-top: 18px; }

/* Hairline rule used between major blocks. */
.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  border: 0;
}

/* ── Buttons ───────────────────────────────────────────── */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid var(--btn-bd);
  border-radius: 99px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .94rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t), transform .18s var(--ease), box-shadow var(--t);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .icon { flex: none; }

.btn--primary {
  --btn-bg: var(--primary);
  --btn-fg: #fff;
  --btn-bd: var(--primary);
  box-shadow: var(--glow);
}
.btn--primary:hover { --btn-bg: var(--primary-light); --btn-bd: var(--primary-light); }

.btn--gold { --btn-bg: var(--gold); --btn-fg: #1a1207; --btn-bd: var(--gold); }
.btn--gold:hover { --btn-bg: color-mix(in srgb, var(--gold) 82%, #fff); }

.btn--ghost { --btn-bd: color-mix(in srgb, var(--text) 26%, transparent); }
.btn--ghost:hover { --btn-bd: var(--gold); --btn-fg: var(--gold); }

.btn--sm { padding: 10px 18px; font-size: .86rem; }
.btn--lg { padding: 17px 34px; font-size: 1rem; }
.btn--block { width: 100%; }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--gold);
}
.link-more .icon { transition: transform var(--t); }
.link-more:hover .icon { transform: translateX(5px); }

/* ── Announcement bar ──────────────────────────────────── */

.announce {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px calc(var(--gutter) + 28px) 10px var(--gutter);
  background: linear-gradient(90deg, var(--primary-dark), var(--primary));
  color: #fff;
  font-size: .88rem;
  text-align: center;
}
.announce a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.announce__x {
  position: absolute;
  right: 10px;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  opacity: .8;
}
.announce__x:hover { opacity: 1; background: rgba(0, 0, 0, .18); }

/* ── Header ────────────────────────────────────────────── */

.head {
  position: sticky;
  top: 0;
  z-index: 60;
  transition: background var(--t), border-color var(--t), backdrop-filter var(--t);
  border-bottom: 1px solid transparent;
}
.head.is-stuck {
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: var(--line);
}
/* A backdrop-filter makes this element the containing block for fixed
   descendants, which would clip the open mobile menu. Drop it while open. */
body.menu-open .head.is-stuck { backdrop-filter: none; -webkit-backdrop-filter: none; }

.head__in {
  display: flex;
  align-items: center;
  gap: clamp(14px, 3vw, 34px);
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 14px var(--gutter);
}

.brand { display: flex; align-items: center; gap: 12px; flex: none; position: relative; z-index: 82; }
.brand__img { height: 48px; width: auto; }
.brand__mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--gold);
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 38%, transparent), transparent);
  border: 1px solid var(--line-strong);
  flex: none;
}
.brand__text { display: grid; line-height: 1.15; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: .005em;
}
.brand__sub {
  font-size: .66rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav { margin-inline: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(4px, 1.4vw, 10px); }
.nav__list a {
  position: relative;
  display: block;
  padding: 9px 14px;
  border-radius: 99px;
  font-size: .92rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  transition: color var(--t), background var(--t);
}
.nav__list a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  translate: -50% 0;
  transition: width var(--t);
}
.nav__list a:hover { color: var(--text); }
.nav__list a:hover::after,
.nav__list a[aria-current="page"]::after { width: 18px; }
.nav__list a[aria-current="page"] { color: var(--text); }
.nav__foot { display: none; }

.head__side { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 99px;
  border: 1px solid var(--line);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}
.status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.status.is-open { color: #63d297; border-color: color-mix(in srgb, #63d297 34%, transparent); }
.status.is-open .status__dot { animation: pulse 2.4s var(--ease) infinite; }
.status.is-shut { color: var(--muted); }

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #63d297 60%, transparent); }
  60% { box-shadow: 0 0 0 7px transparent; }
}

.cart-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--line);
  transition: border-color var(--t), color var(--t);
}
.cart-btn:hover { border-color: var(--gold); color: var(--gold); }
.cart-btn__count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  background: var(--primary);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
}

.burger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 12px; position: relative; z-index: 82; }
.burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--text); transition: transform var(--t), opacity var(--t); }

/* ── Flash messages ────────────────────────────────────── */

.flashes {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + 84px);
  translate: -50% 0;
  z-index: 90;
  display: grid;
  gap: 10px;
  width: min(560px, calc(100vw - 32px));
}
.flash {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 94%, #000);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  font-size: .92rem;
  animation: drop .5s var(--ease) both;
}
.flash .icon { flex: none; margin-top: 3px; }
.flash--ok { border-left: 3px solid #63d297; }
.flash--ok .icon { color: #63d297; }
.flash--error { border-left: 3px solid var(--primary-light); }
.flash--error .icon { color: var(--primary-light); }

@keyframes drop { from { opacity: 0; translate: 0 -12px; } }

/* ── Hero ──────────────────────────────────────────────── */

.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(88svh, 820px);
  padding-block: clamp(84px, 11vh, 124px) clamp(40px, 6vh, 72px);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
/* The scrim has to carry the type on any photograph, including a bright,
   busy one, so it is deliberately heavy rather than tasteful-and-thin. */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      var(--bg) 2%,
      color-mix(in srgb, var(--bg) 86%, transparent) 38%,
      color-mix(in srgb, var(--bg) 66%, transparent) 72%,
      color-mix(in srgb, var(--bg) 52%, transparent) 100%),
    radial-gradient(90% 70% at 15% 100%, color-mix(in srgb, var(--primary-dark) 48%, transparent), transparent 70%);
}

/* Wide screens put the text in the left third, so darken that side further
   and let the photograph stay visible on the right. */
@media (min-width: 861px) {
  .hero__bg::after {
    background:
      linear-gradient(to right,
        color-mix(in srgb, var(--bg) 88%, transparent) 0%,
        color-mix(in srgb, var(--bg) 64%, transparent) 46%,
        color-mix(in srgb, var(--bg) 20%, transparent) 78%,
        transparent 100%),
      linear-gradient(to top,
        var(--bg) 2%,
        color-mix(in srgb, var(--bg) 74%, transparent) 40%,
        color-mix(in srgb, var(--bg) 42%, transparent) 100%),
      radial-gradient(90% 70% at 15% 100%, color-mix(in srgb, var(--primary-dark) 48%, transparent), transparent 70%);
  }
}
/* Fallback when no photograph has been uploaded yet. */
.hero--plain .hero__bg {
  background:
    radial-gradient(70% 60% at 12% 8%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 62%),
    radial-gradient(60% 55% at 92% 20%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 60%),
    var(--bg);
}

/* Split at desktop: copy on the left, quick-order panel on the right, so
   the far side of a wide screen is not simply empty. */
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}
.hero__in { position: relative; display: grid; gap: 24px; max-width: 42ch; }

.hero__panel {
  display: grid;
  gap: 13px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  box-shadow: var(--shadow);
}
.hero__panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.hero__panel-hours { font-size: .84rem; color: var(--muted); }
.hero__panel-title {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

.hero__picks { display: grid; gap: 4px; }
.hero__picks a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px;
  border-radius: 10px;
  transition: background var(--t);
}
.hero__picks a:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.hero__picks img {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
}
.hero__picks-name {
  flex: 1;
  min-width: 0;
  font-size: .92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero__picks-price { font-size: .88rem; font-weight: 600; color: var(--gold); white-space: nowrap; }

.hero__panel-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero__panel-acts .btn { padding-inline: 10px; font-size: .86rem; }
.hero h1 { margin-block: 4px 0; }
.hero .lead { max-width: 56ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 6px;
  font-size: .88rem;
  color: var(--muted);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta .icon { color: var(--gold); }

/* Retired: the quick-order panel now occupies this corner at desktop, and
   the hero is dense enough that nobody needs telling to scroll. Kept as a
   rule rather than deleted so the markup stays harmless if reinstated. */
.hero__scroll { display: none !important; }

.hero__scroll {
  position: absolute;
  right: calc(var(--gutter) + 62px);
  bottom: clamp(40px, 6vh, 72px);
  display: grid;
  justify-items: center;
  gap: 12px;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  writing-mode: vertical-rl;
}
.hero__scroll::after {
  content: "";
  width: 1px;
  height: 54px;
  background: linear-gradient(var(--gold), transparent);
  animation: drip 2.4s var(--ease) infinite;
}
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 60%, 100% { transform: scaleY(1); transform-origin: top; } }

/* ── Stats ─────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--line);
}
.stats__i {
  padding: clamp(26px, 3.4vw, 42px) clamp(14px, 2vw, 28px);
  text-align: center;
}
.stats__i + .stats__i { border-left: 1px solid var(--line); }
.stats__n {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.stats__l {
  display: block;
  margin-top: 10px;
  font-size: .8rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Story ─────────────────────────────────────────────── */

.story__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
.story__body p + p { margin-top: 18px; }
.story__body .btn { margin-top: 30px; }

.story__art { position: relative; }
.story__art img { border-radius: var(--radius); }
.story__main {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  box-shadow: var(--shadow);
}
.story__inset {
  position: absolute;
  right: -8%;
  bottom: -9%;
  width: 46%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 6px solid var(--bg);
  box-shadow: var(--shadow);
}
.story__badge {
  position: absolute;
  left: -6%;
  top: 8%;
  display: grid;
  gap: 2px;
  padding: 16px 20px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 92%, #000);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  text-align: center;
}
.story__badge b { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); }
.story__badge span { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ── Category grid ─────────────────────────────────────── */

.cats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: clamp(16px, 2vw, 26px);
}
.cat {
  position: relative;
  display: grid;
  align-content: end;
  gap: 8px;
  min-height: 290px;
  padding: 26px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--t), transform var(--t);
}
.cat:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.cat__img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale .7s var(--ease);
}
.cat:hover .cat__img { scale: 1.06; }
.cat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(6, 5, 5, .94) 8%, rgba(6, 5, 5, .55) 48%, rgba(6, 5, 5, .15));
}
.cat__icon {
  position: absolute;
  top: 22px;
  left: 22px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--gold);
  background: color-mix(in srgb, var(--bg) 60%, transparent);
  border: 1px solid var(--line-strong);
  backdrop-filter: blur(6px);
}
.cat__name { font-size: 1.3rem; }
.cat__tag { font-size: .9rem; color: color-mix(in srgb, var(--text) 74%, transparent); }
.cat__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--muted);
}
.cat__meta b { color: var(--gold); font-weight: 600; }

/* Cards with no photograph get a warm gradient instead. */
.cat--noimg { background: linear-gradient(160deg, color-mix(in srgb, var(--primary-dark) 40%, var(--surface)), var(--surface) 62%); }

/* ── Dish cards ────────────────────────────────────────── */

.dishes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: clamp(16px, 2vw, 26px);
}

.dish {
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
}
.dish:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow); }

.dish__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 70%, #000);
}
.dish__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--ease); }
.dish:hover .dish__media img { scale: 1.05; }

.ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 3rem;
  color: color-mix(in srgb, var(--gold) 34%, transparent);
  background:
    radial-gradient(70% 70% at 50% 30%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 70%),
    repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--text) 3%, transparent) 9px 10px);
}

.dish__body { display: grid; gap: 10px; padding: 20px; align-content: start; min-width: 0; }
.dish__top { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; min-width: 0; }
.dish__name { font-size: 1.08rem; font-family: var(--font-display); font-weight: 600; line-height: 1.25; }
.dish__desc { font-size: .89rem; line-height: 1.6; color: var(--muted); }

.dish__price { display: grid; gap: 2px; text-align: right; flex: none; }
.dish__price b { font-size: 1rem; color: var(--gold); font-weight: 600; white-space: nowrap; }
.dish__price small { font-size: .74rem; color: var(--muted); white-space: nowrap; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--line);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.chip.is-popular { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.chip.is-spicy { color: var(--primary-light); border-color: color-mix(in srgb, var(--primary-light) 40%, transparent); }
.chip.is-veg { color: #63d297; border-color: color-mix(in srgb, #63d297 36%, transparent); }

/* Add controls: the price already sits in the header, so these only carry
   the portion, which keeps them legible in a 230px column on a phone. */
.dish__add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.addbtn {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--text);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--t), border-color var(--t), transform .15s var(--ease);
}
.addbtn .icon { flex: none; }
.addbtn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.addbtn:active { transform: scale(.97); }
.addbtn.is-added {
  background: #2f7d55;
  border-color: #2f7d55;
  color: #fff;
}
.addbtn--solo { flex: 0 1 auto; padding-inline: 20px; }

/* ── Menu page ─────────────────────────────────────────── */

.page-head {
  position: relative;
  padding-block: clamp(80px, 12vh, 150px) clamp(40px, 6vw, 70px);
  overflow: hidden;
  isolation: isolate;
}
.page-head__bg { position: absolute; inset: 0; z-index: -2; }
.page-head__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--bg) 82%, transparent) 0%,
      color-mix(in srgb, var(--bg) 58%, transparent) 55%,
      color-mix(in srgb, var(--bg) 22%, transparent) 100%),
    linear-gradient(to top,
      var(--bg) 4%,
      color-mix(in srgb, var(--bg) 84%, transparent) 45%,
      color-mix(in srgb, var(--bg) 62%, transparent) 100%),
    radial-gradient(80% 70% at 10% 0%, color-mix(in srgb, var(--primary-dark) 40%, transparent), transparent 66%);
}
.page-head__in { max-width: 62ch; }
.page-head .lead { margin-top: 18px; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .82rem; color: var(--muted); margin-bottom: 20px; }
.crumbs a:hover { color: var(--gold); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 8px; opacity: .5; }
.crumbs li { display: inline-flex; gap: 8px; }

.menu-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}

.rail {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 4px;
  max-height: calc(100svh - 120px);
  overflow-y: auto;
  padding-right: 6px;
}
.rail h2 {
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: 10px;
}
.rail a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: .9rem;
  color: var(--muted);
  border-left: 2px solid transparent;
  transition: color var(--t), background var(--t), border-color var(--t);
}
.rail a:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 80%, transparent); }
.rail a.is-active { color: var(--gold); border-left-color: var(--gold); background: color-mix(in srgb, var(--surface) 90%, transparent); }
.rail a span { font-size: .76rem; opacity: .6; }

.menu-tools {
  position: sticky;
  top: 74px;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-block: 14px;
  margin-bottom: 8px;
  /* Opaque for most of its height, or dish cards scroll visibly through it. */
  background: linear-gradient(var(--bg) 0 82%, transparent);
}
.search {
  position: relative;
  flex: 1 1 240px;
  min-width: 0;
}
.search input {
  width: 100%;
  padding: 12px 16px 12px 44px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: .92rem;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { border-color: var(--gold); outline: none; }
.search .icon {
  position: absolute;
  left: 16px;
  top: 50%;
  translate: 0 -50%;
  color: var(--muted);
  pointer-events: none;
}
.search__clear {
  position: absolute;
  right: 8px;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--muted);
}
.search__clear:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  padding: 10px 16px;
  border-radius: 99px;
  border: 1px solid var(--line);
  font-size: .84rem;
  font-weight: 600;
  color: var(--muted);
  transition: color var(--t), border-color var(--t), background var(--t);
}
.filter:hover { color: var(--text); }
.filter[aria-pressed="true"] { color: #fff; background: var(--primary); border-color: var(--primary); }

.menu-cat { scroll-margin-top: 130px; }
.menu-cat + .menu-cat { margin-top: clamp(48px, 6vw, 80px); }
.menu-cat__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 20px;
  padding-bottom: 16px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.menu-cat__head h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.menu-cat__head p { font-size: .9rem; color: var(--muted); max-width: 52ch; }
.menu-cat__count { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }

.menu-note {
  margin-top: clamp(48px, 6vw, 80px);
  padding: 22px 26px;
  border-radius: var(--radius);
  border: 1px dashed var(--line);
  font-size: .9rem;
  color: var(--muted);
}

.empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}
.empty b { display: block; color: var(--text); font-size: 1.1rem; margin-bottom: 6px; font-family: var(--font-display); }

/* ── Offers ────────────────────────────────────────────── */

.offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(16px, 2vw, 26px); }
.offer {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 30px;
  border-radius: var(--radius);
  background: linear-gradient(150deg, color-mix(in srgb, var(--primary-dark) 46%, var(--surface)), var(--surface) 64%);
  border: 1px solid var(--line-strong);
  overflow: hidden;
}
.offer__badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 5px 12px;
  border-radius: 99px;
  background: var(--gold);
  color: #1a1207;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.offer h3 { font-size: 1.4rem; }
/* The badge is absolutely positioned, so the heading has to keep clear of it. */
.offer:has(.offer__badge) h3 { padding-right: 104px; }
.offer__price { font-family: var(--font-display); font-size: 1.7rem; color: var(--gold); }
.offer p { font-size: .92rem; color: color-mix(in srgb, var(--text) 78%, transparent); }
.offer__until { font-size: .78rem; color: var(--muted); }

/* ── Reviews ───────────────────────────────────────────── */

.reviews {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(300px, 380px);
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
}
.review {
  scroll-snap-align: start;
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 30px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
}
.review .icon.quote { color: color-mix(in srgb, var(--primary) 60%, transparent); }
.review blockquote { font-size: 1rem; line-height: 1.65; }
.review__who { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.review__who img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.review__who b { display: block; font-size: .94rem; }
.review__who span { font-size: .8rem; color: var(--muted); }
.stars { display: inline-flex; gap: 2px; color: var(--gold); }
.stars .off { opacity: .3; }

/* ── Gallery ───────────────────────────────────────────── */

.gal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.gal__i {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: zoom-in;
}
.gal__i:nth-child(6n + 1) { grid-row: span 2; aspect-ratio: 1 / 2.06; }
.gal__i img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--ease); }
.gal__i:hover img { scale: 1.06; }
.gal__i figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 26px 16px 14px;
  font-size: .84rem;
  background: linear-gradient(transparent, rgba(6, 5, 5, .88));
  opacity: 0;
  transition: opacity var(--t);
}
.gal__i:hover figcaption { opacity: 1; }

.gal-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(200px, 26vw, 300px);
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 12px;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.gal-strip .gal__i { scroll-snap-align: start; aspect-ratio: 4 / 5; }

/* ── Closing banner ────────────────────────────────────── */

.band {
  position: relative;
  padding-block: clamp(70px, 10vw, 130px);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.band__bg { position: absolute; inset: 0; z-index: -2; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; }
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(color-mix(in srgb, var(--bg) 84%, transparent), color-mix(in srgb, var(--bg) 92%, transparent)),
    radial-gradient(60% 80% at 50% 120%, color-mix(in srgb, var(--primary) 34%, transparent), transparent 70%);
}
.band__in { display: grid; gap: 22px; justify-items: center; max-width: 58ch; margin-inline: auto; }
.band__cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.band__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: center;
  font-size: .88rem;
  color: var(--muted);
}
.band__meta span { display: inline-flex; align-items: center; gap: 8px; }
.band__meta .icon { color: var(--gold); }

/* ── Forms ─────────────────────────────────────────────── */

.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.field { display: grid; gap: 7px; }
.field > label { font-size: .84rem; font-weight: 600; letter-spacing: .02em; }
.field .req { color: var(--primary-light); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, #000);
  font-size: .95rem;
  transition: border-color var(--t), background var(--t);
}
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23a89588' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 42px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); outline: none; }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--muted) 78%, transparent); }
.field .hint { font-size: .8rem; color: var(--muted); }
.field .err { font-size: .82rem; color: var(--primary-light); }
.field.has-err input, .field.has-err select, .field.has-err textarea { border-color: var(--primary-light); }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form__foot .muted { font-size: .84rem; }

.radio-set { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-set label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 99px;
  border: 1px solid var(--line);
  font-size: .88rem;
  cursor: pointer;
  transition: border-color var(--t), background var(--t), color var(--t);
}
.radio-set input { position: absolute; opacity: 0; width: 0; }
.radio-set label:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 20%, transparent); color: var(--text); }
.radio-set label:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Contact & info panels ─────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.panel {
  display: grid;
  gap: 18px;
  padding: clamp(24px, 3vw, 34px);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
}
.panel h2 { font-size: 1.3rem; }
.info-list { display: grid; gap: 16px; }
.info-list li { display: flex; gap: 14px; align-items: flex-start; }
.info-list .icon { color: var(--gold); flex: none; margin-top: 3px; }
.info-list b { display: block; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.info-list a:hover { color: var(--gold); }

.hours-table { display: grid; gap: 2px; }
.hours-table li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  font-size: .92rem;
  border-bottom: 1px solid var(--line);
}
.hours-table li:last-child { border-bottom: 0; }
.hours-table li.is-today { color: var(--gold); font-weight: 600; }
.hours-table span:last-child { color: var(--muted); }
.hours-table li.is-today span:last-child { color: inherit; }

.map {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 10;
  background: var(--surface);
}
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.3) contrast(1.05) brightness(.85); }

/* ── Prose ─────────────────────────────────────────────── */

.prose { max-width: 70ch; font-size: 1.02rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-top: 1.8em; }
.prose h3 { font-size: 1.2rem; margin-top: 1.6em; }
.prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose blockquote {
  padding-left: 22px;
  border-left: 2px solid var(--primary);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-style: italic;
}
.prose img { border-radius: var(--radius); }

/* ── FAQ ───────────────────────────────────────────────── */

.faqs { display: grid; gap: 10px; max-width: 78ch; }
.faq {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  font-family: var(--font-display);
  font-size: 1.06rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { flex: none; color: var(--gold); transition: rotate var(--t); }
.faq[open] summary .icon { rotate: 180deg; }
.faq__a { padding: 0 24px 22px; color: var(--muted); font-size: .95rem; }

/* ── Cart drawer ───────────────────────────────────────── */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr min(440px, 100%);
  pointer-events: none;
}
.drawer[hidden] { display: none !important; }
.drawer__scrim {
  background: rgba(4, 3, 3, .68);
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: auto;
  backdrop-filter: blur(3px);
}
.drawer__panel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: color-mix(in srgb, var(--surface) 96%, #000);
  border-left: 1px solid var(--line);
  translate: 100% 0;
  transition: translate .42s var(--ease);
  pointer-events: auto;
  max-height: 100svh;
  padding-top: env(safe-area-inset-top, 0px);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer.is-open .drawer__panel { translate: 0 0; }

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}
.drawer__head h2 { font-size: 1.25rem; }
.drawer__x { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--muted); }
.drawer__x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }

.drawer__body { overflow-y: auto; padding: 20px 24px; display: grid; gap: 18px; align-content: start; }
.drawer__intro { font-size: .88rem; color: var(--muted); }

.cart-lines { display: grid; gap: 12px; }
.cart-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.cart-line__name { font-size: .95rem; font-weight: 500; }
.cart-line__size { font-size: .78rem; color: var(--muted); }
.cart-line__price { font-size: .92rem; color: var(--gold); text-align: right; white-space: nowrap; }
.qty { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 99px; padding: 2px; }
.qty button { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--muted); }
.qty button:hover { color: var(--text); background: color-mix(in srgb, var(--text) 9%, transparent); }
.qty output { min-width: 26px; text-align: center; font-size: .9rem; font-weight: 600; }

.cart-empty { padding: 40px 0; text-align: center; color: var(--muted); display: grid; gap: 14px; justify-items: center; }
.cart-empty .icon { color: color-mix(in srgb, var(--gold) 40%, transparent); }

.drawer__foot { padding: 18px 24px calc(18px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); display: grid; gap: 14px; }
.cart-total { display: flex; align-items: baseline; justify-content: space-between; font-size: 1.05rem; }
.cart-total b { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); }

/* ── Toasts ────────────────────────────────────────────── */

.toasts {
  position: fixed;
  left: 50%;
  translate: -50% 0;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 95;
  display: grid;
  gap: 10px;
  width: min(430px, calc(100vw - 28px));
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 12px 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface) 96%, #000);
  box-shadow: var(--shadow);
  text-align: left;
  animation: toast-in .32s var(--ease) both;
}
.toast.is-going { animation: toast-out .28s var(--ease) both; }

.toast__tick {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #2f7d55;
  color: #fff;
  flex: none;
}
.toast__text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.toast__text b {
  font-size: .9rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toast__text small { font-size: .78rem; color: var(--muted); }
.toast__go {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: 99px;
  background: var(--primary);
  color: #fff;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
}
.toast__go:hover { background: var(--primary-light); }

@keyframes toast-in { from { opacity: 0; translate: 0 18px; } }
@keyframes toast-out { to { opacity: 0; translate: 0 12px; } }

/* ── Sticky order bar ──────────────────────────────────── */

.orderbar {
  position: fixed;
  left: 50%;
  translate: -50% 0;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 72;
  display: none;
  align-items: center;
  gap: 12px;
  width: min(430px, calc(100vw - 28px));
  padding: 11px 14px;
  border-radius: 99px;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .7), var(--glow);
  text-align: left;
  animation: toast-in .3s var(--ease) both;
}
.orderbar[hidden] { display: none !important; }
.orderbar__count {
  display: grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 99px;
  background: rgba(0, 0, 0, .28);
  font-size: .86rem;
  font-weight: 700;
  flex: none;
}
.orderbar__label { flex: 1; display: grid; line-height: 1.25; min-width: 0; }
.orderbar__label b { font-size: .92rem; font-weight: 700; }
.orderbar__label small { font-size: .8rem; opacity: .85; }
.orderbar__go { flex: none; display: grid; place-items: center; }

/* The bar is the phone-sized way in; on a desktop the header cart is
   always visible, so the bar would only cover content. */
@media (max-width: 860px) {
  .orderbar:not([hidden]) { display: flex; }
}

/* While the order bar is up it is the primary action, so the floating
   WhatsApp button steps aside rather than competing with it, and the
   toast and the page content both make room. */
@media (max-width: 860px) {
  .toasts { width: calc(100vw - 28px); }
  body.has-orderbar .toasts { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  body.has-orderbar .wa-float { opacity: 0; visibility: hidden; pointer-events: none; }
  body.has-orderbar { padding-bottom: 76px; }
}

/* ── WhatsApp float and handoff dialog ─────────────────── */

.wa-float {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #062b14;
  box-shadow: 0 12px 30px -8px rgba(37, 211, 102, .55);
  transition: transform var(--t);
}
.wa-float:hover { transform: scale(1.06); }

dialog.wa {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 0;
  width: min(440px, calc(100vw - 32px));
  box-shadow: var(--shadow);
}
dialog.wa::backdrop { background: rgba(4, 3, 3, .72); backdrop-filter: blur(3px); }
.wa__in { display: grid; gap: 14px; padding: 30px; text-align: center; justify-items: center; }
.wa__mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #062b14; }
.wa__in h2 { font-size: 1.3rem; }
.wa__in p { font-size: .94rem; color: var(--muted); }
.wa__act { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }

/* ── Lightbox ──────────────────────────────────────────── */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(4, 3, 3, .92);
  backdrop-filter: blur(6px);
}
.lightbox__fig { display: grid; gap: 14px; justify-items: center; max-height: 100%; }
.lightbox__fig img { max-height: 82svh; width: auto; border-radius: var(--radius); }
.lightbox figcaption { font-size: .9rem; color: var(--muted); text-align: center; }
.lightbox__x {
  position: absolute;
  top: max(16px, env(safe-area-inset-top, 0px));
  right: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--text);
}
.lightbox__x:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }

/* ── Footer ────────────────────────────────────────────── */

.foot {
  margin-top: var(--section);
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 86%, #000);
}
.foot__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  padding-block: clamp(48px, 6vw, 76px);
}
.foot h2 {
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}
.foot__brand .brand__mark { margin-bottom: 16px; }
.foot__name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; }
.foot__tag { font-size: .88rem; color: var(--muted); margin-top: 4px; }
.foot__note { font-size: .86rem; color: var(--muted); margin-top: 14px; max-width: 34ch; }
.foot address { font-style: normal; font-size: .92rem; color: var(--muted); line-height: 1.8; }
.foot__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: .88rem; color: var(--gold); }
.foot__list { display: grid; gap: 10px; }
.foot__list a { display: inline-flex; align-items: center; gap: 10px; font-size: .92rem; color: var(--muted); transition: color var(--t); }
.foot__list a:hover { color: var(--text); }
.foot__list .icon { color: var(--gold); flex: none; }
.foot__hours { display: grid; gap: 7px; }
.foot__hours li { display: flex; justify-content: space-between; gap: 14px; font-size: .88rem; color: var(--muted); }
.foot__status { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: .82rem; font-weight: 600; }
.foot__status.is-open { color: #63d297; }
.foot__status.is-shut { color: var(--muted); }

.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: color var(--t), border-color var(--t), transform var(--t);
}
.socials a:hover { color: var(--gold); border-color: var(--gold); transform: translateY(-2px); }

.foot__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 22px calc(22px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  font-size: .84rem;
  color: var(--muted);
}
.foot__legal { display: flex; flex-wrap: wrap; gap: 18px; }
.foot__legal a:hover { color: var(--gold); }

/* ── Reveal on scroll ──────────────────────────────────── */

.reveal { opacity: 0; translate: 0 22px; transition: opacity .7s var(--ease), translate .7s var(--ease); }
.reveal.in { opacity: 1; translate: 0 0; }
.reveal[data-d="1"] { transition-delay: .08s; }
.reveal[data-d="2"] { transition-delay: .16s; }
.reveal[data-d="3"] { transition-delay: .24s; }
.reveal[data-d="4"] { transition-delay: .32s; }

/* The hero must not wait for JavaScript. */
.hero .reveal { animation: rise .9s var(--ease) both; opacity: 1; translate: 0 0; transition: none; }
.hero .reveal[data-d="1"] { animation-delay: .1s; }
.hero .reveal[data-d="2"] { animation-delay: .2s; }
.hero .reveal[data-d="3"] { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; translate: 0 26px; } }

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; align-items: start; }
  .hero__in { max-width: none; }
  .hero__panel { max-width: 540px; }

  .menu-layout { grid-template-columns: 1fr; }
  .rail {
    position: sticky;
    top: 68px;
    z-index: 21;
    display: flex;
    gap: 6px;
    max-height: none;
    overflow-x: auto;
    padding-block: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .rail h2 { display: none; }
  .rail a { border-left: 0; border: 1px solid var(--line); border-radius: 99px; white-space: nowrap; }
  .rail a.is-active { border-color: var(--gold); }

  /* Only one bar may stick on a narrow screen. The category rail is the
     one worth keeping; a second sticky row ate the viewport and its
     translucent background let the cards show through it. */
  .menu-tools {
    position: static;
    background: none;
    padding-block: 0 18px;
  }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .story__grid, .split { grid-template-columns: 1fr; }
  .story__art { max-width: 520px; margin-inline: auto; width: 100%; }
  .story__inset { right: 0; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats__i:nth-child(3) { border-left: 0; }
  .stats__i:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

@media (max-width: 860px) {
  .head__cta { display: none; }
  .burger { display: flex; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    align-content: center;
    gap: 28px;
    padding: 100px var(--gutter) calc(48px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg) 97%, #000);
    margin: 0;
    opacity: 0;
    visibility: hidden;
    translate: 0 -12px;
    transition: opacity var(--t), translate var(--t), visibility var(--t);
    overflow-y: auto;
  }
  body.menu-open .nav { opacity: 1; visibility: visible; translate: 0 0; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__list a {
    padding: 16px 4px;
    font-family: var(--font-display);
    font-size: 1.6rem;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
  }
  .nav__list a::after { display: none; }
  .nav__list a[aria-current="page"] { color: var(--gold); }
  .nav__foot { display: block; }
  .nav__call { display: inline-flex; align-items: center; gap: 10px; font-size: 1.05rem; color: var(--gold); }

  body.menu-open { overflow: hidden; }
  body.menu-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-open .burger span:nth-child(2) { opacity: 0; }
  body.menu-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .brand__sub { display: none; }
  .hero__scroll { display: none; }
  .status__label { display: none; }
  .status { padding: 11px; }
}

@media (max-width: 620px) {
  .foot__grid { grid-template-columns: 1fr; }
  .gal__i:nth-child(6n + 1) { grid-row: auto; aspect-ratio: 1; }
  .dishes { grid-template-columns: 1fr; }

  /* A thumbnail beside the text, so a phone shows several dishes at once.
     The media must NOT keep `aspect-ratio` here: combined with height:100%
     it derives its width from the row height and overflows the fixed
     column, covering the text. Let the column set the width instead. */
  .dish { grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: auto; }
  .dish--noimg { grid-template-columns: minmax(0, 1fr); }
  .dish__media {
    aspect-ratio: auto;
    width: 116px;
    height: 100%;
    min-height: 116px;
    align-self: stretch;
  }
  .dish__body { padding: 14px; gap: 8px; }
  .dish__name { font-size: 1rem; }
  .dish__desc {
    font-size: .84rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .dish__top { flex-wrap: wrap; gap: 4px 10px; }
  .dish__price { text-align: left; }
  .hero { min-height: auto; padding-block: 120px 64px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .foot__base { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; translate: 0 0; }
}

@media print {
  .head, .foot, .wa-float, .drawer, .menu-tools, .rail, .hero__scroll, .announce { display: none !important; }
  body { background: #fff; color: #000; }
  .dish, .panel { border-color: #ccc; }
}