/* Legends Burgers — Earth Tab, August 2026.
   One stylesheet, no framework. Colours are sampled from the client's own logo
   and their existing site's CSS, not invented: red #fc0000 is the logo fill,
   #dd0000 and #faa61a are the accents their current theme already uses.
   Interactive red is darkened to #c40d00 so red-on-white clears 4.5:1 — the old
   site's #fc0000 text does not, and link colour is exactly the kind of thing an
   ADA audit picks up first. */

:root {
  --red: #c40d00;          /* interactive / text red — 5.9:1 on white */
  --red-brand: #fc0000;    /* the logo's red, for fills and large display only */
  --red-dark: #8f0900;
  --amber: #faa61a;
  --amber-hover: #e8940b;  /* the amber button's pressed state */
  --amber-ink: #2a1a00;    /* the only text colour that sits on amber */
  --amber-deep: #a86300;   /* amber is unreadable as text; this is its text twin.
                              Was #b46b00 = 4.16:1 on white, under its own job.
                              #a86300 = 4.72:1. Audit, August 27 2026. */
  --ink: #17110f;
  --ink-soft: #574c48;
  --cream: #fdf7ef;
  --paper: #ffffff;
  --line: #e6dcd0;        /* decorative hairline only — 1.35:1, must never be a control edge */
  --line-strong: #8d7c6f; /* the boundary of an actual control: 4.00:1 on white, 3.76:1 on
                             cream. WCAG 1.4.11 wants 3:1 for the visual boundary that
                             identifies an input, and --line does not come close.
                             Audit, September 18 2026. */
  --char: #1d1613;
  --char-soft: #3a2c26;    /* the char surface one step up: footer rule, mobile bar */
  --red-on-dark: #ff4d42;  /* --red is 2.89:1 on --char. This is 5.43:1. */
  --red-lift: #d81100;     /* top stop of the mobile bar's red gradient */
  --cream-on-dark: #f3e7d8;/* body text on a dark band */
  --warm-mute: #cdbfb4;    /* muted warm grey: leaders, hints, secondary lines */
  --shadow: 0 2px 8px rgba(23, 17, 15, .08);
  --shadow-lg: 0 14px 40px rgba(23, 17, 15, .16);
  --wrap: 1180px;
  --r: 14px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* WCAG 2.4.11 Focus Not Obscured (Minimum) — AA, new in 2.2. Three things on
   this site float over the content: the sticky header (z-90), the menu page's
   sticky section rail (z-60) and the fixed mobile action bar (z-95). When the
   browser scrolls a newly focused element into view it stops flush with the
   viewport edge, which parks that element UNDERNEATH whichever of those is in
   the way — the ring is drawn, the user just cannot see it. scroll-padding
   reserves the space so focus always lands in the clear.
   September 18 2026. */
html {
  scroll-padding-top: calc(var(--head-h, 62px) + 1rem);
  scroll-padding-bottom: 5rem;          /* the fixed mobile bar is 54px + safe area */
}
/* The menu page stacks a second sticky rail under the header. */
html:has(.menu-jump) { scroll-padding-top: calc(var(--head-h, 62px) + 4rem); }
@media (min-width: 900px) { html { scroll-padding-bottom: 1rem; } }  /* no mobile bar */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  /* 1.0625rem, not 17px. A px body size silently overrides the reader's own
     browser font-size preference — zoom still worked, but the setting someone
     with low vision actually configured once and expects everywhere did not.
     Same rendered 17px at the default 16px root. WCAG 1.4.4. Sept 18 2026. */
  font: 400 1.0625rem/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: Anton, "Arial Narrow", Impact, sans-serif; font-weight: 400;
  letter-spacing: .5px; line-height: 1.06; margin: 0 0 .5em; text-transform: uppercase; }
h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4.6vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.6vw, 1.7rem); }
p  { margin: 0 0 1em; }

.script { font-family: "Kaushan Script", "Brush Script MT", cursive; text-transform: none;
  letter-spacing: 0; font-weight: 400; }

a { color: var(--red); }
a:hover { color: var(--red-dark); }

