/* ============================================================
   Zaika – Flavours of Tradition — site stylesheet
   Mobile-first: base rules target phones, larger screens are
   progressively enhanced via min-width media queries.
   ============================================================ */

:root {
  /* Brand colors, pulled from the Zaika logo/menu artwork */
  --color-forest: #123524;
  --color-forest-dark: #0b241a;
  --color-forest-deep: #071912;
  --color-maroon: #6d1f2b;
  --color-maroon-deep: #4a141d;
  --color-gold: #c9a24a;
  --color-gold-foil: #f0d38a;
  --color-cream: #f7efdc;
  --color-cream-soft: #fbf6ea;
  --color-ivory: #fbf7ee;
  --color-charcoal: #2a2420;
  --color-accent-red: #c0392b;
  --color-whatsapp: #25d366;
  --color-whatsapp-light: #47df80;
  /* WhatsApp brand green kept at full saturation for recognisability;
     the button uses dark text on it (see .btn-whatsapp) rather than a
     darkened green, because white-on-#25d366 measures 1.98:1 — well
     under the 4.5:1 WCAG/HIG minimum for normal text. Forest-on-#25d366
     measures 6.79:1. Hover/focus LIGHTENS the green rather than the
     more typical darken-on-hover: with dark text, darkening the
     background reduces contrast (a first attempt at #1da851 measured
     only 4.34:1); lightening to #47df80 keeps forest-on-green at 7.78:1
     while still reading as a clear, visible state change. */

  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Dancing Script", cursive;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;

  /* Type scale — a fixed, reusable set of sizes (a la iOS's Large Title
     through Caption text styles) instead of one-off values invented
     per element. Every font-size in this file now points at one of
     these steps or the two fluid tokens (--text-hero, --text-heading-lg)
     defined alongside them. */
  --text-2xs: 0.8125rem;   /* 13px */
  --text-xs: 0.875rem;     /* 14px */
  --text-sm: 0.9375rem;    /* 15px */
  --text-base: 1rem;       /* 16px */
  --text-md: 1.125rem;     /* 18px */
  --text-lg: 1.375rem;     /* 22px */
  --text-xl: 1.75rem;      /* 28px */
  --text-2xl: 2.25rem;     /* 36px */
  --text-hero: clamp(2.25rem, 5.6vw, 3.5rem);
  /* Shared fluid heading: section titles and secondary-page H1s were
     three near-duplicate hand-tuned clamp() values (1.6-1.8rem to
     2.3-2.6rem) — one shared token instead. */
  --text-heading-lg: clamp(var(--text-xl), 4.5vw, 2.4rem);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-pill: 999px;

  --shadow-card: 0 6px 20px rgba(18, 53, 36, 0.12);
  --shadow-header: 0 8px 24px rgba(7, 25, 18, 0.18);
  --shadow-deep: 0 24px 56px rgba(7, 25, 18, 0.3);

  --container-max: 1120px;
  --ease-premium: cubic-bezier(0.65, 0, 0.35, 1);

  /* Single source of truth for the fixed header's total reserved
     height. The floating pills are vertically centered within it
     (tallest pill ~53px), which is what creates the visible gap above
     and below them - not a separate top offset - so body/hero offsets
     never drift out of sync with the header's real rendered size. */
  --header-height: 84px;

  --glass-surface: linear-gradient(180deg, rgba(251, 247, 238, 0.94) 0%, rgba(247, 239, 220, 0.9) 100%);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 10px 24px rgba(7, 25, 18, 0.16);
}

/* ---------- Motion utilities (shared across pages, driven by js/motion.js) ----------
   CSS-only transition + JS just toggles a class on scroll-into-view
   (IntersectionObserver) - no animation library needed. Content is
   visible by default; JS only hides it right before revealing, so a
   visitor with JS disabled or prefers-reduced-motion set always sees
   everything immediately. */
[data-reveal], [data-reveal-group] > * {
  opacity: 1; transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-pending[data-reveal], [data-reveal-group].reveal-pending > * {
  opacity: 0; transform: translateY(24px);
}
[data-reveal-group].reveal-pending > *:nth-child(2) { transition-delay: 0.08s; }
[data-reveal-group].reveal-pending > *:nth-child(3) { transition-delay: 0.16s; }
[data-reveal-group].reveal-pending > *:nth-child(4) { transition-delay: 0.24s; }
[data-reveal-group].reveal-pending > *:nth-child(5) { transition-delay: 0.32s; }
[data-reveal-group].reveal-pending > *:nth-child(n+6) { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-group] > * { transition: none; }
}
/* Homepage hero load-in: same pending/reveal pattern, fired once on
   page load (see js/motion.js) rather than on scroll. */
.hero-inner .hero-eyebrow, .hero-inner h1, .hero-inner .hero-description,
.hero-inner .cta-row, .hero-inner .hero-badges {
  opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s ease;
}
.hero-inner.reveal-pending .hero-eyebrow, .hero-inner.reveal-pending h1,
.hero-inner.reveal-pending .hero-description, .hero-inner.reveal-pending .cta-row,
.hero-inner.reveal-pending .hero-badges {
  opacity: 0; transform: translateY(22px);
}
.hero-inner.reveal-pending h1 { transition-delay: 0.1s; }
.hero-inner.reveal-pending .hero-description { transition-delay: 0.2s; }
.hero-inner.reveal-pending .cta-row { transition-delay: 0.3s; }
.hero-inner.reveal-pending .hero-badges { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .hero-inner .hero-eyebrow, .hero-inner h1, .hero-inner .hero-description,
  .hero-inner .cta-row, .hero-inner .hero-badges { transition: none; }
}


