/* =============================================================================
   ADED — All Day Every Day · stylesheet
   =============================================================================
   Colours, type and tone follow the ADED Brand Book 2026:
     · Brand hues  (deck p25) — Dark Blue, Butter Yellow, Vivid Crimson, Azure, Gray Brown
     · Brand tones (deck p26) — five neutrals. Text on dark = Neutral 1;
                                text on light = Neutral 4 or 5.
     · Typography  (deck p28) — Coolvetica / Anonymous Pro / Body Grotesque.
       Anonymous Pro is open-source and is used for real. Coolvetica and Body
       Grotesque are commercial and were not supplied with webfont rights, so
       Archivo Black and Space Grotesk stand in. See DECISIONS_REQUIRED.md.
   ========================================================================== */

/* ------------------------------------------------------------- 1. TOKENS */
:root {
  /* Brand hues */
  --navy:   #164272;
  --yellow: #FFEDA3;
  --red:    #B50023;
  --azure:  #6A9FBE;
  --brown:  #8B5C32;

  /* Brand tones */
  --n1: #FFFFFF;
  --n2: #E8E6E8;
  --n3: #BAB8BA;
  --n4: #3D3A3D;
  --n5: #000000;

  /* Applied roles */
  --ink: var(--n5);
  --body-text: var(--n4);
  --page: #FAF8F4;        /* warm paper, sits between Neutral 1 and 2 */
  --surface: var(--n1);
  --hairline: #0000001f;

  --font-display: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  --font-body: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'Anonymous Pro', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --header-h: 68px;
  --gutter: max(5vw, 20px);
  --radius: 2px;
  --shadow-hard: 5px 5px 0 var(--ink);
  --focus: 3px solid var(--red);
  --ease: cubic-bezier(.2, .7, .3, 1);
}

