:root {
  /* ---- Color: six named material tokens, see DESIGN_PLAN.md §1 for contrast math ---- */
  --char: #1b140f;   /* charred flat-top griddle — dark ground */
  --masa: #e9dcae;   /* fresh corn masa — warm light ground / card surface */
  --paper: #e2e1d6;  /* the truck's flat white paint, weathered — cooler light surface */
  --roja: #a62416;   /* salsa roja — primary accent */
  --verde: #6f8a3e;  /* salsa verde — BACKGROUND FILL ONLY, never text/icon on light ground */
  --smoke: #5f543f;  /* griddle smoke — muted text, borders */

  --surface: var(--paper);
  --surface-alt: var(--masa);
  --ink: var(--char);
  --ink-muted: var(--smoke);
  --accent: var(--roja);
  --accent-on-dark: #d99a90; /* roja lightened for use as text on --char ground, verified below */
  --smoke-on-dark: #9c8d6e; /* smoke lightened for muted text on --char ground — 5.59:1, --smoke itself only hits 4.49:1 */

  /* ---- Type ---- */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Source Serif 4", ui-serif, Georgia, serif;

  /* --step--1 and --step-0 (body/label text) are an accessibility/readability floor, not an
     aesthetic choice — they don't shrink on a "make it smaller" pass, only --step-1 and up. */
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.15rem;
  --step-2: 1.4rem;
  --step-3: 1.7rem;
  --step-4: 2.05rem;
  --step-5: 2.6rem;
  --step-hero: clamp(2.1rem, 4vw + 1.1rem, 3.75rem);

  --measure: 65ch;

  /* ---- Space ----
     --space-1 through --space-4 are the touch-target-bearing gaps — also a floor, left alone. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.4rem;
  --space-6: 1.75rem;
  --space-7: 2.5rem;
  --space-8: 3.25rem;
  --space-9: 4.5rem;

  --container-max: 68rem;
  --radius: 0.5rem;
  --radius-lg: 1rem;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-med: 320ms;
  --dur-slow: 560ms;

  --header-h: 4.25rem;
}

@media (prefers-color-scheme: dark) {
  /* This site is a fixed warm-material brand look, not a light/dark switch — the palette
     itself is already high-contrast and intentional. No overrides; documented so it reads
     as a decision, not an oversight. */
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../assets/fonts/bricolage-grotesque-variable.woff2") format("woff2-variations"), url("../assets/fonts/bricolage-grotesque-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../assets/fonts/source-serif4-variable.woff2") format("woff2-variations"), url("../assets/fonts/source-serif4-variable.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../assets/fonts/source-serif4-italic-variable.woff2") format("woff2-variations"), url("../assets/fonts/source-serif4-italic-variable.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  min-width: 320px;
}

