/* Señor Gringos. Colors and fonts from the brand deck (brands/se-or-gringos). Layout bar: Daybreak. */

@font-face { font-family: "Kaushan Script"; src: url("fonts/KaushanScript-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/Figtree-400.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/Figtree-500.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/Figtree-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }
/* the painted-sign labels: the nav and every button, in capitals. Barlow Semi Condensed, SIL Open Font License (fonts/OFL-Barlow.txt) */
@font-face { font-family: "Barlow Semi Condensed"; src: url("fonts/BarlowSemiCondensed-700.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  /* the brand: Char text, Paper page, white containers, Chili means one thing, the order button */
  --ink: #0F0E0A;             /* Char, the logo's outline */
  --paper: #FFF8F7;           /* Paper, the order window's ground */
  --page: #FCEFD2;            /* the page: a warm cream with a little Marigold in it, so the white containers stand out */
  --card: #FFFFFF;            /* the containers */
  --accent: #EB1617;          /* Chili, the logo's red */
  --accent-dark: #C70008;     /* Chili 600, the button on hover */
  --gold: #E7A50E;            /* Marigold, the logo's edge */
  --gold-tint: #FBEEDC;       /* Marigold 100, behind the menu and the hours */
  --gold-soft: #FFF6E7;       /* Marigold 50, today's row */
  --muted: #635A58;           /* Gray 600 */
  --marigold-wash: #FFF1CF;   /* a picked row */
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --display: "Kaushan Script", "Brush Script MT", cursive;
  --label: "Barlow Semi Condensed", "Arial Narrow", var(--sans);

  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px; --s-7: 48px;  --s-8: 64px;  --s-9: 96px;

  --text-small: 17px;
  --text-body: 19px;
  --text-lead: clamp(20px, 1.5vw, 23px);
  --text-item: 22px;
  --text-h3: clamp(22px, 1.7vw, 26px);
  --text-h2: clamp(36px, 6.6vw, 96px);    /* the film's lines */
  --text-h2-box: calc(var(--text-h2) * .85);   /* a section title inside a container, 15% smaller */
  --text-h1: clamp(44px, 7.5vw, 108px);   /* one and a half times the old size */
  --line-body: 1.55;
  --line-heading: 1.06;
  --measure: 60ch;

  --r: 24px;                   /* every container and every photo */
  --r-button: 8px;             /* buttons stay tighter */
  --pad: clamp(24px, 3.6vw, 56px);
  --gap-section: clamp(21px, 2.93vw, 43px);   /* a third less than before */
  --shadow: 0 1px 2px rgba(15, 14, 10, .05), 0 28px 56px -28px rgba(15, 14, 10, .22);

  --line: rgba(15, 14, 10, .12);
  --tap: 44px;
  --bar-h: 84px;               /* the room the floating nav takes at the top: for jumps and sticky panels */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);   /* the nav's links settle with a small overshoot */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--bar-h); scrollbar-color: color-mix(in srgb, var(--ink) 30%, var(--page)) var(--page); }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 var(--text-body)/var(--line-body) var(--sans); }

h1, h2 { font-family: var(--display); font-weight: 400; line-height: var(--line-heading); margin: 0 0 var(--s-5); text-wrap: balance; }
h1 { font-size: var(--text-h1); max-width: 18ch; }
h2 { font-size: var(--text-h2); max-width: 22ch; }
h3 { font: 700 var(--text-h3)/1.2 var(--sans); margin: 0 0 .5em; }
p { margin: 0 0 var(--s-5); max-width: var(--measure); }
small { font-size: var(--text-small); }
figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }

::selection { background: color-mix(in srgb, var(--accent) 24%, var(--paper)); color: var(--ink); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: var(--r-button); }
.price, td { font-variant-numeric: tabular-nums; }

.wrap { width: min(1392px, 100% - 48px); margin-inline: auto; }
section { padding-block: var(--gap-section); }
.lead { font-size: var(--text-lead); }

/* the one action, repeated */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  padding: var(--s-3) var(--s-6); border-radius: var(--r-button); background: var(--accent); color: #FFFFFF;
  font: 700 20px/1.1 var(--label); text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
  border: 2px solid var(--accent); transition: background-color .15s ease, border-color .15s ease; }
.btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-note { margin: var(--s-2) 0 0; font-size: var(--text-small); color: var(--muted); }

/* header: the dark frame, the order always in reach */
/* the nav: a clear glass pill floating at the top, centered (the move from seanbradley.dev, see inspo/INSPO.md).
   The glass is the owner's call, accepted in accepted-tells.json. It carries enough white that the words read
   the same over the dark film and over the cream page. */
.top { position: fixed; top: 14px; left: 0; right: 0; z-index: 10; display: flex; justify-content: center; pointer-events: none; }
.nav { pointer-events: auto; display: flex; align-items: center; gap: 2px; width: max-content; max-width: calc(100% - 24px);
  padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .8); border: 1px solid rgba(15, 14, 10, .1);
  box-shadow: 0 12px 32px -14px rgba(15, 14, 10, .55), 0 1px 2px rgba(15, 14, 10, .08);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); white-space: nowrap; color: var(--ink); }