/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
section[id] { scroll-margin-top: var(--header-height); }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-charcoal);
  background: var(--color-cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--header-height);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); margin: 0 0 var(--space-2); line-height: 1.2; color: var(--color-forest); }
p { margin: 0 0 var(--space-2); }
button { font-family: inherit; }

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-forest);
  color: var(--color-ivory);
  padding: 0.75rem 1.25rem;
  z-index: 200;
}
.skip-link:focus { left: 0; }

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-2);
}
.section { padding-block: var(--space-4); }
.section-band { background: var(--color-forest); color: var(--color-ivory); }
.section-band h2, .section-band h3 { color: var(--color-ivory); }
.section-soft { background: var(--color-cream-soft); }
.section-title {
  font-size: var(--text-heading-lg);
  text-align: center;
  margin-bottom: var(--space-1);
}
.section-subtitle {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-4);
  color: var(--color-charcoal);
  opacity: 0.85;
}
.section-band .section-subtitle { color: var(--color-ivory); opacity: 0.85; }
.text-center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--text-sm);
  border: 2px solid transparent;
  cursor: pointer;
  min-height: 44px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover, .btn:focus-visible { transform: translateY(-1px); }
.btn:active { transform: scale(0.97); transition: transform 0.1s ease-out; }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn-arrow { width: 0.9em; height: 0.9em; margin-left: -0.1rem; transition: transform 0.2s ease; }
.btn:hover .btn-arrow, .btn:focus-visible .btn-arrow { transform: translateX(3px); }

.btn-call {
  background: var(--color-forest);
  color: var(--color-ivory);
}
.btn-call:hover, .btn-call:focus-visible { background: var(--color-forest-dark); }

/* Dark text on the full-brightness WhatsApp green: 6.8:1 contrast vs
   1.98:1 for white-on-green, while keeping the recognisable brand
   color (see --color-whatsapp note above). */
.btn-whatsapp {
  background: var(--color-whatsapp);
  color: var(--color-forest);
}
.btn-whatsapp:hover, .btn-whatsapp:focus-visible { background: var(--color-whatsapp-light); color: var(--color-forest); }

.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--color-forest);
}
.section-band .btn-outline { color: var(--color-ivory); }

.btn-lg { padding: 1.1rem 2rem; font-size: var(--text-md); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

/* ---------- Header: consolidated bar ---------- */
/* One header bar, one shadow, aligned to the page container width -
   logo, nav, Call and WhatsApp all live inside it rather than as
   separate floating islands. .site-header/.header-bar stay fully
   transparent with no filter/transform of their own, so they can't
   become an accidental containing block for .site-nav's fixed +
   inset:0 mobile-menu state (a containing block there would trap the
   full-screen mobile nav inside the header's own small box instead of
   covering the viewport - confirmed not happening: .site-nav's mobile
   overlay measures inset:0 against the real viewport). */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  z-index: 100;
}

.header-bar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  /* Escape .container's 1120px cap so the bar spans the full header
     width on wide screens instead of leaving large empty gutters. */
  max-width: none;
  padding-inline: clamp(1.5rem, 4vw, 3rem);
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 2px solid var(--color-gold);
  box-shadow:
    0 0 0 1px rgba(201, 162, 74, 0.2),
    0 4px 16px rgba(7, 25, 18, 0.18),
    0 0 20px rgba(201, 162, 74, 0.12);
  transition: transform 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium), border-color 0.3s ease;
  overflow: hidden;
  text-decoration: none;
  background: var(--color-forest-deep);
}
.brand:hover, .brand:focus-visible {
  transform: translateY(-2px) scale(1.05);
  border-color: var(--color-gold-foil);
  box-shadow:
    0 0 0 2px rgba(240, 211, 138, 0.3),
    0 8px 24px rgba(7, 25, 18, 0.25),
    0 0 28px rgba(201, 162, 74, 0.2);
}
.brand:active {
  transform: scale(0.97);
  transition: transform 0.1s ease-out;
}

.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }

.site-nav {
  position: fixed;
  inset: 0;
  background: var(--color-forest);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  transform: translateX(100%);
  transition: transform 0.25s ease, visibility 0.25s;
  z-index: 150;
  visibility: hidden;
}
.site-nav.is-open { transform: translateX(0); visibility: visible; }
.site-nav a {
  color: var(--color-ivory);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(251, 247, 238, 0.15);
  white-space: nowrap;
}
.site-nav a.is-active { color: var(--color-gold); }

.header-actions { display: none; flex: none; gap: 0.6rem; }
.header-actions .btn { padding: 0.6rem 1.1rem; font-size: var(--text-xs); box-shadow: var(--shadow-card); }

