/* =========================================================================
   Guten Taco — The Roma Norte Counter
   Palette verified against WCAG 2.2 AA before a line of this was written.
   Every ratio quoted in a comment is measured, not estimated.
   ========================================================================= */

/* ------------------------------------------------------------- tokens -- */
:root {
  /* Warm charcoal, tinted toward rosa at chroma 0.018. The tint is capped
     low on purpose: warmth belongs to rosa and marigold, not the surface. */
  --bg:          oklch(0.15 0.018 350);
  --surface:     oklch(0.21 0.020 350);
  --surface-2:   oklch(0.26 0.022 350);

  --ink:         oklch(0.94 0.018 75);   /* 16.53:1 on --bg */
  --muted:       oklch(0.72 0.016 75);   /*  7.94:1 on --bg */

  /* rosa: the committed fill. The most vivid H350 that still carries crema
     body text at AA (4.80:1). Deeper than rosa-glow by necessity, not taste. */
  --rosa:        oklch(0.54 0.22 350);
  --rosa-hover:  oklch(0.48 0.21 350);   /* darker on hover: contrast rises */
  /* Decorative only. Never behind body copy — 3.73:1 would fail. */
  --rosa-glow:   oklch(0.62 0.22 350);
  --rosa-bright: oklch(0.70 0.20 350);

  --agave:       oklch(0.64 0.15 158);   /* 6.29:1 on --bg, 1.83:1 vs rosa */
  --agave-deep:  oklch(0.42 0.10 158);
  --marigold:    oklch(0.78 0.16 75);    /* 9.63:1 on --bg */

  /* type */
  --font-display: 'Bungee', 'Arial Black', sans-serif;
  --font-body:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* 4pt-based scale */
  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs:  0.75rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2rem;
  --sp-xl:  3rem;
  --sp-2xl: 4rem;
  --sp-3xl: 6rem;
  --sp-section: clamp(4rem, 9vw, 8rem);

  --wrap: 76rem;
  --radius: 2px;   /* painted signage has corners, not pillows */

  /* Two things stack at the top of the menu page: the site header, then the
     menu sub-nav. Measured, and kept here so the table head, the anchors and
     the sub-nav can all agree on where "below the furniture" starts. */
  --header-h: 4.5rem;
  --menu-nav-h: 3.875rem;
  --sticky-stack: calc(var(--header-h) + var(--menu-nav-h));

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  /* semantic stacking order — no 999s anywhere */
  --z-garland: 1;
  --z-sticky: 20;
  --z-nav-panel: 30;
  --z-skip: 40;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;   /* sticky header clearance for #anchors */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  /* Light-on-dark reads lighter than it is: compensate on all three axes —
     leading, tracking, and weight. */
  line-height: 1.65;
  letter-spacing: 0.012em;
  font-weight: 400;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

:focus-visible {
  outline: 3px solid var(--marigold);   /* 9.63:1 on charcoal */
  outline-offset: 3px;
  border-radius: 1px;
}
/* Marigold only reaches 2.80:1 on rosa and would fail the 3:1 non-text bar.
   Inside rosa sections the ring switches to crema (4.80:1). */
.section--rosa :focus-visible { outline-color: var(--ink); }

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

.skip {
  position: fixed; top: -100%; left: var(--sp-sm);
  z-index: var(--z-skip);
  background: var(--marigold); color: var(--bg);
  padding: var(--sp-xs) var(--sp-sm);
  font-weight: 700; text-decoration: none;
  transition: top 0.18s var(--ease-out-quart);
}
.skip:focus { top: var(--sp-sm); }

.scroll-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
@media (min-width: 48rem) {
  .wrap { width: min(100% - 5rem, var(--wrap)); }
}

/* ------------------------------------------------------- type ramp ----- */
/* Bungee is a wide signage face and German compounds are long. The display
   ceiling is set well under the 6rem cap for exactly that reason. */

.section__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.4vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.section__head { margin-bottom: var(--sp-xl); max-width: 46ch; }
.section__lead {
  margin-top: var(--sp-sm);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  color: var(--muted);
  max-width: 60ch;
}

.section { padding-block: var(--sp-section); }

/* ---------------------------------------------------------- wordmark -- */
/* A hand-painted sign gets its dimension from a hard offset shadow, laid down
   as a second pass in a second colour — no blur, because a brush doesn't blur.
   That's what this is.
   NOT Bungee Shade layered under Bungee: measured at 100px, Bungee sets
   "Guten Taco" at 644.80px and Bungee Shade at 744.80px. They are not
   metric-compatible and cannot be overlaid — Google Fonts ships Shade as a
   standalone face, not as part of a layerable chromatic set. */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  flex: none;
}
/* Circular crop: the badge is a disc inside a square JPG with white corners.
   scale eats the white matte the JPG leaves at the edge. */
.brand__logo {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  object-fit: cover;
  transform: scale(1.03);
}

.wordmark {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  line-height: 1;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--ink);
  text-shadow: var(--sign-offset, 2px) var(--sign-offset, 2px) 0 var(--rosa-glow);
  transition: text-shadow 0.25s var(--ease-out-quart);
}
.wordmark:hover { text-shadow: var(--sign-offset, 2px) var(--sign-offset, 2px) 0 var(--marigold); }

.wordmark--footer {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  --sign-offset: 3px;   /* the shadow scales with the sign, as paint would */
}