@media (min-width: 971px) {
  :root { --header-h: 88px; }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.no-scroll, body.nav-open { overflow: hidden; }

h1, h2, h3, h4, p, ul, figure, address { margin: 0; }
ul { padding: 0; list-style: none; }
address { font-style: normal; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
::selection { background: var(--red); color: var(--n1); }

:where(a, button, input, [tabindex]):focus-visible {
  outline: var(--focus);
  outline-offset: 3px;
}

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

.skip-link {
  position: fixed;
  top: -100px; left: 16px;
  z-index: 10000;
  background: var(--n1);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 12px 20px;
  font-weight: 700;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 12px; }

.section-pad { padding: clamp(52px, 7vw, 92px) var(--gutter); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ 3. BUTTONS */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 48px;
  padding: 14px 22px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .01em;
  text-align: center;
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.button-dark   { background: var(--ink);   color: var(--n1); }
.button-outline{ background: transparent;  color: var(--ink); }
.button-yellow { background: var(--yellow);color: var(--ink); border-color: var(--ink); }
.button:hover  { transform: translateY(-3px); box-shadow: 0 4px 0 var(--ink); }
.button-yellow:hover { box-shadow: 0 4px 0 var(--n1); }

.text-link {
  font-family: var(--font-mono);
  font-size: .8rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 10px 0;
  min-height: 44px;
}
.text-link[disabled] { opacity: .45; cursor: not-allowed; text-decoration: none; }

/* ------------------------------------------------------------- 4. HEADER */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
  padding: 0 var(--gutter);
  background: var(--n1);
  border-bottom: 2px solid var(--ink);
  transition: box-shadow .2s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 6px 0 #0000000d, 0 10px 24px #0000000f; }

.brand-lockup { display: flex; align-items: center; flex: none; }
/* Proportional scale of the official lockup — never stretched or redrawn.
   Below the brand book's 250px minimum: flagged in DECISIONS_REQUIRED.md. */
.brand-lockup img { width: auto; height: calc(var(--header-h) - 18px); }

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.desktop-nav a { padding: 8px 0; border-bottom: 3px solid transparent; }
.desktop-nav a:hover { border-bottom-color: var(--red); }
.desktop-nav a[aria-current] { border-bottom-color: var(--ink); }

.header-right { display: flex; align-items: center; gap: 12px; }

.location-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  background: var(--page);
  border: 1px solid var(--hairline);
  padding: 9px 13px;
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  margin-right: 8px;
  box-shadow: 0 0 0 4px #b5002322;
  flex: none;
}

.header-cta { min-height: 44px; padding: 11px 18px; font-size: .82rem; white-space: nowrap; }

.mobile-nav-toggle {
  position: relative;
  display: none;
  width: 48px; height: 48px;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
}
.burger, .burger::before, .burger::after {
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.burger::before, .burger::after { content: ''; position: absolute; }
.burger::before { transform: translateY(-6px); }
.burger::after  { transform: translateY(6px); }
.mobile-nav-toggle.is-open .burger { background: transparent; }
.mobile-nav-toggle.is-open .burger::before { transform: rotate(45deg); }
.mobile-nav-toggle.is-open .burger::after  { transform: rotate(-45deg); }

.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  background: var(--n1);
  border-bottom: 2px solid var(--ink);
  padding: 8px var(--gutter) 24px;
  box-shadow: 0 18px 30px #00000014;
}
.mobile-nav a {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -.03em;
}
.mobile-nav-maps { font-size: 1.1rem !important; }
.mobile-nav-status {
  display: flex;
  align-items: center;
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--body-text);
}

/* --------------------------------------------------------------- 5. HERO */
.hero { background: var(--yellow); position: relative; overflow: hidden; }

.hero-topline, .hero-bottomline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px var(--gutter);
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.hero-topline { border-bottom: 1px solid #00000033; }
.hero-bottomline { border-top: 1px solid #00000033; }

.hero-body {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: end;
  gap: 16px;
  padding: clamp(24px, 4vw, 44px) var(--gutter) 0;
}

.hero-copy { padding-bottom: clamp(32px, 5vw, 60px); position: relative; z-index: 3; }

.mini-star { color: var(--red); font-size: 1.4rem; vertical-align: -2px; margin-right: 6px; }

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 6.6vw, 7.2rem);
  line-height: .9;
  letter-spacing: -.06em;
  text-transform: uppercase;
  margin: 18px 0 20px;
}
.highlight-word, .hero-period { color: var(--red); }

.hero-sub {
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  font-weight: 500;
  line-height: 1.5;
  max-width: 30ch;
}
.hero-sub em { font-style: normal; background: var(--ink); color: var(--n1); padding: 0 6px; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.hero-visual { position: relative; align-self: end; min-height: 300px; }
.hero-mascots {
  width: 100%;
  max-width: 620px;
  margin-left: auto;
  display: block;
}

.hero-sticker {
  position: absolute;
  z-index: 2;
  max-width: 190px;
  padding: 13px 15px;
  border: 2px solid var(--ink);
  background: var(--n1);
  box-shadow: var(--shadow-hard);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  transform: rotate(-6deg);
}
.sticker-top { top: 4%; right: 2%; }
.sticker-top span { color: var(--red); font-size: 1.5rem; }
.sticker-bottom {
  left: -2%; bottom: 10%;
  background: var(--navy);
  border-color: var(--navy);
  color: var(--n1);
  transform: rotate(5deg);
  box-shadow: 5px 5px 0 var(--ink);
}
.sticker-bottom strong { color: var(--yellow); }

.scribble {
  position: absolute;
  z-index: 1;
  color: var(--red);
  font-family: var(--font-mono);
  font-size: clamp(2rem, 4vw, 3.6rem);
  line-height: 1;
}
.scribble-one { top: 14%; left: 4%; }
.scribble-two { top: 42%; right: 0; }

/* ------------------------------------------------------------ 6. MARQUEE */
.marquee {
  background: var(--ink);
  color: var(--yellow);
  overflow: hidden;
  padding: 13px 0;
  border-bottom: 2px solid var(--ink);
}
.marquee-track { display: flex; width: max-content; animation: scroll-text 34s linear infinite; }
.marquee-track span {
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 2.2rem);
  letter-spacing: -.035em;
  text-transform: uppercase;
  padding-right: 18px;
}
.marquee-track b { color: var(--red); padding: 0 20px; }
@keyframes scroll-text { to { transform: translateX(-50%); } }

/* --------------------------------------------------------- 7. SECTION BITS */
.section-kicker {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  margin-bottom: clamp(28px, 4vw, 44px);
  border-bottom: 1.5px solid currentColor;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.section-kicker span:last-child { text-align: right; }

.section-desc { font-size: 1.1rem; margin: 18px 0 32px; max-width: 54ch; }

/* ----------------------------------------------------------- 8. THE VIBE */
.intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 6%, 90px); }

.intro h2 {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 7vw, 8.4rem);
  line-height: .88;
  letter-spacing: -.07em;
  text-transform: uppercase;
}
.intro h2 span { color: var(--red); }