img,
picture,
svg {
  max-width: 100%;
  display: block;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
ol {
  margin: 0;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

input,
select {
  font: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.08;
  margin: 0 0 var(--space-4);
  letter-spacing: -0.01em;
}
h1 {
  font-size: var(--step-5);
}
h2 {
  font-size: var(--step-4);
}
h3 {
  font-size: var(--step-3);
  letter-spacing: -0.005em;
}
h4 {
  font-size: var(--step-2);
  letter-spacing: 0;
}

p {
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--roja);
  margin: 0 0 var(--space-2);
  display: block;
}

/* Context-aware muted text — was previously inline `style="color:var(--ink-muted)"` scattered
   across pages, which broke (1.02:1, invisible) the moment its section became a .section--roja
   background. A class lets the color adapt per section instead of needing a per-instance fix. */
.text-muted {
  color: var(--ink-muted);
}
.section--roja .text-muted {
  color: var(--masa);
}

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.section {
  padding-block: var(--space-8);
}
.section--tight {
  padding-block: var(--space-6);
}
.section--raised {
  background: var(--surface-alt);
}

/* Roja (red) section ground — a deliberate, bold use of the truck's real color as a section
   background, not just a small accent. Text must be light — verified via the same luminance
   script as the rest of the palette: masa 5.31:1, paper 5.54:1 on roja, both clear AA. Never
   place a .btn--primary (roja-filled) inside a .section--roja — the button would visually
   disappear into the matching background; use .btn--ghost or .btn--outline instead. */
.section--roja {
  background: var(--roja);
  color: var(--paper);
}
.section--roja h1,
.section--roja h2,
.section--roja h3,
.section--roja h4 {
  color: var(--paper);
}
.section--roja .eyebrow {
  color: var(--masa);
}
.section--roja .section__head h2::after {
  background: var(--masa);
}
.section--roja .btn--outline {
  color: var(--paper);
  box-shadow: inset 0 0 0 2px var(--paper);
}
.section--roja .find-strip__num {
  color: var(--masa);
}
.section--roja .timeline__year {
  color: var(--masa);
}
.section--roja .timeline__item {
  border-left-color: var(--paper);
}
.section--roja .timeline__item::before {
  background: var(--paper);
  border-color: var(--roja);
}
/* .hero and .error-page are also dark-ground sections — grouped here so every dark-context
   text-color override applies uniformly instead of drifting (this exact drift caused two real
   contrast bugs during build: an invisible outline-button and an unreadable eyebrow, caught by
   dev/contrast-scan.mjs). */
.section--dark,
.hero,
.error-page {
  background: var(--char);
  color: var(--masa);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.hero h1,
.hero h2,
.hero h3,
.hero h4,
.error-page h1,
.error-page h2,
.error-page h3,
.error-page h4 {
  color: var(--masa);
}
.section--dark .eyebrow,
.hero .eyebrow,
.error-page .eyebrow {
  color: var(--accent-on-dark);
}

.section__head {
  max-width: 40rem;
  margin-bottom: var(--space-6);
}
.section__head h2 {
  position: relative;
  padding-bottom: var(--space-3);
}
.section__head h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--roja);
}
.section--dark .section__head h2::after,
.hero .section__head h2::after,
.error-page .section__head h2::after {
  background: var(--accent-on-dark);
}

/* Brand bar — a slim red stripe pinned above the sticky header, matching the truck's real color.
   Sticky (not fixed) so it participates in normal layout at the top of the document, then stays
   pinned once scrolled past — the header's own sticky offset (5px) matches this bar's height so
   the two stack cleanly with no gap or overlap. */
.brand-bar {
  position: sticky;
  top: 0;
  z-index: 51;
  height: 5px;
  background: var(--roja);
}

.grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 720px) {
  .grid--2 {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -3rem;
  background: var(--char);
  color: var(--masa);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  z-index: 100;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus {
  top: var(--space-4);
}

:focus-visible {
  outline: 3px solid var(--roja);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* ===== Header / nav ===== */
.header {
  position: sticky;
  top: 5px;
  z-index: 50;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: var(--char);
  color: var(--masa);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  transition: box-shadow var(--dur-med) var(--ease-out);
}
.header.is-scrolled {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.header__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  color: var(--masa);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3ch;
  min-height: 44px;
  white-space: nowrap;
}
.wordmark span.wordmark__accent {
  color: var(--accent-on-dark);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: var(--masa);
  color: var(--char);
  white-space: nowrap;
}
.status-pill__dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 0 0 2px var(--char);
  flex-shrink: 0;
}
.status-pill[data-open="false"] .status-pill__dot {
  background: var(--roja);
}
.status-pill[data-open="true"] .status-pill__dot {
  animation: pulse-ring 2.2s var(--ease-out) infinite;
}
@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 2px var(--char), 0 0 0 0 rgba(111, 138, 62, 0.5);
  }
  70% {
    box-shadow: 0 0 0 2px var(--char), 0 0 0 8px rgba(111, 138, 62, 0);
  }
  100% {
    box-shadow: 0 0 0 2px var(--char), 0 0 0 0 rgba(111, 138, 62, 0);
  }
}

.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5ch;
  min-width: 44px;
  min-height: 44px;
  color: var(--masa);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: var(--radius);
}
.icon-link svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .icon-link__label {
    display: none;
  }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  align-items: center;
}
.nav-toggle__bar {
  width: 22px;
  height: 2px;
  background: var(--masa);
  transition: transform var(--dur-med) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav__list {
  display: flex;
  gap: var(--space-5);
}
.nav__link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--masa);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.nav__link:hover,
.nav__link[aria-current="page"] {
  border-color: var(--accent-on-dark);
}