/* ------------------------------------------------------------ buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2xs);
  min-height: 2.75rem;          /* 44px touch target */
  padding: 0.75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out-quart),
              color 0.2s var(--ease-out-quart),
              border-color 0.2s var(--ease-out-quart),
              box-shadow 0.25s var(--ease-out-quart),
              transform 0.12s var(--ease-out-quart);
}
.btn--primary {
  background: var(--rosa);       /* crema on rosa = 4.80:1 */
  color: var(--ink);
  border-color: var(--rosa);
}
.btn--primary:hover {
  background: var(--rosa-hover); /* 6.01:1 — contrast improves on hover */
  border-color: var(--rosa-hover);
  box-shadow: 0 0 0 1px var(--rosa-glow), 0 8px 30px -8px var(--rosa-glow);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: color-mix(in oklch, var(--ink) 35%, transparent);
}
.btn--ghost:hover {
  border-color: var(--marigold);
  color: var(--marigold);
}
/* Inside rosa sections the primary CTA inverts to crema-on-rosa's opposite. */
.btn--invert {
  background: var(--ink);
  color: var(--rosa);
  border-color: var(--ink);
}
.btn--invert:hover {
  background: var(--marigold);
  color: var(--bg);
  border-color: var(--marigold);
}
.btn--lg { min-height: 3.25rem; padding: 1rem 2rem; font-size: 1.0625rem; }
.btn--sm { min-height: 2.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; }
.btn:active { transform: translateY(1px); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  min-height: 2.75rem;
  color: var(--marigold);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--marigold) 40%, transparent);
  transition: gap 0.2s var(--ease-out-quart), border-color 0.2s var(--ease-out-quart);
}
.link-arrow::after { content: '→'; transition: transform 0.2s var(--ease-out-quart); }
.link-arrow:hover { border-color: var(--marigold); }
.link-arrow:hover::after { transform: translateX(3px); }
.link-arrow--invert { color: var(--ink); border-bottom-color: color-mix(in oklch, var(--ink) 45%, transparent); }
.link-arrow--invert:hover { border-bottom-color: var(--ink); }

/* ------------------------------------------------------------- header -- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease-out-quart),
              border-color 0.3s var(--ease-out-quart);
}
.is-scrolled .site-header {
  background: var(--bg);
  border-bottom-color: color-mix(in oklch, var(--ink) 12%, transparent);
}

.site-header__bar {
  width: min(100% - 2.5rem, 84rem);
  margin-inline: auto;
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}
@media (min-width: 48rem) {
  .site-header__bar { width: min(100% - 4rem, 84rem); }
}

.nav { margin-left: auto; }
.nav__list { display: flex; gap: var(--sp-md); align-items: center; }
.nav__link {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.015em;
  padding-block: 0.5rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--ease-out-quart), border-color 0.2s var(--ease-out-quart);
}
.nav__link:hover { color: var(--marigold); border-bottom-color: var(--marigold); }
.nav__link--menu { color: var(--marigold); font-weight: 600; }

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2xs);
  margin-left: auto;
}
@media (min-width: 62rem) {
  .site-header__actions { margin-left: 0; }
}

/* Language toggle — brand furniture, visible at every width per the brief. */
.lang {
  display: inline-flex;
  border: 1px solid color-mix(in oklch, var(--ink) 28%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
}
.lang__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;   /* short caps need tracking */
  padding: 0.5rem 0.625rem;
  min-height: 2.25rem;
  cursor: pointer;
  position: relative;
  transition: color 0.2s var(--ease-out-quart), background-color 0.2s var(--ease-out-quart);
}
/* 44px tap target without inflating the visual control */
.lang__btn::before { content: ''; position: absolute; inset: -0.4rem -0.1rem; }
.lang__btn:hover { color: var(--ink); }
.lang__btn[aria-pressed='true'] {
  background: var(--rosa);
  color: var(--ink);        /* 4.80:1 */
}

.burger {
  appearance: none;
  border: 1px solid color-mix(in oklch, var(--ink) 28%, transparent);
  border-radius: var(--radius);
  background: transparent;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  cursor: pointer;
}
.burger__box { display: block; width: 18px; height: 12px; position: relative; }
.burger__line,
.burger__line::before,
.burger__line::after {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--ink);
  transition: transform 0.25s var(--ease-out-quart), opacity 0.15s linear;
}
.burger__line { top: 5px; }
.burger__line::before { content: ''; top: -5px; }
.burger__line::after  { content: ''; top: 5px; }
.is-nav-open .burger__line { background: transparent; }
.is-nav-open .burger__line::before { transform: translateY(5px) rotate(45deg); }
.is-nav-open .burger__line::after  { transform: translateY(-5px) rotate(-45deg); }

@media (min-width: 62rem) {
  .burger { display: none; }
}

@media (max-width: 61.99rem) {
  .site-header__cta { display: none; }

  /* Fixed, not absolute: the panel must escape the header's stacking box. */
  .nav {
    position: fixed;
    inset: 4.5rem 0 auto 0;
    z-index: var(--z-nav-panel);
    background: var(--surface);
    border-bottom: 1px solid color-mix(in oklch, var(--ink) 12%, transparent);
    margin-left: 0;
    padding: var(--sp-sm) 1.25rem var(--sp-md);
    display: none;
  }
  .is-nav-open .nav { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    display: block;
    padding: var(--sp-sm) 0;
    font-size: 1.125rem;
    border-bottom: 1px solid color-mix(in oklch, var(--ink) 10%, transparent);
  }
  .nav__link:hover { border-bottom-color: var(--marigold); }
}

/* ------------------------------------------------------- papel picado -- */
/* Original artwork. The flags hang from a string and sway, each a little out
   of phase with its neighbours — one shared animation, staggered by --i,
   so the whole garland never moves as a single rigid object. */

.papel {
  position: relative;
  /* Flags are 120x150 in their viewBox — height tracks that 1.25 ratio so the
     band never has dead air under the fringe. */
  height: clamp(43px, 5vw, 70px);
  overflow: hidden;
  z-index: var(--z-garland);
  pointer-events: none;
}
.papel__string {
  position: absolute;
  top: 2px; left: 0; right: 0;
  height: 2px;
  background: color-mix(in oklch, var(--ink) 45%, transparent);
}
.papel__row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;   /* cut paper hangs with air between sheets, not edge to edge */
}
.papel__flag {
  flex: 0 0 clamp(34px, 4vw, 56px);
  transform-origin: 50% 0;
  animation: sway 4.2s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.28s);   /* negative: starts mid-swing */
}
.papel__flag svg { width: 100%; height: auto; display: block; }

/* Five-colour cycle keeps the garland from reading as a repeating stamp. */
.papel__flag:nth-child(5n + 1) svg { fill: var(--rosa-glow); }
.papel__flag:nth-child(5n + 2) svg { fill: var(--marigold); }
.papel__flag:nth-child(5n + 3) svg { fill: var(--agave); }
.papel__flag:nth-child(5n + 4) svg { fill: var(--rosa-bright); }
.papel__flag:nth-child(5n + 5) svg { fill: var(--ink); }

@keyframes sway {
  from { transform: rotate(-2.4deg); }
  to   { transform: rotate(2.4deg); }
}

/* The footer garland hangs the same way the hero's does. Flipping it pointed
   the fringe upward and read as a saw blade, not cut paper. */

/* ----------------------------------------------- image slots / shots --- */
/* Every image points at its real /images/ path. Until the file exists, JS
   marks the figure .is-placeholder and this gradient stands in — so the
   layout reviews honestly with zero external requests and zero broken icons.
   Drop the real file in and it renders. No markup change. */

.shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-2);
}
.shot img { width: 100%; height: 100%; object-fit: cover; }

.shot.is-placeholder img { display: none; }
.shot.is-placeholder {
  background-image:
    linear-gradient(145deg,
      color-mix(in oklch, var(--surface-2) 92%, var(--ink)) 0%,
      var(--surface-2) 42%,
      color-mix(in oklch, var(--rosa) 62%, var(--bg)) 100%);
}
.shot--tint-marigold.is-placeholder {
  background-image:
    linear-gradient(145deg,
      color-mix(in oklch, var(--surface-2) 92%, var(--ink)) 0%,
      var(--surface-2) 42%,
      color-mix(in oklch, var(--marigold) 42%, var(--bg)) 100%);
}
.shot--tint-agave.is-placeholder {
  background-image:
    linear-gradient(145deg,
      color-mix(in oklch, var(--surface-2) 92%, var(--ink)) 0%,
      var(--surface-2) 42%,
      color-mix(in oklch, var(--agave-deep) 78%, var(--bg)) 100%);
}
/* A single sarape thread across the placeholder — used once, and sparingly. */
.shot.is-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    115deg,
    transparent 0 22px,
    color-mix(in oklch, var(--ink) 5%, transparent) 22px 24px
  );
}

/* Ratios follow the photographs, not the other way round. Every food shot the
   restaurant supplied is 3:4 portrait; forcing them into 4:3 landscape slots
   would have thrown away half of each frame. The Bio shot is natively 4:3 and
   the room shot 16:9, so they keep those. */
.shot--hero { aspect-ratio: 3 / 4; }
.shot--dish { aspect-ratio: 3 / 4; margin-bottom: var(--sp-sm); }
.shot--bar  { aspect-ratio: 3 / 4; }
.shot--bio  { aspect-ratio: 4 / 3; }
.shot--tianguis { aspect-ratio: 16 / 9; }
.shot--map  { aspect-ratio: 1 / 1; }

/* ---------------------------------------------------------------- hero -- */
.hero {
  position: relative;
  padding-bottom: var(--sp-2xl);
  /* The media glow below is inset by a negative percentage, which at narrow
     widths pushed ~7px past the viewport (measured: scrollWidth 382 vs 375).
     `clip` bounds it without creating a scroll container or touching the
     vertical axis — the cause, rather than leaning on body's overflow-x. */
  overflow-x: clip;
}

.hero__inner {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
  padding-top: clamp(var(--sp-lg), 5vw, var(--sp-2xl));
  display: grid;
  gap: var(--sp-xl);
  align-items: center;
}
@media (min-width: 48rem) {
  .hero__inner { width: min(100% - 5rem, var(--wrap)); }
}
@media (min-width: 56rem) {
  /* Asymmetric on purpose: type leads, the photograph supports it. */
  .hero__inner {
    grid-template-columns: 1.35fr 1fr;
    gap: var(--sp-2xl);
  }
}

.hero__headline {
  font-family: var(--font-display);
  /* Capped well under the 6rem ceiling: Bungee is a wide signage face and
     "Echte mexikanische Küche am Bodensee" is 36 characters. At 4.25rem it
     ran to four lines and shouted; 3.25rem holds it to three and lets the
     subline and CTAs share the fold. */
  font-size: clamp(1.875rem, 4vw, 3.25rem);
  line-height: 1.02;
  letter-spacing: -0.022em;   /* floor is -0.04em; nowhere near it */
  color: var(--ink);
}
.hero__subline {
  margin-top: var(--sp-md);
  font-size: clamp(0.9375rem, 1.5vw, 1.125rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--marigold);
}
.hero__lead {
  margin-top: var(--sp-md);
  max-width: 44ch;
  font-size: clamp(1.0625rem, 1.7vw, 1.1875rem);
  color: var(--muted);
}
.hero__ctas {
  margin-top: var(--sp-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs);
}

.hero__media { position: relative; }
.hero__media::before {
  /* Warm light behind the plate, not a drop shadow. Lit, not lifted. */
  content: '';
  position: absolute;
  inset: -12% -8%;
  background: radial-gradient(60% 55% at 60% 40%,
    color-mix(in oklch, var(--rosa-glow) 28%, transparent) 0%,
    transparent 70%);
  filter: blur(28px);
  z-index: -1;
}