.nav__logo { flex: none; display: block; padding: 0 var(--s-3) 0 var(--s-2); border-radius: 999px; }
.nav__logo img { width: 76px; }
.nav__link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 var(--s-4);
  border-radius: 999px; color: var(--ink); text-decoration: none; font: 700 17px/1 var(--label); text-transform: uppercase;
  letter-spacing: .07em; transition: background-color .2s ease; }
.nav__link:hover { background: rgba(15, 14, 10, .07); }
.nav__phone { font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.btn--nav { min-height: var(--tap); margin-left: var(--s-2); padding: 0 var(--s-5); border-radius: 999px; font-size: 18px; }
.nav__burger { flex: none; display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0;
  border-radius: 50%; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.nav__burger:hover { background: rgba(15, 14, 10, .07); }
.nav__burger svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav a:focus-visible, .nav__burger:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 999px; }
.nav.is-still, .nav.is-still * { transition: none !important; animation: none !important; }   /* the first paint never moves */

/* computers and tablets: past the top the pill folds to the logo and the hamburger. It opens again with the links
   sliding back in from the left, one after another, 50 ms apart, on a soft spring. */
@media (min-width: 900px) {
  .nav__fold { max-width: 280px; overflow: hidden;
    transition: max-width .48s var(--spring), opacity .3s var(--ease), padding .42s var(--ease), margin .42s var(--ease),
      border-width .42s var(--ease), transform .36s var(--spring), visibility 0s, background-color .2s ease; }
  .nav:not(.is-shut) .nav__fold:nth-child(3) { transition-delay: 50ms; }
  .nav:not(.is-shut) .nav__fold:nth-child(4) { transition-delay: .1s; }
  .nav:not(.is-shut) .nav__fold:nth-child(5) { transition-delay: .15s; }
  .nav:not(.is-shut) .nav__fold:nth-child(6) { transition-delay: .2s; }
  .nav.is-shut .nav__fold { max-width: 0; opacity: 0; padding-inline: 0; margin-left: 0; border-width: 0; transform: translateX(-10px);
    visibility: hidden; transition: max-width .42s var(--ease), opacity .2s ease, padding .42s var(--ease), margin .42s var(--ease),
      border-width .42s var(--ease), transform .3s var(--ease), visibility 0s linear .42s; }
  .nav__burger { max-width: 0; opacity: 0; overflow: hidden; visibility: hidden;
    transition: max-width .42s var(--ease), opacity .2s ease, visibility 0s linear .42s; }
  .nav.is-shut .nav__burger { max-width: var(--tap); opacity: 1; visibility: visible;
    transition: max-width .48s var(--spring), opacity .3s var(--ease) .1s, visibility 0s; }
}

/* phones and small tablets: the logo, the order button and the hamburger. The hamburger opens the links and the
   phone number in a stacked panel under them. */
@media (max-width: 899.98px) {
  .top { top: 10px; }
  .nav { width: calc(100% - 24px); flex-wrap: wrap; border-radius: 28px; }
  .nav__logo { order: 0; padding-left: var(--s-3); }
  .nav__logo img { width: 66px; }
  .btn--nav { order: 1; margin-left: auto; padding: 0 var(--s-4); font-size: 17px; }
  .nav__burger { order: 2; margin-left: var(--s-1); }
  .nav__link { order: 3; flex: 0 0 100%; min-height: 52px; font-size: 20px; }
  .nav__link:first-of-type { margin-top: var(--s-2); border-top: 1px solid var(--line); border-radius: 0; }
  .nav:not(.is-open) .nav__link { display: none; }
  .nav.is-open .nav__link { animation: nav-in .36s var(--ease) both; }
  .nav.is-open .nav__link:nth-child(3) { animation-delay: 50ms; }
  .nav.is-open .nav__link:nth-child(4) { animation-delay: .1s; }
  .nav.is-open .nav__link:nth-child(5) { animation-delay: .15s; }
}
@keyframes nav-in { from { opacity: 0; transform: translate3d(0, -8px, 0); } to { opacity: 1; transform: none; } }
/* the hamburger turns into a close mark while the links are out on a phone */
.nav__burger .nav__x { display: none; }
@media (max-width: 899.98px) {
  .nav.is-open .nav__burger .nav__lines { display: none; }
  .nav.is-open .nav__burger .nav__x { display: block; }
}

/* 1 · the hero's words, the same as before, now over the opening frames of the film */
.film__opening h1 { color: #FFFFFF; text-shadow: 0 2px 24px rgba(15, 14, 10, .45); }
/* the words and their scrim are there at the first paint, before any script; the film's tick takes over from frame 0 */
.film .film__opening, .film .film__shade--low { opacity: 1; }
.hero__lead { font-size: var(--text-lead); max-width: 42ch; }
.film__opening .btn-note { color: rgba(255, 255, 255, .88); }

/* 2 · the info bar under the film: Marigold, full width, four equal parts with a thin line between them */
.info { background: var(--gold); color: var(--ink); }
.info__in { list-style: none; margin: 0 auto; padding: 0; width: min(1392px, 100% - 48px);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.info__cell { position: relative; container-type: inline-size; display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto; gap: var(--s-1) var(--s-2); align-content: center; align-items: center; padding: var(--s-5); }
.info__cell + .info__cell { border-left: 1px solid rgba(15, 14, 10, .3); }
.info__icon { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.info__label { font: 700 14px/1.2 var(--label); text-transform: uppercase; letter-spacing: .12em; }
.info__value { grid-column: 1 / -1; font-size: clamp(19px, 1.6vw, 23px); font-weight: 700; line-height: 1.25; color: var(--ink);
  text-decoration: none; text-wrap: balance; }
.info__value--phone { font-size: clamp(21px, 1.9vw, 27px); font-variant-numeric: tabular-nums; }
/* a computer: four across, and every value on one line, sized to the width of its own part */
@media (min-width: 1200px) {
  .info__value { white-space: nowrap; font-size: min(23px, calc(100cqi / 11.8)); }   /* the longest value is 11.7em wide */
  .info__value--phone { font-size: min(27px, calc(100cqi / 7.4)); }
}
a.info__value::after { content: ""; position: absolute; inset: 0; }   /* the whole part is the tap target */
a.info__value:hover { text-decoration: underline; }
.info__cell:has(a:focus-visible) { outline: 3px solid var(--ink); outline-offset: -6px; }
.info__cell a:focus-visible { outline: none; }

/* the film, as the hero: a tall scroll driver holding a sticky stage. The scroll position is the playhead. */
.film { padding: 0; background: var(--page); }
.film__driver { position: relative; height: calc(100svh * 4.6); }
.film__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--ink); color: #FFFFFF; }
.film__poster img, .film__screen { position: absolute; inset: 0; width: 100%; height: 100%; }
.film__poster img { object-fit: cover; }
.film__screen { opacity: 0; }
.film__screen.is-live { opacity: 1; }
.film__video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* the scrims do a job: the words stay readable over the burner glow and the bright plate */
.film__shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.film__shade--low { background: linear-gradient(to top, rgba(15, 14, 10, .82) 0%, rgba(15, 14, 10, .45) 30%, rgba(15, 14, 10, 0) 58%); }
.film__shade--high { background: linear-gradient(to bottom, rgba(15, 14, 10, .8) 0%, rgba(15, 14, 10, .4) 30%, rgba(15, 14, 10, 0) 56%); }
.film__beat { position: absolute; left: max(24px, (100% - 1392px) / 2); right: 24px; opacity: 0; will-change: opacity, transform; }
.film__beat--low { bottom: clamp(32px, 9vh, 96px); }
.film__beat--high { top: calc(var(--bar-h) + clamp(12px, 4vh, 40px)); }   /* clear of the floating nav */
.film__beat h2, .film__line { font-family: var(--display); font-size: var(--text-h2); line-height: var(--line-heading);
  max-width: 14ch; margin: 0 0 .15em; color: #FFFFFF; text-wrap: balance; text-shadow: 0 2px 24px rgba(15, 14, 10, .45); }
.film__finale h2 { margin-bottom: var(--s-5); }
.film__finale .btn-note { color: rgba(255, 255, 255, .9); }
.film__bar { position: absolute; left: 0; right: 0; top: 0; height: 2px; }
.film__bar span { display: block; height: 100%; width: 0; background: var(--gold); transition: opacity .4s ease; }
.film__bar.is-done span { opacity: 0; }

/* reduced motion: the first frame and the hero's words stay, the film is never fetched */
html[data-film="still"] .film__driver { height: auto; }
html[data-film="still"] .film__stage { position: relative; top: 0; }
html[data-film="still"] .film__opening,
html[data-film="still"] .film__shade--low { opacity: 1; }
html[data-film="still"] .film__beat:not(.film__opening) { display: none; }
html[data-film="still"] .film__bar { display: none; }
@media (max-width: 640px) and (orientation: portrait) {
  .film__driver { height: calc(100svh * 6.5); }
  .film__beat { right: 16px; left: 16px; }
}

/* 3 · build your plate: the picks on the left, the plate on the right (a bar along the bottom on a phone) */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.build__grid { display: grid; gap: var(--s-7); padding: var(--s-6) var(--pad) var(--pad); }
.build__steps { display: grid; gap: var(--s-7); min-width: 0; }
.step { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.step__legend { padding: 0; display: flex; align-items: center; gap: var(--s-3); }
.step__legend h3 { margin: 0 0 var(--s-1); }
.step__num { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--accent); color: #FFFFFF; font: 700 21px/1 var(--label); }
.step__hint { color: var(--muted); margin-bottom: var(--s-4); }
.opts { display: grid; gap: var(--s-3); }

/* each option is a full-width row: the bowl at the left edge, the name and its line, the price */
.opt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-5);
  padding-right: var(--s-5); min-height: 112px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  overflow: clip; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.opt:hover { border-color: rgba(15, 14, 10, .3); }
.opt__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.opt__photo { position: relative; display: block; width: 96px; align-self: start; margin: var(--s-2) 0 var(--s-2) var(--s-2);
  border-radius: var(--r); overflow: clip; }
.opt__photo img { width: 100%; height: auto; aspect-ratio: 1; }   /* the bowl photos are square, so the box is too */
.opt__check { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; background: var(--gold); color: var(--ink); box-shadow: 0 2px 10px rgba(15, 14, 10, .3);
  opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .25s var(--ease); }
.opt__text { display: grid; gap: 2px; padding-block: var(--s-3); }
.opt__name { font-size: var(--text-item); font-weight: 700; line-height: 1.25; }
.opt__line { font-size: var(--text-small); color: var(--muted); line-height: 1.35; }
.opt__price { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* a picked option: a Marigold border, a light Marigold fill and the check over its bowl (the owner's call) */
.opt.is-picked { background: var(--marigold-wash); border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.opt.is-picked .opt__check { opacity: 1; transform: none; }
.opt:has(.opt__input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }

/* the plate panel */
/* the plate panel: Charcoal, white words, the price in Marigold */
.plate { align-self: stretch; padding: var(--s-6); background: var(--ink); color: #FFFFFF; border-radius: var(--r); box-shadow: var(--shadow); }
.plate h3 { margin-bottom: var(--s-4); }
.plate .dish { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.plate .btn-note { color: rgba(255, 255, 255, .74); }
/* the plate, seen from straight above on the same dark slate as the bowl photos. Three tacos sit in a loose
   triangle; each taco stacks its tortilla, its meat, a spoon of salsa, then onion and cilantro. The pieces are
   circles cut from inside the bowl photos, so the plate looks like the food in the rows beside it. */
.dish { position: relative; aspect-ratio: 1; margin: 0 0 var(--s-5); border-radius: var(--r); overflow: clip;
  background: radial-gradient(130% 100% at 28% 18%, #3b3936, #1e1d1b 72%); }   /* the light falls like it does in the photos */
.dish__plate { position: absolute; inset: 5%; border-radius: 50%;
  background: radial-gradient(circle, #fbfaf8 0 55%, #e8e6e1 58.5%, #fcfbfa 62%, #fff 80%, #f0eee9 96%, #dbd8d2 100%);
  box-shadow: 0 14px 28px -6px rgba(0, 0, 0, .65), 0 3px 6px rgba(0, 0, 0, .4); }
.dish__taco { position: absolute; width: 44%; aspect-ratio: 1; left: calc(var(--x) - 22%); top: calc(var(--y) - 22%); rotate: var(--rot); }
.dish__layer { position: absolute; inset: 0; }
.dish__layer img { position: absolute; max-width: none; height: auto; backface-visibility: hidden; }
.dish__layer--tortilla img { inset: 0; width: 100%; }
.dish__layer--meat img { left: 15%; top: 14%; width: 70%; }
.dish__layer--salsa img { left: 37%; top: 31%; width: 34%; }
/* onion and cilantro: small diced onion and leaves, scattered the same way on every copy of the plate */
.dish__bit { position: absolute; left: var(--bx); top: var(--by); width: var(--bs); aspect-ratio: 1; translate: -50% -50%; rotate: var(--br); }
.dish__bit--onion { border-radius: 32%; opacity: .9; background: linear-gradient(140deg, #fffffb 25%, #e9e6d6);
  box-shadow: 0 .5px 1px rgba(15, 14, 10, .3), inset 0 0 0 .5px rgba(190, 186, 168, .6); }
.dish__bit--leaf { width: calc(var(--bs) * 1.3);   /* a three-lobed cilantro leaf */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 19C9.4 15 5 13.6 3.4 10.4 2 7.6 4.6 5 7 6.4 6.4 3.4 8.6 1.4 10 3.8 11.4 1.4 13.6 3.4 13 6.4 15.4 5 18 7.6 16.6 10.4 15 13.6 10.6 15 10 19Z' fill='%233f8a32'/%3E%3Cpath d='M10 18.6V8' stroke='%2367ad4b' stroke-width='.9' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; }
/* the small copies: the phone bar and each plate in the order window show the plate alone, no slate */
.dish--bar, .dish--bag { margin: 0; background: none; border-radius: 50%; overflow: visible; }
.dish--bar .dish__plate, .dish--bag .dish__plate { inset: 0; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, .55); }
.dish--bag .dish__plate { box-shadow: 0 4px 10px -3px rgba(15, 14, 10, .35), 0 0 0 1px var(--line); }
/* the finished plate on its way into the order window */
.dish-fly { position: fixed; z-index: 3; margin: 0; pointer-events: none; transform-origin: 0 0; will-change: transform; }
.plate__words { font-size: var(--text-lead); font-weight: 700; line-height: 1.3; margin-bottom: var(--s-4); min-height: 2.6em; }
.plate__price { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); margin: 0 0 var(--s-4);
  padding-block: var(--s-3); border-block: 1px solid rgba(255, 255, 255, .18); font-size: var(--text-item); max-width: none; }
.plate__price .price { font-weight: 700; color: var(--gold); font-size: 1.15em; }
.plate__note { color: rgba(255, 255, 255, .74); }

@media (min-width: 960px) {
  .build__grid { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); }
  .plate__in { position: sticky; top: calc(var(--bar-h) + var(--s-5)); }
}

/* the bar along the bottom of a phone, only while build your plate is on screen */
.platebar { display: none; }
@media (max-width: 959.98px) {
  .plate { display: none; }
  .build { padding-bottom: calc(var(--gap-section) + 170px); }
  .platebar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; background: var(--ink); color: var(--paper);
    border-radius: var(--r) var(--r) 0 0; box-shadow: 0 -12px 32px rgba(15, 14, 10, .25);
    transform: translateY(105%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s linear .3s; }
  .platebar.is-shown { transform: none; visibility: visible; transition: transform .3s var(--ease), visibility 0s; }
  .platebar__in { width: calc(100% - 24px); margin-inline: auto; padding: var(--s-4) 0 calc(var(--s-4) + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4); align-items: center; }
  .dish--bar { grid-row: 1 / 3; width: clamp(96px, 16vw, 128px); }
  .platebar__words { grid-column: 2 / -1; margin: 0; font-weight: 700; font-size: var(--text-small); line-height: 1.35; max-width: none;
    min-height: 2.7em; }
  .platebar__price { font-size: var(--text-item); color: var(--gold); }
  .platebar .btn { min-height: var(--tap); }
}
/* a narrow phone: the plate on the left, the words, the price and the button stacked beside it */
@media (max-width: 520px) {
  .platebar__in { grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s-4); }
  .dish--bar { grid-row: 1 / 4; }
  .platebar__words { grid-column: 2; min-height: 0; }
  .platebar__price { grid-column: 2; font-size: 20px; }
  .platebar .btn { grid-column: 2; justify-self: start; margin-top: var(--s-1); padding-inline: var(--s-4); font-size: 17px; }
}
@media (max-width: 720px) {
  .opt { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 var(--s-4); padding-right: var(--s-4); min-height: 96px; }
  .opt__photo { width: 80px; grid-row: 1 / 3; }
  .opt__text { padding-bottom: 0; align-self: end; }
  .opt__price { grid-column: 2; padding-bottom: var(--s-3); font-size: var(--text-small); align-self: start; }
  .opt__name { font-size: 20px; }
}

/* the quieter second button: an outline in Char */
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--wide { width: 100%; }

/* the order window: a sheet from the right on a computer, from the bottom on a phone */
html.bag-open { overflow: hidden; }
.bag { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--ink); overflow: hidden; }
.bag::backdrop { background: rgba(15, 14, 10, 0); transition: background-color .3s ease; }
.bag.is-open::backdrop { background: rgba(15, 14, 10, .55); }
.bag__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100%); display: flex; flex-direction: column;
  background: var(--page); border-radius: var(--r) 0 0 var(--r); box-shadow: -24px 0 64px rgba(15, 14, 10, .3);
  transform: translateX(104%); transition: transform .4s var(--ease); }
.bag.is-open .bag__panel { transform: none; }
.bag__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) var(--s-5) var(--s-4) var(--s-6); border-bottom: 1px solid var(--line); }
.bag__head h2 { font-size: clamp(36px, 3vw, 44px); margin: 0 0 .1em; }
.bag__x { display: grid; place-items: center; width: var(--tap); height: var(--tap); flex: none; border: 0; border-radius: 50%;
  background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.bag__x:hover { background: var(--gold-tint); }
.bag__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-5); display: grid; gap: var(--s-5); align-content: start; }
.bag__block { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: var(--s-5); }
.bag__block h3 { margin-bottom: var(--s-3); }
.bag__plates { list-style: none; margin: 0; padding: 0; }
.bag__plate { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-1) var(--s-4); align-items: baseline;
  padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.bag__plate .dish--bag { grid-column: 1; grid-row: 1 / 3; align-self: center; width: 76px; }
.bag__plate-words { grid-column: 2; font-size: 20px; font-weight: 700; line-height: 1.3; }
.bag__plate .price { grid-column: 3; grid-row: 1; }
.bag__plate-sub { grid-column: 2; grid-row: 2; color: var(--muted); font-size: var(--text-small); }
.bag__remove { grid-column: 3; grid-row: 2; justify-self: end; min-height: var(--tap); padding: 0 var(--s-2); border: 0; background: none;
  color: var(--ink); font: 700 16px var(--label); text-transform: uppercase; letter-spacing: .06em;
  text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.bag__empty { color: var(--muted); }
.bag__empty[hidden] { display: none; }
.bag__plates:not(:empty) + .bag__empty { display: none; }
.bag__block .btn--ghost { margin-top: var(--s-4); }
.bag__extras { list-style: none; margin: 0; padding: 0; }
.bag__extras li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-4); align-items: center;
  padding-block: var(--s-2); border-bottom: 1px solid var(--line); font-size: 20px; }
.bag__extras li:last-child { border-bottom: 0; }
.bag__add { min-width: 92px; min-height: var(--tap); padding: 0 var(--s-4); border: 2px solid var(--ink); border-radius: var(--r-button);
  background: transparent; color: var(--ink); font: 700 17px var(--label); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.bag__add[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); }
.bag__foot { padding: var(--s-5) var(--s-6) calc(var(--s-5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--card); }
.bag__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 var(--s-4); max-width: none;
  font-size: var(--text-item); font-weight: 700; }
/* the name for pickup, like a bag at the counter: optional, and it goes at the top of the copied order */
.bag__name { display: grid; gap: var(--s-2); margin: 0 0 var(--s-4); }
.bag__name-label { font-size: var(--text-small); font-weight: 700; }
.bag__opt { font-weight: 400; color: var(--muted); }
.bag__name-input { width: 100%; min-height: 52px; padding: 0 var(--s-4); border: 2px solid rgba(15, 14, 10, .3); border-radius: var(--r-button);
  background: var(--card); color: var(--ink); font: 400 var(--text-body) var(--sans); }
.bag__name-input:hover { border-color: rgba(15, 14, 10, .5); }
.bag__name-input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-color: var(--ink); }
.btn--big { display: flex; width: 100%; min-height: 60px; font-size: 20px; margin-bottom: var(--s-3); }
.bag__copied { margin: var(--s-2) 0 0; min-height: 1.4em; font-size: var(--text-small); font-weight: 700; }
.bag__copied:empty { margin: 0; min-height: 0; }
.bag__demo { margin: var(--s-3) 0 0; color: var(--muted); font-size: var(--text-small); }

/* the window's blocks rise in after it slides open, 0.12 s apart */
@keyframes bag-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bag-up { from { transform: translate3d(0, 28px, 0); } to { transform: none; } }
.bag.is-open .bag__block { animation: bag-fade .9s ease both, bag-up 1.1s var(--ease) both;
  animation-delay: calc(.15s + var(--i, 0) * .12s); }
/* a finished plate is flying into the plates block, so that block holds still to catch it */
.bag.is-arriving .bag__block:first-child { animation: none; }

@media (max-width: 720px) {
  .bag__panel { top: auto; left: 0; width: 100%; max-height: 90svh; border-radius: var(--r) var(--r) 0 0;
    box-shadow: 0 -24px 64px rgba(15, 14, 10, .3); transform: translateY(104%); }
  .bag__head { padding: var(--s-4) var(--s-4) var(--s-3) var(--s-5); }
  .bag__body { padding: var(--s-4); gap: var(--s-4); }
  .bag__block { padding: var(--s-4); }
  .bag__foot { padding-inline: var(--s-4); }
  .bag__extras li { font-size: 18px; gap: var(--s-3); }
  .bag__plate .dish--bag { width: 64px; }
}

/* one warm cream page under every container; the old Marigold bands would only be a second cream */
.band { background: none; }

/* the container every section's content sits in */
.box { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); overflow: clip; }
.box__head { padding: var(--pad) var(--pad) 0; }
.box h2 { font-size: var(--text-h2-box); }
.box__head h2 { margin-bottom: var(--s-4); }
.box__act { padding: 0 var(--pad) var(--pad); }

/* 4 · the menu: the heading and the carne asada photo side by side, the photo at its own shape, and the price
   lists full width under them. Two price columns only when each column is at least 300px (a container query on
   the lists' own width), so a name and its price fit on one line. */
.menu__top { display: grid; gap: var(--s-6); padding: var(--pad) var(--pad) 0; }
.menu__head { container: menuhead / inline-size; align-self: center; padding: 0; }
.menu__head h2 { font-size: min(var(--text-h2-box), 12.75cqi); }
.menu__head .lead { margin-bottom: 0; }
.menu__photo { margin: 0; overflow: clip; border-radius: var(--r); }
.menu__photo img { width: 100%; height: auto; aspect-ratio: 1400 / 792; }
.menu__body { display: flex; flex-direction: column; min-width: 0; container: menu / inline-size; }
.menu__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--s-7); padding: var(--s-6) var(--pad) var(--s-3); }
@container menu (min-width: 760px) {
  .menu__cols { grid-template-columns: repeat(2, minmax(300px, 1fr)); }
}
.menu__col { min-width: 0; }
/* the menu board: each list's label in small Chili capitals over a thin line, then name, a dotted line, the
   price, and the short description under it */
