@font-face {
  font-family: "Alfa Slab One";
  src: url("/fonts/alfa-slab-one-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  --chile: #9c2b1b;
  --chile-deep: #7a1f13;
  --masa: #f7e9cc;
  --paper: #fff8ea;
  --comal: #2a1a14;
  --ink-soft: #5a4338;
  --nopal: #2f5d45;
  --maiz: #e9b44c;
  --line: #dcc9a3;
  /* Rules: one heavy weight for structure, hairlines for rows */
  --rule: 2px solid var(--comal);
  --line-strong: rgb(42 26 20 / 0.34);
  --line-light: rgb(255 248 234 / 0.28);
  --radius: 0.5rem;
  --radius-sm: 0.3125rem;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --display: "Alfa Slab One", Rockwell, "Roboto Slab", Georgia, serif;
  --body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: 1.25rem;
  /* Talavera-style tile, drawn in the brand colors */
  --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Crect width='56' height='56' fill='%23f7e9cc'/%3E%3Cpath d='M28 4 52 28 28 52 4 28Z' fill='%239c2b1b'/%3E%3Cpath d='M28 14 42 28 28 42 14 28Z' fill='%23e9b44c'/%3E%3Ccircle cx='28' cy='28' r='6' fill='%232f5d45'/%3E%3Ccircle cx='0' cy='0' r='11' fill='%232f5d45'/%3E%3Ccircle cx='56' cy='0' r='11' fill='%232f5d45'/%3E%3Ccircle cx='0' cy='56' r='11' fill='%232f5d45'/%3E%3Ccircle cx='56' cy='56' r='11' fill='%232f5d45'/%3E%3Cpath d='M0 0h56v56H0z' fill='none' stroke='%232a1a14' stroke-width='2'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* --header-h is the full height of the sticky nav (header row plus the phone chip bar).
   main.js measures it; this fallback is slightly generous so headings clear the nav without JS. */
:root { --header-h: 7.25rem; }
section[id], main[id] { scroll-margin-top: var(--header-h); }
html[lang="en"] .es, html[lang="es"] .en { display: none; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--comal);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0; }
h2 { font-size: clamp(2rem, 1.35rem + 3vw, 3.25rem); line-height: 1.04; letter-spacing: -0.012em; max-width: 20ch; text-wrap: balance; }
h3 { font-size: 1.375rem; line-height: 1.15; margin-bottom: 0.5rem; }
p { margin: 0 0 1rem; text-wrap: pretty; }
a { color: var(--chile); }
address { font-style: normal; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--maiz); outline-offset: 3px; box-shadow: 0 0 0 6px var(--comal); }

.wrap { max-width: 72rem; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip-link { position: absolute; left: -999px; top: 0; z-index: 30; background: var(--comal); color: var(--paper); padding: 0.75rem 1rem; }
.skip-link:focus { left: 0; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--masa);
  border-bottom: var(--rule);
}
/* Phones get a compact row (smaller brand, EN/ES toggle); the desktop sizes are restored in the media query below */
.header-row { display: flex; align-items: center; gap: 0.75rem; max-width: 72rem; margin: 0 auto; padding: 0.3rem var(--gutter); }
.lang-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nav-desktop { display: none; }

/* Phone section chips: one row that scrolls sideways */
/* The chip bar lives inside the sticky header, so the two move as one opaque block */
.chip-bar { background: var(--masa); border-top: 1px solid var(--line); }
.chip-list {
  display: flex; gap: 0.5rem; padding: 0.35rem var(--gutter);
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.chip-list::-webkit-scrollbar { display: none; }
.chip-list li { flex: 0 0 auto; }
.chip-list a {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 0.95rem;
  border: 2px solid var(--comal); border-radius: 999px;
  background: var(--paper); color: var(--comal);
  font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
}
.chip-list a[aria-current="true"] { background: var(--comal); color: var(--masa); }
.nav-list a[aria-current="true"] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.3em; text-decoration-color: var(--chile); }
.brand { display: inline-flex; align-items: center; min-height: 2.5rem; font-family: var(--display); font-size: 1.0625rem; letter-spacing: 0.005em; white-space: nowrap; color: var(--comal); text-decoration: none; margin-right: auto; }
.nav-list { display: flex; gap: 2rem; }
.nav-list a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--comal); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; }