/* Hero entrance runs on load — not gated behind IntersectionObserver, so it
   can never leave the first fold blank. */
.hero__headline,
.hero__subline,
.hero__lead,
.hero__ctas,
.hero__media { animation: hero-in 0.8s var(--ease-out-expo) backwards; }
.hero__headline { animation-delay: 0.05s; }
.hero__subline  { animation-delay: 0.15s; }
.hero__lead     { animation-delay: 0.22s; }
.hero__ctas     { animation-delay: 0.3s; }
.hero__media    { animation-delay: 0.18s; }

@keyframes hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ badges --- */
.badges {
  width: min(100% - 2.5rem, var(--wrap));
  margin: var(--sp-2xl) auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xs) var(--sp-lg);
  padding-top: var(--sp-md);
  border-top: 1px solid color-mix(in oklch, var(--ink) 12%, transparent);
}
@media (min-width: 48rem) {
  .badges { width: min(100% - 5rem, var(--wrap)); }
}
.badge { display: flex; align-items: center; gap: var(--sp-2xs); }
.badge__mark {
  flex: none;
  width: 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  color: var(--marigold);
  border: 1px solid color-mix(in oklch, var(--marigold) 45%, transparent);
  border-radius: 50%;
}
.badge__mark svg { width: 1rem; height: 1rem; }
.badge__text { display: flex; flex-direction: column; line-height: 1.3; }
.badge__text strong { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.badge__text small { font-size: 0.75rem; color: var(--muted); }

/* -------------------------------------------------- rosa sections ------ */
/* Committed: rosa owns these two sections outright, edge to edge. Not an
   accent. Roughly a third of the scroll is this colour, by design. */

.section--rosa {
  background: var(--rosa);
  color: var(--ink);
}
/* There is deliberately no muted text tier here. ink-on-rosa is 4.80:1 and
   leaves no headroom for a dimmer variant — hierarchy comes from size and
   weight instead. Marigold text on rosa (2.80:1) is banned outright. */
.section--rosa .section__title { color: var(--ink); }

.verdad { max-width: 62rem; }
.verdad__lead {
  margin-top: var(--sp-md);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 22ch;
}
.verdad__body {
  margin-top: var(--sp-lg);
  display: grid;
  gap: var(--sp-sm);
  max-width: 62ch;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
}
.pullquote {
  margin: var(--sp-xl) 0 0;
  padding-top: var(--sp-md);
  border-top: 2px solid color-mix(in oklch, var(--ink) 45%, transparent);
  max-width: 44ch;
}
.pullquote blockquote { margin: 0; }
.pullquote p {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.008em;
}
.pullquote figcaption {
  margin-top: var(--sp-2xs);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------ dishes --- */
/* Cards earn their place here: four discrete dishes, each a real thing you
   can order. They are not the page's default container. */

.dishes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--sp-lg) var(--sp-md);
}
.dish__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: -0.005em;
  color: var(--marigold);
}
.dish__body {
  margin-top: var(--sp-2xs);
  color: var(--muted);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------- bar --- */
.bar {
  margin-top: var(--sp-3xl);
  display: grid;
  gap: var(--sp-xl);
  align-items: center;
}
@media (min-width: 48rem) {
  .bar { grid-template-columns: 0.8fr 1fr; gap: var(--sp-2xl); }
}
.bar__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  letter-spacing: -0.008em;
  margin-bottom: var(--sp-sm);
}
.bar__text > p { color: var(--muted); max-width: 52ch; }
.bar__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2xs) var(--sp-sm);
  margin-top: var(--sp-md);
}
.bar__list li {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  padding: 0.35rem 0.7rem;
  border: 1px solid color-mix(in oklch, var(--ink) 22%, transparent);
  border-radius: var(--radius);
}
.tequila {
  margin: var(--sp-lg) 0 var(--sp-md);
  padding: var(--sp-md);
  background: var(--surface);
  border: 1px solid color-mix(in oklch, var(--marigold) 30%, transparent);
  border-radius: var(--radius);
}
.tequila blockquote { margin: 0; }
.tequila p {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.8vw, 1.1875rem);
  line-height: 1.3;
  color: var(--marigold);
}
.tequila figcaption {
  margin-top: var(--sp-2xs);
  font-size: 0.875rem;
  color: var(--muted);
  font-style: italic;
}

/* ------------------------------------------------------- agave rule ---- */
/* Draws itself once, when it scrolls into view. pathLength="1" normalises
   every path so no JS measurement is needed. */

.agave-rule { padding-block: var(--sp-lg); }
.agave-rule svg { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; display: block; height: auto; }
.agave-rule__vine { fill: none; stroke: var(--agave); stroke-width: 2; stroke-linecap: round; }
.agave-rule__leaf { fill: none; stroke: var(--agave); stroke-width: 2; stroke-linejoin: round; }