.intro-right { max-width: 56ch; display: grid; gap: 18px; }
.intro-lede {
  font-size: clamp(1.25rem, 2.1vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.intro-right p:not(.intro-lede):not(.note-sticker) { font-size: 1.05rem; line-height: 1.7; color: var(--body-text); }
.intro-right em {
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 4px;
  text-underline-offset: 2px;
}

.note-sticker {
  width: max-content;
  max-width: 100%;
  margin-top: 14px;
  padding: 20px 28px;
  background: var(--yellow);
  box-shadow: var(--shadow-hard);
  transform: rotate(-3deg);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  line-height: 1.2;
  text-transform: uppercase;
}
.note-sticker span { color: var(--red); }

/* ---------------------------------------------------------- 9. MOODBOARD */
.mood-section { background: var(--navy); color: var(--n1); }
.mood-section .section-kicker { border-color: #ffffff66; }
.mood-section h2, .menu-header h2, .visit-text h2 {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6.2vw, 7rem);
  line-height: .92;
  letter-spacing: -.065em;
  text-transform: uppercase;
}
.mood-section h2 em { color: var(--yellow); font-style: normal; }

.mood-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }

.mood-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  overflow: hidden;
  border: 2px solid var(--n1);
  border-radius: var(--radius);
  min-width: 0;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.mood-card:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 9px 9px 0 var(--n1); }
/* The mood images are build-time crops of the lower part of each menu poster
   (see docs/build-images.py), so the card shows the mascot artwork rather than a
   second headline competing with the card's own label. */
.mood-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform .3s var(--ease);
}
.mood-card:hover img { transform: scale(1.04); }
.mood-azure { background: var(--azure); }
/* Azure is a light hue: white label text on it is only 2.87:1. Brand book p26 puts
   Neutral 5 on light backgrounds, which also clears WCAG AA at 7.6:1. */
.mood-azure, .mood-azure .mood-card-label { border-color: var(--ink); color: var(--ink); }
.mood-azure:hover { box-shadow: 9px 9px 0 var(--ink); }
.mood-brown { background: var(--brown); }
.mood-red   { background: var(--red); }
.mood-navy  { background: #123359; }

.mood-card-label {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 64px;
  padding: 14px;
  border-top: 2px solid var(--n1);
  color: var(--n1);
  font-size: .92rem;
}
.mood-card-label > span { margin-left: auto; font-size: 1.4rem; line-height: 1; }

/* ----------------------------------------------------------- 10. THE MENU */
.menu-section { background: var(--surface); }
.menu-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.menu-header h2 span { color: var(--red); }
.menu-header .section-desc { margin-bottom: 0; }

.menu-pdf-link {
  font-family: var(--font-mono);
  font-size: .8rem;
  white-space: nowrap;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 7px;
}
.link-meta { font-size: .72rem; color: var(--body-text); }
.menu-pdf-link:hover { color: var(--red); border-bottom-color: var(--red); }

.noscript-note {
  margin: 24px 0 0;
  padding: 16px 18px;
  border: 2px dashed var(--n3);
  background: var(--page);
}
.noscript-note a { text-decoration: underline; }

/* -- prerendered menu ---------------------------------------------------- */
/* The whole menu, written into index.html by docs/prerender.js so that it is
   present in the HTML even before JavaScript runs. Hidden by default: site.js
   removes it at startup, and a <style> inside <noscript> in index.html switches
   it on when scripting is off. Keep this `display: none` — without it the block
   would flash on every load. */
#menuStatic { display: none; margin-top: 28px; }

.menu-static-note {
  margin: 0 0 28px;
  padding: 16px 18px;
  border: 2px dashed var(--n3);
  background: var(--page);
}
.menu-static-note a { text-decoration: underline; }
.menu-static-section { margin: 0 0 36px; }
.menu-static-section h3 {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  text-transform: uppercase;
  margin: 0 0 6px;
}
.menu-static-tagline { margin: 0 0 4px; color: var(--body-text); }
.menu-static-page { margin: 0 0 14px; font-size: .78rem; color: var(--body-text); }
.menu-static-list { list-style: none; margin: 0; padding: 0; }
.menu-static-list > li {
  padding: 14px 0;
  border-top: 1px solid var(--n3);
}
.menu-static-dish {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  justify-content: space-between;
  margin: 0;
}
.menu-static-dish span { font-family: var(--font-mono); white-space: nowrap; }
.menu-static-desc { margin: 4px 0 0; color: var(--body-text); }
.menu-static-meta { margin: 4px 0 0; font-size: .78rem; color: var(--body-text); }

/* -- toolbar ------------------------------------------------------------ */
.menu-tools {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  margin-top: 32px;
  padding-top: 14px;
  background: var(--surface);
  box-shadow: 0 -14px 0 0 var(--surface);
}

.menu-toolbar { display: flex; gap: 14px; align-items: center; justify-content: space-between; }

.menu-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  max-width: 620px;
  height: 52px;
  padding: 0 14px 0 18px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--n1);
}
.menu-search:focus-within { box-shadow: 4px 4px 0 var(--yellow); }
.menu-search-icon { font-size: 1.6rem; line-height: 1; transform: translateY(-1px); }
.menu-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 1rem;
}
.menu-search input::-webkit-search-cancel-button { display: none; }
.menu-search-clear {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--n2);
  font-size: 1.2rem;
  line-height: 1;
  flex: none;
}

.diet-filter { display: flex; gap: 6px; flex: none; }
.diet-filter button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 48px;
  padding: 12px 16px;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--n1);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.diet-filter button.active { background: var(--ink); color: var(--n1); }
.diet-filter button.active .diet-icon { border-color: currentColor; color: currentColor; }

.category-scroller {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding: 18px 0 16px;
  -webkit-overflow-scrolling: touch;
}
.category-scroller button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  min-height: 44px;
  padding: 10px 16px;
  border: 1.5px solid var(--ink);
  border-radius: 99px;
  background: var(--page);
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
}
.category-scroller button:hover:not(:disabled) { background: var(--yellow); }
.category-scroller button.active { background: var(--ink); color: var(--n1); }
.category-scroller button:disabled { opacity: .35; cursor: not-allowed; }
.chip-count {
  font-family: var(--font-mono);
  font-size: .72rem;
  opacity: .72;
  font-weight: 400;
}

.menu-count-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 4px 0 20px;
}
.menu-count-line p {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--body-text);
}

/* -- printed section headings ------------------------------------------- */
.menu-group-head {
  margin: 44px 0 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--ink);
  scroll-margin-top: calc(var(--header-h) + 150px);
}
.menu-results > .menu-group-head:first-child { margin-top: 8px; }
.menu-group-head h3 {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.8vw, 2.2rem);
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.menu-group-count {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .05em;
  color: var(--body-text);
  text-transform: uppercase;
}
.menu-group-page {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--body-text);
  margin-top: 6px;
}
.menu-group-tagline { font-size: 1rem; font-weight: 600; margin-top: 8px; }
.menu-group-note { font-size: .9rem; color: var(--body-text); margin-top: 6px; max-width: 70ch; }

.portion-table {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
}
.portion-table p {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.portion-table ul { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.portion-table li { display: flex; gap: 8px; font-size: .9rem; }
.portion-table b { font-weight: 700; }

/* -- dish cards ---------------------------------------------------------- */
.menu-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.dish-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--n1);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.dish-card:hover { box-shadow: 6px 6px 0 var(--yellow); transform: translate(-2px, -2px); }
.dish-card.is-flagged { border-left: 5px solid var(--azure); }

.dish-card-top { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.dish-card h4 {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.03em;
  margin-top: 6px;
}
.category-label {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--body-text);
}
.dish-price { font-size: 1.1rem; font-weight: 700; white-space: nowrap; text-align: right; }
.price-sep { color: var(--n3); font-weight: 400; }
.price-from {
  display: block;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--body-text);
}

.dish-desc { font-size: .9rem; line-height: 1.55; color: var(--body-text); margin: 12px 0; }

.dish-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-bottom: 10px;
}
.dish-variants li {
  display: flex;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--n4);
}
.dish-variants b { color: var(--ink); }

.dish-note, .dish-addon, .dish-pricenote, .dish-flag {
  font-family: var(--font-mono);
  font-size: .72rem;
  line-height: 1.5;
  color: var(--body-text);
  margin-bottom: 8px;
}
.dish-note { font-style: italic; color: var(--red); }
.dish-addon { color: var(--brown); font-weight: 700; }
.dish-flag { display: flex; gap: 8px; align-items: flex-start; color: var(--navy); }

.flag-chip {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  flex: none;
  border-radius: 50%;
  background: var(--navy);
  color: var(--n1);
  font-size: .7rem;
  font-weight: 700;
}

.dish-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 12px;
}

.diet-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--body-text);
}
.diet-icon {
  display: inline-grid;
  place-items: center;
  width: 15px; height: 15px;
  flex: none;
  border: 1.5px solid #1d7a46;
  color: #1d7a46;
  font-size: 9px;
  line-height: 1;
}
.diet-icon::after { content: '●'; }
.diet-icon.nonveg { border-color: #a62a1f; color: #a62a1f; }
.diet-icon.nonveg::after { content: '▲'; font-size: 8px; }
.diet-icon.choice { border-color: var(--brown); color: var(--brown); }
.diet-icon.choice::after { content: '◑'; }
.diet-icon.unmarked { border-color: var(--n3); color: var(--n4); }
.diet-icon.unmarked::after { content: '?'; font-weight: 700; }

.dish-save {
  min-height: 40px;
  padding: 9px 13px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  background: var(--n1);
  font-family: var(--font-mono);
  font-size: .74rem;
  white-space: nowrap;
}
.dish-save:hover { background: var(--yellow); }
.dish-save[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--n1); }

.menu-more { display: flex; justify-content: center; margin-top: 30px; }

.menu-empty { text-align: center; border: 2px dashed var(--n3); padding: 48px 18px; }
.menu-empty .shrug { font-size: 2.4rem; }
.menu-empty h3 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  text-transform: uppercase;
  letter-spacing: -.04em;
  margin: 10px 0 6px;
}
.menu-empty .button { margin-top: 20px; }

/* -- legend + disclaimer -------------------------------------------------- */
.menu-legend {
  margin-top: 44px;
  padding: 22px 24px;
  background: var(--page);
  border: 1.5px solid var(--hairline);
  border-radius: var(--radius);
}
.menu-legend h3 {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.menu-legend ul { display: grid; gap: 9px; }
.menu-legend li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--body-text);
}
.menu-legend strong { color: var(--ink); }
.menu-legend .diet-icon, .menu-legend .flag-chip { margin-top: 3px; }

.menu-disclaimer {
  font-size: .82rem;
  line-height: 1.65;
  color: var(--body-text);
  max-width: 88ch;
  margin-top: 22px;
}

/* ------------------------------------------------------- 11. BRAND BAND */
.brand-break {
  background: var(--yellow);
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(24px, 5%, 70px);
  align-items: center;
  overflow: hidden;
  position: relative;
}
/* Official "patterns extracted from the logo" treatment (brand book p30):
   the supplied lockup tiled as a watermark. */
.brand-break::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('./assets/img/logo-dark-tight-320.png');
  background-size: 92px auto;
  background-repeat: repeat;
  opacity: .055;
  pointer-events: none;
}
.brand-break-words, .brand-break-art { position: relative; }

.brand-break h2 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 6rem);
  line-height: .95;
  letter-spacing: -.065em;
  text-transform: uppercase;
  margin: 18px 0;
}
.brand-break h2 em { font-style: normal; color: var(--red); }
.brand-break-sub {
  font-family: var(--font-mono);
  font-size: .9rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
/* Full lockup at the brand book's 250px minimum (deck p23). */
.brand-lockup-full { width: 260px; height: auto; margin-top: 30px; }

.brand-break-art {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  object-position: 50% 58%;
  border: 2px solid var(--ink);
  box-shadow: 11px 11px 0 var(--red);
  transform: rotate(2.5deg);
}

/* ---------------------------------------------------------- 12. FIND US */
.visit-section { background: var(--red); color: var(--n1); }
.visit-section .section-kicker { border-color: #ffffff80; }
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 7%, 90px); align-items: center; }

.round-sun { display: block; font-size: 3rem; color: var(--yellow); line-height: 1; margin-bottom: 24px; }
.visit-text h2 em { color: var(--yellow); font-style: normal; }
.visit-lede {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: -.02em;
  margin: 28px 0 18px;
}
.visit-text address { line-height: 1.7; font-size: 1.05rem; }

.visit-status {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  padding: 11px 14px;
  background: #ffffff1a;
  border: 1px solid #ffffffaa;
  border-radius: 99px;
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.visit-status .status-dot { background: var(--yellow); box-shadow: 0 0 0 4px #ffeda333; }

.visit-text .button { display: flex; width: max-content; max-width: 100%; margin: 24px 0 16px; }
.tiny-note { font-size: .8rem; line-height: 1.6; opacity: .85; max-width: 46ch; }

.visit-art { position: relative; max-width: 540px; justify-self: end; }
.visit-art img {
  width: 100%;
  max-height: 580px;
  object-fit: cover;
  object-position: top;
  border: 2px solid var(--n1);
}
.visit-art-stamp {
  position: absolute;
  right: -14px; bottom: 24px;
  padding: 20px;
  background: var(--yellow);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-hard);
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.05;
  text-transform: uppercase;
  transform: rotate(-9deg);
}

/* ----------------------------------------------------------- 13. FOOTER */
.site-footer { background: #050505; color: var(--n1); padding: 56px var(--gutter) 24px; }
.footer-top { display: flex; justify-content: space-between; gap: 32px; align-items: flex-start; }
/* Reverse lockup at the brand book's 250px minimum (deck p23). */
.footer-lockup { width: 250px; height: auto; }
.footer-links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.footer-links a { padding: 6px 0; border-bottom: 2px solid transparent; }
.footer-links a:hover { border-bottom-color: var(--yellow); }

.footer-statement {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 8.6vw, 11rem);
  line-height: .9;
  letter-spacing: -.065em;
  text-transform: uppercase;
  padding: clamp(36px, 5vw, 56px) 0;
}
.footer-statement span { color: var(--yellow); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid #ffffff55;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .02em;
}
.footer-bottom a { display: inline-block; padding: 8px 0; border-bottom: 1px solid #ffffff80; }

/* --------------------------------------------------- 14. CRAVING DRAWER */
.craving-fab {
  position: fixed;
  right: 18px;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 16px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  border-radius: 99px;
  box-shadow: var(--shadow-hard);
  font-size: .82rem;
  font-weight: 700;
  transition: transform .18s var(--ease);
}
.craving-fab:hover { transform: translateY(-3px); }
.heart-symbol { color: var(--red); font-size: 1.2rem; line-height: 1; }
.craving-count {
  display: grid;
  place-items: center;
  min-width: 24px; height: 24px;
  padding: 0 6px;
  border-radius: 99px;
  background: var(--ink);
  color: var(--n1);
  font-family: var(--font-mono);
  font-size: .76rem;
}
.craving-fab.has-items .craving-count { background: var(--red); }

.drawer-scrim { position: fixed; inset: 0; z-index: 150; background: #000000aa; }

.craving-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 151;
  width: min(460px, 100vw);
  display: flex;
  flex-direction: column;
  padding: 26px 24px max(26px, env(safe-area-inset-bottom));
  background: var(--yellow);
  border-left: 2px solid var(--ink);
  transform: translateX(102%);
  transition: transform .26s var(--ease);
  overflow: hidden;
}
.craving-drawer.open { transform: translateX(0); }

.drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.drawer-header h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -.055em;
  text-transform: uppercase;
  margin-top: 8px;
}
.drawer-header .eyebrow { font-size: .66rem; }
.drawer-header button {
  width: 42px; height: 42px;
  flex: none;
  background: var(--ink);
  color: var(--n1);
  font-size: 1.7rem;
  line-height: 1;
}

.drawer-note {
  font-size: .88rem;
  line-height: 1.5;
  padding: 14px 0 16px;
  border-bottom: 1.5px solid var(--ink);
}

.craving-items { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.craving-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #00000040;
}
.craving-row strong { font-size: 1rem; }
.craving-row span {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: .76rem;
  color: var(--n4);
}
.craving-row button {
  width: 36px; height: 36px;
  flex: none;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-size: 1.1rem;
  line-height: 1;
}
.craving-row button:hover { background: var(--ink); color: var(--n1); }
.craving-empty { padding: 36px 0; font-size: 1.05rem; }

.drawer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
}
.drawer-actions .button { font-size: .8rem; padding: 12px 16px; gap: 10px; }
.drawer-actions .button[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
#copyFeedback { min-height: 1.6em; margin-top: 8px; font-family: var(--font-mono); font-size: .76rem; }

/* ================================================= 15. RESPONSIVE LAYERS */
@media (max-width: 1250px) {
  .desktop-nav { gap: 20px; }
  .hero-mascots { max-width: none; }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 970px) {
  .desktop-nav, .location-pill, .header-cta { display: none; }
  .mobile-nav-toggle { display: flex; }
  .mood-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro-grid { gap: 28px; }
  .brand-lockup-full { width: 250px; }
}

@media (max-width: 760px) {
  .hero-topline span:last-child, .hero-bottomline span:last-child { display: none; }
  .hero-body { grid-template-columns: 1fr; padding-bottom: 0; }
  .hero-copy { padding-bottom: 4px; }
  .hero h1 { font-size: clamp(2.9rem, 12vw, 5rem); }
  .hero-sub { max-width: 38ch; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button { width: 100%; justify-content: space-between; }
  .hero-visual { min-height: 0; margin: 0 calc(var(--gutter) * -1); }
  .hero-mascots { width: 100%; margin: 0 auto; }
  .sticker-top { top: 0; right: 4%; }
  .sticker-bottom { left: 4%; bottom: 14%; }
  .scribble-two { display: none; }

  .intro-grid, .visit-grid, .brand-break { grid-template-columns: 1fr; }
  .intro-right { padding-top: 0; }
  .visit-art { justify-self: center; max-width: 430px; }
  .brand-break-art { width: 78%; justify-self: end; max-height: 330px; }

  .menu-header { display: block; }
  .menu-pdf-link { display: inline-block; margin-top: 20px; }
  .menu-toolbar { flex-direction: column; align-items: stretch; }
  .menu-search { max-width: none; }
  .diet-filter button { flex: 1; justify-content: center; padding: 12px 8px; }
  .menu-grid { grid-template-columns: 1fr; }
  .menu-count-line { flex-direction: column; align-items: flex-start; gap: 4px; }

  .footer-top { flex-direction: column; }
  .footer-links { gap: 14px 22px; }

  .craving-fab { right: 12px; padding: 11px 14px; font-size: .76rem; }
  .craving-fab-label { display: none; }
  .craving-drawer { width: 100vw; border-left: 0; }
  .drawer-actions { flex-direction: column; align-items: stretch; }
  .drawer-actions .text-link { text-align: center; }
}

@media (max-width: 420px) {
  .mood-grid { grid-template-columns: 1fr; }
  .section-kicker { font-size: .66rem; gap: 12px; }
  .section-kicker span:first-child { flex: none; }
  .section-kicker span:last-child { flex: 1; min-width: 0; }
  .footer-lockup, .brand-lockup-full { width: min(250px, 100%); }
}

/* Taller phones / desktop flourish */
@media (min-width: 1600px) {
  .hero-mascots { max-width: 740px; }
  .hero h1 { font-size: 7.2rem; }
}

/* -- Find Us: the phone line -------------------------------------------- */
.visit-phone {
  margin: 0 0 22px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.visit-phone-label {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .8;
}
.visit-phone a {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.4vw, 1.75rem);
  letter-spacing: .01em;
  text-decoration: none;
  border-bottom: 3px solid currentColor;
  padding-bottom: 2px;
}
.visit-phone a:hover { color: var(--yellow); }

.visit-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* -- search: the "/" hint and the empty-state suggestions ---------------- */
/* A quiet reminder that "/" focuses the search box. Hidden from assistive tech
   (the input is labelled properly) and dropped on touch widths, where there is
   no keyboard to press it on. */
.search-hint {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--hairline);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--body-text);
  pointer-events: none;
  opacity: 0;
}
/* Only while the field is empty and unfocused — otherwise it collides with the
   clear button, and it is noise the moment someone is actually typing. */