@media (max-width: 880px) {
  .nav-toggle {
    display: inline-flex;
  }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--char);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-6) var(--space-5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out),
      visibility 0s var(--dur-med);
    z-index: 40;
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out),
      visibility 0s;
  }
  .nav__list {
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
  }
  .nav__link {
    width: 100%;
    font-size: var(--step-1);
    padding-block: var(--space-2);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
  }
  .nav.is-open .nav__link {
    opacity: 1;
    transform: translateY(0);
  }
  .nav__footer {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(233, 220, 174, 0.2);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .nav__footer > a[data-address-link] {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--masa);
    text-decoration: underline;
    font-size: var(--step--1);
  }
}
@media (min-width: 881px) {
  .nav__footer {
    display: none;
  }
}

body.nav-open {
  overflow: hidden;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5ch;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}
.btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
/* Phone numbers contain hyphens, which browsers treat as valid line-break points by default —
   without this, a long button label can wrap mid-number (e.g. "445-" / "2318" on separate
   lines) on narrow screens. */
[data-phone-display] {
  white-space: nowrap;
}
.btn--primary {
  background: var(--roja);
  color: var(--paper);
}
.btn--outline {
  background: transparent;
  color: var(--char);
  box-shadow: inset 0 0 0 2px var(--char);
}
.section--dark .btn--outline,
.hero .btn--outline,
.error-page .btn--outline {
  color: var(--masa);
  box-shadow: inset 0 0 0 2px var(--masa);
}
.btn--ghost {
  background: var(--masa);
  color: var(--char);
}
.btn--block {
  width: 100%;
}

/* ===== Cards ===== */
.card {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
.card--dark {
  background: var(--char);
  color: var(--masa);
}

/* ===== Hero ===== */
.hero {
  position: relative;
  padding-block: var(--space-9) var(--space-8);
  overflow: hidden;
}
.hero__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--smoke);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--masa);
  background: repeating-linear-gradient(
    135deg,
    var(--smoke),
    var(--smoke) 10px,
    #4c4232 10px,
    #4c4232 20px
  );
}
.hero__title {
  font-size: var(--step-hero);
  margin-bottom: var(--space-4);
}
.hero__lede {
  font-size: var(--step-1);
  color: var(--masa);
  opacity: 0.92;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--space-5);
}
.rating-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4ch;
  font-family: var(--font-display);
  font-weight: 700;
}
[data-award-badge] {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--masa);
}
[data-award-badge]:empty {
  display: none;
}
.rating-badge__stars {
  color: var(--accent-on-dark);
  letter-spacing: 0.05em;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* ===== Find strip ===== */
.find-strip {
  display: grid;
  gap: var(--space-3);
}
.find-strip__item {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.find-strip__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-2);
  color: var(--roja);
  flex-shrink: 0;
  min-width: 2ch;
}

/* ===== Timeline ===== */
.timeline {
  display: grid;
  gap: 0;
}
.timeline__item {
  position: relative;
  padding-left: var(--space-6);
  padding-block: var(--space-5);
  border-left: 2px solid var(--smoke);
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: -7px;
  top: var(--space-5);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--roja);
  border: 2px solid var(--surface);
}
.timeline__year {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-1);
  color: var(--roja);
  display: block;
  margin-bottom: var(--space-1);
}
.timeline__item:last-child {
  padding-bottom: 0;
}