.nav-toggle {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--glass-surface);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--shadow-card);
  border: none;
  cursor: pointer;
  z-index: 160;
  transition: box-shadow 0.2s ease;
}
.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-forest);
  margin-inline: auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Mobile sticky CTA bar ---------- */
.mobile-cta-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 120;
  display: flex;
  gap: 10px;
  background: var(--color-forest-dark);
  padding: 8px 10px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
.mobile-cta-bar .btn { flex: 1; justify-content: center; border-radius: var(--radius-sm); }
body { padding-bottom: 68px; }
/* Homepage hero already has its own Call/WhatsApp buttons, so the
   persistent bottom bar (built for pages without an in-page CTA) is
   redundant there - other pages keep it. */
body:has(.hero) .mobile-cta-bar { display: none; }
body:has(.hero) { padding-bottom: 0; }

/* ---------- Hero (Home) ----------
   Full-bleed background photo - a dedicated mobile-portrait crop below
   1024px and a desktop-landscape crop above it, swapped via <picture>
   media queries. .hero-inner is a top-anchored flex column (logo, then
   the full content stack) layered over the photo via .hero-scrim. */
.hero {
  position: relative;
  margin-top: calc(-1 * var(--header-height));
  overflow: hidden;
  background: var(--color-forest-deep);
  min-height: 100svh;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg picture,
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 1023.98px) {
  /* object-position alone only has ~85px of pan room at this
     viewport (the cover-fit overflow), nowhere near enough to push
     the bowl half off-screen - scaling the image up first creates
     enough extra width to translate it that far right, clipped by
     .hero's own overflow:hidden. */
  .hero-bg picture, .hero-bg img {
    transform: scale(1.2) translateX(9%);
    transform-origin: center;
  }
}
/* A soft gradient reading left-to-right (and a touch bottom-up) - not
   a solid block: strongest directly behind the text column, fading to
   fully transparent over the food so the photograph stays visible
   across the whole hero, on both crops. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(4, 15, 10, 0.62) 0%, rgba(4, 15, 10, 0.4) 42%, rgba(4, 15, 10, 0.12) 68%, rgba(4, 15, 10, 0) 85%),
    linear-gradient(0deg, rgba(4, 15, 10, 0.6) 0%, rgba(4, 15, 10, 0.22) 32%, rgba(4, 15, 10, 0) 55%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  /* Logo and content form one cohesive top-anchored group (not split to
     opposite ends of the hero) so they read as a single left-side
     composition, with the dish left unobstructed on the right.
     Escapes .container's 1120px cap (like .header-bar above) so the
     group sits close to the true left edge on wide screens instead of
     stranded in the middle of a large empty gutter. */
  justify-content: flex-start;
  gap: var(--space-2);
  max-width: none;
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  padding-block: calc(var(--header-height) + var(--space-2)) var(--space-3);
}
@media (max-width: 1023.98px) {
  .hero-inner { padding-block-start: var(--space-2); }
}
@media (min-width: 1024px) {
  /* The content block's own height is fixed (it's sized to its text,
     not the viewport), but .hero always fills 100svh - on a taller
     monitor than the laptop this was designed against, top-anchored
     content left all the slack space stacked below the benefit row,
     which read as broken/inconsistent between screens. Centering
     distributes that slack evenly above and below instead, so the
     composition looks the same regardless of how tall the actual
     screen is. */
  .hero-inner { gap: var(--space-2); justify-content: center; }
}
.hero-logo {
  flex: none;
  width: clamp(150px, 12vw, 230px);
  /* position:relative + top (not a negative margin) so only the logo
     itself shifts up - the space it occupies in the flex flow stays
     put, so .hero-content below it doesn't move too. */
  position: relative;
  top: -14px;
}
.hero-logo img {
  display: block;
  width: 100%;
  height: auto;
}
/* Pinned to the photo's upper-right corner (absolute, out of the
   logo/content flow) so it reads as part of the photography rather
   than another stacked content row - near the hamburger on mobile,
   with enough top/right inset to keep clear of it. */
.hero-photo-tag {
  position: absolute;
  top: calc(var(--header-height) + var(--space-1));
  right: clamp(1.25rem, 5vw, 3rem);
  z-index: 3;
  max-width: 220px;
  margin: 0;
  text-align: right;
  font-family: var(--font-script);
  font-size: clamp(1.3rem, 4.4vw, 1.9rem);
  line-height: 1.2;
  color: var(--color-gold-foil);
  text-shadow: 0 2px 10px rgba(4, 15, 10, 0.6);
}
.hero-photo-tag-heart {
  width: 0.85em;
  height: 0.85em;
  color: var(--color-accent-red);
  vertical-align: -0.1em;
}
.hero-photo-tag-swash {
  width: 6em;
  height: 0.75em;
  color: var(--color-gold-foil);
  margin-top: 0.1em;
}
@media (max-width: 1023.98px) {
  .hero-photo-tag { display: none; }
}
/* A readable column width, not a hard panel boundary - the scrim
   above does the legibility work now, so every child just inherits
   this instead of a separate max-width per element. */
