/* Tim's Avenue: one stylesheet, organized by section banners.
   Rules (CLAUDE.md §3): every colour is a token from :root or derived from one with color-mix(); only transform,
   opacity and clip-path are animated; fluid clamp() sizes, never px font sizes; one typeface. */

/* ============ Font ============ */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/bricolage-grotesque.woff2') format('woff2');
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

/* ============ Tokens ============ */
:root {
  /* Taken from the restaurant itself: the logo's blue and cream, the dining room's orange chairs, the steel trays.
     Roles: blue = identity (logo, headings, the category band); orange = action and energy (every Order button,
     prices, the ticket's header, the protein band, the review band); cream = the ground everything sits on. */
  --blue: #004df5;
  --blue-deep: #0035a8;
  --orange: #ff4f12;
  --orange-deep: #b83300;
  --cream: #fef8e0;
  --paper: #ffffff;
  --ink: #12162b;
  --ink-soft: #4a4f66;
  --steel: #d5d9e0;

  --font: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --step--2: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.8rem + 0.18vw, 0.92rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1: clamp(1.12rem, 1.05rem + 0.35vw, 1.3rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.8vw, 1.8rem);
  --display-1: clamp(2.9rem, 1.2rem + 8.4vw, 8.6rem);
  --display-2: clamp(2.4rem, 1.5rem + 4vw, 4.6rem);
  --display-3: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: clamp(0.75rem, 0.6rem + 0.6vw, 1rem);
  --space-4: clamp(1rem, 0.8rem + 1vw, 1.6rem);
  --space-5: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  --space-6: clamp(3rem, 2rem + 5vw, 6rem);

  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
  --max: 84rem;
  --bar-h: 3.75rem;
  --band-h: 3rem;
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --shadow: color-mix(in srgb, var(--ink) 16%, transparent);

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (min-width: 56em) {
  :root { --bar-h: 4.5rem; }
}

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

html {
  color-scheme: light only;
  background: var(--cream);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip; /* on html, not body: see CLAUDE.md §6 */
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar-h) + var(--band-h) + env(safe-area-inset-top) + 0.75rem);
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  font-optical-sizing: auto;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }
img, svg, video { display: block; max-width: 100%; }
svg { fill: currentColor; }
a { color: inherit; text-underline-offset: 0.18em; }
h1, h2, h3, h4, p { overflow-wrap: break-word; }
table { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: 0;
  z-index: 120;
  padding: 0.7em 1em;
  background: var(--ink);
  color: var(--cream);
  font-weight: 700;
  border-radius: 0 0 10px 10px;
  transform: translateY(-120%);
}
.skip:focus { transform: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.eyebrow {
  margin: 0;
  color: var(--orange-deep);
  font-size: var(--step--1);
  font-weight: 750;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* ============ Buttons ============ */
/* Pressable, like agenda.app's buttons: a ledge of the deep colour that the button presses into. */
.btn {
  --btn-bg: var(--blue);
  --btn-fg: var(--cream);
  --btn-ledge: var(--blue-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  min-height: 44px;
  padding: 0.62em 1.1em 0.66em;
  border: 0;
  border-radius: 12px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 750;
  font-stretch: 92%;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 0 var(--btn-ledge);
  transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
  cursor: pointer;
}
.btn svg { width: 1em; height: 1em; flex: none; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--btn-ledge); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btn-ledge); }
.btn--orange { --btn-bg: var(--orange); --btn-fg: var(--ink); --btn-ledge: var(--orange-deep); }

.round {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}
.round svg { width: 18px; height: 18px; }
.round:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.round:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

/* ============ Header ============ */
.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: calc(var(--bar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
  background: var(--cream);
}
/* The orange trim along the header's bottom edge, always on and part of the header itself. It used to fade in
   past 8 px of scroll as a pseudo-element hanging below the sticky bar: a trackpad's bounce at the top crossed
   that line back and forth, and WebKit repainted the overhang while scrolling, so it flickered (owner, 2026-10-06:
   "the orange line at the top is still flickering"). A border never toggles and never leaves the bar. */
.bar { border-bottom: 3px solid var(--orange); }

.bar__logo { display: flex; align-items: center; align-self: stretch; flex: none; color: var(--blue); }
.bar__mark { width: auto; height: clamp(1.7rem, 1.4rem + 1vw, 2.3rem); margin-block: 0.35rem; aspect-ratio: 619 / 317; }
/* The man from the restaurant's drawings stands behind the header's trim: the bar's full height, his shirt cut
   where the orange border begins, his nose toward the letters as in their lockup. The sando only shows while
   bite.js feeds him; at rest he is open-mouthed, as in their logo. */
.bar__man { align-self: flex-end; width: auto; height: var(--bar-h); margin-left: -0.15rem; aspect-ratio: 460 / 510; }
.bar__head { transform-origin: 260px 359px; }
.bar__sando { opacity: 0; fill: var(--cream); stroke: currentColor; stroke-width: 9; stroke-linejoin: round; stroke-linecap: round; }
.bar__sando [data-bite="1"], .bar__sando [data-bite="2"] { opacity: 0; }
.bar__bite { fill: none; stroke-width: 18; }

.bar__nav { display: none; }
@media (min-width: 56em) {
  .bar__nav { display: flex; gap: 0.25rem; margin-left: var(--space-4); }
  .bar__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.7rem;
    font-weight: 650;
    text-decoration: none;
    border-radius: 10px;
  }
  .bar__nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  margin-left: auto;
  padding: 0 0.25rem;
  font-size: var(--step--1);
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.status__dot {
  flex: none;
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background: var(--orange-deep);
}
.status.is-open .status__dot { background: var(--blue); animation: status-ring 2.6s ease-out infinite; }
@keyframes status-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 0.5em transparent; }
}
.status__short { display: none; }
@media (max-width: 29.99em) {
  .status__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .status__short { display: inline; }
}

.bar__order { flex: none; padding-inline: 0.95em; }
.bar__order-more { display: none; }
@media (min-width: 30em) { .bar__order-more { display: inline; } }

/* ============ Opening ============ */
/* Only with JavaScript, and only when boot.js chose to play it (html.intro-on). A CSS fail-safe hides it after
   5.5 s even if every script fails. The mark is two SVGs: solid letters that pop in, and the same letters
   clipping a photo. Only the <svg> elements and their <g> children animate, never a clip or mask's own content
   (WebKit does not repaint animated mask/clip content). */
.intro { display: none; }
html.js.intro-on .intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: intro-failsafe 0.3s linear 5.5s forwards;
}
@keyframes intro-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.intro__panel {
  position: absolute;
  inset: 0;
  background: var(--blue);
  transition: transform 0.75s var(--ease-in-out), opacity 0.5s ease;
}
.intro__mark {
  position: relative;
  width: min(78vw, 44rem);
  aspect-ratio: 619 / 317;
  transform-origin: 0 0;
}
.intro__solid, .intro__inlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.intro__solid { fill: var(--cream); transition: fill 0.5s ease; }
.intro__l {
  opacity: 0;
  transform: translateY(32%) scale(0.72);
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.intro.is-popping .intro__l { animation: intro-pop 0.52s var(--ease-spring) forwards; animation-delay: calc(var(--i, 0) * 85ms); }
@keyframes intro-pop { to { opacity: 1; transform: none; } }
.intro__inlay {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.6s var(--ease-in-out), opacity 0.4s ease;
}
.intro.is-filled .intro__inlay { clip-path: inset(0 0 0 0); }
.intro__tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(2.5rem, calc(env(safe-area-inset-bottom) + 1.5rem));
  margin: 0;
  color: var(--cream);
  font-size: var(--step--1);
  font-weight: 750;
  letter-spacing: 0.3em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.intro.is-filled .intro__tag { opacity: 1; }

/* The glide: the panel lifts, the letters turn blue and travel into the header logo (transform set by intro.js). */
.intro.is-gliding .intro__panel { transform: translateY(-101%); }
.intro.is-gliding .intro__solid { fill: var(--blue); }
.intro.is-gliding .intro__inlay { opacity: 0; }
.intro.is-gliding .intro__tag { opacity: 0; transition-duration: 0.2s; }
.intro.is-gliding .intro__mark { transition: transform 0.75s var(--ease-in-out); }

/* Reduce Motion: the same sequence without travel. Letters fade in place, the photo still fills them (a reveal,
   not a movement), and the whole opening fades away instead of lifting. */
.intro.is-calm .intro__l { transform: none; }
.intro.is-calm.is-popping .intro__l { animation: intro-fade 0.45s ease forwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes intro-fade { to { opacity: 1; } }
.intro.is-calm.is-gliding { opacity: 0; transition: opacity 0.5s ease; }
.intro.is-calm.is-gliding .intro__panel { transform: none; }

.intro.is-skipping { opacity: 0; transition: opacity 0.22s ease; }

html.intro-on { overflow: hidden; }
html.intro-on .bar__logo { visibility: hidden; }

/* ============ Entrances and reveals ============ */
html.js .cover [data-enter] { opacity: 0; transform: translateY(18px); }
html.js.intro-done .cover [data-enter] {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

html.js [data-reveal] { opacity: 0; transform: translateY(22px); }
html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .cover [data-enter], html.js [data-reveal] { transform: none; }
  .status.is-open .status__dot { animation: none; }
}

/* ============ Section heads ============ */
.section-head h2 {
  margin: 0.15em 0 0.2em;
  color: var(--blue);
  font-size: var(--display-2);
  font-stretch: 75%;
  font-weight: 800;
  line-height: 0.88;
  text-transform: uppercase;
}
.section-head__lede { max-width: 46ch; margin: 0; font-size: var(--step-1); }
.menu__how { margin-top: 0.5em; }
.menu__how a { color: var(--blue); font-weight: 750; text-decoration-thickness: 2px; }

/* ============ Cover ============ */
.cover {
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--space-5) var(--gutter) var(--space-6);
}
.cover__title {
  margin: 0.08em 0 0.14em;
  color: var(--blue);
  font-size: var(--display-1);
  font-stretch: 75%;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 0.84;
  text-transform: uppercase;
}
.cover__title-alt { color: var(--orange); }
.cover__lede { max-width: 36ch; margin: 0; font-size: var(--step-1); }
@media (min-width: 62em) {
  .cover { padding-top: var(--space-4); }
}
/* Wide screens: the line of copy sits beside the headline, so the dish and its controls fit above the fold. */
@media (min-width: 80em) {
  .cover__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    column-gap: var(--space-5);
  }
  .cover__head .eyebrow { grid-column: 1 / -1; }
  .cover__title { margin-bottom: 0; }
  .cover__lede { max-width: 30ch; padding-bottom: 0.55em; }
}

/* ============ The stage: a dish on the pass ============ */
.stage {
  display: grid;
  grid-template-areas: "media" "index" "ticket";
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-4);
}
@media (min-width: 62em) {
  .stage {
    grid-template-areas: "index media ticket";
    grid-template-columns: minmax(15rem, 0.95fr) minmax(0, 1.7fr) minmax(17rem, 1fr);
    align-items: center;
    gap: var(--space-5);
  }
}

.stage__media { grid-area: media; display: grid; gap: 0.35rem; min-width: 0; }
/* 100:86, anchored to the bottom: the top 14 % of every studio photo is empty white sweep (checked: 254-255), so
   trimming it closes the gap under the headline without ever cutting through the dish or its shadow. */
.stage__frame {
  position: relative;
  margin: 0;
  aspect-ratio: 100 / 86;
  isolation: isolate;
  background: var(--cream);
  touch-action: pan-y;
}
.stage__note { margin: 0.2rem 0 0; color: var(--ink-soft); font-size: var(--step--1); max-width: 46ch; }
/* Hidden by visibility, not display: on phones the ticket sits below the note, so removing it moved the ticket
   49 px at the change from a 360° dish to a photo (check.py, 2026-10-06). The space stays; only the words go. */
.stage__note.is-off { visibility: hidden; }
/* Under the dish: what you are looking at on the left, the controls on the right. */
.stage__caption { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
/* The studio sweep was flattened to pure white (tools/prepare_photos.py), so multiply turns it into the page. */
.stage__img, .stage__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  mix-blend-mode: multiply;
}
.stage__img { transition: opacity 0.3s var(--ease-out), transform 0.45s var(--ease-out); }
.stage__media.is-swapping .stage__img { opacity: 0; transform: scale(0.97); }
.stage__video { opacity: 0; transition: opacity 0.4s ease; }
.stage__video.is-playing { opacity: 1; }
.stage__media.has-spin .stage__img { opacity: 0; }

.stage__tag {
  margin: 0;
  color: var(--blue);
  font-size: var(--step--2);
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.stage__media.has-spin .stage__tag { color: var(--orange-deep); }

.stage__controls { display: flex; gap: 0.5rem; padding-bottom: 3px; }

.stage__index {
  grid-area: index;
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0 0 0.5rem;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.stage__index::-webkit-scrollbar { display: none; }
.stage__index li { flex: none; scroll-snap-align: start; }
.stage__index a {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem auto;
  align-items: center;
  gap: 0.65rem;
  min-height: 44px;
  padding: 0.45rem 0.85rem 0.55rem 0.45rem;
  border-radius: 14px;
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.2s;
}
.stage__index img {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 0 0 2px var(--steel);
}
.stage__no, .stage__pr { display: none; }
.stage__nm { max-width: 9.5rem; font-size: var(--step--1); font-weight: 700; line-height: 1.15; }
.stage__index a[aria-current="true"] { background: var(--paper); box-shadow: 0 0 0 2px var(--orange), 0 4px 0 var(--orange); }
.stage__index a[aria-current="true"] .stage__nm { color: var(--ink); }
.stage__index a:hover { background: var(--paper); }
.stage__bar {
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 0.2rem;
  height: 3px;
  border-radius: 3px;
  background: var(--orange);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}
.stage.is-auto a[aria-current="true"] .stage__bar { opacity: 1; }

@media (min-width: 62em) {
  .stage__index { flex-direction: column; gap: 0.15rem; overflow: visible; padding: 0; }
  .stage__index a {
    grid-template-columns: 2.6rem 1.6rem minmax(0, 1fr) auto;
    padding: 0.4rem 0.6rem;
  }
  .stage__index img { width: 2.6rem; height: 2.6rem; }
  .stage__no, .stage__pr { display: block; font-variant-numeric: tabular-nums; font-weight: 700; }
  .stage__no { color: var(--orange-deep); font-size: var(--step--2); }
  .stage__pr { color: var(--orange-deep); font-size: var(--step--1); }
  .stage__nm { max-width: none; font-size: var(--step-0); }
}

/* The ticket's shadow is a box-shadow on a layer behind it, inset so the torn teeth stay crisp. Not
   filter: drop-shadow(): a filter around the masked ticket made WebKit stop painting part of the page once the
   cover's entrance finished (an unpainted strip under the header, 2026-10-06). */
.ticket-wrap {
  grid-area: ticket;
  position: relative;
  isolation: isolate;
}
.ticket-wrap::before {
  content: '';
  position: absolute;
  inset: 2% 3% 6%;
  z-index: -1;
  border-radius: 16px;
  box-shadow: 0 16px 34px var(--shadow);
}
/* An order ticket: white paper with a torn zigzag bottom edge (a mask). */
.ticket {
  --tooth: 12px;
  padding: var(--space-4) var(--space-4) calc(var(--space-4) + var(--tooth));
  overflow: hidden; /* clips the orange header strip to the rounded corners */
  border-radius: 16px 16px 0 0;
  background: var(--paper);
  -webkit-mask:
    conic-gradient(from -45deg at bottom, transparent, var(--ink) 1deg 89deg, transparent 90deg) bottom / calc(var(--tooth) * 2) var(--tooth) repeat-x,
    linear-gradient(var(--ink) 0 0) top / 100% calc(100% - var(--tooth)) no-repeat;
  mask:
    conic-gradient(from -45deg at bottom, transparent, var(--ink) 1deg 89deg, transparent 90deg) bottom / calc(var(--tooth) * 2) var(--tooth) repeat-x,
    linear-gradient(var(--ink) 0 0) top / 100% calc(100% - var(--tooth)) no-repeat;
}
/* On a dish change only the ticket's words cross-fade. The orange header strip itself stays solid: fading the whole
   strip made it blink off every 6.5 s (owner: "the orange line ... is flickering", 2026-10-06). */
.ticket > :not(.ticket__top), .ticket__top > * { transition: opacity 0.22s ease; }
.ticket.is-swapping > :not(.ticket__top), .ticket.is-swapping .ticket__top > * { opacity: 0; }
.ticket__top {
  display: flex;
  align-items: baseline;
  gap: 0.2em;
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0;
  padding: 0.85rem var(--space-4) 0.8rem;
  background: var(--orange);
  color: var(--ink);
  font-size: var(--step--2);
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.ticket__best { margin-left: auto; color: var(--ink); }
.ticket__name {
  margin: 0.6em 0 0.15em;
  color: var(--blue);
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem);
  font-stretch: 78%;
  font-weight: 800;
  line-height: 0.95;
  text-transform: uppercase;
}
.ticket__price { margin: 0 0 0.6em; color: var(--orange-deep); font-size: var(--step-2); font-weight: 750; font-variant-numeric: tabular-nums; }
.ticket__desc { margin: 0 0 0.7em; }
.ticket__opts { margin: 0 0 0.7em; font-size: var(--step--1); font-weight: 650; }
.ticket__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-top: var(--space-3); }
.ticket__find {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 44px;
  color: var(--blue);
  font-weight: 700;
  text-decoration-thickness: 2px;
}
.ticket__find svg, .visit__links svg { width: 1em; height: 1em; flex: none; }

.spicy {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  margin: 0;
  color: var(--orange-deep);
  font-weight: 750;
}
.spicy svg { width: 1em; height: 1em; }
p.spicy { display: flex; width: fit-content; margin: 0 0 0.9em; } /* its own line: inline, it ran into the button after it */

/* ============ Pick a protein ============ */
.proteins { background: var(--orange); color: var(--ink); }
.proteins__inner {
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--space-6) var(--gutter);
}
.proteins .eyebrow { color: var(--ink); }
.proteins .section-head h2 { color: var(--ink); }
.proteins :focus-visible { outline-color: var(--ink); }
/* Each protein lists only the ways it comes (owner, 2026-10-06: the earlier grid's dashes and half-empty "Also"
   column read as if something was missing). No columns, so no gaps, and nothing to scroll sideways on a phone.
   Every price is a link to its dish, which glows when you arrive. Phones get their own arrangement (below). */
.pick {
  margin: var(--space-4) 0 0;
  padding: 0 var(--space-4);
  list-style: none;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--paper);
  box-shadow: 0 6px 0 var(--ink);
}
.pick__row {
  display: grid;
  gap: 0.8rem;
  padding: var(--space-4) 0;
}
.pick__row + .pick__row { border-top: 2px dashed var(--steel); } /* tear lines, like the order ticket */
@media (min-width: 48em) {
  .pick__row { grid-template-columns: 15rem minmax(0, 1fr); align-items: center; column-gap: var(--space-4); }
}
.pick__protein {
  margin: 0;
  color: var(--blue);
  font-size: var(--step-2);
  font-stretch: 80%;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  transition: color 0.2s;
}
.pick__row:has(.way:hover) .pick__protein, .pick__row:has(.way:focus-visible) .pick__protein { color: var(--orange-deep); }
.pick__ways {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 0.6rem;
  margin: 0;
  padding: 0 0 3px; /* room for the prices' orange underside */
  list-style: none;
}
.way {
  position: relative; /* the containing block of its visually hidden protein name, so it can never widen the page */
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background: var(--cream);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 0 var(--orange);
  transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out), background-color 0.2s, color 0.2s;
}
.way__cost { display: inline-flex; align-items: baseline; gap: 0.35em; }
/* Phones held upright (every iPhone from the SE's 320 px to the 18 Pro Max's 440 px). The same prices, rearranged
   for the width: as a row of chips they wrapped unevenly there, one alone on a line. Here they are two equal
   columns of tags, the name above the price, and an odd last one (the quesadilla) spans both, so no line ends in
   a gap. Owner, 2026-10-06: don't change the whole design for phones, make it adjust to the phone. */
@media (max-width: 30em) {
  .pick__ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem 0.6rem; }
  .pick__ways > li { display: grid; } /* the tag fills its cell */
  .pick__ways > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .way { flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; padding: 0.6rem 0.75rem; }
}
.way__name { font-size: var(--step-0); font-weight: 650; }
.way__price { font-size: var(--step-1); font-weight: 800; font-variant-numeric: tabular-nums; }
.way__unit { color: var(--ink-soft); font-size: var(--step--2); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.way__flame { align-self: center; width: 0.95em; height: 0.95em; color: var(--orange-deep); }
.way:hover, .way:focus-visible {
  background: var(--blue);
  color: var(--cream);
  box-shadow: 0 3px 0 var(--blue-deep);
  transform: translateY(-1px);
}
.way:hover :is(.way__unit, .way__flame), .way:focus-visible :is(.way__unit, .way__flame) { color: currentColor; }
.way:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--blue-deep); }
.proteins__more { margin: var(--space-4) 0 0; max-width: 60ch; }
.proteins__more a { font-weight: 750; color: var(--ink); text-decoration-thickness: 2px; }

/* ============ Menu ============ */
.menu { padding: var(--space-5) 0 var(--space-6); }
.menu > .section-head { max-width: var(--max); margin-inline: auto; padding: 0 var(--gutter); }

/* The category band: the blue trim that runs along the dining room's walls. */
.cats {
  position: sticky;
  top: calc(var(--bar-h) + env(safe-area-inset-top));
  z-index: 30;
  margin-top: var(--space-4);
  background: var(--blue);
  color: var(--cream);
}
.cats__list {
  display: flex;
  gap: 0.15rem;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 calc(var(--gutter) - 0.8rem);
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}
.cats__list::-webkit-scrollbar { display: none; }
.cats__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45em;
  min-height: var(--band-h);
  padding: 0 0.8rem;
  color: var(--cream);
  font-size: var(--step--1);
  font-stretch: 88%;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.cats__n { font-size: 0.8em; font-variant-numeric: tabular-nums; opacity: 0.8; }
.cats__link::after {
  content: '';
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.25s var(--ease-out);
}
.cats__link.is-current::after, .cats__link:hover::after { transform: none; }
.cats__link:focus-visible { outline-color: var(--cream); outline-offset: -4px; }

.cat {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-5) var(--gutter) 0;
}
.cat__title {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
  margin: 0 0 var(--space-2);
  padding-bottom: 0.3em;
  border-bottom: 3px solid var(--orange);
  color: var(--blue);
  font-size: var(--display-3);
  font-stretch: 75%;
  font-weight: 800;
  line-height: 0.9;
  text-transform: uppercase;
}
.cat__no { color: var(--orange-deep); font-size: 0.42em; font-stretch: 100%; letter-spacing: 0.08em; }
.cat__list { display: grid; column-gap: var(--space-5); }
@media (min-width: 56em) {
  .cat__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.dish {
  position: relative;
  isolation: isolate;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
/* Arriving from the protein grid or a link: the row glows orange for a moment (an opacity-only overlay). */
.dish::before {
  content: '';
  position: absolute;
  inset: 0 calc(var(--space-2) * -1);
  z-index: -1;
  border-radius: 14px;
  background: color-mix(in srgb, var(--orange) 20%, transparent);
  opacity: 0;
  pointer-events: none;
}
.dish.is-flash::before { animation: dish-flash 1.9s var(--ease-out); }
@keyframes dish-flash { 0%, 35% { opacity: 1; } 100% { opacity: 0; } }


.dish__body { min-width: 0; }
.dish__head {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  margin: 0;
  font-size: var(--step-1);
  font-weight: 780;
  line-height: 1.18;
}
.dish__name { min-width: 0; }
.dish__lead {
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  border-bottom: 2px dotted color-mix(in srgb, var(--ink) 38%, transparent);
  transform: translateY(-0.28em);
}
.dish__price { flex: none; color: var(--orange-deep); font-variant-numeric: tabular-nums; }
.dish__desc { max-width: 48ch; margin: 0.3em 0 0; color: var(--ink-soft); }
.dish__opts { margin: 0.35em 0 0; font-size: var(--step--1); }
.dish__opts-k { font-weight: 750; }
.dish__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 1rem;
  margin: 0.25em 0 0;
  font-size: var(--step--1);
}
.dish__best { color: var(--orange-deep); font-size: 0.86em; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; }
.dish__see {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  min-height: 44px;
  color: var(--blue);
  font-weight: 700;
  text-decoration-thickness: 2px;
}
.dish__see svg { width: 1em; height: 1em; flex: none; }

/* ============ A guest's words ============ */
/* Orange like the chairs, edged with the trays' checked paper. */
.say {
  position: relative;
  padding: calc(var(--space-6) + 28px) var(--gutter);
  background: var(--orange);
  color: var(--ink);
}
.say::before, .say::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 28px;
  background: repeating-conic-gradient(var(--paper) 0 25%, var(--orange) 0 50%) 0 0 / 28px 28px;
}
.say::before { top: 0; }
.say::after { bottom: 0; }
.say__track, .say__controls { max-width: 52rem; margin: 0 auto; }
.say__fig { margin: 0; }
.say__fig + .say__fig { margin-top: var(--space-5); } /* without JavaScript every review is listed */
/* Two or more reviews (reviews.js adds .is-rotating): stacked in one grid cell, so the band is as tall as the
   longest and never jumps; one shows at a time, the old one fading out before the new one fades in. */
.say.is-rotating .say__track { display: grid; }
.say.is-rotating .say__fig {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.say.is-rotating .say__fig.is-current { opacity: 1; visibility: visible; transition: opacity 0.35s ease 0.35s, visibility 0s linear 0.35s; }
@media (prefers-reduced-motion: reduce) {
  .say.is-rotating .say__fig, .say.is-rotating .say__fig.is-current { transition: none; }
}
.say__controls { display: flex; align-items: center; gap: 0.5rem; margin-top: var(--space-4); padding-bottom: 3px; }
.say__controls[hidden] { display: none; }
.say__count { margin-left: 0.4rem; font-size: var(--step--1); font-weight: 700; font-variant-numeric: tabular-nums; }
.say__quote { margin: 0; }
.say__quote p {
  margin: 0;
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3.1rem);
  font-stretch: 85%;
  font-weight: 750;
  line-height: 1.08;
  text-wrap: balance;
}
.say__who { margin-top: var(--space-4); font-size: var(--step--1); font-weight: 650; letter-spacing: 0.04em; }

/* ============ Visit ============ */
.visit {
  display: grid;
  grid-template-areas: "signs" "hours" "where";
  gap: var(--space-5);
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-6) var(--gutter);
}
@media (min-width: 56em) {
  .visit { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "signs signs" "hours where"; column-gap: var(--space-6); }
}

/* Two street-name blades on one post: the restaurant's name is an avenue, and it sits on Lincoln Ave. */
.visit__signs {
  grid-area: signs;
  position: relative;
  display: grid;
  justify-items: start;
  gap: 0.9rem;
  padding: 0.4rem 0 1.4rem 1.6rem;
}
.sign__pole {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.55rem;
  width: 0.55rem;
  border-radius: 4px;
  background: var(--steel);
  box-shadow: inset -2px 0 0 color-mix(in srgb, var(--ink) 12%, transparent);
}
.sign {
  --tilt: 0deg;   /* each blade's resting angle */
  --sway: 1deg;   /* how far it swings either side of it */
  position: relative;
  z-index: 1;
  display: block;
  padding: 5px;
  border-radius: 10px;
  background: var(--blue);
  color: var(--cream);
  box-shadow: 0 6px 0 var(--blue-deep);
  transform: rotate(var(--tilt));
  transform-origin: 50% 0;
  /* A slow, steady sway, like blades hanging from their bracket in a light breeze (owner, 2026-10-06: "slightly
     swinging left to right, very subtle"). Each blade rocks ±1° about its top centre, 3.2 s each way, eased like
     a pendulum; the lower blade follows a beat behind. Transform only, so it stays on the compositor. */
  animation: sign-sway 3.2s ease-in-out infinite alternate;
}
.sign--tims { --tilt: -2deg; animation-delay: -0.45s; background: var(--orange); color: var(--ink); box-shadow: 0 6px 0 var(--orange-deep); }
.sign--tims .sign__face { border-color: var(--ink); }
.sign--lincoln { --tilt: 1.5deg; margin-left: 2.2rem; }
@keyframes sign-sway {
  from { transform: rotate(calc(var(--tilt) - var(--sway))); }
  to { transform: rotate(calc(var(--tilt) + var(--sway))); }
}
@media (prefers-reduced-motion: reduce) {
  .sign { animation: none; }
}
.sign__face {
  display: block;
  padding: 0.08em 0.55em 0.14em;
  border: 3px solid var(--cream);
  border-radius: 7px;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem);
  font-stretch: 75%;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.sign__suffix { font-size: 0.5em; }
.sign__block { margin-right: 0.45em; font-size: 0.38em; font-stretch: 100%; letter-spacing: 0.06em; }

.visit__hours { grid-area: hours; }
.visit__hours h2 {
  margin: 0;
  color: var(--blue);
  font-size: var(--display-2);
  font-stretch: 75%;
  font-weight: 800;
  line-height: 0.88;
  text-transform: uppercase;
}
.visit__now { margin: 0.6em 0 0; font-size: var(--step-2); font-weight: 750; line-height: 1.15; }
.visit__now.is-open { color: var(--blue); }
.hours { width: 100%; margin-top: var(--space-4); border-collapse: collapse; }
.hours th, .hours td {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
  text-align: left;
}
.hours td { text-align: right; }
.hours tr.is-today th, .hours tr.is-today td { color: var(--ink); font-weight: 800; }
.hours tr.is-today th::after {
  content: 'Today';
  margin-left: 0.6em;
  padding: 0.1em 0.5em;
  border-radius: 6px;
  background: var(--orange);
  color: var(--ink);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 0.15em;
}

.visit__where { grid-area: where; display: grid; align-content: start; gap: var(--space-4); }
.visit__address { font-size: var(--step-2); font-style: normal; font-weight: 750; line-height: 1.2; }
.visit__links { display: grid; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
.visit__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  min-height: 44px;
  color: var(--blue);
  font-weight: 700;
  text-decoration-thickness: 2px;
}
.visit__links svg { width: 1.25em; height: 1.25em; }
.visit__order {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  padding: var(--space-4);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: inset 0 0 0 2px var(--steel);
}
.visit__times { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0; }
.visit__buttons { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; }

/* ============ Footer ============ */
.foot {
  position: relative;
  padding: var(--space-6) max(var(--gutter), env(safe-area-inset-right)) calc(var(--space-5) + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  background: var(--blue);
  color: var(--cream);
  text-align: center;
}
.foot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: repeating-conic-gradient(var(--paper) 0 25%, var(--orange) 0 50%) 0 0 / 28px 28px;
}
.foot__mark { width: min(70vw, 26rem); height: auto; margin: 0 auto; aspect-ratio: 619 / 317; }
.foot__tag { margin: var(--space-3) 0 var(--space-4); font-weight: 750; letter-spacing: 0.3em; text-transform: uppercase; }
.foot__line { margin: 0; font-weight: 600; }
.foot__line a { text-decoration-thickness: 2px; }
.foot__fine { max-width: 52ch; margin: var(--space-4) auto 0; font-size: var(--step--1); }
.foot a:focus-visible { outline-color: var(--cream); }
/* The two hands from the restaurant's Chicken Sando post rise from the footer's bottom edge holding up the sando
   (cream on blue, as in the post). The wrapper clips them at the edge; only the drawing moves. */
.foot__hands {
  width: min(64vw, 17rem);
  margin: var(--space-5) auto calc(-1 * (var(--space-5) + env(safe-area-inset-bottom)));
  overflow: hidden;
  color: var(--cream);
}
.foot__hands svg { display: block; width: 100%; height: auto; aspect-ratio: 522 / 554; }
html.js .foot__hands[data-reveal] { opacity: 1; transform: none; }
html.js .foot__hands[data-reveal] svg { transform: translateY(60%); }
html.js .foot__hands[data-reveal].is-in svg { transform: none; transition: transform 1.2s var(--ease-out) 0.1s; }
@media (prefers-reduced-motion: reduce) {
  html.js .foot__hands[data-reveal] { opacity: 0; }
  html.js .foot__hands[data-reveal].is-in { opacity: 1; }
  html.js .foot__hands[data-reveal] svg { transform: none; }
}

/* ============ Print ============ */
@media print {
  .bar, .stage__media, .stage__index, .stage__controls, .cats, .say::before, .say::after, .say__controls, .visit__signs, .intro, .foot__hands { display: none !important; }
  html.js [data-reveal], html.js .cover [data-enter] { opacity: 1 !important; transform: none !important; }
  .say { background: none; }
  .say.is-rotating .say__track { display: block; } /* on paper, every review */
  .say.is-rotating .say__fig { opacity: 1; visibility: visible; }
  .say.is-rotating .say__fig + .say__fig { margin-top: var(--space-5); }
}

/* A photo that failed to load even after retries: hide it so its frame shows a clean placeholder (images.js). */
img.is-broken { visibility: hidden; }