/* JOE'S / Chef Joe at Roadhouse - the design system (revamp R1, 8 Oct 2026).
   Written clean to replace site.css (190 KB of dated patch passes). The first screen's rules
   (tokens, reset, base, header, status line, hero, local guide banner, buttons) are inlined in
   each page from _src/joes-critical.css; this file is linked at the END of <body>, so it never
   blocks the first paint, and it only adds to the layers that block declared:
     @layer reset, tokens, base, layout, components, pages, utilities;
   Rules of the house: tokens only (no raw colour outside the token block, except Mimi's own
   palette, scoped to her card); min-width breakpoints only, 40 / 56 / 72 rem; cards follow
   their container (container queries); transform and opacity are the only animated properties;
   no !important outside the reduced-motion and print blocks. */

/* ═══ LAYOUT ═════════════════════════════════════════════════════════════ */
@layer layout {
  .sec { position: relative; padding-block: var(--sec); }
  /* The poster's thin brass divider, fading out at both ends, opens every section. */
  .sec + .sec, .lg-banner + .sec { background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brass) 55%, transparent) 18%, var(--brass) 50%, color-mix(in srgb, var(--brass) 55%, transparent) 82%, transparent); background-size: 100% 1px; background-repeat: no-repeat; }
  /* Section skipping (content-visibility) lives in the critical CSS: it has to apply from the
     first paint, or the phone lays the whole page out once before this file arrives. */
  /* Lists that are layout, not prose, carry no markers (role="list" lists get this in the reset). */
  .foot-social, .order-steps, .steps, .drawer-links { list-style: none; }
  .wrap-narrow { width: min(760px, 100% - var(--gutter) * 2); margin-inline: auto; }
  .split { display: grid; gap: var(--sp-lg); }
  @media (min-width: 56rem) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-xl); align-items: start; } }
}

/* ═══ COMPONENTS ═════════════════════════════════════════════════════════ */
@layer components {
  /* ── Section heads ── */
  .sec-h { position: relative; width: fit-content; margin-bottom: calc(var(--sp-xs) + .5rem); font-size: var(--step-2); color: var(--ink); }
  .sec-h::after { content: ""; position: absolute; left: 0; bottom: -.45rem; width: clamp(2.6rem, 14%, 4.5rem); height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--ember), var(--brass)); }
  .sec-sub { max-width: 58ch; margin-bottom: var(--sp-md); color: var(--muted); }
  .sec-sub a { font-weight: 700; }
  /* JOE'S taglines over a section head (Joe, 8 Oct night: "Come to Joe's", "Have you been to Joe's?"),
     in the footer sign-off's face. On white they take ember-dk (7.5:1); ember-type fails there (2.6:1).
     Works as its own line before the heading or as the first line inside it. */
  .sec-tag { display: block; width: fit-content; margin-bottom: .35rem; font-family: var(--f-display); font-weight: 400; font-size: var(--step-1); line-height: 1.05; letter-spacing: .03em; text-transform: uppercase; color: var(--ember-dk); }
  .shot-cap { margin-top: .55rem; font-size: var(--step--1); line-height: 1.4; color: var(--muted); }
  .shot-cap em { color: var(--ink); }

  /* Fold-outs: native <details>, the words stay in the page for search and with no script. */
  .fold > summary { list-style: none; width: fit-content; cursor: pointer; }
  .fold > summary::-webkit-details-marker { display: none; }
  .fold .when-open, .fold[open] .when-closed { display: none; }
  .fold[open] .when-open { display: inline; }
  .fold[open] > summary { margin-bottom: var(--sp-md); }

  /* ── Menu ────────────────────────────────────────────────────────────────
     Printed-board rows: name, dotted leader, price; a square thumbnail when the dish has a
     photo. Phone: one column under a sticky chip bar. 48rem: the board runs two ruled
     columns. 64rem: a rail (title, poster, search, section index - sticky) beside the board. */
  .menu-rail, .menu-tools { display: contents; }
  .menu-main { min-width: 0; }
  /* Phone: the printed board floats beside the intro, so the words take the full width once
     they pass it (a side column made the intro twelve narrow lines). */
  .menu-head::after { content: ""; display: block; clear: both; }
  .menu-head-copy { min-width: 0; }
  .menu-head-copy .sec-sub { margin-bottom: var(--sp-sm); }
  .menu-order-note { max-width: 62ch; margin: 0 0 var(--sp-xs); font-size: var(--step--1); color: var(--muted); }
  .menu-order-note b { color: var(--ink); }
  .menu-order-note a { font-weight: 700; white-space: nowrap; padding-block: .9rem; }
  /* Order online first, then call (Joe, 17 Oct 2026): "Order online" stays bold, the phone is a regular-weight link. */
  .menu-order-note a[href^="tel:"] { font-weight: 400; }
  .menu-today { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem; max-width: 58ch; margin: 0 0 var(--sp-md); padding: .75em 1.1em; border-left: 3px solid var(--ember); border-radius: 0 var(--r) var(--r) 0; background: var(--tint); }
  .menu-today::before { content: "Tonight"; flex: none; font-family: var(--f-display); font-size: .8em; letter-spacing: .1em; text-transform: uppercase; color: var(--ember); }
  :lang(es) .menu-today::before { content: "Esta noche"; }
  .menu-poster { float: right; width: 5.5rem; margin: .3rem 0 .6rem 1rem; }
  .menu-poster .gallery-link { display: block; border-radius: 6px; }
  .menu-poster img { width: 100%; aspect-ratio: 800 / 1196; border-radius: 6px; background: var(--tint); box-shadow: var(--sh-2); outline: 1px solid var(--line); outline-offset: -1px; }
  .menu-poster .shot-cap { margin-top: .4rem; font-size: .74rem; line-height: 1.3; }
  .menu-poster .shot-cap b { display: none; }
  @media (min-width: 34rem) { .menu-poster { width: 6.25rem; margin-left: var(--sp-lg); } }

  .menu-jump {
    position: sticky; top: var(--nav-h); z-index: 20;
    display: flex; gap: .45rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity;
    margin: var(--sp-sm) calc(-1 * var(--gutter)) 0; padding: .35rem var(--gutter); scroll-padding-inline: var(--gutter);
    background: color-mix(in srgb, var(--white) 94%, transparent); border-bottom: 1px solid var(--line);
  }
  .menu-jump::-webkit-scrollbar { display: none; }
  .menu-jump a {
    flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .95rem;
    border: 1.5px solid var(--ctl-line); border-radius: var(--r-pill); background: var(--paper);
    color: var(--ink); text-decoration: none; font-weight: 700; font-size: var(--step--1); white-space: nowrap;
  }
  .menu-jump a:hover, .menu-jump a:focus-visible, .menu-jump a.is-on { border-color: var(--ember); color: var(--ember-dk); }
  .menu-find { max-width: 36rem; margin-top: var(--sp-sm); }
  .menu-find label { display: block; margin-bottom: .35rem; font-weight: 700; font-size: var(--step--1); }
  .menu-find input { width: 100%; min-height: 48px; padding: .7em 1em; border: 1.5px solid var(--ctl-line); border-radius: var(--r-pill); background: var(--paper); font-size: max(16px, var(--step-0)); }
  .menu-find input::placeholder { color: var(--muted); opacity: 1; }
  .menu-find input:focus-visible { outline-offset: 2px; border-color: var(--ember); }
  .menu-find__status { margin-top: .45rem; font-size: var(--step--1); font-weight: 600; }
  .menu-find__status:empty { display: none; }
  .menu-find__allergy { margin-top: .7rem; padding: .8rem 1rem; border-left: 4px solid var(--ember); border-radius: 0 var(--r) var(--r) 0; background: var(--tint); font-size: var(--step--1); color: var(--muted); }
  .menu-find__allergy strong, .menu-find__allergy a { color: var(--ember); font-weight: 700; }

  .menu-board { margin-top: var(--sp-sm); }
  .menu-sec { break-inside: avoid; padding-bottom: var(--sp-md); }
  .menu-cat { display: flex; align-items: center; gap: .9rem; margin-bottom: .45rem; font-size: var(--step-2); letter-spacing: .07em; color: var(--ember); scroll-margin-top: 5.5rem; }
  .menu-cat::after { content: ""; flex: 1 1 auto; min-width: 1.5rem; border-top: 2px solid var(--brass); }
  .menu-cat.has-loop { position: relative; padding-right: 4rem; margin-bottom: 1.1rem; }
  .ml-loop { position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 3.25rem; height: 3.25rem; padding: 0; overflow: hidden; border: 3px solid var(--paper); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--brass), var(--sh-1); }
  .ml-loop video { width: 100%; height: 100%; object-fit: cover; }
  .menu-note { max-width: 62ch; margin-bottom: .3rem; padding-left: .75rem; border-left: 2px solid var(--brass); font-size: var(--step--1); line-height: 1.5; color: var(--muted); }
  .menu-list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--sp-lg); }
  .menu-list--tight { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.1rem; }
  .ml-row { min-width: 0; padding: .5rem 0; border-bottom: 1px solid var(--line); }
  .ml-head { display: flex; align-items: baseline; gap: .55rem; }
  .ml-name { min-width: 0; font-family: var(--f-body); font-weight: 700; font-size: var(--step-0); letter-spacing: .005em; text-transform: none; color: var(--ink); }
  .ml-lead { flex: 1 1 1rem; min-width: .75rem; border-bottom: 2px dotted var(--ctl-line); transform: translateY(-.3em); }
  .ml-price { font-family: var(--f-display); font-size: var(--step-1); line-height: 1; letter-spacing: .02em; color: var(--ember); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ml-ask { font-size: var(--step--1); font-weight: 700; color: var(--muted); white-space: nowrap; }
  .ml-desc { margin-top: .1rem; line-height: 1.5; color: var(--muted); }
  .ml-badge { margin-top: .25rem; padding-left: .5rem; border-left: 3px solid var(--ember); font-size: var(--step--1); font-weight: 700; line-height: 1.35; color: var(--ember); }
  .menu-list--tight .ml-row { padding: .45rem 0; }
  .menu-list--tight .ml-head { justify-content: space-between; }
  .menu-list--tight .ml-name { font-size: var(--step--1); }
  .menu-list--tight .ml-price { font-size: var(--step-0); }
  .menu-list--tight .ml-lead { display: none; }
  .ml-row--photo { display: grid; grid-template-columns: 4.75rem minmax(0, 1fr); column-gap: .8rem; align-items: start; }
  .ml-row--photo > :not(.ml-photo) { grid-column: 2; }
  .ml-row--photo > .ml-photo { grid-column: 1; grid-row: 1 / span 6; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--tint); box-shadow: var(--sh-1); }
  img.ml-photo[role="button"] { cursor: zoom-in; }
  .ml-order { display: inline-flex; align-items: center; min-height: 44px; margin-top: .4rem; padding: 0 1.05rem; border-radius: var(--r-pill); background: var(--ember-fill); color: var(--white); text-decoration: none; font-weight: 700; font-size: var(--step--1); white-space: nowrap; }
  .ml-order:hover { background: var(--ember-dk); color: var(--white); }
  .ml-row > .ml-order { justify-self: start; }
  @media (min-width: 48rem) {
    .menu-board { columns: 2; column-gap: clamp(1.75rem, 3vw, 3rem); column-rule: 1px solid var(--line); }
    .menu-list--tight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* Allergies: the eye finds its own word (labels in ember, over-disclosed on purpose). */
  .menu-allergens { max-width: 78ch; margin-top: var(--sp-sm); padding-top: var(--sp-sm); border-top: 1px solid var(--brass); font-size: var(--step--1); line-height: 1.55; color: var(--muted); scroll-margin-top: 5.5rem; }
  .menu-allergens p { margin-bottom: .6rem; }
  .menu-allergens strong { color: var(--ember); font-weight: 700; }
  .menu-allergens em { color: var(--ink); }
  .menu-allergens a[href^="tel:"] { padding-block: .9rem; }
  .allergen-list { display: grid; gap: .3rem; margin: .4rem 0 .6rem; }
  .allergen-list div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .75rem; }
  .allergen-list dt { font-weight: 700; color: var(--ember); }
  .allergen-list dd { color: var(--ink); }
  .menu-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: var(--sp-md); }
  .menu-cta .btn { flex: 1 1 10rem; }
  .menu-cta .clover-note { flex-basis: 100%; margin: .2rem 0 0; }

  @media (min-width: 64rem) {
    #menu > .wrap:has(> .menu-rail) { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); column-gap: clamp(2rem, 3.4vw, 3.25rem); }
    #menu > .wrap > .menu-rail { display: block; grid-column: 1; grid-row: 1; min-width: 0; }
    #menu > .wrap > .menu-main { grid-column: 2; grid-row: 1; }
    .menu-head { display: flex; flex-direction: column; }
    .menu-head::after { content: none; }
    .menu-poster { order: 2; float: none; width: auto; margin-left: 0; position: relative; display: grid; grid-template-columns: 5.25rem minmax(0, 1fr); column-gap: .85rem; align-items: center; margin-top: var(--sp-sm); padding: .6rem .75rem .6rem .6rem; background: var(--tint); border: 1px solid var(--line); border-radius: var(--r); transition: border-color .2s; }
    .menu-poster:hover, .menu-poster:focus-within { border-color: var(--ember); }
    .menu-poster .poster-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
    .menu-poster img { rotate: -2deg; }
    .menu-poster .shot-cap { margin: 0; font-size: var(--step--1); line-height: 1.45; }
    .menu-poster .shot-cap b { display: inline; color: var(--ink); }
    .menu-tools { display: flex; flex-direction: column; gap: var(--sp-sm); position: sticky; top: calc(var(--nav-h) + 1rem); max-height: calc(100dvh - var(--nav-h) - 2rem); overflow-y: auto; overscroll-behavior: contain; margin: var(--sp-md) -.5rem 0; padding: .5rem; }
    .menu-tools .menu-find { margin: 0; max-width: none; }
    .menu-tools .allergen-list div { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .menu-tools .menu-jump { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin: 0; padding: 0; overflow: visible; background: none; border: 0; }
    .menu-tools .menu-jump a { justify-content: flex-start; padding-inline: .8rem; border-radius: 8px; }
    .menu-main > .menu-jump { margin: 0 0 var(--sp-sm); padding-inline: 0; }
    .menu-board { margin-top: 0; }
    .menu-cat, .menu-allergens { scroll-margin-top: 1rem; }
    .ml-row--photo { grid-template-columns: 5.25rem minmax(0, 1fr); column-gap: .85rem; }
    #menu > .wrap > .menu-allergens { grid-column: 1 / -1; grid-row: 2; max-width: none; display: grid; grid-template-columns: subgrid; align-items: start; }
    .menu-allergens > p { grid-column: 1; margin: 0; }
    .menu-allergens > p:last-child { margin-top: .6rem; }
    .menu-allergens > .allergen-list { grid-column: 2; grid-row: 1 / span 2; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-lg); }
    #menu > .wrap > .menu-cta { grid-column: 2; grid-row: 3; }
    #menu > .wrap > .dessert-next { grid-column: 1 / -1; grid-row: 4; }
    .menu-cta .btn { flex: 0 1 auto; }
    .menu-cta .clover-note { flex: 1 1 16rem; margin: 0 0 0 .4rem; }
  }

  /* ── Dessert next door: Mimi's card, in MIMI'S look (Joe, 7 Oct) ───────────
     Her palette is scoped to this block only (her tokens from mimissweettreats.com), so
     nothing leaks into Joe's. Phone: a compact card (photo beside the name), the live
     flavors under it in two columns. Wide: card and board side by side. */
  .dessert-next { container-type: inline-size; margin-top: var(--sp-lg); padding-top: var(--sp-md); border-top: 1px solid var(--brass); }
  .dessert-next > .eyebrow { margin-bottom: .4rem; }
  .dessert-next > h3 { margin: .1rem 0 .45rem; font-size: var(--step-2); line-height: 1.05; color: var(--ink); }
  .dessert-next > p { max-width: 62ch; margin-bottom: .7rem; }
  .mimis-row { display: grid; gap: .9rem; margin-top: .4rem; }
  .mimis-card, .mimis-flavors {
    --m-red: #d41020; --m-red-dk: #a80d19; --m-gold: #ffd700; --m-blush: #F0BFC6; --m-ink: #3a0a0c; --m-soft: #6b4a4c;
    max-width: 30rem; border: 1px solid rgb(212 16 32 / .16); border-radius: 1.25rem;
    background: linear-gradient(155deg, #fff8f2, #ffffff 55%, #fff7e8); box-shadow: 0 1px 2px rgb(58 10 12 / .08), 0 6px 18px -8px rgb(58 10 12 / .22);
  }
  .mimis-card { display: grid; grid-template-columns: 7rem minmax(0, 1fr); overflow: hidden; }
  .mimis-card .mc-photo { width: 100%; height: 100%; min-height: 9rem; object-fit: cover; }
  .mimis-card .mc-body { display: grid; gap: .45rem; align-content: start; padding: .8rem .9rem .85rem; border-left: 4px solid var(--m-blush); }
  .mimis-card .mc-head { display: flex; align-items: center; gap: .55rem; }
  .mimis-card .mc-logo { flex: none; width: 44px; height: 44px; }
  .mimis-card .mc-name { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 700; font-size: 1.12rem; line-height: 1.15; color: var(--m-red-dk); }
  .mimis-card .mc-name span { display: block; margin-top: .15rem; font: 700 .68rem/1.3 var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--m-ink); }
  .mimis-card .mc-line { font-size: var(--step--1); color: var(--m-ink); }
  .mimis-card .mc-btns { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .9rem; }
  .mimis-card .mc-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: var(--r-pill); background: var(--m-red); color: #fff; font-weight: 700; text-decoration: none; box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ink) 12%, transparent); }
  .mimis-card .mc-btn:hover { background: var(--m-red-dk); color: #fff; }
  .mimis-card .mc-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--m-red-dk); font-weight: 700; }
  .mimis-card a:focus-visible, .mimis-flavors a:focus-visible { outline-color: var(--m-gold); }
  .mimis-flavors { container-type: inline-size; padding: .9rem 1.1rem; }
  .mimis-flavors h4 { margin-bottom: .5rem; font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 1.25rem; text-transform: none; color: var(--m-red-dk); }
  .mf-list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 1rem; }
  .mf-list li { position: relative; padding: .38rem 0 .38rem 1.1rem; border-bottom: 1px solid rgb(212 16 32 / .12); font-weight: 600; font-size: .95rem; line-height: 1.3; color: var(--m-ink); }
  .mf-list li::before { content: ""; position: absolute; left: 0; top: .8rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--m-blush); box-shadow: inset 0 0 0 1.5px var(--m-red); }
  .mf-list li.mf-wait { grid-column: 1 / -1; padding-left: 0; color: var(--m-soft); }
  .mf-list li.mf-wait::before { display: none; }
  .mf-upd { margin-top: .6rem; font-size: .8rem; color: var(--m-soft); }
  @container (min-width: 16rem) { .mf-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @container (min-width: 26rem) { .mimis-card { grid-template-columns: 9.5rem minmax(0, 1fr); } }
  @container (min-width: 40rem) {
    .mimis-row { grid-template-columns: minmax(0, 24rem) minmax(0, 1fr); align-items: start; }
    .mimis-card { grid-template-columns: minmax(0, 1fr); }
    .mimis-card .mc-photo { aspect-ratio: 800 / 534; height: auto; min-height: 0; }
    .mimis-card .mc-body { border-left: 0; border-top: 5px solid var(--m-blush); padding: .95rem 1.1rem 1.05rem; }
    .mimis-card .mc-logo { width: 64px; height: 64px; }
    .mimis-card .mc-name { font-size: 1.3rem; }
  }

  /* ── Order ahead ─────────────────────────────────────────────────────────
     The handout's offer box: the warm tint between two heavy ember rules. Phone: centred,
     the three steps, the big order button, the "or call" line under a brass rule. 56rem: the
     ask and the button left, the "or call" line right on the griddle loop (desktop only). */
  .cta-panel {
    max-width: 44rem; margin-inline: auto; padding: clamp(1.5rem, 1.3rem + 2vw, 2.8rem) clamp(1.1rem, .8rem + 2vw, 2.6rem);
    background: var(--tint); border-block: 4px solid var(--ember); border-radius: 4px; box-shadow: var(--sh-2); text-align: center;
  }
  .cta-panel .sec-h { margin-inline: auto; }
  .cta-panel .sec-h::after { left: 50%; transform: translateX(-50%); }
  .cta-panel .sec-sub { margin-inline: auto; }
  .hl { position: relative; z-index: 0; color: var(--ink); white-space: nowrap; }
  .hl::before { content: ""; position: absolute; z-index: -1; inset: .08em -.18em -.04em; border-radius: 3px; background: color-mix(in srgb, var(--brass) 34%, transparent); transform-origin: 0 50%; }
  .order-steps { display: grid; gap: .5rem; max-width: 42ch; margin: var(--sp-sm) auto 0; text-align: left; }
  .order-steps li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); column-gap: .55rem; align-items: baseline; font-size: var(--step--1); line-height: 1.45; color: var(--muted); }
  .order-steps b { font-family: var(--f-display); font-weight: 400; font-size: 1.3rem; line-height: 1; color: var(--ember); }
  .order-steps em { font-style: normal; font-weight: 700; color: var(--ink); }
  /* Order online first, then call (Joe, 17 Oct 2026: "order online with our link and then call"):
     "Build your order" carries the panel's display type (Anton, the biggest thing in the panel);
     the phone is a body-size "or call" line under the brass rule. It was the other way round:
     the number was 2.8rem Anton and the order button 0.9rem. */
  .order-alt-btns { display: flex; justify-content: center; margin-top: var(--sp-md); }
  .order-alt-btns .btn {
    flex: 1 1 100%; min-height: 56px; padding: .5em 1.3em;
    font-family: var(--f-display); font-weight: 400; font-size: clamp(1.35rem, 1.05rem + 1.4vw, 1.75rem); line-height: 1.05; letter-spacing: .03em; text-transform: uppercase;
  }
  .order-fine { max-width: 46ch; margin: .7rem auto 0; font-size: var(--step--1); color: var(--muted); }
  .order-call { margin-top: var(--sp-md); padding-top: var(--sp-md); border-top: 1px solid var(--brass); }
  .order-call__line { font-size: var(--step-0); font-weight: 600; line-height: 1.4; color: var(--navy); }
  .order-call__tel { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .15rem; font-weight: 700; color: var(--ember); text-underline-offset: 3px; font-variant-numeric: tabular-nums; }
  .order-call__tel:hover { color: var(--ember-dk); text-decoration-thickness: 2px; }
  .order-call__note { max-width: 40ch; margin: .35rem auto 0; font-size: var(--step--1); color: var(--muted); }
  .order-call__bg, .order-call__pause { display: none; }
  .order-status { max-width: 46ch; margin: .85rem auto 0; font-size: var(--step--1); font-weight: 700; color: var(--navy); }
  @media (min-width: 40rem) { .order-alt-btns .btn { flex: 0 1 auto; } }
  @media (min-width: 56rem) {
    .cta-panel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 4rem); align-items: center; max-width: none; padding: clamp(2rem, 1.4rem + 1.6vw, 3rem) clamp(2rem, 1.4rem + 2vw, 3.4rem); text-align: left; }
    .cta-panel > * { grid-column: 1; }
    .cta-panel .sec-h, .cta-panel .sec-sub, .cta-panel .order-fine, .cta-panel .order-steps { margin-inline: 0; }
    .cta-panel .sec-h::after { left: 0; transform: none; }
    .order-alt-btns { justify-content: flex-start; }
    .cta-panel > .order-call {
      position: relative; isolation: isolate; overflow: hidden; grid-column: 2; grid-row: 1 / span 6; align-self: stretch;
      display: flex; flex-direction: column; justify-content: flex-end; min-height: 22rem; margin: 0; padding: clamp(1.6rem, 1rem + 2vw, 2.6rem);
      border: 0; border-radius: var(--r-lg); background: var(--ink) url(/assets/video/griddle-loop-v1-poster.webp) center / cover no-repeat; box-shadow: var(--sh-2);
    }
    .cta-panel > .order-call::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(12 31 57 / 0), color-mix(in srgb, var(--ink) 12%, transparent) 38%, color-mix(in srgb, var(--ink) 78%, transparent) 66%, color-mix(in srgb, var(--ink) 92%, transparent)); }
    .order-call__bg { display: block; position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
    .order-call__bg.is-on { opacity: 1; }
    .cta-panel .order-call__line { font-size: var(--step-1); color: var(--tint-2); text-shadow: 0 1px 10px color-mix(in srgb, var(--ink) 45%, transparent); }
    .cta-panel .order-call__tel { color: var(--gold-soft); }
    .cta-panel .order-call__tel:hover { color: var(--on-dark); text-decoration-color: var(--ember-lt); }
    .cta-panel .order-call__note { margin-inline: 0; color: var(--on-dark-soft); }
    .cta-panel .order-call :focus-visible { outline-color: var(--gold-soft); }
  }
  /* The round pause control on the two desktop loops (WCAG 2.2.2). */
  @media (min-width: 56rem) {
    .bg-pause:not([hidden]), .order-call__pause:not([hidden]) {
      display: grid; place-items: center; position: absolute; right: .9rem; bottom: .9rem; z-index: 2; width: 2.75rem; height: 2.75rem; padding: 0;
      border: 1px solid color-mix(in srgb, var(--white) 35%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--ink) 55%, transparent); color: var(--on-dark); font-size: .8rem; line-height: 1;
    }
    .bg-pause:hover, .order-call__pause:hover { background: color-mix(in srgb, var(--ink) 85%, transparent); }
    .bg-pause:focus-visible, .order-call__pause:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 2px; }
  }

  /* ── Where to find us ────────────────────────────────────────────────────
     The week as a ruled table (open Sun-Wed left, closed Thu-Sat right), the standing hours
     as its total line; the trailer photo; the map with the one turn rule under it. Open and
     closed differ four ways, never by colour alone: dot, ground, leader and the words. */
  .find-grid { display: grid; gap: var(--sp-lg); }
  .find-copy { min-width: 0; }
  .days { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--sp-md); border-top: 3px solid var(--ink); }
  .day { display: flex; align-items: center; gap: .4rem; padding: .62rem .4rem; border-bottom: 1px solid var(--line); background: var(--tint); color: var(--muted); }
  .day dt { display: flex; align-items: center; gap: .4rem; font-family: var(--f-display); font-size: 1.15rem; line-height: 1; letter-spacing: .05em; }
  .day dd { order: 2; min-width: 0; text-align: right; font-size: .85rem; font-weight: 700; line-height: 1.1; letter-spacing: .02em; }
  .day::after { content: ""; order: 1; flex: 1 1 0; align-self: flex-end; min-width: .5rem; margin-bottom: .3rem; border-bottom: 2px dotted var(--ctl-line); }
  .day .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ctl-line); }
  .day.on { background: var(--paper); }
  .day.on dt { color: var(--ink); }
  .day.on dd { color: var(--ember); }
  .day.on .dot { background: var(--ember); border-color: var(--ember); }
  .day.on::after { border-bottom-color: var(--brass); }
  .day.avail { background: var(--paper); outline: 1.5px dashed var(--brass); outline-offset: -3px; }
  .day.avail dt { color: var(--ink); }
  .day.today { outline: 2.5px solid var(--ink); outline-offset: -3px; }
  .hours-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .65rem; padding: .65rem .55rem 0; border-top: 3px solid var(--ink); }
  .hours-line strong { font-family: var(--f-display); font-weight: 400; font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ember); }
  .hours-line [data-slot] { font-weight: 700; color: var(--ink); }
  .notice { display: flex; align-items: flex-start; gap: .8rem; margin-top: var(--sp-sm); padding: .9rem 1.1rem; border: 1.5px solid var(--brass); border-left-width: 5px; border-radius: var(--r); background: var(--tint); font-size: var(--step--1); }
  .notice p { min-width: 0; overflow-wrap: anywhere; }
  .find-photo { margin: 0; }
  .find-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 58%; border-radius: var(--r-lg); background: var(--tint); box-shadow: var(--sh-2); }
  .directions { display: grid; gap: var(--sp-md); margin-top: var(--sp-lg); }
  .dir-map { margin: 0; }
  .dir-map .gallery-link { position: relative; display: block; border-radius: var(--r-lg); }
  .dir-map img { width: 100%; border: 1px solid var(--line); border-radius: var(--r-lg); }
  .route-trace { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); overflow: visible; pointer-events: none; }
  .route-trace path { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
  .dir-copy { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-xs); }
  .dir-copy > h3, .dir-copy > .dir-rule, .dir-copy > .fold[open] { flex: 1 1 100%; }
  .dir-copy h3 { display: flex; align-items: center; gap: .75rem; font-size: var(--step-1); letter-spacing: .02em; }
  .dir-copy h3::after { content: ""; flex: 1 1 auto; border-top: 2px solid var(--brass); }
  .dir-rule { margin-bottom: .15rem; padding: .75rem 1rem; border-left: 4px solid var(--ember); border-radius: 0 var(--r) var(--r) 0; background: var(--tint); }
  .dir-list dt { margin-top: .85rem; font-weight: 700; }
  .dir-list dd { margin-top: .15rem; color: var(--muted); }
  @media (min-width: 23rem) { .days { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; } }
  @media (min-width: 40rem) {
    .day { gap: .5rem; padding-inline: .55rem; }
    .day dt { gap: .5rem; font-size: 1.2rem; letter-spacing: .06em; }
    .day dd { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
  }
  @media (min-width: 48rem) {
    #find > .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: var(--sp-lg); align-items: start; }
    #find .directions { margin-top: 0; align-content: start; }
    .find-photo img { aspect-ratio: 3 / 2; object-position: 50% 50%; }
  }
  @media (min-width: 56rem) { #find > .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-xl); } }

  /* ── This week at the Roadhouse: the courtyard's events + the Sunday football card ── */
  .week-grid { display: grid; gap: var(--sp-lg); }
  .ev-list { display: grid; gap: .6rem; }
  .ev { display: grid; grid-template-columns: 3.9rem minmax(0, 1fr); gap: .8rem; padding: .8rem 0 .15rem; border-top: 1px solid var(--brass); }
  .ev:has(.ev-img) { grid-template-columns: 3.9rem minmax(0, 1fr) 4rem; }
  .ev-date { font-family: var(--f-display); font-size: 1.3rem; line-height: 1; text-transform: uppercase; color: var(--ink); }
  .ev-date b { display: block; margin-bottom: .2rem; font-weight: 400; font-size: .85rem; letter-spacing: .08em; color: var(--ember); }
  .ev-body { min-width: 0; }
  .ev-body h3 { margin: .1rem 0 .3rem; font-size: 1.05rem; line-height: 1.25; color: var(--ink); }
  .ev-body p { margin-bottom: .3rem; font-size: var(--step--1); line-height: 1.5; color: var(--muted); }
  .ev-body .ev-who { font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
  .ev-who::before { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .4rem; border-radius: 50%; vertical-align: .05rem; background: var(--brass); }
  .ev--mimis .ev-who::before { background: #d41020; }   /* Mimi's red: her key colour, a dot only */
  .ev--dr .ev-who::before { background: var(--navy); }
  .ev--cj .ev-who::before { background: var(--ember); }
  .ev-who a { color: inherit; }
  .ev-links { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
  .ev-links a, .ev-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
  .ev-img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-top: .25rem; border-radius: 10px; background: var(--tint); box-shadow: var(--sh-1); }
  .ev-more { margin-top: .6rem; }
  .ev-morebtn { margin-top: .8rem; }
  .ev-none { margin-bottom: .75rem; font-weight: 600; color: var(--navy); }
  .ev-past { margin-top: 1rem; padding-top: .25rem; border-top: 1px solid var(--line); }
  .ev-past > summary { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; list-style: none; cursor: pointer; font-weight: 700; color: var(--navy); }
  .ev-past > summary::-webkit-details-marker { display: none; }
  .ev-past > summary::before { content: "\25B8"; color: var(--ember); transition: transform .2s; }
  .ev-past[open] > summary::before { transform: rotate(90deg); }
  .ev--past { opacity: .78; }
  .ev--past .ev-links a[href*="calendar.google"] { display: none; }

  .fb-card { container-type: inline-size; display: grid; gap: var(--sp-sm); align-content: start; }
  .fb-card .eyebrow { margin-bottom: 0; }
  .fb-card > h3 { font-size: var(--step-2); color: var(--ink); }
  .fb-card > p { color: var(--muted); }
  .gd-match { padding: clamp(1rem, .8rem + 1.2vw, 1.5rem); border: 1px solid var(--line); border-top: 4px solid var(--ember); border-radius: var(--r-lg); background: var(--tint); box-shadow: var(--sh-1); }
  .gd-match-tag { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ember); }
  .gd-match-teams { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .55rem; margin: .35rem 0 .2rem; font-family: var(--f-display); font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem); line-height: 1; text-transform: uppercase; color: var(--ink); }
  .gd-match-teams b { font-weight: 400; }
  .gd-match-teams .gd-at { font-family: var(--f-body); font-size: .4em; font-weight: 700; text-transform: none; color: var(--muted); }
  .gd-match-meta { font-size: var(--step--1); font-weight: 600; color: var(--navy); }
  .gd-match-count { display: inline-flex; align-items: center; gap: .5rem; margin-top: .7rem; padding: .45rem .85rem; border-radius: var(--r-pill); background: var(--ink); color: var(--on-dark); font-weight: 700; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
  .gd-match-count[data-state="live"] { background: var(--ember-fill); }
  .gd-match-count[data-state="live"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-dark); animation: gd-pulse 1.6s ease-in-out infinite; }
  .gd-match-count[data-state="final"] { background: var(--navy); }
  .gd-match-where { margin-top: .6rem; font-size: var(--step--1); color: var(--muted); }
  @keyframes gd-pulse { 50% { opacity: .25; } }
  /* The tailgate specials: dine-in only, so a fold in the football card, never an order button. */
  .gd-card { padding: clamp(1rem, .8rem + 1.2vw, 1.6rem); border-top: 4px solid var(--ember); border-radius: var(--r-lg); background: var(--ink); color: var(--on-dark); box-shadow: var(--sh-2); }
  .gd-card > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; min-height: 44px; list-style: none; cursor: pointer; }
  .gd-card > summary::-webkit-details-marker { display: none; }
  .gd-card > summary::after { content: "+"; margin-left: auto; font: 400 1.6rem/1 var(--f-display); color: var(--gold-soft); }
  .gd-card[open] > summary::after { content: "\2212"; }
  .gd-card :focus-visible { outline-color: var(--gold-soft); }
  .gd-tag { flex-basis: 100%; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-soft); }
  .gd-title { font-family: var(--f-display); font-weight: 400; font-size: var(--step-2); line-height: 1; text-transform: uppercase; color: var(--on-dark); }
  .gd-specials { margin-top: .5rem; }
  .gd-specials li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; padding: .55rem 0; border-bottom: 1px dotted color-mix(in srgb, var(--white) 28%, transparent); }
  .gd-specials li:last-child { border-bottom: 0; }
  .gd-specials b { color: var(--on-dark); }
  .gd-specials span { grid-column: 1; font-size: var(--step--1); line-height: 1.4; color: var(--on-dark-quiet); }
  .gd-specials span a { color: var(--tint-2); }
  .gd-specials em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-family: var(--f-display); font-size: var(--step-2); line-height: 1; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
  .gd-note { margin-top: .6rem; font-size: var(--step--1); color: var(--on-dark-quiet); }
  .bar-media { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-sm); }
  .bar-media figure { margin: 0; min-width: 0; }
  .bar-media img, .bar-media video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-lg); background: var(--ink); }
  .bar-media img { aspect-ratio: 28 / 25; object-position: 58% 50%; }
  .bar-media .shot-cap { font-size: .82rem; line-height: 1.35; }
  .gd-h { font-size: var(--step-1); line-height: 1.1; color: var(--ink); }
  .gd-h span { margin-left: .45rem; font-family: var(--f-body); font-size: var(--step--1); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); }
  .gd-games { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem; margin-top: .45rem; }
  .gd-games li { padding: .45rem .55rem; border: 1px solid var(--brass); border-radius: var(--r-lg); background: var(--paper); font-size: var(--step--1); line-height: 1.35; }
  .gd-games b { display: block; color: var(--navy); }
  .gd-games span { font-weight: 700; color: var(--ember); }
  .gd-games li.is-next { border-color: var(--ember); box-shadow: inset 0 0 0 1px var(--ember); background: var(--tint); }
  .gd-more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-underline-offset: 3px; }
  @media (min-width: 64rem) { .week-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-xl); align-items: start; } }
  @media (min-width: 56rem) { .ev:has(.ev-img) { grid-template-columns: 4.2rem minmax(0, 1fr) 5.5rem; } }

  /* ── Meet Joe: the courtyard film beside its own words, then the Method ──── */
  .meet-top { display: grid; grid-template-columns: minmax(0, min(46%, 13rem)) minmax(0, 1fr); column-gap: var(--sp-sm); align-items: start; }
  .meet-top > .sec-h, .meet-top > .sec-sub { grid-column: 1 / -1; }
  .watch-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
  .watch-grid figure { margin: 0; min-width: 0; }
  .watch-grid video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-lg); background: var(--ink); }
  .watch-script { display: flex; flex-direction: column; gap: var(--sp-xs); min-width: 0; }
  .watch-ask { font-size: .7rem; font-weight: 700; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; color: var(--ember); }
  .watch-quote { padding-left: .65rem; border-left: 3px solid var(--ember); }
  .watch-quote p { font-family: var(--f-display); font-size: clamp(1.15rem, .55rem + 3vw, 3rem); line-height: 1.04; letter-spacing: .005em; text-transform: uppercase; color: var(--ink); text-wrap: balance; }
  .watch-where { padding-top: var(--sp-xs); border-top: 1px solid var(--brass); line-height: 1.4; color: var(--navy); }
  /* The answer for someone who HAS been to Joe's (8 Oct night): the Google review link, tap-sized. */
  .watch-review { font-size: var(--step--1); line-height: 1.35; color: var(--muted); }
  .watch-review a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-underline-offset: 3px; }
  .method-in { margin-top: var(--sp-xl); padding-top: var(--sp-lg); border-top: 1px solid var(--brass); }
  .slam .w { display: inline-block; }
  .slam .key { color: var(--ember); }
  .method-lede { max-width: 60ch; font-size: var(--step-1); color: var(--navy); }
  .method-credit { max-width: 62ch; margin-bottom: var(--sp-md); padding-left: 1rem; border-left: 2px solid var(--brass); font-size: var(--step--1); color: var(--muted); }
  .method-credit strong, .method-foot strong { color: var(--ink); }
  .method-copy .fold { margin-top: var(--sp-md); }
  .steps { display: grid; border-bottom: 1px solid var(--line); counter-reset: step; }
  .step { position: relative; padding: var(--sp-sm) 0 var(--sp-sm) 2.5rem; border-top: 1px solid var(--line); counter-increment: step; }
  .step::before { content: counter(step) / ""; position: absolute; top: var(--sp-sm); left: 0; font-family: var(--f-display); font-size: 2.1rem; line-height: .9; color: var(--ember); }
  .step h3 { margin-bottom: .35rem; font-size: var(--step-1); }
  .step .temp { display: inline-block; margin-bottom: .25rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ember); font-variant-numeric: tabular-nums; }
  .step p { font-size: var(--step--1); color: var(--muted); }
  .method-foot { max-width: 64ch; margin-top: var(--sp-md); padding-top: var(--sp-sm); border-top: 1px solid var(--brass); font-size: var(--step--1); color: var(--muted); }
  .method-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: var(--sp-md); }
  .method-shots figure { margin: 0; }
  .method-shots img, .method-shots video { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--r-lg); background: var(--tint); }
  .method-shots video { object-position: 50% 30%; background: var(--ink); }
  @media (min-width: 40rem) {
    .meet-top { grid-template-columns: minmax(0, clamp(13rem, 4.5rem + 12vw, 16.5rem)) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: clamp(var(--sp-lg), .5rem + 3vw, 4rem); }
    .meet-top > .watch-grid { grid-column: 1; grid-row: 1 / -1; }
    .meet-top > .sec-h { grid-column: 2; grid-row: 2; }
    .meet-top > .sec-sub { grid-column: 2; grid-row: 3; max-width: 68ch; }
    .meet-top > .watch-script { grid-column: 2; grid-row: 4; gap: var(--sp-sm); }
    .watch-ask { font-size: .74rem; letter-spacing: .22em; }
    .watch-quote { padding-left: var(--sp-md); border-left-width: 4px; }
    .watch-quote p { max-width: 12.5em; }
    .watch-where { font-size: var(--step-1); line-height: 1.35; }
    .method-shots { gap: 1.1rem; }
  }
  @media (min-width: 48rem) {
    .method-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(var(--sp-lg), 3vw, var(--sp-xl)); align-items: start; }
    .method-copy { display: flex; flex-direction: column; align-self: stretch; }
    .method-copy > .method-foot { margin-top: auto; }
    .method-in > .method-shots { position: sticky; top: calc(var(--nav-h) + 1rem); margin: 0; gap: var(--sp-sm); }
  }

  /* ── From the courtyard: six photos; a swipe strip on phones, a bento from 64rem ── */
  .gallery-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 76%; gap: var(--sp-sm); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) .6rem; scroll-padding-inline: var(--gutter); }
  .gallery-item { position: relative; margin: 0; min-width: 0; scroll-snap-align: start; }
  .gallery-link { position: relative; display: block; overflow: hidden; border-radius: var(--r); box-shadow: var(--sh-1); }
  .gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--tint); transition: transform .3s cubic-bezier(.2, .7, .3, 1); }
  .gallery-link:hover img { transform: scale(1.035); }
  /* Captions on the photo over an ink scrim (white on >= 70% ink measures >= 6.4:1 over white). */
  .gallery-item .shot-cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.9rem .8rem .65rem; border-radius: 0 0 var(--r) var(--r); pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--ink) 90%, transparent), color-mix(in srgb, var(--ink) 78%, transparent) 58%, rgb(12 31 57 / 0)); color: var(--on-dark); font-size: .82rem; font-weight: 600; line-height: 1.3; text-wrap: balance; }
  .page-cta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: center; margin-top: var(--sp-md); }
  .gallery-follow { margin-top: var(--sp-xs); text-align: center; color: var(--muted); }
  .gallery-follow a { font-weight: 600; padding-block: .8rem; }
  @media (min-width: 40rem) {
    .gallery-grid { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding: 0; }
  }
  @media (min-width: 64rem) {
    #photos .wrap { display: grid; grid-template-columns: minmax(min-content, 1fr) repeat(3, minmax(0, 1fr)); gap: var(--sp-sm); }
    #photos .wrap::before { content: ""; grid-column: 1; grid-row: 1 / span 2; background: var(--tint); border-top: 3px solid var(--ember); border-radius: 4px; }
    #photos .gallery-grid { display: contents; }
    #photos .gallery-head { grid-column: 1; grid-row: 1; padding: var(--sp-md) var(--sp-md) 0; }
    #photos .gallery-head .sec-sub { margin-bottom: 0; }
    #photos .gallery-actions { grid-column: 1; grid-row: 2; align-self: end; padding: 0 var(--sp-md) var(--sp-sm); }
    #photos .page-cta { justify-content: flex-start; margin-top: 0; }
    #photos .gallery-follow { text-align: left; }
    #photos .gallery-link { height: 100%; }
    #photos .gallery-item img { height: 100%; }
    #photos .gallery-item:nth-child(1) { grid-column: 2; grid-row: 1; }
    #photos .gallery-item:nth-child(2) { grid-column: 2; grid-row: 2; }
    #photos .gallery-item:nth-child(3) { grid-column: 3 / span 2; grid-row: 1 / span 2; }
    #photos .gallery-item:nth-child(3) img { aspect-ratio: auto; }
    #photos .gallery-item:nth-child(4) { grid-column: 1; grid-row: 3; }
    #photos .gallery-item:nth-child(5) { grid-column: 2 / span 2; grid-row: 3; }
    #photos .gallery-item:nth-child(5) img { aspect-ratio: auto; }
    #photos .gallery-item:nth-child(6) { grid-column: 4; grid-row: 3; }
  }

  /* ── Footer: one ruled board, then the navy campus bar (campus brand law: navy holds
     the campus mark for every tenant; bone on navy 7.74:1) ── */
  .foot { padding-top: var(--sec); background: var(--tint); border-top: 1px solid var(--brass); color: var(--navy); font-size: var(--step--1); }
  .foot-board { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1px; overflow: clip; border: 1px solid var(--line); border-top: 3px solid var(--ember); border-radius: var(--r); background: var(--line); box-shadow: var(--sh-1); }
  .foot-board > * { min-width: 0; background: var(--paper); }
  .foot-board > .foot-grid { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
  .foot-grid > * { padding: .75rem .85rem .85rem; background: var(--paper); }
  .foot-board > .foot-mark { grid-column: 1; grid-row: 2; display: grid; place-items: center; padding: .5rem; }
  .foot-board > .foot-social { grid-column: 2; grid-row: 2; display: flex; align-items: center; padding: .2rem .85rem; }
  .foot-board > .foot-map { grid-column: 1 / -1; grid-row: 3; }
  .foot h3 { margin-bottom: .3rem; font-size: 1.05rem; letter-spacing: .05em; color: var(--ink); }
  .foot-grid p { line-height: 1.4; }
  .foot-grid p + p { margin-top: .5rem; }
  .foot a { font-weight: 600; text-decoration: none; }
  .foot a:hover { text-decoration: underline; }
  /* The two phone numbers and "Order ahead" (12 Oct): 44 px tap targets on phones (were 32-34 px). */
  .foot-grid a { display: inline-flex; align-items: center; min-height: 44px; padding-block: .45rem; }
  /* Order online first, then call (Joe, 17 Oct 2026): in the "Order ahead" card the link takes the big
     line and its phone (.foot-call) reads as a plain link under it; Joe's catering line keeps the big type. */
  .foot-grid a[href^="tel:"]:not(.foot-call), .foot-grid a.foot-order { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.05rem, .4rem + 3.2vw, 1.22rem); line-height: 1.05; letter-spacing: .02em; }
  .foot-grid a.foot-order { text-transform: uppercase; }
  /* The card's "or call" / "o llama al" phone runs as text (cjpolish, 17 Oct): inline, so the lead words
     and the number share a line when they fit and wrap like a sentence when they do not. As an
     inline-flex 44 px box it dropped to its own line and left "o llama al" stranded above a gap.
     The padding keeps a 44 px tap area without opening the line; the number never splits (tel nowrap). */
  .foot-grid a.foot-call { display: inline; min-height: 0; padding-block: .9rem; }
  .foot-emblem { width: 3rem; }
  .foot-tag { margin-top: .35rem; font-family: var(--f-display); font-size: .95rem; line-height: 1.1; letter-spacing: .03em; text-align: center; text-transform: uppercase; color: var(--ember-dk); }
  .foot-social a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; line-height: 1.25; }
  .foot-social svg { flex: none; }
  .foot-social b { display: block; font-weight: 600; color: var(--navy); }
  .foot-map ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); }
  .foot-map li { display: grid; min-width: 0; background: var(--paper); }
  .foot-map a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: .15rem; font-size: .78rem; line-height: 1.15; text-align: center; }
  .foot-btm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; padding: var(--sp-xs) 0 var(--sp-sm); font-size: .8rem; color: var(--muted); }
  .foot-btm a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .3rem; }
  .foot-top { margin-left: auto; font-weight: 700; }
  @media (min-width: 48rem) {
    .foot-board { grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 2fr); }
    .foot-board > .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .foot-board > .foot-map { grid-column: 3; grid-row: 2; }
    .foot-emblem { width: 4rem; }
  }
  @media (min-width: 64rem) {
    .foot-board { grid-template-columns: minmax(0, 13rem) repeat(4, minmax(0, 1fr)); }
    .foot-board > .foot-mark { grid-column: 1; grid-row: 1; }
    .foot-board > .foot-grid { grid-column: 2 / -1; grid-row: 1; }
    .foot-board > .foot-social { grid-column: 1; grid-row: 2; padding-inline: 1.3rem; }
    .foot-board > .foot-map { grid-column: 2 / -1; grid-row: 2; display: flex; align-items: center; padding: 0 1.3rem; }
    .foot-map ul { display: flex; flex-wrap: wrap; gap: 0 1.6rem; background: none; }
    .foot-map li { display: block; background: none; }
    .foot-map a { padding-inline: 0; font-size: inherit; }
    .foot-grid > * { padding: 1.05rem 1.3rem 1.15rem; }
    .foot-emblem { width: 6.5rem; }
    .foot-grid a[href^="tel:"]:not(.foot-call), .foot-grid a.foot-order { font-size: 1.5rem; }
  }
  .campus-bar { padding-block: clamp(1.4rem, 3vw, 2rem) calc(clamp(1.4rem, 3vw, 2rem) + env(safe-area-inset-bottom, 0px)); background: var(--navy); border-top: 3px solid var(--brass); color: var(--bone); }
  .campus-bar__in { display: grid; gap: 1.1rem; }
  .campus-bar p { margin: 0; font-size: .9rem; color: var(--bone); }
  .campus-bar a { color: var(--bone); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
  .campus-bar a:hover { color: var(--white); }
  .campus-bar :focus-visible { outline-color: var(--bone); }
  .lock { display: inline-block; --lock-1: clamp(22px, 2.6vw, 26px); }
  .lock .l1 { display: block; font-weight: 700; font-size: var(--lock-1); line-height: 1.1; letter-spacing: .09em; text-transform: uppercase; color: var(--bone); }
  .lock hr { height: 1px; margin: .4em 0 .35em; border: 0; background: var(--brass); }
  .lock .l2 { display: block; font-weight: 600; font-size: calc(var(--lock-1) * .43); letter-spacing: .34em; text-transform: uppercase; color: var(--bone); }
  @media (min-width: 48rem) { .campus-bar__in { grid-template-columns: auto 1fr; align-items: center; } }

  /* ── Fixed furniture: phone order bar, back to top, toast, scroll progress ── */
  .order-bar {
    position: fixed; z-index: 70; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .9rem;
    padding: .7rem calc(var(--gutter) + env(safe-area-inset-right)) calc(.7rem + env(safe-area-inset-bottom)) calc(var(--gutter) + env(safe-area-inset-left));
    background: color-mix(in srgb, var(--white) 96%, transparent); border-top: 2px solid var(--ember); box-shadow: 0 -6px 24px color-mix(in srgb, var(--ink) 10%, transparent);
    translate: 0 110%; visibility: hidden; transition: translate .32s cubic-bezier(.2, .7, .3, 1), visibility .32s;
  }
  .order-bar.show { translate: 0 0; visibility: visible; }
  .order-bar-txt { flex: 1; min-width: 0; font-size: var(--step--1); line-height: 1.25; color: var(--muted); }
  .order-bar-txt b { display: block; font-size: var(--step-0); color: var(--ink); }
  .order-bar-txt a { font-weight: 700; white-space: nowrap; text-decoration: none; padding-block: .6rem; }
  .order-bar .btn { flex: none; padding: .8em 1.4em; }
  @media (max-width: 55.99rem) {
    body:has(.order-bar.show) { padding-bottom: 78px; }
    html:has(.order-bar.show) { scroll-padding-bottom: 90px; }
    body:has(.order-bar.show) #toast { bottom: calc(94px + env(safe-area-inset-bottom)); }
    body:has(.order-bar.show) .to-top { bottom: calc(78px + .75rem + env(safe-area-inset-bottom)); }
  }
  @media (min-width: 56rem) { .order-bar { display: none; } }
  .to-top {
    position: fixed; z-index: 65; right: calc(var(--gutter) + env(safe-area-inset-right)); bottom: calc(1.25rem + env(safe-area-inset-bottom));
    display: grid; place-items: center; width: 48px; height: 48px; border: 1.5px solid var(--ink); border-radius: 50%;
    background: var(--paper); color: var(--ink); box-shadow: var(--sh-2); opacity: 0; translate: 0 12px; visibility: hidden;
    transition: opacity .25s, translate .25s, visibility .25s;
  }
  .to-top.show { opacity: 1; translate: 0 0; visibility: visible; }
  .to-top:hover { background: var(--tint); color: var(--ember); border-color: var(--ember); }
  #toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 90; max-width: calc(100vw - 2rem); padding: .85em 1.4em; border-radius: var(--r-pill); background: var(--ink); color: var(--white); box-shadow: var(--sh-3); font-size: var(--step--1); font-weight: 600; opacity: 0; pointer-events: none; translate: -50% 0; transition: opacity .25s, translate .25s; }
  #toast.show { opacity: 1; translate: -50% -6px; }
  .progress { position: fixed; top: 0; left: 0; z-index: 80; width: 100%; height: 3px; background: linear-gradient(90deg, var(--ember), var(--brass)); transform: scaleX(0); transform-origin: 0 50%; }
  @supports (animation-timeline: scroll()) {
    .progress { animation: grow linear; animation-timeline: scroll(root); }
    @keyframes grow { to { transform: scaleX(1); } }
  }

  /* ── Dialogs: the phone menu, search, the photo and poster viewer, the order gate ── */
  .drawer {
    position: fixed; inset: 0 0 auto 0; width: 100%; max-width: none; max-height: 100dvh; margin: 0; padding: calc(.6rem + env(safe-area-inset-top, 0px)) var(--gutter) 1.4rem;
    overflow-y: auto; border: 0; border-bottom: 3px solid var(--ember); background: var(--paper); color: var(--ink); box-shadow: var(--sh-3);
  }
  .drawer::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); }
  .drawer-hd { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .6rem; }
  .drawer-hd .wm b { font-size: 1.55rem; }
  .drawer-x { min-width: 44px; min-height: 44px; padding: 0 1rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--tint); color: var(--navy); font-weight: 700; font-size: .85rem; }
  .drawer-search { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 48px; margin-bottom: .5rem; padding: 0 1rem; border: 1.5px solid var(--ctl-line); border-radius: var(--r-pill); background: var(--paper); color: var(--muted); font-weight: 600; text-align: left; }
  .drawer-links { display: grid; }
  .drawer-links a { display: flex; align-items: center; min-height: 52px; padding: 0 .4rem; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-family: var(--f-display); font-size: 1.35rem; letter-spacing: .02em; text-transform: uppercase; }
  .drawer-links a:hover, .drawer-links a[aria-current] { color: var(--ember); }
  /* Order online first, then call (Joe, 17 Oct 2026): "Order online" is the one bold link; the
     "or call" phone and the address read as regular text (the foot was 600, both links 700). */
  .drawer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; margin-top: .9rem; font-size: var(--step--1); font-weight: 400; color: var(--muted); }
  .drawer-foot a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
  .drawer-foot a[href^="tel:"] { font-weight: 400; }

  .site-search { margin: 0 auto; inset-block-start: calc(env(safe-area-inset-top, 0px) + 72px); width: min(100% - 1.5rem, 40rem); max-height: min(78vh, 36rem); padding: 0; border: 0; border-top: 4px solid var(--ember); border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: var(--sh-2); }
  .site-search[open] { display: flex; flex-direction: column; }
  .site-search::backdrop { background: color-mix(in srgb, var(--ink) 45%, transparent); }
  .ss-form { display: flex; align-items: center; gap: .55rem; padding: .5rem .7rem .5rem .9rem; border-bottom: 1px solid var(--line); }
  .ss-form:focus-within { box-shadow: inset 0 -2px 0 var(--ember); }
  .ss-form svg { flex: none; color: var(--muted); }
  .ss-form input { flex: 1; min-width: 0; min-height: 44px; border: 0; background: transparent; outline: none; font-size: 1.05rem; }
  .ss-close { flex: none; min-height: 44px; padding: 0 .85rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--tint); color: var(--navy); font-size: .8rem; font-weight: 700; }
  .ss-list { margin: 0; padding: .4rem; overflow-y: auto; overscroll-behavior: contain; list-style: none; }
  .ss-list a { display: block; padding: .6rem .75rem; border-radius: 10px; color: var(--ink); text-decoration: none; }
  .ss-list a:hover, .ss-list a:focus-visible { background: var(--tint); outline: 2px solid var(--ember); outline-offset: -2px; }
  .ss-list b { display: block; }
  .ss-list span { display: block; font-size: var(--step--1); color: var(--muted); }
  .ss-empty { padding: .9rem .75rem; font-size: var(--step--1); color: var(--muted); }

  .zoom { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; overflow: auto; overscroll-behavior: contain; border: 0; background: color-mix(in srgb, var(--ink) 94%, transparent); color: var(--white); }
  .zoom[open] { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; }
  .zoom::backdrop { background: transparent; }
  .zoom-bar { justify-self: stretch; display: flex; justify-content: flex-end; padding: .5rem .5rem 0; }
  .zoom-x { min-width: 44px; min-height: 44px; padding: 0 1rem; border: 1.5px solid var(--bone); border-radius: var(--r-pill); background: transparent; color: var(--bone); font-weight: 700; font-size: var(--step--1); }
  .zoom-x:focus-visible, .zoom-full:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
  .zoom img { align-self: center; width: min(100vw - 1rem, (100dvh - 7.5rem) * 800 / 1196, 1100px); aspect-ratio: 800 / 1196; border-radius: 4px; background: var(--white); }
  .zoom--photo img { width: min(100vw - 1rem, 1100px); max-height: calc(100dvh - 7.5rem); aspect-ratio: auto; object-fit: contain; background: none; cursor: zoom-out; }
  .zoom-full { padding: .9rem 1rem; color: var(--bone); font-weight: 700; text-underline-offset: 3px; }
  .zoom-cap { padding: .6rem 1rem 1.2rem; color: var(--bone); font-weight: 700; text-align: center; }

  .order-gate { width: min(100% - 2rem, 28rem); margin: auto; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--paper); color: var(--ink); box-shadow: var(--sh-2); }
  .order-gate::backdrop { background: color-mix(in srgb, var(--ink) 55%, transparent); }
  .og-box { padding: 1.4rem 1.4rem 1.2rem; border-top: 4px solid var(--ember); border-radius: inherit; }
  .og-box h2 { margin-bottom: .6rem; font-size: var(--step-2); line-height: 1.05; }
  .og-box p { margin-bottom: .7rem; color: var(--muted); }
  /* The sentence's "build your order" link (17 Oct 2026; it was the phone): kept on one line. */
  .og-call a { font-weight: 800; white-space: nowrap; padding-block: .6rem; }
  .og-btns { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 .4rem; }
  .og-anyway { margin-top: .4rem; font-size: var(--step--1); }
  .og-anyway a { color: var(--muted); padding-block: .6rem; }

  /* Film grain: one static noise tile over a section's pictures, under its words. */
  .grain::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
}