.menu__group { margin-bottom: var(--s-6); }
.menu__group h3 { font: 700 16px/1.2 var(--label); text-transform: uppercase; letter-spacing: .14em; color: var(--accent);
  padding-bottom: var(--s-2); margin-bottom: var(--s-2); border-bottom: 1px solid var(--line); }
.prices { list-style: none; margin: 0; padding: 0; }
.prices li { display: grid; grid-template-columns: minmax(0, max-content) minmax(var(--s-4), 1fr) auto; column-gap: var(--s-2);
  align-items: baseline; padding-block: var(--s-3); font-size: 20px; line-height: 1.3; }
.prices__name { grid-column: 1; grid-row: 1; font-weight: 700; }
.prices li::before { content: ""; grid-column: 2; grid-row: 1; align-self: end; margin-bottom: .34em; border-bottom: 2px dotted rgba(15, 14, 10, .32); }
.prices .price { grid-column: 3; grid-row: 1; font-weight: 700; white-space: nowrap; }
.prices small { grid-column: 1 / -1; grid-row: 2; display: block; margin-top: 2px; font-size: 16px; color: var(--muted); line-height: 1.4; }

/* 5 · made fresh: the comal and the salsa bar side by side, the same height, one button under both */
.fresh__pair { display: grid; gap: var(--s-5); padding: var(--s-5) var(--pad); }
.fresh__frame { overflow: clip; border-radius: var(--r); }
.fresh__frame img { width: 100%; height: auto; aspect-ratio: 1400 / 792; }   /* the photos' own shape */
.fresh__pair figcaption { padding: var(--s-4) 0 0; font-size: var(--text-lead); max-width: 46ch; }

/* 6 · the story: the photo full width at its own shape, the words in two columns under it */
.story__photo { margin: var(--s-2) var(--pad) 0; overflow: clip; border-radius: var(--r); }
.story__photo img { width: 100%; height: auto; aspect-ratio: 1400 / 792; }
.story__words { display: grid; gap: 0 var(--s-8); padding: var(--s-6) var(--pad) var(--pad); }
.story__col > :last-child { margin-bottom: 0; }

/* 7 · visit: the hours as the biggest thing in the container */
.visit__grid { display: grid; gap: var(--s-6); padding: var(--s-5) var(--pad) var(--pad); }
.hours { border-collapse: collapse; width: 100%; }
.hours th, .hours td { text-align: left; padding: var(--s-4) var(--s-4); font-size: clamp(22px, 2.4vw, 34px); border-bottom: 1px solid var(--line); }
.hours th { font-weight: 500; }
.hours td { font-weight: 700; white-space: nowrap; }
.hours tr.is-today { background: var(--gold); }
.hours tr.is-today th, .hours tr.is-today td { border-bottom-color: transparent; }
.hours tr.is-today th::after { content: "(today)"; display: block; font-weight: 500; color: var(--ink); font-size: .6em; }
.visit__addr { font-size: var(--text-h3); font-weight: 700; }
/* the address with its map: a small square of downtown Boise beside it, our own Chili pin in the middle. The map
   frame is drawn larger than the square, so the map's own buttons and credit fall outside it; our credit shows. */