.lang-toggle { display: flex; flex-shrink: 0; border: 2px solid var(--comal); border-radius: var(--radius); overflow: hidden; }
.lang-toggle button {
  font: inherit; font-size: 0.875rem; font-weight: 700;
  min-height: 2.5rem; min-width: 2.75rem; padding: 0 0.6rem;
  border: 0; background: transparent; color: var(--comal); cursor: pointer;
}
.lang-toggle button[aria-pressed="true"] { background: var(--comal); color: var(--masa); }

/* Buttons */
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: 0 1.5rem; gap: 0.35em;
  border: 2px solid transparent; border-radius: var(--radius);
  font: inherit; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; cursor: pointer;
}
.btn-solid { background: var(--chile); color: var(--paper); }
.btn-outline { border-color: var(--masa); color: var(--masa); }
.btn-light { background: var(--masa); color: var(--comal); }
.btn-outline-light { border-color: var(--masa); color: var(--masa); }
.btn-outline-dark { border-color: var(--comal); color: var(--comal); }

/* Hero */
/* A warm light falls from the photo's corner, so the red is not one flat field */
.hero {
  background: radial-gradient(ellipse 75% 85% at 88% 8%, rgb(233 180 76 / 0.16), transparent 68%) var(--chile);
  color: var(--masa); padding: 2.5rem 0 3.5rem;
}
.hero-grid { display: grid; gap: 2.75rem; }
.hero h1 { font-size: clamp(3rem, 1.2rem + 9.5vw, 6.75rem); line-height: 0.92; letter-spacing: -0.02em; color: var(--paper); text-wrap: balance; }
.hero-lede { font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.375rem); line-height: 1.45; max-width: 31rem; margin: 1.5rem 0 1.5rem; color: var(--paper); }
.open-status {
  --dot: var(--maiz); position: relative;
  display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; line-height: 1.3;
  padding: 0.45rem 0.85rem; background: var(--comal); color: var(--maiz); border-radius: var(--radius-sm); margin-bottom: 1.5rem;
}
.open-status::before, .open-status::after { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--dot); }
.open-status::before { flex: none; }
.open-status.is-open { --dot: #8fcf9f; }
.open-status.is-open::before { box-shadow: 0 0 0 4px rgb(143 207 159 / 0.22); }
/* The ring that pulses: a copy of the dot, laid over it and invisible until the motion block animates it */
.open-status::after { position: absolute; left: 0.85rem; top: 50%; margin-top: -0.25rem; opacity: 0; }
.hero .btn-solid, .order-primary .btn-solid { background: var(--maiz); color: var(--comal); }

/* The comal: a round griddle carrying today's special */
.comal {
  width: min(100%, 20rem); aspect-ratio: 1; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2.25rem; text-align: center;
  border-radius: 50%;
  background: var(--comal);
  box-shadow: 0 0 0 0.5rem var(--maiz), 0 0 0 0.75rem var(--comal);
}
.comal p { margin: 0; }
.hero-visual { position: relative; margin: 0; }
.hero-visual figcaption { position: absolute; left: 0.875rem; bottom: 0.875rem; padding: 0.3rem 0.7rem; background: var(--comal); color: var(--paper); font-size: 0.9375rem; font-weight: 700; line-height: 1.4; border-radius: var(--radius-sm); }
.hero-actions { display: grid; gap: 2.5rem; }
.hero-actions .comal { width: 13rem; padding: 1.5rem; margin: 0 auto; }
.hero-actions .comal-dish { font-size: 1.3125rem; }
.hero-photo {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border: 2px solid var(--comal); border-radius: var(--radius);
  box-shadow: 0.5rem 0.5rem 0 var(--maiz);
}

.comal-label { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.02em; color: var(--maiz); }
.comal-dish { font-family: var(--display); font-size: clamp(1.5rem, 6vw, 1.875rem); line-height: 1.1; color: var(--paper); margin: 0.5rem 0 !important; text-wrap: balance; }
.comal-note { color: var(--masa); font-variant-numeric: tabular-nums; }

.tile-band { height: 56px; background: var(--tile) center / 56px 56px repeat-x; border-top: var(--rule); border-bottom: var(--rule); }

/* Sections */
/* A little more room below than above, so each section settles before the next begins */
.section { padding: 3.75rem 0 4.5rem; }
/* Every section opens the same way: the heading, then one heavy rule */
.section-head { margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: var(--rule); }
.section-head.is-flush { margin-bottom: 0; }
.section-comal .section-head { border-bottom-color: var(--maiz); }
.section-nopal .section-head { border-bottom-color: var(--line-light); }
.section-masa { background: var(--masa); }
.section-nopal { background: var(--nopal); color: var(--paper); }
.section-comal { background: var(--comal); color: var(--paper); }

/* Instagram viewer: one official embed at a time, centered, at its natural height */
.ig-viewer { text-align: center; }
.ig-viewer h2 { max-width: none; margin-bottom: 1.5rem; }
.ig-controls { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1.25rem; }
.ig-controls[hidden] { display: none; }
.ig-arrow { width: 2.75rem; height: 2.75rem; border: 2px solid var(--comal); border-radius: 50%; background: var(--paper); color: var(--comal); font: inherit; font-size: 1.25rem; font-weight: 700; cursor: pointer; }
.ig-dots { display: flex; align-items: center; }
.ig-dot { display: grid; place-items: center; width: 2rem; height: 2.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.ig-dot::before { content: ""; width: 0.75rem; height: 0.75rem; border: 2px solid var(--comal); border-radius: 50%; background: transparent; }
.ig-dot[aria-current="true"]::before { background: var(--chile); border-color: var(--chile); }
.ig-consent { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1rem; }
.ig-consent[hidden] { display: none; }

/* The stage reaches into the page gutters so Instagram's 326px minimum fits on narrow phones */
.ig-stage {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 1rem;
  margin: 0 calc(0.5rem - var(--gutter)); text-align: left;
}
/* Space is held only while the first post loads, so the page below does not jump; after that the post
   sets the height. --ig-hold is the first post's rendered height at this card width (a 4:5 video plus
   Instagram's header and footer rows); if the first post changes, a small jump on load is the only cost. */
.ig-stage { --ig-w: min(100vw - 1rem, 22rem); --ig-hold: calc((var(--ig-w) - 4px) * 1.25 + 212px); }
.ig-stage.is-loading { min-height: var(--ig-hold); }
/* The card is the post's frame: it wraps the embed at whatever height Instagram gives it */
.ig-slide {
  position: relative; contain: layout paint; box-sizing: border-box; overflow: hidden;
  width: min(100%, 22rem);
  background: #fff; border: 2px solid var(--comal); border-radius: 0.5rem;
}
/* Once the script is running, only the current post shows. The others stay laid out but invisible,
   so Instagram can still measure them, and they are out of reach of keyboards and screen readers. */
.ig-stage.is-ready .ig-slide:not(.is-active) { position: absolute; top: 0; left: 50%; transform: translateX(-50%); visibility: hidden; pointer-events: none; }
/* Before Instagram's script runs (and if it never does), each post is a plain card with a link */
.ig-slide blockquote {
  display: flex; flex-direction: column; justify-content: center; gap: 0.75rem;
  min-height: 12rem; margin: 0 !important; padding: 1.5rem !important;
  background: var(--paper) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
.ig-stage.is-loading .ig-slide.is-active blockquote { min-height: calc(var(--ig-hold) - 4px); }
.ig-slide blockquote p { margin: 0; font-family: var(--display); font-size: 1.25rem; line-height: 1.2; }
.ig-slide blockquote a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; }
/* After it runs, the embed is an iframe: strip Instagram's own frame so the card is the only border */
.ig-slide iframe {
  display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important;
  margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}

/* Photos */
/* A mosaic: one large frame, one wide one, the rest square. Rows are sized to the column so small frames stay square. */
.gallery-grid { --gap: 0.625rem; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: calc((min(100vw, 72rem) - var(--gutter) * 2 - var(--gap)) / 2); grid-auto-flow: dense; gap: var(--gap); }
.gallery-grid li { overflow: hidden; border: 2px solid var(--maiz); border-radius: var(--radius-sm); background: #3a261d; }
.gallery-grid .g-big { grid-column: span 2; grid-row: span 2; }
.gallery-grid .g-wide { grid-column: span 2; }
.gallery-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Menu photos show the whole frame at its own aspect ratio: no crop, no letterbox */
.menu-photo { display: block; width: 100%; height: auto; border: 2px solid var(--comal); border-radius: var(--radius-sm); margin: 0.25rem 0 0.75rem; }
.section-nopal a:not(.btn) { color: var(--paper); }
.section-note { max-width: 26rem; margin: 0.9rem 0 0; color: var(--ink-soft); }
.fine-print { margin: 2rem 0 0; font-size: 0.9375rem; color: var(--ink-soft); max-width: 40rem; }

/* Signature dishes strip: closes the dark gallery field. At rest the four names sit centred and wrap;
   the motion block further down turns it into a single moving line. */
.marquee { overflow: hidden; background: var(--comal); color: var(--maiz); border-top: 1px solid var(--line-light); padding: 1.1rem var(--gutter); }
.marquee-track { display: flex; }
.marquee-group { flex: 1 1 auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 2.5rem; }
.marquee-group li { display: flex; align-items: center; font-family: var(--display); font-size: 1.25rem; line-height: 1.3; letter-spacing: 0.01em; white-space: nowrap; }
.marquee-group[aria-hidden], .marquee-group li[aria-hidden] { display: none; }

/* Dishes */
/* Name, dotted leader, price */
.dish-head { display: flex; align-items: baseline; gap: 0.6rem; }
.dish-head::before { content: ""; order: 1; flex: 1 1 1.25rem; min-width: 1.25rem; border-bottom: 2px dotted var(--line-strong); transform: translateY(-0.25em); }
.dish-name { font-weight: 700; }
.dish-price { order: 2; font-weight: 700; white-space: nowrap; color: var(--chile); font-variant-numeric: tabular-nums; }
.dish-desc { margin: 0.25rem 0 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.5; max-width: 34rem; }

.fav-list { display: grid; gap: 0; }
.fav-list .dish { padding: 1.2rem 0 1.3rem; border-bottom: 1px solid var(--line); }
.fav-list .dish-name, .special .dish-name { font-family: var(--display); font-weight: 400; font-size: 1.3125rem; line-height: 1.2; }

.menu-section { border-bottom: 1px solid var(--line-strong); }
.menu-section summary {
  display: flex; align-items: center; gap: 0.85rem;
  min-height: 3.75rem; padding: 0.5rem 0; cursor: pointer; list-style: none;
}
.menu-section summary::-webkit-details-marker { display: none; }
.summary-title { margin-right: auto; font-family: var(--display); font-size: 1.3125rem; line-height: 1.2; }
.summary-count { font-size: 0.9375rem; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* Plus that folds to a minus: the upright bar lies down when the section opens */
.summary-icon { position: relative; flex: none; width: 0.875rem; height: 0.875rem; color: var(--chile); }
.summary-icon::before, .summary-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 1px; background: currentColor; }
.summary-icon::after { transform: rotate(90deg); }
.menu-section[open] .summary-icon::after { transform: none; }
.dish-list { padding: 0 0 1.5rem; }
.dish-list .dish { padding: 0.75rem 0; border-top: 1px solid var(--line); }

/* Weekly specials: a real sequence, so an ordered list */
.special { display: grid; gap: 0.35rem; padding: 1.25rem 0 1.35rem; border-bottom: 1px solid var(--line); }
.special-day { margin: 0; font-weight: 700; letter-spacing: 0.02em; color: var(--nopal); }
/* Today's row is a masa band with a chile edge; the inset shadow draws the edge without moving the text */
.special.is-today { background: var(--masa); margin: 0 -1rem; padding-left: 1.375rem; padding-right: 1rem; border-radius: var(--radius-sm); border-bottom-color: transparent; box-shadow: inset 0.375rem 0 0 var(--chile); }

/* Visit */
.visit-grid { display: grid; gap: 3rem; }
.hours { width: 100%; max-width: 27rem; border-collapse: collapse; margin-bottom: 2rem; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: 0.7rem 0; border-bottom: 1px solid var(--line-light); text-align: left; font-weight: 400; }
.hours td { text-align: right; white-space: nowrap; }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 700; color: var(--maiz); background: var(--comal); }
.hours tr.is-today th { padding-left: 0.75rem; }
.hours tr.is-today td { padding-right: 0.75rem; }
.visit-address { font-size: 1.25rem; line-height: 1.45; margin-bottom: 1.75rem; }
.visit-hint { display: inline-block; margin-top: 0.35rem; font-size: 1rem; color: var(--masa); }
.map-frame {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem;
  min-height: 20rem; padding: 1.5rem; text-align: center; overflow: hidden;
  background: var(--tile) center / 56px 56px; border: 2px solid var(--comal); border-radius: var(--radius);
}
.map-frame p { background: var(--comal); color: var(--paper); margin: 0; padding: 0.85rem 1.1rem; border-radius: var(--radius-sm); max-width: 21rem; }
.map-frame.is-loaded { padding: 0; }
.map-frame iframe { width: 100%; height: 24rem; border: 0; display: block; }

/* Order */
/* Pickup goes straight to the restaurant, so it leads on the comal's dark; delivery sits beside it */
.order-grid { display: grid; gap: 1.25rem; }
.order-option { display: flex; flex-direction: column; align-items: flex-start; padding: 1.75rem 1.5rem 1.875rem; background: var(--masa); border: 2px solid var(--comal); border-radius: var(--radius); }
.order-option p { color: var(--ink-soft); max-width: 26rem; margin-bottom: 1.5rem; }
.order-option .btn { margin-top: auto; }
.order-primary { background: var(--comal); color: var(--paper); }
.order-primary h3 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); margin-bottom: 0.75rem; }
.order-primary p { color: var(--masa); }