/* Focus must be visible on every surface, including the dark bands. ADA item 4.
   TWO-TONE, September 18 2026. A single amber ring measured 1.99:1 on white and
   1.87:1 on cream — under 1.4.11's 3:1, so on the light 90% of the site the
   indicator was not actually a visible indicator. Neither colour alone clears
   3:1 everywhere, so the ring carries both and whichever surface it lands on,
   one of them wins:
     --char  17.85:1 on white · 16.77:1 on cream ·  8.95:1 on the amber bands
     --amber  8.95:1 on --char ·  3.09:1 on a red button
   The two are 8.95:1 against EACH OTHER, so the pair is legible where they meet. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--char);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--amber);
  border-radius: 4px;
}

img { max-width: 100%; height: auto; display: block; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.center { text-align: center; }

/* ---------- skip link — ADA items 3 & 4 ---------- */
.skip {
  position: absolute; left: 1rem; top: -100px; z-index: 200;
  background: var(--char); color: #fff; padding: .8rem 1.2rem;
  border-radius: 0 0 8px 8px; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 0; color: #fff; }

/* ---------- header ---------- */
.topbar { display: none; }               /* phones get the facts strip instead */
@media (min-width: 900px) {
  .topbar {
    display: block;
    background: var(--char); color: #f3e7d8; font-size: .82rem; letter-spacing: .4px;
  }
}
.topbar .wrap { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem;
  align-items: center; justify-content: center; padding: .5rem 0; }
.topbar a { color: #ffd89a; text-decoration: none; font-weight: 600; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar .dot { opacity: .45; }

.site-head { position: sticky; top: 0; z-index: 90; background: var(--paper);
  border-bottom: 3px solid var(--red-brand); box-shadow: var(--shadow); }
.head-in { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: .6rem 0; }
.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; }
.brand img { width: 132px; }

.nav-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 2px solid var(--line-strong); border-radius: 10px;
  padding: .55rem .8rem; font: inherit; font-weight: 700; font-size: .92rem;
  color: var(--ink); cursor: pointer;
}
.nav-toggle .bars { display: block; width: 20px; height: 2px; background: var(--ink);
  position: relative; }
.nav-toggle .bars::before, .nav-toggle .bars::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink); }
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after { top: 6px; }

.nav { display: none; }
.nav ul { list-style: none; margin: 0; padding: .4rem 0 1rem; }
.nav li { border-top: 1px solid var(--line); }
.nav a { display: block; padding: .85rem .2rem; text-decoration: none; color: var(--ink);
  font-weight: 700; text-transform: uppercase; letter-spacing: .6px; font-size: .95rem; }
.nav a:hover { color: var(--red); }
.nav a[aria-current="page"] { color: var(--red); }
/* The star is the NON-COLOUR half of the current-page cue (1.4.1) — red text
   alone would carry it by colour only. Two corrections, September 18 2026:
   the empty alt text after the slash keeps the glyph out of the accessible
   name, where it was making the link read "star Home" while the same link in
   the footer read "Home" (1.4.11 / 3.2.4); and --amber measured 1.99:1 on
   white, so the marker was near-invisible to the readers it is for —
   --amber-deep is 4.72:1 and the same hue family. */
.nav a[aria-current="page"]::before { content: "★ " / ""; color: var(--amber-deep); }
/* The drawer lives inside a position:sticky header. A sticky box taller than the
   viewport pins its top at 0 and puts its own bottom permanently out of reach —
   no amount of scrolling gets you there. At 320x256 (the 1.4.10 reflow target,
   and any phone in landscape) six 48px rows plus the bar exceed the viewport,
   so the last links were unreachable. Cap it and let it scroll itself.
   WCAG 1.4.10. September 18 2026. */