.js-anim .agave-rule__vine,
.js-anim .agave-rule__leaf {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.js-anim .agave-rule.is-drawn .agave-rule__vine {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s var(--ease-out-quart);
}
.js-anim .agave-rule.is-drawn .agave-rule__leaf {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s var(--ease-out-quart) 1s;
}

/* ----------------------------------------------------------------- bio -- */
.bio { display: grid; gap: var(--sp-xl); align-items: center; }
@media (min-width: 48rem) {
  .bio { grid-template-columns: 1fr 0.9fr; gap: var(--sp-2xl); }
}
.bio__lead {
  margin-top: var(--sp-md);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.4vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -0.008em;
  color: var(--agave);
  max-width: 20ch;
}
.bio__body { margin-top: var(--sp-md); color: var(--muted); max-width: 52ch; }

.suppliers { margin-top: var(--sp-3xl); }
.suppliers__title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  color: var(--ink);
  margin-bottom: var(--sp-md);
}
.suppliers__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--sp-md);
  border-top: 1px solid color-mix(in oklch, var(--agave) 32%, transparent);
  padding-top: var(--sp-md);
}
.supplier dt { margin-bottom: var(--sp-2xs); }
/* Third-party marks are shown unaltered on a light chip. Two of the three ship
   transparent, one has a solid blue box baked in, and partner logos generally
   may not be recoloured — the chip normalises them without touching the art. */
/* Uniform chip, logo scaled to fit inside it. The three marks run from 1.75 to
   3.1 in aspect ratio, so sizing by height alone produced chips of three
   different widths, which read as scrappy rather than as a row of partners. */
.supplier__logo {
  width: 10.5rem;
  height: 3.25rem;
  max-width: 100%;
  object-fit: contain;
  background: oklch(0.97 0 0);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
}
.supplier dd { color: var(--muted); font-size: 0.9375rem; }

.cert {
  margin-top: var(--sp-xl);
  padding: var(--sp-md);
  background: var(--surface);
  border: 1px solid color-mix(in oklch, var(--agave) 28%, transparent);
  border-radius: var(--radius);
  max-width: 46rem;
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  flex-wrap: wrap;
}
/* The real seal, unaltered, on its own light disc — it is a certification mark. */
.cert__seal {
  flex: none;
  width: 5.5rem;
  height: 5.5rem;
  object-fit: contain;
  background: oklch(0.97 0 0);
  border-radius: 50%;
  padding: 0.4rem;
}
/* Let the copy shrink beside the seal instead of wrapping under it. */
.cert > div { flex: 1; min-width: 15rem; }
.cert__title { font-family: var(--font-display); font-size: 1.0625rem; color: var(--agave); }
.cert__body { margin-top: var(--sp-2xs); color: var(--muted); font-size: 0.9375rem; }

/* --------------------------------------------------------- four values -- */
/* Small Lotería frames: ornamental border, nothing bought from a party shop. */

.values {
  margin-top: var(--sp-2xl);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--sp-md);
}
.value { text-align: center; }
.value__frame {
  position: relative;
  width: 4.5rem; height: 4.5rem;
  margin: 0 auto var(--sp-sm);
  display: grid;
  place-items: center;
  color: var(--marigold);
  border: 2px solid var(--marigold);
  border-radius: var(--radius);
}
.value__frame::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid color-mix(in oklch, var(--marigold) 50%, transparent);
  border-radius: 1px;
}
.value__frame svg { width: 1.75rem; height: 1.75rem; }
.value__name { font-family: var(--font-display); font-size: 1rem; color: var(--ink); }
.value__body { margin-top: var(--sp-3xs); font-size: 0.875rem; color: var(--muted); }

/* ------------------------------------------------------ Lotería cards -- */
/* The frame, the numbered corner and the caption banner are CSS and SVG —
   never a baked image — so both languages translate and a real photograph
   drops straight into the portrait slot. */

.section--equipo { background: var(--surface); }

.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--sp-md);
}

.lcard {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  width: 100%;
  cursor: pointer;
  perspective: 1200px;
  font: inherit;
  color: inherit;
  text-align: left;
}
.lcard__inner {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-out-quart);
}
@media (hover: hover) {
  .lcard:hover .lcard__inner { transform: rotateY(180deg); }
}
.lcard.is-flipped .lcard__inner,
.lcard:focus-visible .lcard__inner { transform: rotateY(180deg); }

.lcard__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border: 2px solid var(--marigold);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lcard__face--front::before {
  /* inner rule of the ornamental frame */
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid color-mix(in oklch, var(--marigold) 45%, transparent);
  pointer-events: none;
  z-index: 2;
}
.lcard__face--back {
  transform: rotateY(180deg);
  background: var(--rosa);
  padding: var(--sp-md);
  justify-content: center;
  gap: var(--sp-sm);
}

.lcard__num {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 3;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--bg);
  background: var(--marigold);
  padding: 0.3rem 0.45rem;
  border-radius: 1px;
}
/* Corner flourishes — small painted marks, not a border stripe. */
.lcard__corner {
  position: absolute;
  width: 14px; height: 14px;
  z-index: 3;
  border-color: var(--marigold);
  border-style: solid;
  border-width: 0;
}
/* A diagonal pair, deliberately — the number holds the third corner. */
.lcard__corner--tr { top: 10px; right: 10px; border-top-width: 2px; border-right-width: 2px; }
.lcard__corner--bl { bottom: 10px; left: 10px; border-bottom-width: 2px; border-left-width: 2px; }

/* The four supplied photos have nothing in common: a stainless kitchen, a white
   wall under flat daylight, an outdoor selfie, a phone snapshot. Colour is the
   one axis a treatment can genuinely unify, so the portraits are pulled to
   greyscale and re-tinted to a single rosa duotone. Crop is per-photo via --pos.
   This makes them a set; it cannot make them the same photograph. */