.hero-content {
  max-width: 270px;
}
@media (min-width: 1024px) {
  .hero-content { max-width: 680px; }
}
.hero-eyebrow {
  color: #d8b85a;
  font-family: "Cormorant Garamond", var(--font-heading), serif;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: clamp(0.8125rem, 1.2vw, 1.125rem);
  font-weight: 600;
  margin: 0 0 var(--space-1);
}
@media (min-width: 1024px) {
  .hero-eyebrow { font-size: 18px; letter-spacing: 1px; font-weight: 700; }
}
.hero-content h1 {
  color: var(--color-ivory);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.65rem, 3.6vw, 3.1rem);
  line-height: 1.15;
  margin: 0 0 var(--space-2);
}
.hero-description {
  color: rgba(251, 247, 238, 0.92);
  font-size: clamp(var(--text-base), 1.1vw, var(--text-md));
  line-height: 1.25;
  margin: 0;
}
/* Headline/description break at different word points on mobile vs
   desktop (not just fewer of the same breaks), so each breakpoint
   gets its own <br> variant instead of one shared set. */
.hero-break-desktop { display: none; }
@media (min-width: 1024px) {
  .hero-break-mobile { display: none; }
  .hero-break-desktop { display: initial; }
}
.hero .cta-row {
  justify-content: flex-start;
  margin-top: var(--space-1);
}
@media (min-width: 1024px) {
  .hero .cta-row { margin-top: var(--space-3); }
}
/* Hero-only recolor: the header's .btn-call is forest-green (fine on a
   light page bar), but the hero calls for the reference's burgundy -
   scoped to .hero so the header button elsewhere is untouched. Both
   hero buttons get a hairline gold ring + lifted shadow so they read
   as distinct shapes against the busy photo rather than just color. */