.nav.open {
  display: block; flex: 0 0 100%; width: 100%; order: 3;
  max-height: calc(100vh - var(--head-h, 62px) - 1rem);
  max-height: calc(100dvh - var(--head-h, 62px) - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.site-head .head-cta { display: none; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .nav { display: block !important; flex: 0 1 auto; width: auto; order: 0; }
  .nav ul { display: flex; gap: 1.4rem; padding: 0; }
  .nav li { border: 0; }
  .nav a { padding: .4rem 0; font-size: .88rem; }
  .site-head .head-cta { display: inline-flex; margin-left: 1.4rem; }
  .nav li.dup-cta { display: none; }   /* the red button beside it says the same thing */
  .brand img { width: 150px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
  font-family: inherit;   /* a <button> does NOT inherit this — without the line,
                             submit buttons render in Arial next to link buttons */
  font-weight: 800; font-size: 1rem; letter-spacing: .5px; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: transform .12s ease, background .12s ease;
  min-height: 48px;                      /* real thumb target */
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); color: #fff; }
.btn-amber { background: var(--amber); color: var(--amber-ink); }
.btn-amber:hover { background: var(--amber-hover); color: var(--amber-ink); }
.btn-ghost { background: transparent; color: var(--ink); border-color: currentColor; }
.btn-ghost:hover { background: var(--ink); color: var(--cream); }
.btn-on-dark { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.75); }
.btn-on-dark:hover { background: #fff; color: var(--char); }
.btn-sm { padding: .6rem 1.05rem; font-size: .85rem; min-height: 42px; }

/* ---------- hero ---------- */
.hero { position: relative; color: #fff; text-align: center; isolation: isolate;
  overflow: hidden; }   /* the drift scales the photo past its box; clip it or the
                           page gains a horizontal scrollbar on phones */
.hero picture, .hero img.bg { position: absolute; inset: 0; z-index: -2; }
.hero img.bg { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15,10,8,.62) 0%, rgba(15,10,8,.52) 45%, rgba(15,10,8,.86) 100%);
}
.hero-in { padding: 3.2rem 0 3rem; }
.hero-badge { width: min(330px, 74vw); margin: 0 auto .7rem; }
.hero .tagline { font-size: clamp(1.6rem, 5.5vw, 2.6rem); margin: 0 0 .3rem;
  text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.hero h1 { margin: 0 0 .55rem; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.hero .sub { font-size: 1.05rem; margin: 0 auto 1.5rem; max-width: 34rem; color: #f5e9dc; }
.hero-actions { display: grid; gap: .7rem; max-width: 22rem; margin: 0 auto; }
@media (min-width: 620px) {
  .hero-in { padding: 4.5rem 0 4rem; }
  .hero-actions { display: flex; justify-content: center; max-width: none; flex-wrap: wrap; }
}

/* ---------- the strip of facts under the hero ---------- */
.facts { background: var(--char); color: #f3e7d8; }
.facts ul { list-style: none; margin: 0; padding: 1rem 0; display: grid; gap: .7rem; }
.facts li { display: flex; gap: .6rem; align-items: baseline; font-size: .97rem; }
.facts b { color: #fff; font-weight: 700; }
.facts a { color: #ffd89a; font-weight: 700; white-space: nowrap; }
.facts li b { white-space: nowrap; }
@media (min-width: 900px) {
  .facts ul { grid-template-columns: repeat(3, 1fr); padding: 1.1rem 0; }
  .facts li { justify-content: center; }
}

/* ---------- sections ---------- */
section { padding: 3.2rem 0; }
.kicker { font-family: "Kaushan Script", cursive; color: var(--red);
  font-size: 1.35rem; margin: 0 0 .1rem; }
/* --red is 2.89:1 on --char, so the dark bands get amber instead. The PHOTO band
   was missed when that override was written: "Welcome" on the story band measured
   2.39:1 against the darkest pixels of band-story.webp under its own scrim — a
   real 1.4.3 failure that no computed-contrast tool can see, because the backdrop
   is an image. Caught by sampling the composited pixels; amber measures 7.35:1
   against that same worst-case pixel. September 18 2026. */
.band-dark .kicker, .band-photo .kicker { color: var(--amber); }
.lede { max-width: 42rem; color: var(--ink-soft); font-size: 1.05rem; }
.center .lede { margin-inline: auto; }

.band-dark { background: var(--char); color: #f3e7d8; }
.band-dark h2, .band-dark h3 { color: #fff; }
.band-dark .lede { color: #ddcfc2; }
.band-photo { position: relative; color: #fff; isolation: isolate; }
.band-photo img.bg { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; }
.band-photo::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(18,12,10,.72); }
.band-photo h2 { color: #fff; }
.band-photo .lede { color: #efe2d6; }

/* ---------- cards ---------- */
.cards { display: grid; gap: 1.2rem; margin-top: 1.8rem; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards.three { grid-template-columns: repeat(3, 1fr); } }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-in { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .2rem; flex: 1; }
.card h3 { margin-bottom: .2rem; }
.card p { color: var(--ink-soft); margin-bottom: .9rem; }
.card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- location cards ---------- */
.loc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.4rem 1.4rem 1.5rem; box-shadow: var(--shadow); }
.loc h3 { margin-bottom: .35rem; }
.loc address { font-style: normal; color: var(--ink-soft); margin-bottom: .9rem; }
.loc .row { display: flex; flex-wrap: wrap; gap: .55rem; }

/* ---------- menu ---------- */
/* --head-h is the header's REAL measured height, written by site.js and kept
   current when the header shrinks on scroll. It used to be a hard-coded 62px,
   which is shorter than the header actually is on a desktop — so the jump bar
   stuck 26px UNDERNEATH it and vanished behind it the moment you scrolled. On a
   menu page 10,000px tall, that left no way back to the section links. */
.menu-jump { position: sticky; top: var(--head-h, 62px); z-index: 60; background: var(--cream);
  border-bottom: 1px solid var(--line); padding: .55rem 0; }
.menu-jump ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .45rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
  scroll-padding-inline: .9rem; }
.menu-jump a { flex: 0 0 auto; white-space: nowrap;   /* "Hot Dogs" was breaking
                                                        inside its own pill */
  text-decoration: none; font-weight: 700; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .4px; color: var(--ink);
  /* --line, not --line-strong: the pill carries its own label, so the border is
     framing rather than the boundary that identifies the control. Same reasoning
     as .plat a. 1.4.11 applies to edges that are REQUIRED to identify a control. */
  border: 1px solid var(--line); background: var(--paper);
  border-radius: 999px; padding: .45rem .85rem; }
.menu-jump a:hover { border-color: var(--red); color: var(--red); }

.msec { margin: 0 0 2.6rem; scroll-margin-top: calc(var(--head-h, 62px) + 4.6rem); }
.msec-head { border-bottom: 3px solid var(--red-brand); padding-bottom: .5rem; margin-bottom: 1rem; }
.msec-head h2 { margin: 0; }
.msec .note { color: var(--ink-soft); font-size: .95rem; margin: .55rem 0 0; max-width: 46rem; }

.mlist { list-style: none; margin: 0; padding: 0; }
.mrow { display: flex; gap: .8rem; align-items: baseline;
  padding: .62rem 0; border-bottom: 1px dashed var(--line); }
.mrow .nm { font-weight: 700; }
.mrow .dsh { flex: 1; border-bottom: 1px dotted var(--warm-mute); transform: translateY(-4px); min-width: 1rem; }
.mrow .pr { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mrow .d { display: block; font-weight: 400; font-size: .9rem; color: var(--ink-soft); }
.mrow .star { color: var(--amber-deep); }
.sizes { display: grid; grid-template-columns: repeat(3, minmax(3.6rem, auto)); gap: .1rem 1rem;
  text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }
.sizes.two { grid-template-columns: repeat(2, minmax(3.6rem, auto)); }
.sizes .hd { font-weight: 700; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .5px; color: var(--ink-soft); }
@media (min-width: 700px) { .mlist.split { columns: 2; column-gap: 3rem; }
  .mlist.split .mrow { break-inside: avoid; } }

/* Below 360px the three size columns cannot shrink far enough to share a line
   with the item name: they overflowed the row by up to 38px and body's
   overflow-x:hidden then CLIPPED the largest price out of existence. That is a
   WCAG 1.4.10 reflow failure at 400% zoom, not just a small-phone problem.
   Bound at 359.98px so the layout that already works at 360px+ is untouched. */
@media (max-width: 359.98px) {
  .mrow { flex-wrap: wrap; }
  .mrow .dsh { display: none; }
  .mrow .sizes { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .1rem .5rem; }
  .mrow .sizes.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- order platforms ---------- */
.plat { display: grid; gap: .6rem; }
.plat a { display: flex; align-items: center; gap: .95rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: .8rem .95rem; text-decoration: none; color: var(--ink); font-weight: 700;
  min-height: 64px; box-shadow: var(--shadow);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.plat a:hover { border-color: var(--red); color: var(--ink);
  transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.10); }
.plat a:hover .arrow { transform: translateX(3px); }
/* The arrow is decoration on top of a link that already reads "DoorDash", so it
   stays quiet until the row is hovered. */
.plat .arrow { color: var(--red); font-weight: 800; font-size: 1.1rem;
  transition: transform .15s ease; }

/* ---------- forms ---------- */
.field { margin-bottom: 1.05rem; }
.field label { display: block; font-weight: 700; margin-bottom: .3rem; }
.field .hint { font-size: .85rem; color: var(--ink-soft); margin: 0 0 .35rem; }
/* --line-strong, not --line: the border IS what identifies an empty text box as
   a text box, so 1.4.11 wants it at 3:1. --line was 1.35:1 on white — on a
   cream page the fields read as faint rectangles. Sept 18 2026. */
.field input, .field textarea, .field select {
  width: 100%; padding: .8rem .9rem; font: inherit; color: var(--ink);
  background: var(--paper); border: 2px solid var(--line-strong); border-radius: 10px;
  min-height: 48px;
}
.field input:focus, .field textarea:focus { border-color: var(--red); }
/* aria-invalid is set by site.js on a failed submit; the red edge must not be
   the only signal, which is why the summary above the form names the field. */
.field [aria-invalid="true"] { border-color: var(--red); }
.req { color: var(--red); }
/* On the dark bands --red measures 2.89:1. Audit, August 27 2026. */
.band-dark .req { color: var(--red-on-dark); }
.formnote { font-size: .9rem; color: var(--ink-soft); }

/* ---------- footer ---------- */
.site-foot { background: var(--char); color: #cdbfb4; padding: 2.6rem 0 1.6rem; font-size: .95rem; }
.site-foot h2 { color: #fff; font-size: 1.15rem; }
.foot-grid { display: grid; gap: 1.8rem; }
@media (min-width: 780px) { .foot-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 2.4rem; } }
.site-foot a { color: #ffd89a; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
/* 18px links on a 7.2px gap cleared WCAG 2.5.8's 24px spacing exception by
   1.2px. The padding buys real margin. Audit, August 27 2026. */
.site-foot li { margin-bottom: .45rem; }
.site-foot ul a { display: inline-block; padding: .18rem 0; }
.site-foot img.mark { width: 120px; margin-bottom: .8rem; }
.legal { border-top: 1px solid var(--char-soft); margin-top: 2rem; padding-top: 1.1rem;
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; justify-content: space-between;
  font-size: .85rem; color: #9d8d83; }

/* ---------- sticky mobile action bar ---------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--char-soft); box-shadow: 0 -4px 18px rgba(0,0,0,.22);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bar a { display: flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 54px; background: var(--char); color: #fff; text-decoration: none;
  font-weight: 800; text-transform: uppercase; letter-spacing: .5px; font-size: .9rem; }
.mobile-bar a.primary { background: var(--red); }
.mobile-bar a:hover { filter: brightness(1.12); color: #fff; }
body { padding-bottom: 58px; }
@media (min-width: 900px) { .mobile-bar { display: none; } body { padding-bottom: 0; } }

/* ---------- misc ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.map-frame { border: 0; width: 100%; height: 320px; border-radius: var(--r); }
/* An <iframe> is its own focus scope, so :focus-visible never fires on it —
   the ring has to hang off :focus / :focus-within instead. Audit, Aug 27 2026. */
.map-frame:focus, .map-frame:focus-within, .map-frame:focus-visible {
  outline: 3px solid var(--char); outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--amber); }   /* same two-tone ring as everything else */
.note-box { background: #fff6e2; border-left: 4px solid var(--amber);
  padding: 1rem 1.2rem; border-radius: 0 10px 10px 0; margin: 1.4rem 0; }
.note-box p:last-child { margin-bottom: 0; }


/* ============================================================================
   DINER PASS — August 27, 2026.
   His note: "modern, sleek, diner feel… we're almost there." Everything below
   is CSS, drawn rather than downloaded, so the page weight does not move. The
   line it walks: diner CUES (checkerboard, chrome, a neon-ish script, a warm
   grade) rendered with modern restraint — the moment it gets literal it reads
   like the ThemeForest theme we just removed.
   ========================================================================== */

/* ---- checkerboard, drawn in CSS ----------------------------------------
   The client's own site ships a 1920x53 PNG of a checker strip. This is the
   same motif as two conic-gradients: sharp at any width, any DPR, zero bytes,
   and it can take the brand red instead of only black. */
.checker {
  height: 14px;
  background:
    conic-gradient(from 90deg at 50% 50%, #16100e 25%, transparent 0 50%, #16100e 0 75%, transparent 0)
      0 0 / 14px 14px,
    #fff;
  border-block: 1px solid rgba(0,0,0,.12);
}
.checker.red {
  background:
    conic-gradient(from 90deg at 50% 50%, var(--red-brand) 25%, transparent 0 50%, var(--red-brand) 0 75%, transparent 0)
      0 0 / 14px 14px,
    #fff;
}
.checker.sm { height: 10px; background-size: 10px 10px, auto; }

/* ---- chrome rule — the diner counter edge ------------------------------ */
.chrome {
  height: 6px;
  background: linear-gradient(180deg, #fdfdfd 0%, #cfd4d8 38%, #8d969d 52%, #cfd4d8 66%, #f4f6f7 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* ---- the hero, tightened ------------------------------------------------
   A slow drift on the food photograph. Off entirely for reduced-motion, and it
   only ever moves the BACKGROUND — nothing under a finger shifts. */
@media (prefers-reduced-motion: no-preference) {
  .hero img.bg { animation: drift 34s ease-in-out infinite alternate; will-change: transform; }
}
@keyframes drift {
  from { transform: scale(1.05) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
}

.hero .tagline {
  color: #ffe9b8;
  /* a neon-sign hint: warm bloom, not a glow-in-the-dark toy */
  text-shadow: 0 0 18px rgba(250,166,26,.55), 0 0 44px rgba(250,166,26,.28), 0 2px 10px rgba(0,0,0,.6);
}

/* ---- open / closed, computed from the posted hours ---------------------- */
.status {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  color: #fff; border-radius: 999px; padding: .32rem .85rem .34rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  margin: 0 auto 1rem; backdrop-filter: blur(6px);
}
.status .dotlight {
  width: 9px; height: 9px; border-radius: 50%; background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74,222,128,.25);
}
.status[data-open="false"] .dotlight { background: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,.25); }
.status[hidden] { display: none; }

/* ---- header: settles on scroll ----------------------------------------- */
.site-head { transition: box-shadow .2s ease, padding .2s ease; }
.site-head.scrolled { box-shadow: 0 6px 22px rgba(23,17,15,.18); }
.site-head.scrolled .brand img { width: 112px; }
@media (min-width: 900px) { .site-head.scrolled .brand img { width: 126px; } }

/* ---- cards lift ---------------------------------------------------------- */
.card { transition: transform .18s ease, box-shadow .18s ease; }
@media (hover: hover) {
  .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
}
.card img { transition: transform .5s ease; }
@media (hover: hover) { .card:hover img { transform: scale(1.04); } }
.card { position: relative; }

/* ---- the photographs, graded ------------------------------------------
   The two interior shots are flat greyscale and read as stock. A warm sepia
   wash puts them in the same room as the red-and-cream everything else. */
.band-photo img.bg { filter: sepia(.35) saturate(1.25) contrast(1.05) brightness(.92); }

/* ---- MENU BOARD ---------------------------------------------------------
   The menu is where most of the traffic goes, so it gets the most attention.
   A diner menu board: dark header plate, amber rule, tabular prices. */
.msec-head {
  background: var(--char);
  color: #fff;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  padding: 1rem 1.2rem .9rem;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
}
.msec-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--red-brand) 0 33%, var(--amber) 33% 66%, #fff 66%);
}
.msec-head h2 { color: #fff; margin: 0; }
.msec-head .kicker { color: var(--amber); margin-bottom: .1rem; }
.msec-head .note { color: #cdbfb4; margin-top: .5rem; }

.msec {
  padding: 0;              /* .msec IS a <section>, so it inherited the global
                              3.2rem section padding — 51px of white above every
                              dark menu plate. Measured, not guessed. */
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 2rem;
}
.msec .mlist, .msec > .mrow { padding: .9rem 1.2rem 1.1rem; }
.msec .mlist { margin: 0; }
.mrow:last-child { border-bottom: 0; }
.mrow .nm { font-weight: 700; }
.mrow .pr { color: var(--ink); }

/* the jump bar reads as a rail of chips on a counter */
.menu-jump { background: rgba(253,247,239,.92); backdrop-filter: blur(8px); }
.menu-jump a { transition: background .15s ease, border-color .15s ease, color .15s ease; }
.menu-jump a:hover { background: var(--char); border-color: var(--char); color: #fff; }
.menu-jump a[aria-current="true"] { background: var(--char); border-color: var(--char); color: #fff; }

/* Wide enough for every pill to fit on two rows: wrap them instead of scrolling,
   so nothing is clipped mid-word at the edge of the container. */
@media (min-width: 900px) {
  .menu-jump ul { flex-wrap: wrap; overflow: visible; justify-content: center; }
}
/* Below that it is still a horizontal rail — the fade says so. */
@media (max-width: 899px) {
  .menu-jump .wrap { position: relative; }
  .menu-jump .wrap::after {
    content: ""; position: absolute; top: 0; right: 0; width: 2.2rem; height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(253,247,239,0), rgba(253,247,239,.96));
  }
}

/* ---- section rhythm ----------------------------------------------------- */
.band-dark { position: relative; }
.band-dark::before, .band-photo::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; z-index: 1;
  background: linear-gradient(90deg, var(--red-brand) 0 33.3%, var(--amber) 33.3% 66.6%, #f6f2ea 66.6%);
}

/* ---- footer gets the checker edge --------------------------------------- */
.site-foot { position: relative; }
.site-foot::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12px;
  background:
    conic-gradient(from 90deg at 50% 50%, #fff 25%, transparent 0 50%, #fff 0 75%, transparent 0)
      0 0 / 12px 12px,
    var(--char);
  opacity: .9;
}
.site-foot .wrap { position: relative; }

/* ---- mobile action bar: a little more presence -------------------------- */
.mobile-bar a.primary { background: linear-gradient(180deg, var(--red-lift) 0%, var(--red) 100%); }

/* ---------- band-art — a client artwork shown on its own terms ----------
   No scrim and no text over it: this banner already carries the wordmark, and
   overlaying the hero copy on it printed the logo twice (rejected Aug 27).
   Desktop crops the empty yellow off the top and bottom — the safe axis.
   Phones get the natural aspect instead, because cropping WIDTH here would
   cut off either the burger on the right or the logo in the middle. */
.band-art { background: var(--amber); padding: 0; }
.band-art img { width: 100%; height: auto; display: block; }
@media (min-width: 900px) {
  .band-art img { height: 340px; object-fit: cover; object-position: center 38%; }
}

/* ---- the claim band ------------------------------------------------------
   Two things the client says on their own site that lived nowhere on ours, and
   one of which ("We serve the largest burgers in the game") existed only as
   pixels inside a JPEG, where no search engine could read a word of it. */
.claim { background: var(--amber); color: var(--ink); padding: 2.2rem 0 2.4rem;
  border-bottom: 3px solid var(--red-brand); }
.claim .kicker { color: var(--red-dark); }
.claim h2 { margin-bottom: .35rem; }
.claim .lede { color: #3b2c14; max-width: 46rem; margin-left: auto; margin-right: auto;
  margin-bottom: 0; font-weight: 600; }

/* ---- customer quotes ---------------------------------------------------- */
.quotes { background: var(--cream); }
.qgrid { display: grid; gap: 1.1rem; margin-top: 1.8rem; text-align: left; }
@media (min-width: 860px) { .qgrid { grid-template-columns: repeat(3, 1fr); } }
.quote { margin: 0; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.6rem 1.4rem 1.3rem; box-shadow: var(--shadow);
  display: flex; flex-direction: column; position: relative; }
.quote::before { content: "\201C"; position: absolute; top: .1rem; left: .85rem;
  font-family: Georgia, "Times New Roman", serif; font-size: 3.4rem; line-height: 1;
  color: var(--amber); }
.quote blockquote { margin: 0 0 1rem; flex: 1; }
.quote blockquote p { margin: 0; font-size: 1.06rem; line-height: 1.55; }
.quote figcaption { display: flex; flex-direction: column; gap: .1rem;
  border-top: 1px solid var(--line); padding-top: .8rem; }
.quote figcaption b { font-weight: 700; }
.quote figcaption span { color: var(--ink-soft); font-size: .88rem;
  text-transform: uppercase; letter-spacing: .6px; }
.qnote { margin: 1.4rem 0 0; color: var(--ink-soft); font-size: .9rem; }

/* ---- a photo beside the location cards, and beside the careers reasons --- */
.locgrid, .whygrid { display: grid; gap: 1.4rem; margin-top: 1.8rem; align-items: start; }
@media (min-width: 940px) {
  .locgrid { grid-template-columns: 1.05fr 1fr; }
  .whygrid { grid-template-columns: 1fr 1.05fr; }
  .locgrid .cards { grid-template-columns: 1fr; margin-top: 0; }
}
.locshot, .shot { margin: 0; }
.locshot img, .shot img { width: 100%; height: auto; display: block;
  border-radius: var(--r); box-shadow: var(--shadow-lg); }
.locshot figcaption, .shot figcaption { margin-top: .7rem; color: var(--ink-soft);
  font-size: .9rem; line-height: 1.5; }
.whygrid .locshot { order: 2; }
@media (min-width: 940px) { .whygrid .locshot { order: 0; position: sticky; top: 7rem; } }

.why { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.why li { padding-left: 1.6rem; position: relative; color: var(--ink-soft); }
.why li b { color: var(--ink); }
.why li::before { content: "\2605"; position: absolute; left: 0; top: .05em;
  color: var(--amber-deep); }
.whynote { margin-top: 1.3rem; color: var(--ink-soft); font-size: .94rem; }

/* ---- the Order page leads with the thing that costs the customer least ---- */
.callout { background: var(--paper); border: 2px solid var(--red-brand);
  border-radius: var(--r); padding: 1.6rem 1.5rem 1.5rem; box-shadow: var(--shadow-lg); }
.callout h2 { margin-bottom: .5rem; }
.callout > p { color: var(--ink-soft); max-width: 44rem; }
.callout .row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 0; }
.callout .hoursnote { margin: 1rem 0 0; font-size: .92rem; }

.callnow { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem;
  margin-bottom: 1rem; }
.callnow span { color: var(--ink-soft); font-size: .93rem; }
.platlead { margin-bottom: .6rem; font-size: .9rem; text-transform: uppercase;
  letter-spacing: .6px; font-weight: 700; color: var(--ink-soft); }
/* One size, one corner, one hairline for all three. The marks arrive with
   different corner treatments (DoorDash's is white-on-white, the other two are
   hard squares); the mask is baked in _build/images.py and the ring below keeps
   the pale one from floating off the card. */
.plat a img { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.plat a .pn { flex: 1; font-size: 1.02rem; letter-spacing: -.01em; }

/* On desktop the photo should hold the same height as the two cards beside it,
   or the row ends in a shelf of empty cream. */
@media (min-width: 940px) {
  .locgrid { align-items: stretch; }
  .locgrid .locshot { display: flex; flex-direction: column; }
  .locgrid .locshot img { flex: 1 1 auto; min-height: 0; object-fit: cover; }
}