/* Reviews */
.reviews-grid { display: grid; gap: 1.25rem; }
.review-card { display: flex; flex-direction: column; align-items: flex-start; padding: 1.75rem 1.5rem 1.875rem; background: var(--paper); border: 2px solid var(--comal); border-radius: var(--radius); }
.review-source { display: flex; align-items: center; gap: 0.5rem; min-height: 1.75rem; margin-bottom: 1rem; }
.yelp-mark { width: 1.75rem; height: 1.75rem; fill: #d32323; flex: none; }
.rating { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; }
.rating-value { font-family: var(--display); font-size: clamp(3.5rem, 2.6rem + 4vw, 5rem); line-height: 1; letter-spacing: -0.02em; color: var(--chile); font-variant-numeric: tabular-nums; }
.stars { font-size: 1.625rem; line-height: 1; letter-spacing: 0.06em; white-space: nowrap; color: transparent;
  background: linear-gradient(90deg, var(--maiz) calc(var(--rating) / 5 * 100%), var(--line) 0);
  -webkit-background-clip: text; background-clip: text; }
.stars::before { content: "\2605\2605\2605\2605\2605"; }
.rating-note { color: var(--ink-soft); margin: 0.75rem 0 1.5rem; max-width: 24rem; }
.review-card .btn { margin-top: auto; }

/* Footer */
.site-footer { background: var(--comal); color: var(--masa); padding: 3.25rem 0 7.25rem; font-size: 1rem; }
.site-footer p { margin: 0; }
.site-footer a { color: var(--masa); text-underline-offset: 0.25em; }
.footer-grid { display: grid; gap: 1.75rem; }
.site-footer .footer-name { font-family: var(--display); font-size: 1.375rem; line-height: 1.2; color: var(--paper); margin-bottom: 0.6rem; }
.footer-links { display: grid; gap: 0.25rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* Sticky call and order bar on phones */
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: 1fr 1fr; border-top: var(--rule); }
.sticky-bar a { display: flex; align-items: center; justify-content: center; min-height: 3.5rem; font-weight: 700; letter-spacing: 0.01em; text-decoration: none; }
.sticky-bar a:first-child { background: var(--maiz); color: var(--comal); }
.sticky-bar a:last-child { background: var(--chile); color: var(--paper); }

/* Plain pages */
.page { padding-top: 3.5rem; padding-bottom: 4rem; max-width: 44rem; }
.page h1 { font-size: clamp(2.25rem, 8vw, 3.25rem); letter-spacing: -0.012em; margin-bottom: 1.75rem; text-wrap: balance; }
.page h2 { font-size: 1.5rem; line-height: 1.2; letter-spacing: 0; margin: 2.25rem 0 0.75rem; max-width: none; }
.plain .site-footer { padding-bottom: 3.25rem; }

@media (min-width: 52rem) {
  :root { --header-h: 4.75rem; --gutter: 2.5rem; }
  .header-row { gap: 2rem; padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .brand { min-height: 2.75rem; font-size: 1.1875rem; }
  .lang-toggle button { min-height: 2.75rem; padding: 0 0.8rem; font-size: 0.9375rem; }
  .lang-full { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .lang-short { display: none; }
  .nav-desktop { display: block; }
  .chip-bar { display: none; }
  .hero { padding: 5.5rem 0 6.25rem; }
  .hero-grid { grid-template-columns: 1.1fr 1fr; align-items: center; column-gap: 4.5rem; }
  .hero-lede { margin-top: 1.75rem; }
  .hero-actions { grid-template-columns: 1fr auto; align-items: center; column-gap: 2rem; }
  .hero-actions .comal { margin: 0 0.75rem 0 0; }
  .section { padding: 6rem 0 6.75rem; }
  /* The note sits beside the heading, on its baseline */
  .section-head { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 3rem; margin-bottom: 2.75rem; padding-bottom: 1.5rem; }
  .section-note { margin: 0 0 0.3rem; }
  .gallery-grid { --gap: 1rem; grid-template-columns: repeat(4, 1fr); grid-auto-rows: calc((min(100vw, 72rem) - var(--gutter) * 2 - var(--gap) * 3) / 4); }
  .ig-stage { --ig-w: 26rem; }
  .ig-slide { width: 26rem; }
  .fav-list { grid-template-columns: 1fr 1fr; column-gap: 4.5rem; }
  .fav-list .dish { padding: 1.4rem 0 1.5rem; }
  .menu-sections { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4.5rem; align-items: start; }
  .special { grid-template-columns: 14rem 1fr; align-items: baseline; column-gap: 2rem; padding: 1.4rem 0 1.5rem; }
  .special.is-today { margin: 0 -1.5rem; padding-left: 1.875rem; padding-right: 1.5rem; }
  .visit-grid { grid-template-columns: 1fr 1fr; align-items: start; column-gap: 4.5rem; }
  .visit-grid .section-head { display: block; }
  .map-frame { min-height: 27rem; }
  .map-frame iframe { height: 27rem; }
  .order-grid { grid-template-columns: 1.3fr 1fr; gap: 1.5rem; }
  .order-option, .review-card { padding: 2.25rem 2.25rem 2.5rem; }
  .order-primary { padding: 2.75rem 2.75rem 3rem; }
  .reviews-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .footer-grid { grid-template-columns: 1.2fr 1.4fr 1fr; column-gap: 3rem; }
  .site-footer { padding: 4.25rem 0; }
  .sticky-bar { display: none; }
}

/* Motion. Colour changes are quick and always on. Anything that moves sits behind no-preference below. */
.btn, .lang-toggle button, .nav-list a, .chip-list a, .ig-arrow, .summary-title, .site-footer a {
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

/* Hover belongs to mice. On touch a tap would leave these states stuck. */
@media (hover: hover) and (pointer: fine) {
  .btn-solid:hover { background: var(--chile-deep); }
  .hero .btn-solid:hover, .order-primary .btn-solid:hover { background: var(--paper); }
  .btn-outline:hover, .btn-outline-light:hover { background: var(--masa); color: var(--comal); }
  .btn-light:hover { background: var(--maiz); }
  .btn-outline-dark:hover { background: var(--comal); color: var(--masa); }
  .nav-list a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.3em; text-decoration-color: var(--line-strong); }
  .nav-list a[aria-current="true"]:hover { text-decoration-color: var(--chile); }
  .lang-toggle button[aria-pressed="false"]:hover { background: var(--paper); }
  .ig-arrow:hover { background: var(--comal); color: var(--masa); }
  .menu-section summary:hover .summary-title { color: var(--chile); }
  .site-footer a:hover { color: var(--maiz); }
}

@media (prefers-reduced-motion: no-preference) {
  .btn { transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, transform 160ms var(--ease-out); }
  .btn:active { transform: scale(0.97); }
  .summary-icon::after { transition: transform 200ms var(--ease-out); }
  .gallery-photo { transition: transform 450ms var(--ease-out); }

  /* A menu section opened by tap or click eases in; main.js leaves keyboard opens instant */
  .menu-section.is-eased[open] > .dish-list, .menu-section.is-eased[open] > .menu-photo { animation: ease-open 220ms var(--ease-out); }

  /* The strip becomes one line that slides left by exactly one half, at a constant pace, and fades into the comal at both edges */
  .marquee { position: relative; padding-left: 0; padding-right: 0; }
  .marquee::before, .marquee::after { content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: 3.5rem; background: linear-gradient(90deg, var(--comal), transparent); pointer-events: none; }
  .marquee::after { left: auto; right: 0; transform: scaleX(-1); }
  .marquee-track { width: max-content; min-width: 200%; animation: marquee 44s linear infinite; }
  .marquee-group, .marquee-group[aria-hidden] { flex: 1 0 auto; display: flex; flex-wrap: nowrap; justify-content: space-around; gap: 0; }
  .marquee-group li[aria-hidden] { display: flex; }
  .marquee-group li::after { content: ""; flex: none; width: 0.375rem; height: 0.375rem; margin: 0 1.25rem; border-radius: 50%; background: var(--chile); }

  /* One soft ring off the status dot, then a rest, so it reads as a glint and not an alarm */
  .open-status::after { animation: badge-pulse 2.8s var(--ease-out) infinite; }

  @media (hover: hover) and (pointer: fine) {
    .gallery-grid li:hover .gallery-photo { transform: scale(1.035); }
    .marquee:hover .marquee-track { animation-play-state: paused; }
  }
}
@keyframes ease-open { from { opacity: 0; transform: translateY(-0.375rem); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes badge-pulse { 0% { opacity: 0.55; transform: scale(1); } 60%, 100% { opacity: 0; transform: scale(2.8); } }

/* Section transitions: each block settles into place over the first few rem of its entry into view.
   The scroll position drives it, so nothing waits on a timer, and a browser without scroll timelines
   simply shows the page. The hero, header and the Instagram viewer are never part of it. */
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .section:not(#instagram) .wrap > * { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% entry 10rem; }
  }
}
@keyframes settle { from { opacity: 0.2; transform: translateY(1.25rem); } }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }