/* ============================================================
   Mis Antojos: the site's own layout, on top of the kit's base.css.
   Concept: "¡Ojo!" The logo is a face drawn from the O-J-O in antOJOs.
   Built for a high-school crowd on phones: real food photos, loud blocks
   of the shop's own colors (yellow wall, chile red, black tray, OJO orange),
   3px ink outlines with hard shadows, round stickers for prices, and the
   craving wheel as the reason to stay. Few words.
   Contrast pairs used: ink on sun/lechuga/ojo/paper, white on chile,
   sun on ink. Never white on ojo, never small ink or sun text on chile.
   ============================================================ */

/* ---------- Global ---------- */
body { font-size: 17.5px; }
main { overflow-x: clip; } /* clip, not hidden, so sticky still works */
h1, h2, h3 { text-wrap: balance; }
section h2 { line-height: 1.02; }
.intro { font-size: 18.5px; color: var(--muted); max-width: 52ch; } /* not .sub: base.css uses that for nav dropdowns */

/* Focus: ink on light grounds, white on chile, sun on ink; the call bar keeps an inset ring */
:focus-visible, .item-img:focus-visible { outline-color: var(--ink); }
.ruleta :focus-visible { outline-color: #fff; }
.ruleta .pick :focus-visible { outline-color: var(--ink); }
.site-header :focus-visible, .visit-ma :focus-visible, .site-footer :focus-visible,
.lightbox :focus-visible, .ticker-ma :focus-visible, .deal-student :focus-visible { outline-color: var(--sun); }
.call-bar :focus-visible { outline-color: var(--ink); outline-offset: -6px; }

/* ---------- Buttons: 3px ink outline, hard shadow, pressed = pushed in ---------- */
.btn {
  min-height: 52px; padding: 0 24px; justify-content: center; text-align: center;
  font: 800 16px/1.1 var(--body); text-transform: none; letter-spacing: .01em;
  border: 3px solid var(--ink); border-radius: 999px; box-shadow: 4px 4px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, background-color .15s ease;
}
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); } }
.btn-chile { background: var(--chile); color: #fff; }
.btn-ink { background: var(--ink); color: var(--sun); box-shadow: 4px 4px 0 var(--chile); } /* an ink shadow on an ink button reads as a lopsided blob */
@media (hover: hover) and (pointer: fine) { .btn-ink:hover { box-shadow: 6px 6px 0 var(--chile); } }
.btn-sun { background: var(--sun); color: var(--ink); }
.btn-white { background: #fff; color: var(--ink); }
.btn-line { background: transparent; color: var(--ink); }
.btn-ink:hover { background: var(--ink); }
.btn-sun:hover { background: var(--sun); }
.btn-chile:hover { background: var(--chile); }
/* On ink sections the outline disappears, so the colored shadow does the work */
.visit-ma .btn-sun, .deal-student .btn-sun { box-shadow: 4px 4px 0 var(--chile); }
.btn-line-light { background: transparent; color: var(--surface); border-color: var(--surface); box-shadow: 4px 4px 0 var(--sun); }
@media (hover: hover) and (pointer: fine) {
  .visit-ma .btn-sun:hover, .deal-student .btn-sun:hover { box-shadow: 6px 6px 0 var(--chile); }
  .btn-line-light:hover { box-shadow: 6px 6px 0 var(--sun); color: var(--sun); border-color: var(--sun); }
}
.actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Stickers: round, white ring, ink edge (box-shadows, no clip-path or filters: iOS Safari) ---------- */
.stk {
  position: absolute; z-index: 2; display: grid; place-content: center; text-align: center; border-radius: 50%;
  width: var(--stk, 96px); height: var(--stk, 96px); line-height: 1; text-decoration: none; rotate: var(--tilt, -4deg);
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--ink), 0 5px 0 6px rgba(29, 24, 20, .25);
}
/* Linked stickers (the hero's): the default ring would land on the sticker's own white/ink rings and vanish, so it
   sits outside them with a white gap (also clear on the dark parts of the desktop photo) */
.stk:focus-visible { outline-offset: 8px; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--ink), 0 0 0 8px #fff, 0 5px 0 8px rgba(29, 24, 20, .25); }
.stk b { font: 400 var(--stk-num, 26px)/1 var(--display); letter-spacing: .005em; font-variant-numeric: tabular-nums; }
.stk small { display: block; font: 800 12.5px/1.15 var(--body); margin-top: 3px; padding: 0 8px; }
.stk-sun { background: var(--sun); color: var(--ink); }
.stk-chile { background: var(--chile); color: #fff; }
.stk-ink { background: var(--ink); color: var(--sun); }
.stk-ink small { color: var(--surface); }
.slap { animation: slap .22s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes slap { from { scale: 1.3; opacity: 0; } to { scale: 1; opacity: 1; } }

/* Pills */
.pill { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--ink); border-radius: 999px; font: 800 14px/1 var(--body); padding: 6px 12px; white-space: nowrap; }
.pill-lechuga { background: var(--lechuga); color: var(--ink); }
.pill-ink { background: var(--ink); color: var(--sun); }

/* ---------- Header ---------- */
.site-header { border-bottom: 0; }
.brand.has-logo { gap: 10px; }
.brand-logo { height: 46px; width: 46px; background: var(--surface); border-radius: 50%; padding: 3px; }
.brand-name { color: var(--ojo); font-size: 27px; }
.brand-name em { color: inherit; }
.brand-sub { text-transform: none; letter-spacing: .02em; font-size: 12.5px; margin-top: 4px; }
.nav a { text-transform: none; letter-spacing: 0; font-size: 16px; font-weight: 600; }
.nav a[aria-current="page"] { color: var(--sun); border-bottom-color: var(--sun); }
.nav .btn { min-height: 44px; font-size: 15px; padding: 0 20px; border-color: var(--sun); box-shadow: none; }
.nav .btn:hover { color: var(--on-accent); } /* base.css's .nav a:hover (0,2,1) would turn it cream on light yellow, 1.3:1 */
/* Desktop and iPad-landscape nav links: 39.6px tall in the kit; 3px more each side makes 45.6px */
@media (min-width: 821px) { .nav > a:not(.btn) { padding-block: 9px; } }
/* Footer links: 44px rows (the kit's lists are 24px lines at a 32px pitch); the hours list keeps its spacing */
.site-footer li > a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.site-footer ul:not([data-hours-summary]) { gap: 0; }
@media (max-width: 440px) { .site-header .brand-name { font-size: 22px; } .brand-logo { height: 40px; width: 40px; } }
.foot-brand .brand-logo { height: 64px; width: 64px; }
.site-footer .foot-h { font: 19px/1.15 var(--display); letter-spacing: 0; text-transform: none; color: var(--sun); } /* plain titles, not uppercase labels */
/* Small print (SITE.finePrint): the in-store vs DoorDash price note */
.foot-fine { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--on-dark) 14%, transparent);
  font-size: 12.5px; line-height: 1.55; color: var(--on-dark-muted); max-width: 90ch; }