/* ===== Hours table ===== */
.hours-table {
  width: 100%;
  border-collapse: collapse;
}
.hours-table th,
.hours-table td {
  text-align: left;
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid rgba(92, 79, 58, 0.2);
  font-size: var(--step-0);
}
.hours-table th {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.hours-table tr[data-today="true"] td {
  background: rgba(166, 36, 22, 0.08);
  font-weight: 700;
}
.hours-table tr[data-today="true"] td:first-child {
  border-left: 3px solid var(--roja);
  padding-left: calc(var(--space-2) - 3px);
}

/* ===== Menu page ===== */
.menu-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-6);
}
.menu-search {
  flex: 1 1 16rem;
  min-height: 44px;
  padding: 0 var(--space-4);
  border-radius: 999px;
  border: 2px solid var(--smoke);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--step-0);
}
.menu-search:focus-visible {
  border-color: var(--roja);
}
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chip {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 2px solid var(--smoke);
  background: transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chip[aria-pressed="true"] {
  background: var(--char);
  color: var(--masa);
  border-color: var(--char);
}

.menu-section {
  margin-bottom: var(--space-8);
}
.menu-section__title {
  border-bottom: 2px solid var(--char);
  padding-bottom: var(--space-2);
}
.menu-section__note {
  color: var(--ink-muted);
  font-style: italic;
  font-size: var(--step--1);
  max-width: var(--measure);
}

.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid rgba(92, 79, 58, 0.18);
}
.menu-item[hidden] {
  display: none;
}
.menu-item__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
}
.menu-item__name.is-featured::after {
  content: "★ regulars' favorite";
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--roja);
  margin-left: var(--space-3);
}
.menu-item__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-1);
  color: var(--roja);
  white-space: nowrap;
  align-self: start;
}
.menu-item__price--ask {
  font-size: var(--step--1);
  font-family: var(--font-body);
  font-style: italic;
  color: var(--ink-muted);
  font-weight: 400;
}
.menu-item__desc {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--step-0);
  color: var(--ink);
}
.menu-item__meats {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.25rem;
}
.meat-tag {
  font-size: var(--step--1);
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--surface-alt);
  color: var(--char);
}
.menu-item__soldout {
  grid-column: 1 / -1;
  display: inline-flex;
  align-self: start;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--roja);
  border: 2px solid var(--roja);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
  width: fit-content;
}
.menu-item.is-soldout .menu-item__name,
.menu-item.is-soldout .menu-item__price {
  opacity: 0.45;
}

.menu-empty {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--ink-muted);
}
.menu-empty[hidden] {
  display: none;
}

/* ===== Catering FAQ ===== */
.catering-faq {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}
@media (min-width: 640px) {
  .catering-faq {
    grid-template-columns: repeat(2, 1fr);
  }
}
.catering-faq__item {
  background: var(--paper);
  color: var(--char);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.catering-faq__item dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--roja);
  margin-bottom: var(--space-2);
}
.catering-faq__item dd {
  margin: 0;
}

/* ===== Landmarks ===== */
.landmark-list {
  display: grid;
  gap: var(--space-3);
}
.landmark-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--paper);
  color: var(--char);
  border-radius: var(--radius);
}
.landmark-list .dist {
  color: var(--ink-muted);
  font-size: var(--step--1);
  white-space: nowrap;
}

/* ===== Photo gallery strip ===== */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .photo-gallery {
    grid-template-columns: repeat(5, 1fr);
  }
}
.photo-gallery figure {
  margin: 0;
}
.photo-gallery img {
  width: 100%;
  /* height must be explicit, not just aspect-ratio: the img's width/height HTML attributes
     (used for layout-shift prevention) set an implicit height via a presentational hint, and an
     explicit height always wins over aspect-ratio per spec — aspect-ratio alone silently lost to
     it here, rendering these as 900px-tall slivers instead of square thumbnails. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
}
.photo-gallery figcaption {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
  text-align: center;
}

/* ===== Map ===== */
.map-embed {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-alt);
}
.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.map-embed iframe.is-loaded {
  opacity: 1;
}

/* ===== Footer ===== */
.footer {
  background: var(--char);
  color: var(--masa);
  padding-block: var(--space-7);
}
.footer__grid {
  display: grid;
  gap: var(--space-6);
}
@media (min-width: 720px) {
  .footer__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.footer__col h2 {
  font-size: var(--step-0);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-on-dark);
  margin-bottom: var(--space-3);
}
.footer__col a,
.footer__col p {
  color: var(--masa);
  text-decoration: none;
  display: block;
  margin-bottom: var(--space-2);
}
.footer__col a {
  min-height: 44px;
  display: flex;
  align-items: center;
}
.footer__bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(166, 36, 22, 0.35);
  font-size: var(--step--1);
  color: var(--smoke-on-dark);
}

/* ===== 404 ===== */
.error-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  text-align: center;
  background: var(--char);
  color: var(--masa);
}
.error-page__inner {
  max-width: 34rem;
  margin-inline: auto;
}
.error-page__code {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 10vw, 7rem);
  color: var(--accent-on-dark);
  line-height: 1;
}

/* ===== Reveal-on-scroll ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Burrito figure (Home "two hands" section) ===== */
.burrito-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}

@media (max-width: 400px) {
  .wordmark {
    font-size: var(--step-0);
  }
  .header__inner {
    padding-inline: var(--space-3);
    gap: var(--space-2);
  }
}