.lcard__portrait { flex: 1; min-height: 0; border-radius: 0; }
.lcard__portrait img {
  object-position: var(--pos, 50% 50%);
  filter: url(#duotone-rosa) contrast(1.05);
}
/* Warm falloff into the caption banner, so the photo sits in the card rather
   than being pasted onto it. */
.lcard__portrait:not(.is-placeholder)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to bottom, transparent 55%, color-mix(in oklch, var(--bg) 70%, transparent) 100%);
  pointer-events: none;
}
.lcard__banner {
  position: relative;
  z-index: 2;
  background: var(--marigold);
  color: var(--bg);          /* 9.63:1 */
  padding: var(--sp-2xs) var(--sp-xs);
  text-align: center;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.lcard__title {
  font-family: var(--font-display);
  font-size: clamp(0.8125rem, 1.5vw, 0.9375rem);
  letter-spacing: -0.005em;
}
.lcard__name { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; }

.lcard__bio { font-size: 0.9375rem; line-height: 1.55; color: var(--ink); }
.lcard__hint {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.75;
}

/* ------------------------------------------------------------ tianguis -- */
.tianguis { display: grid; gap: var(--sp-xl); align-items: center; }
@media (min-width: 48rem) {
  .tianguis { grid-template-columns: 1fr 0.85fr; gap: var(--sp-2xl); }
}
.tianguis__lead {
  margin-top: var(--sp-md);
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  color: var(--marigold);
}
.tianguis__text > p { margin-top: var(--sp-md); color: var(--muted); max-width: 50ch; }

/* --------------------------------------------------------------- order -- */
.order { display: grid; gap: var(--sp-2xl); }
@media (min-width: 52rem) {
  .order { grid-template-columns: 1.2fr 1fr; gap: var(--sp-3xl); align-items: start; }
}
.order__lead {
  margin-top: var(--sp-md);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  max-width: 30ch;
}
.order__hours {
  margin-top: var(--sp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3xs);
}
.order__hours-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.order__hours-value {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.order__hours + p { margin-top: var(--sp-lg); }
.order__note { margin-top: var(--sp-sm); font-size: 0.875rem; opacity: 0.9; }

.order__alt {
  padding: var(--sp-md);
  border: 2px solid color-mix(in oklch, var(--ink) 40%, transparent);
  border-radius: var(--radius);
}
.order__alt-title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.9vw, 1.1875rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin-bottom: var(--sp-2xs);
}
.order__alt p { font-size: 0.9375rem; margin-bottom: var(--sp-sm); }

/* ------------------------------------------------------------- contact -- */
.contact {
  margin-top: var(--sp-xl);
  display: grid;
  gap: var(--sp-xl);
}
@media (min-width: 52rem) {
  .contact { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-2xl); align-items: start; }
}
.contact__details {
  display: grid;
  gap: var(--sp-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.contact__block h3 {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--marigold);
  margin-bottom: var(--sp-2xs);
}
.contact__block--hours { grid-column: 1 / -1; }
.contact address { font-style: normal; color: var(--ink); }
.contact__link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklch, var(--ink) 30%, transparent);
  display: inline-block;
  min-height: 2.75rem;
  line-height: 2.75rem;
}
.contact__link:hover { color: var(--marigold); border-bottom-color: var(--marigold); }

.hours { display: flex; flex-direction: column; gap: var(--sp-3xs); }
.hours__days { font-size: 0.9375rem; color: var(--muted); }
.hours__time {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hours__note { margin-top: var(--sp-2xs); font-size: 0.875rem; color: var(--muted); }
.hours__closed {
  margin-top: var(--sp-2xs);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--agave);
}

/* -------------------------------------------------------------- footer -- */
/* No margin-top: the preceding section already carries a full --sp-section of
   bottom padding, and stacking both left a dead charcoal band above the
   garland. */
.site-footer { background: var(--surface); }
.site-footer__inner {
  padding-block: var(--sp-2xl) var(--sp-xl);
  display: grid;
  gap: var(--sp-lg);
}
@media (min-width: 48rem) {
  .site-footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: var(--sp-xl);
  }
  .site-footer__provecho { grid-column: 1; }
  .site-footer__copy { grid-column: 2 / -1; text-align: right; align-self: end; }
}
/* Circular crop: the badge is a disc inside a square JPG with white corners. */
.site-footer__logo {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  object-fit: cover;
  transform: scale(1.02);   /* eat the white edge left by the JPG matte */
}
.site-footer__tagline { margin-top: var(--sp-sm); color: var(--muted); font-size: 0.9375rem; }
.site-footer__social ul,
.site-footer__legal ul { display: grid; gap: var(--sp-2xs); }
.site-footer__social a,
.site-footer__legal a {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9375rem;
  border-bottom: 1px solid transparent;
}
.site-footer__social a:hover,
.site-footer__legal a:hover { color: var(--marigold); border-bottom-color: var(--marigold); }
.site-footer__handle { color: var(--muted); }
.site-footer__provecho {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  color: var(--rosa-glow);   /* 4.81:1 — large display type only */
}
.site-footer__copy { color: var(--muted); font-size: 0.8125rem; }

/* ================================================== speisekarte ======== */

.papel--menu { margin-bottom: var(--sp-lg); }

.menu-head { padding-top: var(--sp-lg); max-width: 46rem; }
.menu-head__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.menu-head__lead {
  margin-top: var(--sp-md);
  font-size: clamp(1.0625rem, 1.7vw, 1.25rem);
  color: var(--muted);
  max-width: 46ch;
}
/* Prices change. Say when this was true and where the binding version lives. */
.menu-head__source {
  margin-top: var(--sp-sm);
  font-size: 0.8125rem;
  color: var(--muted);
}