/* Status pill: on light grounds; the open dot pulses twice, then rests (no endless motion) */
.hero-ma .status, .page-hero .status { background: color-mix(in srgb, var(--ink) 7%, transparent); border: 2px solid var(--ink); color: var(--ink); font-weight: 700; }
.hero-ma .status .dot, .page-hero .status .dot { background: #7c746c; }
.hero-ma .status.is-open .dot, .page-hero .status.is-open .dot { background: #2f9a43; box-shadow: 0 0 0 4px rgba(47,154,67,.2); }
.status.is-open .dot { animation-iteration-count: 2; }

/* "Peek" labels: the logo's two eyes + a plain sentence (stands in for uppercase eyebrows).
   SVG data URIs, not stacked radial-gradients: iOS Safari filled those rings in solid. */
.peek { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15.5px; color: var(--accent-2); margin: 0 0 14px; }
.peek-eyes { flex: none; width: 34px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 20'%3E%3Cg fill='none' stroke='%23e58a2a' stroke-width='2.2'%3E%3Cellipse cx='8.5' cy='10' rx='5.6' ry='8' transform='rotate(18 8.5 10)'/%3E%3Cellipse cx='25.5' cy='10' rx='5.6' ry='8' transform='rotate(18 25.5 10)'/%3E%3C/g%3E%3Cg fill='%231d1814'%3E%3Ccircle cx='10.6' cy='6.6' r='2.5'/%3E%3Ccircle cx='27.6' cy='6.6' r='2.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
.peek-light { color: #fff; }
.peek-light .peek-eyes { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 20'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2.2'%3E%3Cellipse cx='8.5' cy='10' rx='5.6' ry='8' transform='rotate(18 8.5 10)'/%3E%3Cellipse cx='25.5' cy='10' rx='5.6' ry='8' transform='rotate(18 25.5 10)'/%3E%3C/g%3E%3Cg fill='%231d1814'%3E%3Ccircle cx='10.6' cy='6.6' r='2.5'/%3E%3Ccircle cx='27.6' cy='6.6' r='2.5'/%3E%3C/g%3E%3C/svg%3E"); }

/* Papel picado garland between sections: cut-paper flags in the shop's colours with treat motifs (flower, ice cream
   cone, sun-star, mangonada cup). img/papel-picado.svg is generated by _build/papel-picado.mjs; change that, not the SVG.
   It hangs on yellow (the hero, the order band, the inner-page heroes) or, with .picado-paper, on the tortas band. */
.picado { height: clamp(74px, 8vw, 104px); background: var(--sun) url("../img/papel-picado.svg") 50% 0 / auto calc(100% - 10px) repeat-x; }
.picado-paper { background-color: var(--surface); }
.picado + section { padding-top: clamp(24px, 4vw, 56px); } /* the garland already does the separating */

/* The OJO tile: stands in for a dish photo that doesn't exist yet (sun or paper, never orange) */
.ojo-tile { position: absolute; inset: 0; display: grid; place-items: center; background: var(--sun); }
.ojo-tile.alt { background: var(--surface-2); }
.ojo-tile .ojo { width: 58%; height: 58%; }
.img-failed { background: var(--sun) url("../img/ojo.svg") center / 50% no-repeat; }
.img-failed img { visibility: hidden; }

/* ---------- 1 · Hero ---------- */
.hero-ma { background: var(--home-wall); color: var(--ink); padding: 0; position: relative; isolation: isolate; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(28px, 5vw, 76px) 0 clamp(52px, 6vw, 92px); }
.hero-status { margin: 0 0 18px; }
.ht { display: grid; gap: .1em; margin: 0; container-type: inline-size; }
.ht > span { display: block; }
/* Brand first, sized to its column so the line never breaks; then what, then where (smaller) */
.ht-brand { font-size: clamp(44px, 18cqi, 150px); line-height: .9; letter-spacing: .005em; color: var(--ink); white-space: nowrap; } /* Lilita "Mis Antojos" is 5.19em wide (+ the outline) */
/* Sign-painter lettering in the cup's colours: blue letters (the wordmark on the shop's cups) in an even black
   outline, and the o's drawn like the cup logo's OJO eyes: orange, white inside, dark pupil. A stroked copy of the
   name sits under the real letters (a stroke runs both ways from the edge; the letters on top hide the inner half), so
   one letter's outline never paints over its neighbour. Kerning is off because the eye spans break it in the real
   text; the copy must match it exactly. Keep the pseudo text in step with the headline in index.html. */
.ht-brand { --o: max(3px, .07em); font-kerning: none; padding-inline: var(--o); color: var(--azul); }
.ht-brand > [aria-hidden] { position: relative; display: inline-block; isolation: isolate; }
.ht-brand > [aria-hidden]::before { content: "Mis Antojos"; position: absolute; left: 0; top: 0; z-index: -2;
  color: var(--ink); -webkit-text-stroke: calc(2 * var(--o)) var(--ink); }
.ht-brand .eye { color: var(--ojo); }
/* The o's holes (.11em wide, measured) would fill with outline, so a white patch under the letter keeps them open,
   white like the eyes on the cup */
.ht-brand .eye::before { content: ""; position: absolute; z-index: -1; left: .157em; width: .2em; top: .41em; height: .28em; border-radius: 50%; background: #fff; }
.ht-what { font-size: clamp(25px, 6.6cqi, 46px); line-height: 1.04; margin-top: .16em; }
.ht-where { font-family: var(--body); font-weight: 700; font-size: clamp(17px, 3.3cqi, 22px); line-height: 1.3; color: color-mix(in srgb, var(--ink) 80%, transparent); margin-top: .45em; }
.cue { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 16px 0 24px; font: 700 15.5px/1.35 var(--body); color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cue:hover { text-decoration-thickness: 3px; }
.cue-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--chile); border: 2px solid var(--ink); }
.hero-actions .btn { font-size: 17px; }
.hero-small { margin: 20px 0 0; font-weight: 600; font-size: 15.5px; color: color-mix(in srgb, var(--ink) 82%, transparent); }
.hero-small a { color: var(--ink); font-weight: 800; text-underline-offset: 3px; }

/* The headline's o's are eyes, like the logo. One glance and one blink as the page loads (done within 5 s), then rest. */
.eye { position: relative; display: inline-block; }
.eye > i {
  position: absolute; left: 50%; top: 56%; width: .12em; height: .165em; margin: -.0825em 0 0 -.06em;
  background: var(--ink); border-radius: 50%; opacity: 0; transition: opacity .3s; translate: .025em -.03em;
}
.fonts-in .eye > i { opacity: 1; } /* shown once Lilita One has loaded, so the pupils never land in a fallback font's counter */
.eye > i { animation: glance 4.4s ease-in-out .4s 1, blink 4.4s step-end .4s 1; }
@keyframes glance { 0%, 34% { translate: .025em -.03em; } 40%, 58% { translate: -.03em -.015em; } 64%, 100% { translate: .025em -.03em; } }
@keyframes blink { 0%, 100% { scale: 1 1; } 96% { scale: 1 .12; } 98% { scale: 1 1; } }

/* The photo in a cut-paper frame (chile paper with small cut flowers, img/picado-edge.svg), with two stickers */
.boat { margin: 0; justify-self: center; width: 100%; max-width: 600px; position: relative; }
.boat-frame { padding: 12px; border: 3px solid var(--ink); border-radius: 20px; rotate: -1.5deg; box-shadow: 8px 8px 0 var(--ink);
  background: #fff url("../img/picado-edge.svg") -6px -6px / 24px 24px; } /* tile offset by half the padding: a row of cut flowers runs around the frame */
.boat-frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 52%; border-radius: 10px; border: 3px solid var(--ink); }
.boat figcaption { margin-top: 20px; font-size: 14px; font-weight: 600; color: color-mix(in srgb, var(--ink) 75%, transparent); text-align: center; }
.hero-stk-google { --stk: 120px; --stk-num: 40px; --tilt: 7deg; top: -18px; right: -18px; }
.hero-stk-google small { font-size: 12.5px; }
.hero-stk-under { --stk: 132px; --stk-num: 48px; --tilt: -8deg; bottom: 22px; left: -18px; }
.hero-stk-google, .hero-stk-under { animation: slap .18s cubic-bezier(.3, 1.4, .5, 1) .3s both; }
.hero-stk-under { animation-delay: .42s; }
/* Phones: the food first (the name right under it is still the biggest text), then the buttons, then the details */
@media (max-width: 900px) {
  .hero-grid { display: flex; flex-direction: column; gap: 22px; padding: 18px 0 44px; }
  .boat { order: -1; max-width: 620px; align-self: center; }
  .boat-frame { padding: 8px; rotate: -1deg; box-shadow: 6px 6px 0 var(--ink); border-radius: 16px; background-size: 16px 16px; background-position: -4px -4px; }
  .boat-frame img { aspect-ratio: 16 / 10; border-radius: 9px; }
  .boat figcaption { display: none; }
  .hero-copy { display: flex; flex-direction: column; }
  .hero-actions { order: 3; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 18px; }
  .cue { order: 4; margin: 18px 0 0; }
  .hero-status { order: 5; margin: 14px 0 0; }
  .hero-small { order: 6; margin-top: 12px; }
  .hero-stk-google { --stk: 86px; --stk-num: 28px; top: -12px; right: -4px; }
  .hero-stk-google small { font-size: 10.5px; padding: 0 6px; }
  .hero-stk-under { --stk: 92px; --stk-num: 34px; left: -4px; bottom: -14px; }
  .hero-stk-under small { font-size: 11px; }
}
/* Small phones: a shorter photo, so the name and the Order button come up sooner */
@media (max-width: 520px) { .boat-frame img { aspect-ratio: 2 / 1; } }
/* Desktop: the food fills the first screen edge to edge; the name and buttons sit on a yellow "sign" card over the
   empty wall at top-left (the spread's dishes run along the middle and bottom of the photo), stickers bottom-right. */
@media (min-width: 901px) {
  .hero-ma { min-height: min(calc(100svh - var(--header-h)), 900px); }
  .hero-grid { position: static; display: flex; align-items: flex-start; min-height: inherit; padding: clamp(24px, 3vw, 44px) 0 40px; }
  .boat { position: absolute; inset: 0; z-index: 0; width: auto; max-width: none; margin: 0; }
  .boat-frame { height: 100%; rotate: 0deg; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .boat-frame img { width: 100%; height: 100%; aspect-ratio: auto; border: 0; border-radius: 0; object-position: 62% 62%; }
  .boat figcaption { display: none; }
  .hero-copy { position: relative; z-index: 2; width: min(500px, 100%); background: var(--home-wall); border: 3px solid var(--ink);
    border-radius: 22px; box-shadow: 10px 10px 0 var(--ink); padding: 24px 28px 22px; }
  .hero-status { margin: 0 0 14px; }
  .ht-what { font-size: clamp(24px, 6.2cqi, 32px); }
  .cue { margin: 14px 0 0; font-size: 14.5px; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
  .hero-actions .btn { min-height: 56px; font-size: 16.5px; }
  .hero-small { margin: 14px 0 0; font-size: 14.5px; }
  .hero-stk-google, .hero-stk-under { top: auto; left: auto; bottom: clamp(28px, 4vw, 52px); }
  .hero-stk-google { --stk: 132px; --stk-num: 44px; right: max(28px, calc(50vw - 590px)); }
  .hero-stk-google small { font-size: 13px; }
  .hero-stk-under { --stk: 140px; --stk-num: 52px; --tilt: -7deg; right: calc(max(28px, 50vw - 590px) + 158px); }
}

/* ---------- 2 · Under-$10 ticker ---------- */
.ticker-ma { background: var(--ink); color: var(--surface); display: flex; flex-wrap: wrap; align-items: stretch; position: relative; }
.tk-tab { flex: none; display: flex; align-items: center; padding: 0 16px; background: var(--sun); color: var(--ink); font: 20px var(--display); border-right: 3px solid var(--ink); }
.tk-window { flex: 1 1 0; min-width: 0; overflow: hidden; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.tk-track { display: flex; width: max-content; animation: tk var(--tk-dur, 60s) linear infinite; }
.tk-run { display: flex; align-items: center; flex: none; }
.tk-item { font: 24px/1 var(--display); white-space: nowrap; padding: 18px 0; }
.tk-item b { font-weight: 400; color: var(--sun); }
.tk-sep { flex: none; width: 28px; height: 16px; margin: 0 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 20'%3E%3Cg fill='none' stroke='%23f9cc2b' stroke-width='2.2'%3E%3Cellipse cx='8.5' cy='10' rx='5.6' ry='8' transform='rotate(18 8.5 10)'/%3E%3Cellipse cx='25.5' cy='10' rx='5.6' ry='8' transform='rotate(18 25.5 10)'/%3E%3C/g%3E%3Cg fill='%23fff8ea'%3E%3Ccircle cx='10.6' cy='6.6' r='2.5'/%3E%3Ccircle cx='27.6' cy='6.6' r='2.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes tk { to { transform: translateX(-50%); } }
/* No :focus-within pause: Chrome/Android focus the button on click, so Play would leave it frozen while saying "Pause" */
.ticker-ma.is-paused .tk-track, .ticker-ma.is-off .tk-track { animation-play-state: paused; }
@media (hover: hover) { .ticker-ma:hover .tk-track { animation-play-state: paused; } }
.tk-pause { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px 0 10px; min-height: 60px; background: none; border: 0; color: var(--surface); font: 800 14px var(--body); cursor: pointer; }
.tk-pause-icon { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--sun); position: relative; }
.tk-pause-icon::before, .tk-pause-icon::after { content: ""; position: absolute; top: 9px; width: 4px; height: 12px; background: var(--sun); border-radius: 1px; }
.tk-pause-icon::before { left: 10px; } .tk-pause-icon::after { right: 10px; }
.ticker-ma.is-paused .tk-pause-icon::before { left: 12px; top: 8px; width: 0; height: 0; background: none; border-left: 11px solid var(--sun); border-block: 7px solid transparent; border-radius: 0; }
.ticker-ma.is-paused .tk-pause-icon::after { display: none; }
.tk-all { flex: none; display: flex; align-items: center; padding: 0 18px; color: var(--sun); font-weight: 800; text-underline-offset: 4px; text-decoration-thickness: 2px; border-left: 2px solid color-mix(in srgb, var(--surface) 20%, transparent); }
.ticker-ma.is-static .tk-window { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x proximity; }
.ticker-ma.is-static .tk-track { animation: none; }
@media (max-width: 720px) {
  .tk-tab { font-size: 17px; padding: 0 12px; }
  .tk-item { font-size: 20px; padding: 15px 0; }
  .tk-pause { padding: 0 8px; min-height: 52px; } .tk-pause-text { display: none; }
  .tk-all { flex-basis: 100%; justify-content: center; min-height: 44px; border-left: 0; border-top: 2px solid color-mix(in srgb, var(--surface) 15%, transparent); }
}

/* ---------- 3 · The craving wheel (chile, scalloped) ---------- */
.ruleta { background: var(--chile); color: #fff; position: relative; }
.ruleta::before, .ruleta::after { content: ""; position: absolute; left: 0; right: 0; height: 14px; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 50% 0, var(--scallop) 13px, transparent 13.5px) 0 0 / 28px 14px repeat-x; }
.ruleta::before { --scallop: var(--ink); top: 0; }
.ruleta::after { --scallop: var(--chile); bottom: -14px; }
/* The wheel sits in DOM order between the intro and the controls (where phones and screen readers meet it); on desktop
   it moves to its own column beside the copy */
.ruleta-grid { display: block; }
.ruleta-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(36px, 6vw, 80px); align-content: start; }
.ruleta-copy > * { grid-column: 1; }
.ruleta-copy > .wheel { grid-column: 2; grid-row: 1 / span 6; align-self: center; }
.ruleta h2, .under h2, .liked h2, .tortas h2, .visit-ma h2, .since h2 { font-size: clamp(36px, 5vw, 60px); margin-bottom: 14px; }
.ruleta h2 { color: #fff; }
.ruleta .intro { color: var(--surface); }
.ruleta-controls { margin: 22px 0 16px; }

/* Under $10 switch */
.switch { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 4px 4px 0; background: none; border: 0; color: #fff; cursor: pointer; text-align: left; font: 800 17px/1.1 var(--body); }
.switch small { display: block; font: 600 13.5px/1.2 var(--body); color: var(--surface); }
.switch-track { flex: none; width: 56px; height: 32px; border-radius: 999px; background: var(--surface); border: 3px solid var(--ink); position: relative; transition: background-color .15s; }
.switch-thumb { position: absolute; top: 2px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); transition: translate .15s; }
.switch[aria-checked="true"] .switch-track { background: var(--lechuga); }
.switch[aria-checked="true"] .switch-thumb { translate: 22px 0; }

/* Mood buttons */
.spin-for { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 26px; }
.spin-for button {
  min-height: 52px; font: 800 16px/1.1 var(--body); color: var(--ink); text-align: left; cursor: pointer;
  padding: 10px 16px; border-radius: 14px; border: 3px solid var(--ink); background: #fff; box-shadow: 4px 4px 0 var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.spin-for button small { display: block; font-weight: 600; font-size: 13px; color: var(--muted); margin-top: 3px; }
.spin-for button:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.spin-for button[aria-pressed="true"] { background: var(--ink); color: var(--sun); }
.spin-for button[aria-pressed="true"] small { color: var(--surface); }
.spin-for .spin-any { background: var(--sun); }
.spin-for .spin-any small { color: var(--ink); } /* --muted on yellow is under 4.5:1 */
.is-spinning [data-spin], .is-spinning .wheel-hub, .is-spinning .switch, .is-spinning .pick-share, .is-spinning .pick-again { cursor: progress; }
/* Taps: no grey iOS flash on top of the buttons' own pressed state */
.btn, .spin-for button, .wheel-hub, .u-card a, .switch, .chip { -webkit-tap-highlight-color: transparent; }

/* The result card */
.pick { position: relative; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 18px; padding: 14px; box-shadow: 8px 8px 0 var(--ink);
  display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: 18px; align-items: center; transition: box-shadow .3s; }
.pick.is-picked { box-shadow: 8px 8px 0 var(--sun); }
.pick p { margin: 0; }
.pick-photo { position: relative; aspect-ratio: 1; border-radius: 14px; border: 3px solid var(--ink); }
.pick-photo img, .pick-photo .ojo-tile { border-radius: 11px; overflow: hidden; }
.pick-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; scale: 1.04; transition: opacity .45s ease, scale .6s ease; }
.pick-photo img.is-in { opacity: 1; scale: 1; }
.pick-photo:not(.has-img) img { display: none; }
.pick-photo.has-img .ojo-tile { display: none; }
.is-spinning .pick-photo img { opacity: .25; filter: saturate(.4); }
.pick-stk { --stk: 72px; --stk-num: 22px; --tilt: 8deg; top: -14px; right: -14px; }
.pick-stk small:empty { display: none; }
.pick-body { min-width: 0; padding: 4px 4px 4px 0; }
.pick-label { font-size: 14px; font-weight: 800; color: var(--accent-2); }
.pick-name { font: clamp(26px, 3vw, 34px)/1.05 var(--display); margin: 4px 0 6px; }
.pick-desc { color: var(--muted); font-size: 15px; }
.pick-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px !important; }
.pick-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.pick-actions .btn { min-height: 48px; font-size: 15.5px; padding: 0 18px; }
.share-glyph { width: 16px; height: 18px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 18' fill='none' stroke='%231d1814' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 11V1.5M4.5 5 8 1.5 11.5 5M3 8H2v8.5h12V8h-1'/%3E%3C/svg%3E") center / contain no-repeat; }
.pick-more { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 10px !important; }
.pick-again { min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; font: 800 15.5px var(--body); color: var(--accent-2); text-decoration: underline; text-underline-offset: 4px; }
.pick-menu { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; font-size: 15.5px; color: var(--accent-2); text-underline-offset: 4px; }
.pick-copy label { display: grid; gap: 6px; font-weight: 800; font-size: 14px; margin-top: 10px; }
.pick-copy input { font: 16px var(--body); padding: 10px 12px; border: 2px solid var(--ink); border-radius: 10px; width: 100%; } /* 16px: iOS zooms into smaller inputs */
.is-spinning .pick-name, .is-spinning .pick-desc, .is-spinning .pick-actions, .is-spinning .pick-pills, .is-spinning .pick-more { opacity: .35; }
.ruleta .wheel-hub:focus-visible { outline: 4px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 9px var(--ink); }
@media (max-width: 520px) { .pick { grid-template-columns: minmax(0, 1fr); } .pick-photo { aspect-ratio: 16 / 9; } .pick-body { padding: 0 4px 4px; } .pick-actions .btn { flex: 1 1 100%; } }

/* The wheel */
.wheel { position: relative; width: min(100%, 500px); aspect-ratio: 1; justify-self: center; }
.wheel::before { content: ""; position: absolute; inset: 1.5%; border-radius: 50%; box-shadow: 0 0 0 0 transparent, 10px 12px 0 rgba(29, 24, 20, .35); } /* still shadow; a filter on the disc would turn with it */
.wheel-disc { position: relative; width: 100%; height: 100%; display: block; transition: transform 3.6s cubic-bezier(.12, .7, .14, 1); will-change: transform; }
.wheel-disc .disc-base { fill: var(--surface); }
.wheel-disc .slice path { stroke: var(--ink); stroke-width: 2; transition: opacity .3s; }
.wheel-disc .slice text { font: 19px var(--display); fill: var(--ink); letter-spacing: .01em; transition: opacity .3s; }
.wheel-disc .slice.is-dim path, .wheel-disc .slice.is-dim text, .wheel-disc .slice.is-over path, .wheel-disc .slice.is-over text { opacity: .3; }
.wheel-disc .slice.is-on path { stroke: #fff; stroke-width: 4; }
.wheel-disc .rim { fill: none; stroke: var(--ink); stroke-width: 8; }
.wheel-disc .peg { fill: var(--surface); stroke: var(--ink); stroke-width: 1.5; }
/* Pointer: white tab, ink outline (filter on the wrapper, shape on the pseudo-elements: one element can't have both) */
.wheel-pointer { position: absolute; left: 50%; top: -26px; z-index: 3; width: 36px; height: 44px; translate: -50% 0; transform-origin: 50% 0;
  filter: drop-shadow(0 3px 0 var(--ink)); }
.wheel-pointer::before, .wheel-pointer::after { content: ""; position: absolute; clip-path: polygon(0 0, 100% 0, 100% 52%, 50% 100%, 0 52%); }
.wheel-pointer::before { inset: 0; background: var(--ink); }
.wheel-pointer::after { inset: 4px 4px 7px; background: #fff; }
/* Hub = the Spin button */
.wheel-hub { position: absolute; left: 50%; top: 50%; z-index: 2; width: 28%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: var(--surface); border: 6px solid var(--ink); display: grid; place-items: center; align-content: center; cursor: pointer; padding: 0;
  box-shadow: 0 6px 0 rgba(29,24,20,.3); transition: scale .12s; }
.wheel-hub:active { scale: .94; }
.hub-face { width: 64%; aspect-ratio: 1; display: block; }
.hub-face .ojo { width: 100%; height: 100%; overflow: visible; }
.hub-label { font: 15px/1 var(--display); color: var(--ink); margin-top: -2px; }
.wheel-hub .pupil { transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.wheel-hub.look-up .pupil { transform: translate(1px, -6px); }
.is-spinning .wheel-hub .pupil { transform: translate(-3px, 4px); }
/* Landing burst: 12 small squares from the pointer */
.burst { position: absolute; left: 50%; top: 0; z-index: 4; pointer-events: none; }
.burst i { position: absolute; width: 10px; height: 10px; background: var(--c); border: 2px solid var(--ink); border-radius: 2px;
  animation: burst .7s cubic-bezier(.2, .7, .3, 1) forwards; rotate: var(--a); }
@keyframes burst { from { transform: translateY(0) scale(1); opacity: 1; } to { transform: translateY(-70px) scale(.4); opacity: 0; } }

@media (max-width: 900px) {
  .ruleta { padding: 60px 0 76px; }
  .ruleta-copy { display: block; }
  .wheel { width: min(86vw, 380px); margin: 40px auto 26px; }
  .ruleta-controls { margin: 0 0 14px; }
  .spin-for { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
  .spin-for .spin-any { grid-column: 1 / -1; }
  .ruleta::before, .ruleta::after { background-size: 20px 14px; }
}

/* ---------- 4 · The $10 board (the yellow wall) ---------- */
.under { background: var(--home-wall); color: var(--ink); padding-top: 120px; }
/* Headings in the cup blue with a white outline (the user's call, 2026-10-05): blue alone on yellow is 2.5:1; inside the
   white outline the letters read blue on white, 3.8:1 (large text). White against yellow is faint, so the band is a
   little thicker than the hero's. One text run per line, so paint-order (stroke under fill) is enough here; the hero
   needs its stroked copy only because the eye spans split the run. */
.under h2 { color: var(--azul); -webkit-text-stroke: calc(2 * max(3px, .065em)) #fff; paint-order: stroke fill; }
.under .intro { color: color-mix(in srgb, var(--ink) 82%, transparent); }
.under-head { margin-bottom: 34px; }
.u-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 24px; }
.u-card a { display: flex; flex-direction: column; gap: 6px; height: 100%; background: var(--surface); color: var(--ink); text-decoration: none;
  border: 3px solid var(--ink); border-radius: 18px; padding: 10px; box-shadow: 6px 6px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
@media (hover: hover) and (pointer: fine) { .u-card a:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); } }
.u-card a:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--ink); }
.u-photo { position: relative; display: block; aspect-ratio: 1; margin-bottom: 6px; }
.u-img { position: absolute; inset: 0; overflow: hidden; border: 3px solid var(--ink); border-radius: 14px; }
.u-img img { width: 100%; height: 100%; object-fit: cover; }
.u-stk { --stk: 72px; --stk-num: 21px; top: -12px; right: -12px; }
.u-stk small { font-size: 11.5px; margin: 1px 0; }
.u-name { font: 22px/1.05 var(--display); }
.u-desc { font-size: 15px; line-height: 1.35; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.u-card .pill { align-self: flex-start; font-size: 12.5px; }
.u-order { margin-top: auto; display: block; text-align: center; background: var(--chile); color: #fff; border: 2px solid var(--ink); border-radius: 999px; font: 800 15px/40px var(--body); }
.u-more { display: none; width: 100%; margin-top: 22px; }
/* Under-$10 items with no photo (mostly sold only in the shop): a ticket-style list under the cards */
.u-shop { margin-top: 34px; padding: 18px 22px 8px; background: var(--surface); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink); }
.u-shop h3 { font: 24px/1.1 var(--display); margin: 0 0 6px; }
.u-shop ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.u-shop li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 2px dashed var(--line); }
.ul-name { font: 19px/1.15 var(--display); }
.ul-price { font-weight: 800; color: var(--chile); white-space: nowrap; font-variant-numeric: tabular-nums; } /* 4.9:1 on cream */
/* No register price: a quiet note where the price would be */
.mm-price.mm-ask, .item-price.item-ask, .mb-price.mb-ask { color: var(--muted); font-weight: 700; font-size: 14px; white-space: nowrap; }
.ten-line { position: relative; border-top: 3px dashed var(--ink); margin: 70px 0 44px; }
.under .combos-h { font-size: clamp(30px, 4vw, 44px); margin: 0 0 26px; }
.ten-tag { position: absolute; left: 0; top: -24px; background: var(--surface); color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; font: 24px/1 var(--display); padding: 8px 16px; }
.ten-ojo { position: absolute; right: 12px; bottom: 0; width: 120px; height: 72px; overflow: hidden; }
.ten-ojo .ojo { width: 120px; height: 120px; display: block; }
.deals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.deal { position: relative; border: 3px solid var(--ink); border-radius: 18px; padding: 26px 26px 28px; box-shadow: 6px 6px 0 var(--ink); }
.deal h3 { font: clamp(26px, 3vw, 34px)/1.05 var(--display); margin: 0 0 10px; padding-right: 70px; }
.deal p { margin: 0 0 12px; }
.deal .btn { margin-top: 8px; }
.deal-combo { background: var(--chile); color: #fff; }
.deal-combo .deal-math { font-weight: 700; }
.deal-stk { --stk: 84px; --stk-num: 24px; --tilt: 6deg; top: -16px; right: -12px; }
.deal-student { background: var(--ink); color: var(--surface); }
.deal-student h3 { color: var(--sun); }
.deal-list { list-style: none; margin: 0 0 14px; padding: 0; }
.deal-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 2px dashed color-mix(in srgb, var(--surface) 25%, transparent); font: 20px/1.1 var(--display); }
.deal-list b { font-weight: 400; color: var(--sun); font-variant-numeric: tabular-nums; }
.deal-note { font-size: 14.5px; color: var(--on-dark-muted); }
@media (max-width: 1100px) { .u-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .under { padding: 64px 0 76px; }
  .u-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
  .u-grid:not(.show-all) .is-more { display: none; }
  .u-more { display: inline-flex; }
  .u-shop { padding: 14px 16px 6px; }
  .u-shop ul { grid-template-columns: minmax(0, 1fr); }
  .ul-name { font-size: 18px; }
  .u-stk { --stk: 58px; --stk-num: 17px; top: -10px; right: -8px; }
  .u-stk small { font-size: 10.5px; }
  .u-name { font-size: 18px; }
  .u-desc { font-size: 13.5px; }
  .u-card a { padding: 8px; border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); }
  .u-order { font-size: 14px; line-height: 38px; }
  .deals { grid-template-columns: minmax(0, 1fr); }
  .ten-ojo { width: 90px; height: 54px; } .ten-ojo .ojo { width: 90px; height: 90px; }
}

/* ---------- 5 · Most liked ---------- */
.liked { background: var(--surface-2); }
.liked-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 80px); align-items: center; }
.liked-photo { margin: 0; position: relative; }
.liked-img { overflow: hidden; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 8px 8px 0 var(--ink); }
.liked-img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.liked-stk { --stk: 92px; --stk-num: 26px; --tilt: 8deg; top: -16px; right: -14px; }
.liked-photo figcaption { margin-top: 16px; font-weight: 700; font-size: 15px; color: var(--muted); }
.ticket { --bg: var(--surface-2); position: relative; background: #fff; color: var(--ink); max-width: 540px; margin-top: 24px; padding: 26px 26px 22px; box-shadow: 0 16px 36px rgba(29,24,20,.12); rotate: .6deg; }
.ticket::before, .ticket::after { content: ""; position: absolute; left: 0; right: 0; height: 10px;
  background: linear-gradient(135deg, var(--bg) 50%, transparent 50%) 0 0 / 16px 10px, linear-gradient(-135deg, var(--bg) 50%, transparent 50%) 0 0 / 16px 10px; }
.ticket::before { top: 0; }
.ticket::after { bottom: 0; rotate: 180deg; }
.tk-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin: 6px 0 14px; padding-bottom: 12px; border-bottom: 2px dashed var(--line); }
.tk-head b { font: 24px var(--display); color: var(--accent-2); }
.tk-head span { font-size: 14px; color: var(--muted); }
.tk-list { list-style: none; margin: 0; padding: 0; }
.tk-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; row-gap: 4px; padding: 14px 0; border-bottom: 1px dashed var(--line); }
.tk-n { grid-row: span 3; font: 30px/1 var(--display); color: var(--chile); min-width: 1.6em; }
.tk-name { display: inline-flex; align-items: center; min-height: 44px; font: 24px/1.1 var(--display); text-decoration: none; color: var(--ink); }
.tk-name:hover { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }
.tk-price { font-weight: 800; font-variant-numeric: tabular-nums; }
.tk-liked { grid-column: 2 / -1; font-size: 14.5px; color: var(--muted); }
.tk-bar { grid-column: 2 / -1; height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.tk-bar i { display: block; height: 100%; width: calc(var(--p) * 1%); background: var(--chile); border-radius: 99px; transition: width .6s cubic-bezier(.2, .8, .2, 1) .2s; }
.reveal:not(.in) .tk-bar i { width: 0; }
.tk-foot { margin: 12px 0 4px; font-size: 13.5px; color: var(--muted); text-align: right; }
.liked-cta { margin: 30px 0 0; }
@media (max-width: 860px) {
  .liked-grid { grid-template-columns: minmax(0, 1fr); }
  .liked-photo { order: 2; width: min(70vw, 420px); }
  .liked-copy { order: 1; }
}

/* ---------- 6 · Tortas band (deli paper, like the paper the tortas are wrapped in) ----------
   Full-strength ink text on warm paper (it was cream at 74% on black, hard to read); a check strip above separates it
   from the most-liked section. Contrast on --surface: text 14:1, chile heading/prices 4.9:1, muted descriptions 5.8:1. */
.tortas { background: var(--surface); color: var(--text); }
.tortas-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(36px, 6vw, 84px); align-items: start; }
.tortas-photo { position: sticky; top: calc(var(--header-h) + 28px); margin: 0; }
.tortas-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; border: 14px solid transparent;
  background: #fff url("../img/picado-edge.svg") -5px -5px / 24px 24px border-box; box-sizing: border-box; rotate: 1.5deg;
  box-shadow: 8px 10px 0 color-mix(in srgb, var(--ink) 18%, transparent); }
/* The photo's label: price sticker on the corner, the dish's name and the shop's own "most popular" under it */
.tortas-stk { --stk: 96px; --stk-num: 27px; --tilt: 8deg; top: -18px; right: -16px; }
.tortas-photo figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 20px; }
.tortas-photo figcaption b { font: 28px/1.1 var(--display); font-weight: 400; color: var(--ink); }
.tortas h2 { color: var(--chile); }
.tortas-copy > p { color: var(--text); font-size: 18px; line-height: 1.65; max-width: 60ch; }
.mini-menu { list-style: none; margin: 28px 0 0; padding: 0; border-top: 3px solid var(--ink); }
.mini-menu li { padding: 14px 0; border-bottom: 2px dashed var(--line); }
.mm-line { display: flex; align-items: baseline; gap: 12px; }
.mm-name { font: 23px/1.15 var(--display); color: var(--ink); }
.mm-dots { flex: 1; min-width: 16px; border-bottom: 2px dotted color-mix(in srgb, var(--ink) 30%, transparent); translate: 0 -5px; }
.mm-price { font-weight: 800; font-size: 17px; color: var(--chile); font-variant-numeric: tabular-nums; }
.mm-desc { display: block; font-size: 15.5px; color: var(--muted); margin-top: 4px; }
.mm-note { font-size: 15px; color: var(--muted); margin: 16px 0 28px; padding-left: 14px; border-left: 3px solid var(--chile); }
@media (max-width: 900px) {
  .tortas-grid { grid-template-columns: minmax(0, 1fr); }
  .tortas-photo { position: relative; top: auto; max-width: 440px; } /* relative, not static: the sticker anchors to it */
  .tortas-stk { --stk: 80px; --stk-num: 23px; top: -12px; right: -8px; }
  .tortas-photo figcaption b { font-size: 24px; }
}

/* ---------- 7 · Since October 2011 (OJO orange) ---------- */
.since { background: var(--cielo); color: var(--ink); padding: 64px 0; } /* the counter's light blue panel (was --ojo orange) */
.since-grid { display: flex; align-items: center; gap: clamp(28px, 5vw, 56px); }
.since-stk { position: relative; --stk: 160px; --stk-num: 64px; --tilt: -6deg; flex: none; }
.since-stk small { font-size: 16px; }
.since p { font-size: 18px; max-width: 60ch; }
.since-link { font-weight: 800; color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.since-link::after { content: " →"; }
.since-stk.reveal { opacity: 1; transform: none; }
.since-stk.reveal.in { animation: slap .22s cubic-bezier(.3, 1.4, .5, 1) both; }
@media (max-width: 700px) { .since { padding: 48px 0; } .since-grid { flex-direction: column; align-items: flex-start; } .since-stk { --stk: 112px; --stk-num: 48px; margin: 8px 0 0 8px; } }

/* ---------- 8 · Visit, with the walk from Napa High ---------- */
.visit-ma { background: var(--ink-2); color: var(--on-dark); }
.route { display: flex; align-items: center; gap: 18px; color: var(--surface); }
.route-stop { flex: none; display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 1.3; }
.route-stop b { display: block; font: 19px/1.1 var(--display); color: var(--surface); }
.route-pin { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--ink); box-shadow: 0 0 0 3px var(--surface); display: grid; place-items: center; }
.route-school { background: var(--surface); }
.route-shop { background: var(--sun); padding: 6px; }
.route-shop .ojo { width: 100%; height: 100%; }
/* The dashes are a pseudo-element, so the draw-in clip never hides the label */
.route-line { flex: 1; position: relative; height: 6px; min-width: 60px; }
.route-line::before { content: ""; position: absolute; inset: 0; border-top: 6px dashed var(--sun); clip-path: inset(0 0 0 0); transition: clip-path .9s ease .2s; }
.route.reveal:not(.in) .route-line::before { clip-path: inset(0 100% 0 0); }
.route-line > span { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; white-space: nowrap; font-weight: 800; font-size: 15px; color: var(--sun); }
.route-note { margin: 14px 0 34px; font-size: 13.5px; color: var(--on-dark-muted); }
.visit-ma .visit-grid { border: 3px solid color-mix(in srgb, var(--on-dark) 18%, transparent); border-radius: 18px; }
.visit-ma h2 { color: var(--on-dark); }
.visit-ma .phone { font-family: var(--display); color: var(--sun); }
.visit-ma address { font-size: 20px; margin-top: 18px; }
.visit-ma .hours tr.today td { color: var(--sun); }
.visit-ma .hours tr.today td:first-child::after { text-transform: none; letter-spacing: .01em; font: 700 12.5px/1 var(--body); padding: 4px 8px; border-radius: 99px; color: var(--ink); background: var(--sun); }
.hours-note { margin: -18px 0 26px; font-size: 14px; color: var(--on-dark-muted); }
.hours-note a { color: var(--sun); }
.visit-ma .scores { margin-top: 30px; }
.visit-ma .score { background: color-mix(in srgb, var(--on-dark) 5%, transparent); border-color: color-mix(in srgb, var(--on-dark) 16%, transparent); color: var(--on-dark); }
.visit-ma .score-src, .visit-ma .scores-note { color: var(--on-dark-muted); }
.visit-ma .stars { --star: var(--sun); }
.ig-line { margin: 22px 0 0; font-size: 15px; color: var(--on-dark-muted); }
.ig-line a { color: var(--sun); font-weight: 800; }
.map iframe { filter: none; }
@media (max-width: 760px) {
  .route { flex-direction: column-reverse; align-items: flex-start; gap: 0; }
  .route-line { flex: none; width: 6px; height: 120px; min-width: 0; margin: 6px 0 6px 25px; }
  .route-line::before { border-top: 0; border-left: 6px dashed var(--sun); }
  .route-line > span { left: 24px; bottom: auto; top: 50%; translate: 0 -50%; white-space: normal; width: 220px; }
  .route.reveal:not(.in) .route-line::before { clip-path: inset(100% 0 0 0); }
}

/* ---------- 9 · CTA band, call bar ---------- */
.cta-band { background: var(--sun); }
.page-home .cta-band { background: var(--home-wall); } /* the home page's order band matches its other big surfaces */
.cta-band h2 { color: var(--ink); max-width: 20ch; }
@media (max-width: 640px) {
  .call-bar { grid-template-columns: 1fr 1fr; } /* equal halves (the user, 2026-10-09) */
  .call-bar a { text-transform: none; letter-spacing: .01em; font-size: 17px; padding: 18px 12px; }
  .call-bar a:first-child { background: var(--sun); color: var(--ink); }
  .call-bar a:last-child { background: var(--chile); color: #fff; }
  /* The bar is ~58px; keep the footer and any in-page jump target clear of it */
  body { padding-bottom: 64px; }
  html { scroll-padding-bottom: 76px; }
}
/* Inline text links: a taller hit area without moving the text (vertical padding doesn't change an inline box's line).
   The padding wraps Figtree's ~1.2em content area, so (44px - 1.2em) / 2 makes every one 44px at any size. */
.hero-small a, .hours-note a, .ig-line a, .since-link, .menu-disclaimer a, .mb-disclaimer a { padding-block: max(11px, calc(22px - .6em)); }

/* ---------- Inner page hero (menu, story) ---------- */
.page-hero { background: var(--sun); color: var(--ink); }
.page-hero::after { display: none; }
.page-hero .wrap { padding: clamp(44px, 6vw, 76px) 0 clamp(40px, 5vw, 64px); }
.page-hero h1 { font-size: clamp(46px, 7vw, 92px); color: var(--ink); }
.page-hero p:not(.peek) { color: color-mix(in srgb, var(--ink) 84%, transparent); font-size: 19px; max-width: 58ch; }
/* p.peek: base.css's .page-hero p:not(.eyebrow) would make it cream-on-yellow at 19px, flush on the h1; this restores
   the label's own colour, size and spacing */
.page-hero p.peek { color: var(--ink); font-size: 15.5px; margin: 0 0 14px; max-width: none; }
.page-hero .actions { margin-top: 26px; }

/* ---------- Menu page ---------- */
.menu-group > h2 { font: 28px var(--display); letter-spacing: 0; text-transform: none; color: var(--ink); }
.menu-group > h2::after { height: 3px; background: var(--ink); border-radius: 2px; } /* a plain rule (the user took the garlands off the menu page) */
.menu-section h3 { font-size: 30px; color: var(--ink); }
.item-price { color: var(--accent-2); }
.chip.active { color: var(--sun); }
/* 44px chips; the bar's padding (offset by a negative margin) keeps their focus rings inside its scroll clip */
.chips { padding: 7px 6px; margin: -5px -4px; }
.chips .chip { display: inline-flex; align-items: center; min-height: 44px; }
.chip-under { cursor: pointer; font-weight: 800; border: 2px solid var(--ink); }
.search input { font-size: 16px; border: 2px solid var(--ink); } /* 16px: iOS zooms into smaller inputs */
.search input::placeholder { color: var(--muted); opacity: 1; }
.search input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: none; }
.chip-under[aria-pressed="true"] { background: var(--lechuga); color: var(--ink); border-color: var(--ink); }
.menu-section li.is-pricey, .menu-section.is-empty-under, .menu-group.is-empty-under { display: none; }
.menu-section .note { border-left-color: var(--chile); }
.item-img { width: 96px; height: 96px; border: 3px solid var(--ink); border-radius: 12px; }
@media (max-width: 540px) { .item-img { width: 76px; height: 76px; } }
/* Deep links land below the sticky chip bar (scroll-margin adds to html's scroll-padding) */
.menu-section { scroll-margin-top: 64px; }
@media (max-width: 720px) { .menu-section { scroll-margin-top: 112px; } }
.menu-disclaimer a { color: var(--accent-2); }

/* ---------- Menu, variant B (menu-b.html, js/menu-b.js): photo cards per section, a sticky chip filter ----------
   The Los Freseros menu layout in this site's language: the yellow wall, blue headings in a white outline (as on the
   home page's $10 board), cream cards with an ink border and hard shadow. */
.mb-cat[hidden], .mb-grid[hidden], .mb-list[hidden], .mb-card[hidden], .mb-end[hidden] { display: none; } /* their display rules would beat [hidden] */
.mb-hero .wrap { text-align: center; }
.mb-hero .peek { justify-content: center; }
.mb-hero p:not(.peek) { margin-inline: auto; }
.mb-hero .actions { justify-content: center; }
.mb-bar { position: sticky; top: var(--header-h); z-index: 40; background: var(--surface); border-block: 3px solid var(--ink); }
.mb-chips { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 10px 4px; }
.mb-chips::-webkit-scrollbar { display: none; }
.mb-chip { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 999px;
  background: #fff; color: var(--ink); font: 800 15px/1 var(--body); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s, color .15s; }
.mb-chip.is-current { background: var(--sun); }                                    /* the section in view, while All is on */
.mb-chip[aria-pressed="true"] { background: var(--ink); color: var(--sun); }
.mb-chip-under[aria-pressed="true"] { background: var(--lechuga); color: var(--ink); }
.mb-chip:active { scale: .96; }
.mb-menu { background: var(--sun); color: var(--ink); padding: clamp(40px, 5vw, 64px) 0 clamp(56px, 7vw, 96px); }
.mb-cat { padding: 0; } /* base.css pads every <section> 110px */
/* Jumps, #section links and keyboard focus stop just under the header + chip bar (menu-b.js measures --mb-bar-h) */
html:has(.mb-bar) { scroll-padding-top: calc(var(--header-h) + var(--mb-bar-h, 70px) + 16px); }
.mb-cat + .mb-cat { margin-top: clamp(56px, 7vw, 88px); }
.mb-head { margin-bottom: 26px; }
.mb-head h2 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.02; margin: 0 0 8px;
  color: var(--azul); -webkit-text-stroke: calc(2 * max(3px, .065em)) #fff; paint-order: stroke fill; } /* same as the $10 board's headings */
.mb-head p { margin: 0; max-width: 60ch; font-size: 17px; color: color-mix(in srgb, var(--ink) 84%, transparent); }
.mb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 26px; }
.mb-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink); }
.mb-card .item-img.mb-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border: 0; border-bottom: 3px solid var(--ink); border-radius: 15px 15px 0 0;
  overflow: hidden; background: var(--surface-2); cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.mb-photo img { width: 100%; height: 100%; object-fit: cover; }
.mb-photo:hover img { transform: none; } /* base.css's .item-img hover scale would stack on the eased zoom below */
.mb-card .item-img.mb-photo:focus-visible { outline-offset: -7px; } /* inside the photo: the combo's overflow:hidden would clip it */
.mb-card .item-img.mb-photo.img-failed { background: var(--sun) url("../img/ojo.svg") center / 40% no-repeat; cursor: default; }
.mb-badge { position: absolute; top: 12px; left: 12px; z-index: 1; pointer-events: none; padding: 7px 12px; border-radius: 999px; border: 2px solid var(--ink);
  background: var(--ink); color: var(--sun); font: 800 13.5px/1 var(--body); box-shadow: 0 0 0 2px #fff; }
.mb-badge-save { background: var(--lechuga); color: var(--ink); }
.mb-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 18px 18px; }
.mb-name { font: 25px/1.08 var(--display); margin: 0; }
.mb-desc { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.mb-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: auto 0 0; padding-top: 8px; }
.mb-price { font: 800 18px/1.2 var(--body); color: var(--chile); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mb-liked { font-size: 13.5px; font-weight: 700; color: var(--muted); }
/* The combo: its two dishes side by side with a plus between them */
.mb-split { position: relative; display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 4 / 3; border-bottom: 3px solid var(--ink); border-radius: 15px 15px 0 0; overflow: hidden; }
.mb-split .item-img.mb-photo { aspect-ratio: auto; height: 100%; border: 0; border-radius: 0; }
.mb-split .item-img.mb-photo + .item-img.mb-photo { border-left: 3px solid var(--ink); }
.mb-plus { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--sun); border: 3px solid var(--ink); font: 30px/1 var(--display); color: var(--ink); pointer-events: none; }
/* The student combos card (posted on Facebook, not on the order page) */
.mb-student { background: var(--ink); color: var(--surface); box-shadow: 6px 6px 0 var(--chile); }
.mb-student .mb-name { color: var(--sun); }
.mb-student .mb-desc { color: var(--on-dark-muted); font-size: 14.5px; }
.mb-student-list { list-style: none; margin: 6px 0 8px; padding: 0; }
.mb-student-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 2px dashed color-mix(in srgb, var(--surface) 25%, transparent); font: 19px/1.1 var(--display); }
.mb-student-list b { font-weight: 400; color: var(--sun); font-variant-numeric: tabular-nums; }
.mb-student .btn-sun { box-shadow: 4px 4px 0 var(--chile); }
.mb-student :focus-visible { outline-color: var(--sun); }
/* Dishes with no photo: a short ticket under the cards */
.mb-list { list-style: none; margin: 28px 0 0; padding: 6px 22px; background: var(--surface); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink); }
.mb-grid[hidden] + .mb-list, .mb-head + .mb-list { margin-top: 0; }
.mb-row { padding: 14px 0; border-bottom: 2px dashed var(--line); }
.mb-row:last-child { border-bottom: 0; }
.mb-row[hidden] { display: none; }
.mb-row-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; } /* a long price (3 juice sizes) drops under the name on narrow phones */
.mb-row .mb-price { margin-left: auto; }
.mb-row-name { font: 22px/1.15 var(--display); }
.mb-dots { flex: 1; min-width: 16px; border-bottom: 2px dotted color-mix(in srgb, var(--ink) 30%, transparent); translate: 0 -5px; }
.mb-row-desc { display: block; margin-top: 3px; font-size: 15px; color: var(--muted); }
/* Counter items and add-ons, side by side at the end */
.mb-end { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; margin-top: clamp(56px, 7vw, 88px); }
.mb-end .mb-cat + .mb-cat { margin-top: 0; }
.mb-end .mb-head h2 { font-size: clamp(28px, 3.4vw, 40px); }
.mb-empty { text-align: center; font-weight: 700; font-size: 18px; padding: 40px 0; }
.mb-disclaimer { margin: 48px 0 0; font-size: 14px; color: color-mix(in srgb, var(--ink) 80%, transparent); }
.mb-disclaimer a { color: var(--ink); font-weight: 800; }
@media (hover: hover) and (pointer: fine) {
  .mb-photo img { transition: scale .5s ease; }
  .mb-photo:hover img { scale: 1.05; }
  .mb-chip:hover { border-color: var(--chile); }
}
@media (min-width: 901px) { .mb-chips { flex-wrap: wrap; justify-content: center; gap: 8px; } .mb-chip { padding: 0 15px; } } /* every chip visible on desktop */
@media (max-width: 900px) { .mb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; } }
/* Phones: one big photo per row, like the Los Freseros menu; the photo a little shorter so the name and price stay close */
@media (max-width: 560px) {
  .mb-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .mb-card .item-img.mb-photo, .mb-split { aspect-ratio: 16 / 10; }
  .mb-split .item-img.mb-photo { aspect-ratio: auto; }
  .mb-name { font-size: 23px; }
  .mb-list { padding: 4px 16px; }
  .mb-row-name { font-size: 20px; }
  .mb-end { grid-template-columns: minmax(0, 1fr); }
  .mb-chip { padding: 0 15px; font-size: 14.5px; }
}