/* ═══ MOTION ═════════════════════════════════════════════════════════════
   The budget (storyboard R8): the "Three cooks. One chip." slam, the "hot and waiting"
   highlight, the route trace on the map, and the video loops (with their pause buttons).
   Each paints finished by default; only .armed (site.js, below the fold at load, motion
   welcome) hides anything, and .in plays it once. */
@layer utilities {
  .slam { overflow-x: clip; }
  .slam.armed .w { opacity: 0; }
  .slam.in .w { animation: slam-in .34s cubic-bezier(.16, 1, .3, 1) both; }
  .slam.in .w:nth-child(1) { --tx: 0; --ty: -.5em; --sc: 1; }
  .slam.in .w:nth-child(2) { --tx: -.6em; --ty: 0; --sc: 1; animation-delay: 60ms; }
  .slam.in .w:nth-child(3) { --tx: .6em; --ty: 0; --sc: 1; animation-delay: 120ms; }
  .slam.in .w:nth-child(4) { --tx: 0; --ty: 0; --sc: .8; animation-delay: 180ms; }
  @keyframes slam-in { from { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--sc, 1)); } to { opacity: 1; transform: none; } }
  .hl.armed::before { transform: scaleX(0); }
  .hl.in::before { animation: hl-sweep .42s cubic-bezier(.22, 1, .36, 1) both; }
  @keyframes hl-sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .route-trace.armed path { stroke-dashoffset: 1; }
  .route-trace.in path { animation: route-draw .9s cubic-bezier(.45, 0, .2, 1) both; }
  @keyframes route-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

  /* Cross-page continuity, only where motion is welcome. */
  @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
  ::view-transition-group(root) { animation-duration: .2s; }
  ::view-transition-group(menu-poster) { animation-duration: .38s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }

  /* Reduced motion: every entrance resolves to its finished state at once. */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
    .slam .w, .slam.armed .w { opacity: 1 !important; transform: none !important; }
    .hl::before { transform: none !important; }
    .route-trace path { stroke-dashoffset: 0 !important; }
    .progress { display: none; }
    .btn:hover, .gallery-link:hover img { transform: none; }
    .gd-match-count[data-state="live"]::before { animation: none !important; }
  }

  @media print {
    .nav, .status, .showbar, .order-bar, #toast, .progress, .to-top, .btns, .menu-jump, .lang-toggle, .skip, .hero-bg, .bg-pause { display: none !important; }
    .hero { background: var(--paper) !important; color: var(--ink) !important; }
    main > .sec { content-visibility: visible; }
    .sec { padding: 1.2rem 0; }
    * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  }
}