/* Sticky under the sticky header — hence the offset rather than top: 0. */
.menu-nav {
  position: sticky;
  top: var(--header-h);
  z-index: var(--z-sticky);
  background: color-mix(in oklch, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-block: 1px solid color-mix(in oklch, var(--ink) 12%, transparent);
  margin-block: var(--sp-xl) var(--sp-lg);
}
.menu-nav__inner { overflow-x: auto; scrollbar-width: none; }
.menu-nav__inner::-webkit-scrollbar { display: none; }
.menu-nav__list {
  display: flex;
  gap: var(--sp-sm);
  padding-block: 0.75rem;
  white-space: nowrap;
}
.menu-nav__link {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  letter-spacing: 0.005em;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: color 0.2s var(--ease-out-quart), border-color 0.2s var(--ease-out-quart);
}
.menu-nav__link:hover { color: var(--marigold); border-color: color-mix(in oklch, var(--marigold) 45%, transparent); }

.menu-section { margin-bottom: var(--sp-3xl); scroll-margin-top: calc(var(--sticky-stack) + 1rem); }
.menu-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--marigold);
  padding-bottom: var(--sp-2xs);
  border-bottom: 2px solid color-mix(in oklch, var(--marigold) 35%, transparent);
}
.menu-section__note {
  margin-top: var(--sp-sm);
  color: var(--muted);
  font-size: 0.9375rem;
  max-width: 60ch;
}

/* ---- one item: name, dotted leader, price, description beneath ---- */
.mlist { margin-top: var(--sp-md); }
.mitem { padding-block: var(--sp-xs); }
.mitem + .mitem { border-top: 1px solid color-mix(in oklch, var(--ink) 8%, transparent); }
.mitem__head { display: flex; align-items: baseline; gap: var(--sp-2xs); }
.mitem__name {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.005em;
  color: var(--ink);
}
/* The dotted leader: a flexible rule between name and price. */
.mitem__dots {
  flex: 1 1 auto;
  min-width: 1.5rem;
  align-self: center;
  border-bottom: 1px dotted color-mix(in oklch, var(--ink) 32%, transparent);
  transform: translateY(0.1em);
}
.mitem__price {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mitem__desc {
  margin-top: var(--sp-3xs);
  font-size: 0.875rem;
  color: var(--muted);
  max-width: 68ch;
}

/* ---- the format/filling matrix ---- */
.formats { margin-top: var(--sp-lg); display: grid; gap: var(--sp-2xs); }
.formats__row {
  display: grid;
  gap: 0.15rem var(--sp-sm);
  padding-block: var(--sp-2xs);
}
@media (min-width: 44rem) {
  .formats__row { grid-template-columns: 8rem 1fr; align-items: baseline; }
}
.formats__name {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  color: var(--agave);
}
.formats__desc { color: var(--muted); font-size: 0.875rem; max-width: 62ch; }

/* No overflow container on purpose. `overflow-x: auto` would make this the
   scrollport for BOTH axes, and a sticky thead inside a box that never scrolls
   vertically simply never sticks — the format names scrolled away and left five
   unlabelled columns of prices. Below the breakpoint the rows stack instead of
   scrolling sideways, which a six-column table at 375px needed anyway. */
.matrix__wrap {
  margin-top: var(--sp-lg);
  border: 1px solid color-mix(in oklch, var(--ink) 12%, transparent);
  border-radius: var(--radius);
}
.matrix { width: 100%; border-collapse: collapse; }
.matrix th, .matrix td { text-align: left; padding: var(--sp-xs) var(--sp-sm); vertical-align: top; }
/* Sticks below the header + sub-nav, not at 0 — otherwise the format names
   scroll away and five columns of prices mean nothing. z-index stays under the
   sub-nav's so the two never fight. */
.matrix thead th {
  position: sticky;
  top: var(--sticky-stack);
  z-index: 1;
  background: var(--surface-2);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  border-bottom: 2px solid color-mix(in oklch, var(--marigold) 40%, transparent);
}
.matrix__corner { color: var(--muted) !important; }
.matrix__format, .matrix__price { text-align: right !important; white-space: nowrap; }
.matrix tbody tr + tr th, .matrix tbody tr + tr td {
  border-top: 1px solid color-mix(in oklch, var(--ink) 8%, transparent);
}
.matrix tbody tr:nth-child(odd) { background: color-mix(in oklch, var(--ink) 2.5%, transparent); }
.matrix__filling { min-width: 16rem; }
.matrix__name {
  display: block;
  font-family: var(--font-display);
  font-size: 0.875rem;
  color: var(--ink);
}
.matrix__desc { display: block; margin-top: 0.15rem; font-size: 0.8125rem; color: var(--muted); font-weight: 400; }
.matrix__price { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; font-size: 0.875rem; }
.matrix__price--none { color: var(--muted); }

/* Narrow: the table stops being a table and becomes one block per filling, each
   price carrying its own format label. Nothing scrolls sideways. */
/* Selectors are td-qualified throughout: `.matrix th, .matrix td` above is
   (0,1,1) and would otherwise beat a bare `.matrix__price` (0,1,0), silently
   dropping both the flex and the padding. */
@media (max-width: 51.99rem) {
  .matrix, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; }
  .matrix thead { display: none; }
  .matrix__wrap { border: 0; }
  .matrix tbody tr { padding: var(--sp-sm) 0; }
  .matrix tbody tr + tr th, .matrix tbody tr + tr td { border-top: 0; }
  .matrix tbody tr + tr { border-top: 1px solid color-mix(in oklch, var(--ink) 10%, transparent); }
  .matrix tbody tr:nth-child(odd) { background: none; }

  .matrix th.matrix__filling { padding: 0 0 var(--sp-2xs); min-width: 0; }

  .matrix td.matrix__price {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-sm);
    padding: 0.2rem 0;
    text-align: left !important;
    max-width: 22rem;
  }
  /* A dotted leader between format and price, same idea as the à-la-carte rows. */
  .matrix td.matrix__price::before {
    content: attr(data-label);
    flex: none;
    font-family: var(--font-display);
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    color: var(--muted);
    font-weight: 400;
  }
  .matrix td.matrix__price::after {
    content: '';
    order: -1;
    flex: 1 1 auto;
    align-self: center;
    min-width: 1rem;
    border-bottom: 1px dotted color-mix(in oklch, var(--ink) 26%, transparent);
    transform: translateY(0.1em);
  }
  .matrix td.matrix__price--none { opacity: 0.55; }
}