/* ---------- Story page ---------- */
.chapters { padding: clamp(56px, 7vw, 96px) 0; }
.chapter { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px clamp(24px, 4vw, 56px); padding: 34px 0; border-top: 2px solid var(--ink); max-width: 940px; }
.chapter:last-child { border-bottom: 2px solid var(--ink); }
.chapter > b { font: clamp(32px, 4vw, 44px)/1 var(--display); color: var(--chile); }
.chapter h2 { font-size: clamp(28px, 3.2vw, 38px); margin-bottom: 12px; }
.chapter p { font-size: 18px; max-width: 62ch; }
@media (max-width: 700px) { .chapter { grid-template-columns: minmax(0, 1fr); } }
/* A quote gets a thin rule left of the text only, its opening mark hung in the gutter */
.quote { margin: 26px 0 8px; padding: 2px 0 2px 22px; border-left: 1px solid var(--chile); max-width: 46ch; }
.quote blockquote { margin: 0; }
.quote p { font: clamp(24px, 2.6vw, 30px)/1.2 var(--display); text-indent: -.42em; margin: 0 0 10px; color: var(--ink); }
.quote figcaption { font-size: 14.5px; color: var(--muted); }
.quote figcaption cite { font-style: normal; }
.story-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 8px; max-width: 940px; }
.story-photos .ph-img { aspect-ratio: 4 / 3; min-height: 0; }
@media (max-width: 600px) { .story-photos { grid-template-columns: minmax(0, 1fr); } }
.sources { background: var(--surface-2); padding: 56px 0; }
.sources h2 { font-size: 30px; margin-bottom: 14px; }
.sources ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; max-width: 70ch; }
.sources a { color: var(--accent-2); font-weight: 600; }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .eye > i { animation: none; }
  .wheel-disc, .wheel-hub, .wheel-hub .pupil, .switch-thumb, .switch-track, .tk-bar i, .route-line::before { transition: none; }
  .hero-stk-google, .hero-stk-under, .slap, .since-stk.reveal.in { animation: none; }
  .btn, .u-card a, .spin-for button { transition: none; }
  .pick-photo img { scale: 1; transition: opacity .2s; }
  .mb-photo:hover img { scale: none; }
  .mb-chip:active { scale: none; }
  .route.reveal:not(.in) .route-line::before { clip-path: none; }
}
@media (forced-colors: active) {
  .picado, .peek-eyes, .tk-sep, .ruleta::before, .ruleta::after { display: none; }
  /* The outline copies would turn into solid text-colour blobs */
  .ht-brand > [aria-hidden]::before, .ht-brand .eye::before { display: none; }
  .stk { box-shadow: none; border: 2px solid CanvasText; }
  .wheel-pointer, .switch-track, .tk-pause-icon { forced-color-adjust: none; }
  .tk-pause-icon { background: var(--ink); }
  .spin-for button[aria-pressed="true"], .spin-for button[aria-pressed="true"]:hover { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; outline-color: CanvasText; }
  .spin-for button[aria-pressed="true"] small { color: HighlightText; }
  .chip-under[aria-pressed="true"], .chip-under[aria-pressed="true"]:hover,
  .mb-chip[aria-pressed="true"], .mb-chip[aria-pressed="true"]:hover { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; outline-color: CanvasText; }
  .mb-chip.is-current:not([aria-pressed="true"]) { text-decoration: underline 2px; text-underline-offset: 4px; }
  .under h2, .mb-head h2 { -webkit-text-stroke: 0; } /* the white outline would turn into a text-colour band that fills the letters */
}