.hero .btn-call {
  background: var(--color-maroon);
  border-color: rgba(240, 211, 138, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.hero .btn-call:hover, .hero .btn-call:focus-visible { background: var(--color-maroon-deep); }
/* White-on-#25d366 measures ~1.98:1 - well under WCAG AA's 4.5:1 (or
   3:1 even at large/bold text size) - kept here only because it was
   explicitly requested to match a reference image; the header's
   .btn-whatsapp elsewhere keeps the accessible dark-forest text.
   #1da851 (darker than the brand green) was already vetted for this
   exact pairing in an earlier pass - measured 4.34:1 with white text,
   clearing WCAG AA even at normal text size. */
.hero .btn-whatsapp {
  background: #1da851;
  color: var(--color-ivory);
  border-color: rgba(240, 211, 138, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.hero .btn-whatsapp:hover, .hero .btn-whatsapp:focus-visible { background: #199447; color: var(--color-ivory); }
@media (max-width: 1023.98px) {
  /* Full-width, stacked buttons (not squeezed side-by-side) - the
     scrim gives them room to be comfortably sized, matching the
     reference. */
  .hero .cta-row { flex-direction: column; align-items: flex-start; gap: var(--space-1); margin-top: var(--space-2); }
  .hero .btn.btn-lg { padding: 0.7rem 1.1rem; font-size: var(--text-xs); }
}

/* .badge-strip.hero-badges (not just .hero-badges): the base
   .badge-strip rule below is equal specificity and later in the
   file, so a plain .hero-badges selector here would silently lose
   the display/grid-template-columns fight and fall back to the base
   2-column grid - the compound selector outranks it regardless of
   source order. */
.badge-strip.hero-badges {
  display: grid;
  grid-template-columns: repeat(2, auto);
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  margin-inline: 0;
  margin-top: var(--space-2);
}
@media (min-width: 1024px) {
  .badge-strip.hero-badges { margin-top: var(--space-4); }
}
.hero-badges .badge {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  color: var(--color-ivory);
  font-size: 0.75rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.hero-badges .badge-icon {
  flex: none;
  width: 36px;
  height: 36px;
}
.hero-badges .badge-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Adds vertical separators and grows the icons/padding for the wider
   desktop composition - measured clean at 1280px+ (the last item just
   brushes the pot's edge) but at 1024px it lands squarely on the
   bright curry with the scrim's help not being enough, so this holds
   off until 1200px instead of the more conventional 1024px. */
@media (min-width: 1200px) {
  .badge-strip.hero-badges {
    max-width: none;
    flex-direction: row;
    display: flex;
    gap: 0;
  }
  .hero-badges .badge {
    position: relative;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-inline: var(--space-3);
  }
  .hero-badges .badge-icon { width: 52px; height: 52px; }
  .hero-badges .badge { font-size: var(--text-xs); gap: 0.5rem; }
  .hero-badges .badge:first-child { padding-left: 0; }
  .hero-badges .badge:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgba(240, 211, 138, 0.35);
  }
}
/* Shorter/scaled desktop viewports (a laptop's real CSS pixel height,
   or a monitor with OS display scaling) can leave well under 900px of
   real 100svh, cutting the benefit row off at the bottom. A previous
   attempt fixed this by also shrinking the logo/headline/icon sizes,
   which read as "smaller/worse" rather than "fixed" - reverted. This
   tier only tightens the gaps *between* elements (every element stays
   exactly the size it is on a tall screen), reclaiming enough height
   to fit without anything looking shrunk. */
@media (min-width: 1024px) and (max-height: 900px) {
  .hero-inner { padding-block: var(--header-height) var(--space-1); gap: 0.5rem; }
  .hero-eyebrow { margin-bottom: 0.25rem; }
  .hero-content h1 { margin-bottom: 0.625rem; }
  .hero .cta-row { margin-top: 0.875rem; }
  .badge-strip.hero-badges { margin-top: var(--space-2); }
}
/* .hero-logo duplicates the header's small round brand mark in the same
   top-left corner - hide that small mark only on pages with a .hero
   (currently just the homepage), keeping the other 4 pages untouched.
   visibility (not display) so the header bar's spacing doesn't shift. */
body:has(.hero) .site-header .brand { visibility: hidden; }

/* Torn-paper transition into the next section - a hand-drawn edge
   instead of a hard rule between the dark hero and the cream page
   background below it. */
.hero-edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 3;
  display: block;
  width: 100%;
  height: 28px;
  color: var(--color-cream);
  fill: currentColor;
}
@media (min-width: 1024px) {
  .hero-edge { height: 40px; }
}

.page-hero-eyebrow {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-md);
  font-weight: 600;
}
.page-hero-tagline {
  font-size: clamp(var(--text-base), 2.2vw, var(--text-md));
  margin-bottom: var(--space-3);
}

.page-hero {
  padding-block: var(--space-4) var(--space-3);
  text-align: center;
  background: linear-gradient(180deg, var(--color-cream) 0%, var(--color-cream-soft) 100%);
}
.page-hero h1 { font-size: var(--text-heading-lg); }
.page-hero-eyebrow { color: var(--color-maroon); }
.page-hero-tagline { color: var(--color-charcoal); opacity: 0.85; max-width: 640px; margin-inline: auto; }

/* ---------- Dish ticker (marquee band) ---------- */
.dish-ticker {
  background: var(--color-forest);
  color: var(--color-gold-foil);
  overflow: hidden;
  padding-block: 1.1rem;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ticker-pause {
  flex: none;
  width: 32px;
  height: 32px;
  margin-left: var(--space-2);
  border-radius: 50%;
  border: 1px solid rgba(240, 211, 138, 0.4);
  background: transparent;
  color: var(--color-gold-foil);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.ticker-pause svg { width: 14px; height: 14px; }
.ticker-pause .icon-play { display: none; }
.dish-ticker.is-paused .ticker-pause .icon-pause { display: none; }
.dish-ticker.is-paused .ticker-pause .icon-play { display: block; }
.dish-ticker-viewport { overflow: hidden; flex: 1; }
.dish-ticker-track {
  display: flex;
  width: max-content;
  gap: 2.5rem;
  white-space: nowrap;
  font-family: var(--font-heading);
  font-size: var(--text-md);
  animation: dish-ticker-scroll 32s linear infinite;
}
.dish-ticker.is-paused .dish-ticker-track { animation-play-state: paused; }
.dish-ticker:hover .dish-ticker-track { animation-play-state: paused; }
.dish-ticker-track span { opacity: 0.9; }
.dish-ticker-track span::after {
  content: "\2022";
  margin-left: 2.5rem;
  color: var(--color-gold);
}
@keyframes dish-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .dish-ticker-track { animation: none; overflow-x: auto; }
  .ticker-pause { display: none; }
}

/* ---------- Badge strip ---------- */
.badge-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  max-width: 640px;
  margin-inline: auto;
}
.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  font-weight: 600;
  font-size: var(--text-2xs);
  color: var(--color-forest);
}
.badge svg { width: 34px; height: 34px; color: var(--color-maroon); }

/* ---------- Dish teaser cards ---------- */
/* Explicit column counts instead of auto-fit(230px): with a 6-item
   grid, auto-fit resolves to 4 columns at common desktop widths,
   leaving an uneven 4+2 trailing row. 1 / 2 / 3 columns all divide 6
   evenly, so there's never a half-empty last row. */

/* ---------- Menu listing ---------- */
.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 1rem;
  padding-block: var(--space-2);
  border-bottom: 1px dashed rgba(18, 53, 36, 0.2);
}
.menu-item:last-child { border-bottom: none; }
.menu-item-name { font-weight: 600; color: var(--color-forest); }
.menu-item-price { font-weight: 700; color: var(--color-maroon); white-space: nowrap; }
.menu-item-desc { grid-column: 1 / -1; font-size: var(--text-xs); opacity: 0.8; margin: 0; }
.menu-item-with-photo {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-2);
  align-items: center;
}
.menu-item-with-photo img {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--color-cream-soft);
}
.menu-item-with-photo .menu-item { border-bottom: none; padding-block: 0; }

/* ---------- Menu tabs ---------- */
.menu-tabs {
  position: relative;
  display: flex;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.menu-tab {
  flex: 1;
  padding: 0.9rem 0.5rem;
  background: var(--color-cream-soft);
  border: none;
  border-bottom: 3px solid transparent;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-forest);
  cursor: pointer;
  transition: background 0.15s ease;
  min-height: 44px;
}
/* Below 500px, forcing 3 equal-width flex columns wraps the longer
   labels ("Weekend Specials" up to 480px; "Party Starters"/
   "Indo-Chinese" up to 390px) into an uneven two-line/one-line mix.
   Let the row scroll horizontally instead, sized to content, so no
   label ever wraps regardless of length. */
@media (max-width: 499.98px) {
  .menu-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .menu-tabs::-webkit-scrollbar { display: none; }
  .menu-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-inline: 1rem;
  }
}
.menu-tab:hover { background: #fff; }
.menu-tab.is-active { background: #fff; color: var(--color-maroon); }
.menu-tab-underline {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: var(--color-maroon);
  transition: left 0.4s var(--ease-premium), width 0.4s var(--ease-premium);
}
.menu-panel-wrapper {
  background: #fff;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}
.menu-panel[hidden] { display: none; }
.menu-panel-tag {
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--color-maroon);
  display: block;
  margin-bottom: var(--space-2);
}
.menu-grid-2col {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--space-4);
}
.menu-grid-2col .menu-item-with-photo { border-bottom: 1px dashed rgba(18, 53, 36, 0.15); padding-block: var(--space-2); }
.menu-grid-2col .menu-item-with-photo:last-child { border-bottom: none; }
@media (min-width: 800px) {
  .menu-grid-2col { grid-template-columns: 1fr 1fr; }
}

.callout {
  background: var(--color-cream-soft);
  border: 1px solid rgba(109, 31, 43, 0.25);
  border-left: 4px solid var(--color-maroon);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}
.callout strong { color: var(--color-maroon); }
.callout-icon-row { display: flex; gap: 0.75rem; align-items: flex-start; }
.callout-icon-row svg { width: 24px; height: 24px; flex: none; color: var(--color-maroon); margin-top: 2px; }

.callout-cta {
  background: linear-gradient(150deg, var(--color-forest) 0%, var(--color-forest-deep) 100%);
  border: 1px solid rgba(201, 162, 74, 0.4);
  border-left: 1px solid rgba(201, 162, 74, 0.4);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-3);
  color: var(--color-ivory);
  box-shadow: var(--shadow-deep);
}
.callout-cta h2 { color: var(--color-gold-foil); font-family: var(--font-heading); font-size: var(--text-lg); }
.callout-cta p { color: rgba(251, 247, 238, 0.86); }
.callout-cta .btn-call { background: var(--color-ivory); color: var(--color-forest-deep); }

/* ---------- Contact page ---------- */
/* Straight from 1 to 3 columns (no 2-column middle tier): 3 cards in a
   2-column grid always strands one card alone in a half-empty row. */
.contact-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) {
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
}
.info-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: var(--space-3);
  box-shadow: var(--shadow-card);
}
.info-card h2, .info-card h3 { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-md); }
.info-card h2 svg, .info-card h3 svg { width: 22px; height: 22px; color: var(--color-maroon); flex: none; }
.info-card p:last-child { margin-bottom: 0; }

/* Contact card: a dark contact-details rail beside a message form,
   presented as one unified card so it reads as its own layout rather
   than reusing another page's template. */
.contact-card {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-ivory);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-deep);
}
@media (min-width: 860px) {
  .contact-card { grid-template-columns: 0.85fr 1.15fr; }
}