.visit__place { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-5); align-items: center; margin-bottom: var(--s-5); }
.visit__map { position: relative; margin: 0; aspect-ratio: 1; border-radius: var(--r); overflow: clip; background: #EFE7D6; }
.visit__map-frame { position: absolute; inset: -50px; }
.visit__map-frame iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
.visit__pin { position: absolute; left: 50%; top: 50%; width: 34px; height: 45px; translate: -50% -100%;
  fill: var(--accent); stroke: #FFFFFF; stroke-width: 2; filter: drop-shadow(0 3px 3px rgba(15, 14, 10, .35)); }
.visit__pin circle { fill: #FFFFFF; stroke: none; }
.visit__map-credit { position: absolute; right: var(--s-2); bottom: var(--s-2); padding: 2px var(--s-2); border-radius: var(--r-button);
  background: rgba(255, 255, 255, .9); color: var(--ink); font-size: 12px; line-height: 1.3; text-decoration: none; }
.visit__place-words > :last-child { margin-bottom: 0; }
.visit__btns { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.visit__btns .btn { padding-inline: var(--s-5); }   /* tighter, so the two sit side by side wherever they fit */
@media (min-width: 1024px) and (max-width: 1279.98px) { .visit__btns .btn { font-size: 18px; padding-inline: 20px; } }

/* the menu heading beside its photo on a wide screen; below 1200px the title comes first and the photo under it */
@media (min-width: 1200px) {
  .menu__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}

/* computers: photos at least half the screen wide where the words beside them still have room */
@media (min-width: 1024px) {
  .fresh__pair { grid-template-columns: 1fr 1fr; }
  .story__words { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* a computer: the hours on the left, the map and address on the right; the hours stretch so both end together */
@media (min-width: 1200px) {
  .visit__grid { grid-template-columns: 1fr 1fr; }
  .hours { height: 100%; }
  .visit__where { display: flex; flex-direction: column; justify-content: space-between; }   /* any spare height goes between, never under */
}

/* footer: everything centered on Charcoal, the logo, the links, the socials, one line, the one button */
.foot { background: var(--ink); color: #FFFFFF; padding-block: var(--s-8) var(--s-6); text-align: center; }
.foot__in { display: flex; flex-direction: column; align-items: center; }
.foot__logo { display: block; margin-bottom: var(--s-5); border-radius: var(--r-button); }
.foot__logo img { width: 180px; }
.foot__nav { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s-6); }
.foot__nav a { display: inline-flex; align-items: center; min-height: var(--tap); color: #FFFFFF; text-decoration: none;
  font: 700 18px/1 var(--label); text-transform: uppercase; letter-spacing: .07em; }
.foot__nav a:hover { color: var(--gold); }
.foot__social { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: flex; justify-content: center; gap: var(--s-3); }
.foot__social a { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3); color: #FFFFFF; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.foot__social a:hover { background: #FFFFFF; color: var(--ink); border-color: #FFFFFF; }
.foot__social svg { width: 20px; height: 20px; fill: currentColor; }
.foot__line { margin: 0; max-width: none; font-size: var(--text-small); color: rgba(255, 255, 255, .84); }
.foot__line a { color: #FFFFFF; text-decoration: none; }
.foot__line a:hover { text-decoration: underline; }
.foot__sep { margin: 0 var(--s-3); opacity: .6; }
.btn--pill { margin-top: var(--s-6); min-width: 260px; min-height: 58px; padding-inline: var(--s-7); border-radius: 999px; font-size: 21px; }
.foot__legal { width: 100%; max-width: none; margin: var(--s-8) 0 0; padding-top: var(--s-5); border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--text-small); color: rgba(255, 255, 255, .72); }
.foot a:focus-visible { outline-color: var(--gold); }

/* phones */
@media (max-width: 720px) {
  :root { --bar-h: 76px; }
  .wrap { width: calc(100% - 24px); }
  .hours th, .hours td { padding-inline: var(--s-2); }
  .prices li { font-size: 19px; }
  .foot__sep { display: block; height: var(--s-1); overflow: hidden; }   /* the one line breaks into three on a phone */
  .visit__place { grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-4); }
  .visit__map-frame { inset: -90px; }   /* a small square: crop further, so only our credit shows */
  .visit__map-credit { right: var(--s-1); bottom: var(--s-1); padding: 1px 5px; font-size: 10.5px; white-space: nowrap; }
  .visit__addr { font-size: 20px; }
  .visit__place-words p:not(.visit__addr) { font-size: var(--text-small); }
}
/* the info bar below a computer's width: two by two, still the same height, still a line between parts */
@media (max-width: 1199.98px) {
  .info__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .info__cell + .info__cell { border-left: 0; }
  .info__cell:nth-child(even) { border-left: 1px solid rgba(15, 14, 10, .3); }
  .info__cell:nth-child(n + 3) { border-top: 1px solid rgba(15, 14, 10, .3); }
}
@media (max-width: 520px) {
  .info__in { width: 100%; }
  .info__cell { padding: var(--s-4); }
}

/* motion, the values read from Daybreak's own reveal script: a block waits 0.15 s, then fades in over 0.9 s and
   rises 28px over 1.1 s; photos drift 32px in from their own side and 10px up (20px up on a phone), and their
   picture settles from a 1.06 zoom over 1.6 s; blocks that arrive together follow one another 0.12 s apart.
   Only with .motion on <html>, which is never set when reduced motion is on, and never on the first screen. */
.motion [data-rise] { opacity: 0; transform: translate3d(0, 28px, 0);
  transition: opacity .9s ease, transform 1.1s var(--ease); transition-delay: var(--d, .15s); }
.motion [data-drift] { opacity: 0; transform: translate3d(var(--dx, 0), var(--dy, 10px), 0);
  transition: opacity .9s ease, transform 1.1s var(--ease); transition-delay: var(--d, .15s); }
.motion [data-drift="left"] { --dx: -32px; }
.motion [data-drift="right"] { --dx: 32px; }
@media (max-width: 781px) { .motion [data-drift] { --dx: 0px; --dy: 20px; } }
.motion [data-drift] img { transform: scale(1.06); transition: transform 1.6s var(--ease); transition-delay: var(--d, .15s); }
.motion .is-in[data-rise], .motion .is-in[data-drift] { opacity: 1; transform: none; }
.motion .is-in[data-drift] img { transform: none; }
.motion .is-now, .motion .is-now img { transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
  [data-rise], [data-drift], [data-drift] img { opacity: 1 !important; transform: none !important; }
}