.menu-search input:placeholder-shown:not(:focus) ~ .search-hint { opacity: 1; }
@media (hover: none) {
  .search-hint { display: none; }
}

/* The honest note about drinks, under the result count. */
.search-note {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--red);
  background: var(--page);
  font-size: .9rem;
  max-width: 68ch;
}

.empty-help { margin: 18px 0 4px; }
.empty-help-note {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.empty-suggest-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.empty-suggest {
  min-height: 36px;
  padding: 7px 14px;
  border: 2px solid var(--ink);
  background: var(--n1);
  color: var(--ink);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.empty-suggest:hover { background: var(--ink); color: var(--n1); }

/* ================================================= 15a. CONTACT PAGE == */
/* contact.html carries no JavaScript, so its header cannot have a burger menu.
   `.static-nav` shows the links at every width and lets them wrap instead. */
.header-static { flex-wrap: wrap; height: auto; min-height: var(--header-h); padding-top: 10px; padding-bottom: 10px; }

.static-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.static-nav a { padding: 8px 0; border-bottom: 3px solid transparent; }
.static-nav a:hover { border-bottom-color: var(--red); }
.static-nav a[aria-current] { border-bottom-color: var(--ink); }

.page-contact main { min-height: 50vh; }
.contact-section h1 {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  line-height: .92;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
  margin: 36px 0 0;
}
.contact-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 26px 24px;
  border: 2px solid var(--ink);
  background: var(--n1);
  box-shadow: var(--shadow-hard);
}
.contact-card-phone { background: var(--yellow); }

.contact-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.contact-phone { margin: 0; }
.contact-phone a {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  line-height: 1.1;
  text-decoration: none;
  border-bottom: 3px solid currentColor;
  padding-bottom: 2px;
  word-break: keep-all;
}
.contact-phone a:hover { color: var(--red); }

.contact-label-second { margin-top: 10px; padding-top: 16px; border-top: 2px solid var(--ink); align-self: stretch; }
.contact-email { margin: 0; }
.contact-email a {
  font-family: var(--font-mono);
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
  word-break: break-all;
}
.contact-email a:hover { color: var(--red); }

.contact-address { margin: 0; font-style: normal; line-height: 1.6; }
.contact-body { margin: 0; }
.contact-note { margin: 0; font-size: .86rem; color: var(--body-text); }
.contact-note a { text-decoration: underline; }

.contact-pending {
  margin: 44px 0 0;
  padding: 24px 26px;
  border-left: 4px solid var(--red);
  background: var(--page);
  max-width: 72ch;
}
.contact-pending h2 {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.contact-pending ul { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.contact-pending li { line-height: 1.55; }

/* ============================================ 15b. SCROLL CHOREOGRAPHY == */
/* Everything in this section is opt-in. site.js adds `js-reveal` to <html>
   ONLY when the browser has IntersectionObserver and the visitor has not asked
   for reduced motion. Without that class every rule here is inert, so:

     * no JavaScript        -> the finished page, nothing hidden, nothing to wait for
     * prefers-reduced-motion -> the same, and site.js installs no scroll listeners
     * everything else      -> blocks fade up once as you reach them

   Only `opacity`, `transform` and `background-position` are animated. None of
   them moves layout, so none of this can affect CLS. Nothing here ever hides
   content permanently: if an observer never fires, the `.is-in` class is still
   applied by the fallback in site.js.
   ------------------------------------------------------------------------ */

/* -- the progress rule along the bottom of the sticky header ------------- */
.scroll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--red);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}
/* It is decoration, not information — hidden from assistive tech in the markup
   and not painted at all unless the choreography is switched on. */
html:not(.js-reveal) .scroll-progress { display: none; }

/* -- blocks fade up the first time they appear --------------------------- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}
.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}

/* Stagger siblings so a row of cards arrives as a sequence rather than a
   block. Done with nth-child rather than an inline style, which keeps the
   Content-Security-Policy free of 'unsafe-inline' for styles. */
.js-reveal [data-reveal].is-in:nth-child(2) { transition-delay: 70ms; }
.js-reveal [data-reveal].is-in:nth-child(3) { transition-delay: 140ms; }
.js-reveal [data-reveal].is-in:nth-child(4) { transition-delay: 210ms; }
.js-reveal [data-reveal].is-in:nth-child(5) { transition-delay: 280ms; }
.js-reveal [data-reveal].is-in:nth-child(n+6) { transition-delay: 320ms; }

/* -- newly revealed dish cards ------------------------------------------- */
/* Only cards added by "Show more" get this. Filtering and searching rebuild
   the grid on every keystroke, and animating that would turn typing into a
   flicker — see renderMenu() in site.js. */
@keyframes card-in {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
}
.js-reveal .dish-card.is-new { animation: card-in .45s var(--ease) both; }
.js-reveal .dish-card.is-new:nth-child(3n+2) { animation-delay: 60ms; }
.js-reveal .dish-card.is-new:nth-child(3n+3) { animation-delay: 120ms; }

/* -- parallax drift ------------------------------------------------------ */
/* site.js sets these three custom properties on <html> from the scroll
   position. They are plain pixel offsets, so the whole effect is three
   composited transforms and one background-position — no layout, no repaint
   of the images themselves. The stickers keep their printed rotation. */
.hero-mascots { transform: translate3d(0, var(--par-mid, 0px), 0); }
.sticker-top { transform: translate3d(0, var(--par-slow, 0px), 0) rotate(-6deg); }
.sticker-bottom { transform: translate3d(0, var(--par-fast, 0px), 0) rotate(5deg); }
.brand-break::before { background-position: center var(--band-shift, 0px); }

/* Parallax is a desktop nicety. On a phone the viewport is short and the
   offsets read as jitter, so site.js stops setting them below 760px — this
   makes sure any leftover value is ignored too. */
@media (max-width: 759px) {
  .hero-mascots, .sticker-top, .sticker-bottom { --par-slow: 0px; --par-mid: 0px; --par-fast: 0px; }
  .brand-break::before { --band-shift: 0px; }
}

/* ===================================================== 16. PREFERENCES == */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    animation-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none; }

  /* Belt and braces for the scroll choreography. site.js never switches it on
     under this preference, and drops `js-reveal` if the preference changes
     mid-session — but if either ever failed, this guarantees the page is fully
     visible and completely still rather than blank. */
  .js-reveal [data-reveal],
  .js-reveal [data-reveal].is-in { opacity: 1 !important; transform: none !important; }
  .js-reveal .dish-card.is-new { animation: none !important; }
  .hero-mascots { transform: none !important; }
  .sticker-top { transform: rotate(-6deg) !important; }
  .sticker-bottom { transform: rotate(5deg) !important; }
  .brand-break::before { background-position: center 0 !important; }
  .scroll-progress { display: none !important; }
}

@media (prefers-contrast: more) {
  :root { --body-text: var(--n5); --hairline: #00000066; }
  .tiny-note { opacity: 1; }
}

@media print {
  .site-header, .mobile-nav, .craving-fab, .craving-drawer, .drawer-scrim,
  .marquee, .menu-tools, .menu-more, .mood-section, .hero-visual { display: none !important; }
  body { background: #fff; }
  .section-pad { padding: 16px 0; }
  .dish-card { break-inside: avoid; border: 1px solid #999; }
  .menu-grid { grid-template-columns: repeat(2, 1fr); }
}