.contact-rail {
  background: linear-gradient(165deg, var(--color-forest) 0%, var(--color-forest-deep) 100%);
  color: var(--color-ivory);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.contact-rail-item { display: flex; gap: var(--space-2); align-items: flex-start; }
.contact-rail-item svg { width: 22px; height: 22px; flex: none; color: var(--color-gold-foil); margin-top: 3px; }
.contact-rail-item h3 {
  font-family: var(--font-body);
  font-size: var(--text-2xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gold-foil);
  margin: 0 0 0.2rem;
  font-weight: 600;
}
.contact-rail-item a, .contact-rail-item p { color: var(--color-ivory); margin: 0; }
.contact-rail-item a { text-decoration: none; font-weight: 600; }
.contact-rail-item a:hover, .contact-rail-item a:focus-visible { text-decoration: underline; }
.contact-rail-divider { height: 1px; border: none; background: rgba(240, 211, 138, 0.2); margin: 0; }

.contact-form-panel { padding: var(--space-4); }
.contact-form-panel h2 { font-size: var(--text-lg); margin-bottom: 0.3rem; }
.contact-form-panel .form-intro { opacity: 0.75; margin-bottom: var(--space-3); }

.contact-form { display: flex; flex-direction: column; gap: var(--space-2); }
.form-row { display: flex; flex-direction: column; gap: 0.4rem; }
.form-row label { font-size: var(--text-xs); font-weight: 600; color: var(--color-forest); }
.form-row input, .form-row textarea {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: 0.75rem 0.9rem;
  border: 1.5px solid rgba(18, 53, 36, 0.15);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-charcoal);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-row input:focus-visible, .form-row textarea:focus-visible {
  border-color: var(--color-maroon);
  box-shadow: 0 0 0 3px rgba(109, 31, 43, 0.12);
}
.form-row textarea { resize: vertical; min-height: 120px; }
.contact-form .btn { align-self: flex-start; margin-top: 0.2rem; }
.form-note { font-size: var(--text-2xs); opacity: 0.6; margin: 0.5rem 0 0; }

/* ---------- Footer ----------
   Background is the client's own spice/mandala artwork
   (site-footer-bg.jpg/webp, 2170x725, dark green wave fading to a
   cream band only in its own bottom ~18%), used as ONE continuous
   section - the allergy/copyright line sits inside this same section,
   in the artwork's own cream strip, not a separate block below it.
   Its wide/short aspect ratio only reads correctly when section
   height stays close to the image's own proportions - true on desktop
   (3 short columns + one text line fit comfortably), but on mobile
   content stacks into one tall column (~900px+), far taller than the
   image. Stretching/covering the image to fill that height would drag
   the wave into the middle of the nav/contact text. So: mobile
   (default, mobile-first) shows the image at its own width-locked
   aspect ratio as a fixed decorative band pinned to the top only
   (spice bowls/mandala corners, no wave - cropped out lower down),
   with flat forest green filling the rest of the stacked content
   including the allergy/copyright line; desktop switches to "cover"
   once columns run side by side and total content height stays short
   enough for the wave and its cream strip to reappear at the bottom,
   right where the allergy/copyright text sits. */
/* Mobile: flat forest green only - the decorative spice/mandala/wave
   artwork is desktop-only (added back at the 860px breakpoint below),
   since on narrow screens it either clipped mid-motif or left a stray
   cream band showing partway down the green section. */
.site-footer {
  position: relative;
  background: var(--color-forest);
  color: var(--color-ivory);
}
@media (min-width: 860px) {
  .site-footer {
    min-height: 400px;
    background: var(--color-forest) center top / cover no-repeat;
    background-image: url('../images/backgrounds/site-footer-bg.jpg');
  }
  @supports (background-image: url('data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==')) {
    .site-footer { background-image: url('../images/backgrounds/site-footer-bg.webp'); }
  }
}
.site-footer .container { padding-block: var(--space-4) var(--space-2); position: relative; }
.footer-allergy { font-size: var(--text-2xs); opacity: 0.8; margin: var(--space-3) 0 0.4rem; text-align: center; }
.footer-bottom { font-size: var(--text-2xs); opacity: 0.65; text-align: center; }
@media (min-width: 860px) {
  .site-footer .container { padding-top: 0.5rem; }
  .footer-allergy { margin-top: 8rem; color: #000; opacity: 1; }
  .footer-bottom { color: #000; opacity: 1; }
}

.footer-brand-col { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.6rem; }
.footer-logo { width: 160px; height: auto; }
.footer-desc { max-width: 320px; opacity: 0.85; line-height: 1.6; margin: 0; }

.footer-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  margin: var(--space-3) 0;
  text-align: center;
}
/* Gold rule + small lotus glyph between mobile sections, matching the
   reference's mobile layout - desktop's 3-column grid has no need for
   these (columns already read as separate blocks side by side). */
.footer-divider {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0.4rem 0; color: var(--color-gold);
}
.footer-divider::before, .footer-divider::after {
  content: ""; flex: 1; max-width: 120px; height: 1px;
  background: currentColor; opacity: 0.4;
}
.footer-divider svg { width: 13px; height: 13px; flex: none; }
@media (min-width: 860px) {
  .footer-divider { display: none; }
}
.footer-nav a, .footer-contact a { display: block; padding-block: 0.3rem; color: var(--color-ivory); opacity: 0.9; }
.footer-nav a:hover, .footer-contact a:hover { opacity: 1; text-decoration: underline; }
.footer-heading { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-gold); margin-bottom: 0.6rem; }
.footer-contact p { margin: 0.3rem 0 0; opacity: 0.85; }
.footer-social { display: flex; gap: 0.75rem; margin-top: 0.2rem; justify-content: center; }
/* 44x44 minimum tappable area. Filled cream circles matching the
   client's reference (not the subtle dark-glass style used elsewhere
   on the site). */
.footer-social a {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-cream-soft); color: var(--color-forest);
  display: flex; align-items: center; justify-content: center;
}
.footer-social svg { width: 20px; height: 20px; }

/* ---------- Get in Touch: icon-circle rows + Opening Days block,
   matching the client's reference footer. ---------- */
.footer-contact-item {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  margin-top: var(--space-3); text-align: center;
}
.footer-contact-item:first-child { margin-top: 0; }
.footer-contact-icon {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--color-cream-soft); color: var(--color-forest);
  display: flex; align-items: center; justify-content: center;
}
.footer-contact-icon svg { width: 18px; height: 18px; }
.footer-contact-item > span:last-child { display: flex; flex-direction: column; align-items: center; }
.footer-contact-item strong { color: var(--color-gold-foil); font-size: var(--text-xs); margin-bottom: 0.1rem; }
.footer-contact-item a, .footer-contact-plain { color: var(--color-ivory); opacity: 0.9; padding: 0; }
.footer-contact-item a:hover { opacity: 1; text-decoration: underline; }
@media (min-width: 860px) {
  .footer-contact-item {
    flex-direction: row; align-items: flex-start; gap: 0.85rem;
    margin-top: var(--space-2); text-align: left;
  }
  .footer-contact-item > span:last-child { align-items: flex-start; }
}
.footer-hours {
  display: flex; align-items: flex-start; justify-content: center; gap: 0.85rem;
  margin-top: var(--space-3); padding-top: var(--space-2);
  border-top: 1px solid rgba(251,247,238,0.15); text-align: left;
}
.footer-hours .footer-heading { margin-bottom: 0.3rem; }
.footer-hours p { margin: 0; opacity: 0.85; line-height: 1.5; }
@media (min-width: 860px) {
  .footer-contact-item, .footer-hours { justify-content: flex-start; }
}