.allergen {
  margin-bottom: var(--sp-2xl);
  padding: var(--sp-md);
  border: 1px solid color-mix(in oklch, var(--agave) 30%, transparent);
  border-radius: var(--radius);
  max-width: 46rem;
}
.allergen__title { font-family: var(--font-display); font-size: 1rem; color: var(--agave); }
.allergen__body { margin-top: var(--sp-2xs); color: var(--muted); font-size: 0.9375rem; }

.menu-cta { margin-bottom: var(--sp-3xl); }

/* ------------------------------------------------------------ reveals -- */
/* Default is visible. The hiding only switches on once JS confirms
   IntersectionObserver exists — a dead script can never blank a section. */

.js-anim .reveal,
.js-anim .stagger > * {
  opacity: 0;
  transform: translateY(18px);
}
.js-anim .reveal.is-in,
.js-anim .stagger > *.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease-out-quart), transform 0.6s var(--ease-out-quart);
}
/* Stagger inside one list is legitimate; capped so the tail never drags. */
.js-anim .stagger > *.is-in { transition-delay: calc(min(var(--i, 0), 6) * 70ms); }

/* ------------------------------------------------------------- print -- */
/* A4, ink on paper. The screen palette is a lit room; paper is not, so the
   whole thing inverts to black on white rather than burning a charcoal
   background into someone's printer. */

@media print {
  @page { size: A4; margin: 16mm 14mm; }

  :root {
    --bg: #fff;
    --surface: #fff;
    --surface-2: #fff;
    --ink: #111;
    --muted: #555;
    --rosa: #000;
    --marigold: #000;
    --agave: #000;
  }

  html, body { background: #fff !important; color: #111 !important; }

  /* Everything that is furniture, not menu. */
  .site-header, .menu-nav, .papel, .site-footer, .skip, .menu-cta,
  .menu-head__lead, .matrix__hint, .scroll-sentinel { display: none !important; }

  .wrap { width: auto; max-width: none; }
  main { padding: 0; }

  .menu-head { padding-top: 0; }
  .menu-head__title { font-size: 22pt; color: #000; }
  .menu-head__source { font-size: 8pt; color: #555; }

  .menu-section { margin-bottom: 8mm; break-inside: auto; }
  .menu-section__title {
    font-size: 13pt;
    color: #000;
    border-bottom: 1.5pt solid #000;
    break-after: avoid;
  }
  .menu-section__note { font-size: 8.5pt; color: #444; }

  /* Never split an item across a page. */
  .mitem, .formats__row, .matrix tr { break-inside: avoid; }
  .mitem__name, .mitem__price { font-size: 9.5pt; color: #000; }
  .mitem__desc { font-size: 8pt; color: #444; }
  .mitem__dots { border-bottom-color: #999; }
  .mitem + .mitem { border-top-color: #ddd; }

  /* The matrix must not scroll on paper — it has to fit. */
  .matrix__wrap { overflow: visible; border: 1pt solid #000; }
  .matrix { min-width: 0; width: 100%; font-size: 8pt; }
  .matrix th, .matrix td { padding: 1.5mm 2mm; }
  .matrix thead th { position: static; background: #eee; color: #000; border-bottom: 1pt solid #000; }
  .matrix tbody tr:nth-child(odd) { background: #f6f6f6; }
  .matrix__filling { min-width: 0; }
  .matrix__name { font-size: 8.5pt; color: #000; }
  .matrix__desc { font-size: 7pt; color: #444; }
  .matrix__price { color: #000; }
  .matrix thead { display: table-header-group; }   /* repeat header per page */

  .allergen { border: 1pt solid #000; padding: 3mm; break-inside: avoid; }
  .allergen__title { font-size: 9pt; color: #000; }
  .allergen__body { font-size: 8pt; color: #333; }

  a { text-decoration: none; color: #000; }
}

/* --------------------------------------------------- reduced motion ---- */
/* Not an afterthought: the garland stops, the cards cross-fade instead of
   rotating, the agave line is simply present, reveals do nothing. */

@media (prefers-reduced-motion: reduce) {
  .papel__flag { animation: none; }

  .hero__headline, .hero__subline, .hero__lead, .hero__ctas, .hero__media {
    animation: none;
  }

  .js-anim .reveal,
  .js-anim .stagger > * { opacity: 1; transform: none; }
  .js-anim .reveal.is-in,
  .js-anim .stagger > *.is-in { transition: none; transition-delay: 0s; }

  .js-anim .agave-rule__vine,
  .js-anim .agave-rule__leaf { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }

  /* Cross-fade replaces the 3D flip. */
  .lcard__inner { transition: none; transform-style: flat; }
  .lcard:hover .lcard__inner,
  .lcard.is-flipped .lcard__inner,
  .lcard:focus-visible .lcard__inner { transform: none; }
  .lcard__face { backface-visibility: visible; transition: opacity 0.2s linear; }
  .lcard__face--back { transform: none; opacity: 0; pointer-events: none; }
  .lcard.is-flipped .lcard__face--back,
  .lcard:focus-visible .lcard__face--back { opacity: 1; pointer-events: auto; }
  .lcard.is-flipped .lcard__face--front,
  .lcard:focus-visible .lcard__face--front { opacity: 0; }

  .btn, .link-arrow, .link-arrow::after, .nav__link, .burger__line,
  .burger__line::before, .burger__line::after, .site-header, .wordmark {
    transition-duration: 0.01ms;
  }
}