@media (min-width: 860px) {
  .footer-brand-col { align-items: flex-start; text-align: left; }
  .footer-social { justify-content: flex-start; }
  .footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr;
    text-align: left;
    align-items: start;
  }
  .footer-nav, .footer-contact { padding-top: 0.4rem; }
}
/* ============================================================
   Tablet and up
   ============================================================ */
@media (min-width: 640px) {
  .badge-strip { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   Laptop and up
   ============================================================ */
@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  .mobile-cta-bar { display: none; }

  .nav-toggle { display: none; }
  .header-actions { display: flex; }
  .header-actions .btn {
    padding: 1.05rem 1.85rem;
    font-size: 1rem;
    box-shadow: 0 16px 32px rgba(7, 25, 18, 0.28);
  }

  .header-bar { position: relative; }

  .site-nav {
    position: static;
    visibility: visible;
    display: flex;
    flex-direction: row;
    align-items: center;
    transform: none;
    gap: 0.35rem;
    min-height: 62px;
    padding-block: 0.5rem;
    padding-inline: 0.6rem;
    /* iOS-style "liquid glass": a light, translucent tint (not the
       near-opaque --glass-surface cream used for the hamburger button
       elsewhere, which would just look like a solid pill) plus a
       top-to-bottom sheen, a soft light border for the glass edge, and
       layered shadow - an outer ambient shadow for float, two inset
       highlights for the glossy top/bottom edge. */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.22) 100%), rgba(251, 247, 238, 0.28);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow:
      0 18px 40px rgba(7, 25, 18, 0.3),
      inset 0 1px 1px rgba(255, 255, 255, 0.9),
      inset 0 -1px 1px rgba(7, 25, 18, 0.06);
    border-radius: var(--radius-pill);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }
  .site-nav a {
    color: var(--color-forest);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.0625rem;
    padding: 0.5rem 0.85rem;
    /* Explicit override, not just an omission - the base (mobile menu)
       rule for this same selector sets a 1px border-bottom divider,
       which otherwise quietly wins at desktop too once nothing here
       overrides it. */
    border-bottom: none;
    border-radius: var(--radius-pill);
    transition: background 0.2s ease, box-shadow 0.2s ease;
  }
  /* No underline for "current page" - instead, the current (and
     hovered) link gets its own small glass capsule behind just that
     word, the way an iOS segmented control highlights the selected
     segment, rather than a line committing to one fixed edge. */
  .site-nav a:hover {
    background: rgba(255, 255, 255, 0.35);
  }
  .site-nav a.is-active {
    /* Explicit override - the base (mobile menu) rule for this same
       selector sets --color-gold, which otherwise wins here too since
       nothing had overridden it; maroon matches the site's actual
       accent color (buttons, links) instead. */
    color: var(--color-maroon);
    background: rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 2px 10px rgba(7, 25, 18, 0.15);
  }

  /* A slightly deeper shadow once scrolled - the pills "settle" rather
     than a flat surface abruptly gaining an edge. .site-nav keeps its
     own glass shadow (the inset highlights) instead of the plain
     .shadow-deep swap the others use, just with a heavier outer layer,
     so it doesn't lose the liquid-glass look once scrolled. */
  .site-header.is-scrolled .brand,
  .site-header.is-scrolled .header-actions .btn {
    box-shadow: var(--shadow-deep);
  }
  .site-header.is-scrolled .site-nav {
    box-shadow:
      0 22px 48px rgba(7, 25, 18, 0.38),
      inset 0 1px 1px rgba(255, 255, 255, 0.9),
      inset 0 -1px 1px rgba(7, 25, 18, 0.06);
  }

  .section { padding-block: var(--space-5); }
}
/* At 1024-1419px, the 5 nav labels' own text (~400px, dominated by
   "Catering & Events" / "About the Chef") plus the pill's padding
   leaves less than half the header's width free on the tighter
   (.header-actions) side - true centering measurably overlapped the
   Call button there (the exact cutoff shifted from ~1280px to ~1420px
   once the pill's padding grew for the "fatter, floating" redesign,
   re-verified rather than assumed), so the plain flex + space-between
   fallback above (not perfectly centered, but never overlapping)
   covers that range; 1440px+ (re-verified clean) switches to true
   centering. */
@media (min-width: 1440px) {
  .site-nav {
    position: absolute;
    left: 50%;
    top: 50%;
    /* Absolutely-positioned elements with only `left` set (no `right`)
       fall back to a shrink-to-fit width capped at the space between
       that offset and the containing block's far edge - at left:50%
       that cap is exactly half the header's width, which is why every
       padding/gap change measured no different (the pill was pinned to
       that 50% ceiling the whole time, never actually reaching its own
       content width). width:fit-content forces real content-based
       sizing instead of that fallback. */
    width: fit-content;
    transform: translate(-50%, -50%);
  }
}