/* Treat Wagon, Perkins OK. Light theme, cream paper, wagon red carries the voice.
   Tokens follow DESIGN.md. One deviation: --ink-soft is darkened from the spec
   value so secondary text clears 4.5:1 on --cream-deep.

   Layout rule for the whole page, one axis: every band is
   [centred header] + [centred content] + [optional full bleed photo strip].
   Nothing sits off that centre line. */

:root {
  --cream: #F5EFE3;
  --cream-deep: #EBE2CF;
  --ink: #3B4630;
  --ink-soft: #5E6753;
  --red: #C6271F;
  --red-deep: #9A1E17;
  --blue: #BFD9EA;
  --pink: #F2BFCB;
  --choc: #4A2E20;
  --rule: #CFC6B2;

  --gutter: clamp(20px, 5vw, 64px);
  --measure: 62ch;
  --ease: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */

  /* One spacing scale. Nothing uses a value outside it. */
  --s1: 8px;
  --s2: 14px;
  --s3: 22px;
  --s4: 34px;
  --s5: clamp(40px, 6vw, 64px);
  --s6: clamp(56px, 9vw, 112px);
}

@supports (color: oklch(96% 0.014 85)) {
  :root {
    --cream: oklch(96% 0.014 85);
    --cream-deep: oklch(92% 0.02 80);
    --ink: oklch(32% 0.04 130);
    --ink-soft: oklch(44% 0.03 130);
    --red: oklch(52% 0.2 28);
    --red-deep: oklch(42% 0.17 28);
    --blue: oklch(86% 0.05 230);
    --pink: oklch(84% 0.09 5);
    --choc: oklch(30% 0.05 45);
    --rule: oklch(80% 0.02 85);
  }
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Mulish, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { margin: 0; font-weight: 400; }

p { text-wrap: pretty; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.band--red :focus-visible,
.footer :focus-visible { outline-color: var(--cream); }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  background: var(--red);
  color: var(--cream);
  padding: var(--s2) var(--s3);
  font-weight: 700;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------- the single axis ---------- */

.wrap {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Every readable block sits in this column, centred on the page. */
.head,
.menu {
  max-width: var(--measure);
  margin-inline: auto;
  text-align: center;
}

.band { padding-block: var(--s6); }
/* Bands that close on a full bleed photo hand their bottom padding to the strip. */
.band--capped { padding-bottom: 0; }
.band--paper { background: var(--cream-deep); }
.band--red { background: var(--red); color: var(--cream); }

/* ---------- type ---------- */

.title {
  font-family: Marcellus, Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: clamp(1.75rem, 1.05rem + 2.6vw, 2.75rem);
  line-height: 1.12;
  text-wrap: balance;
  margin-bottom: 0.6em;
  padding-top: var(--s3);
  position: relative;
}

/* The one section marker on the page. h2 only, never on the menu groups. */
.title::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 44px; height: 4px;
  background: var(--red);
}

.band--red .title::before { background: var(--cream); }

.lede {
  font-size: clamp(1.125rem, 1.03rem + 0.42vw, 1.40625rem);
  margin: 0 0 0.6em;
  /* Centred copy rags on both edges, so every running block is balanced
     rather than left with a two word last line. */
  text-wrap: balance;
}
.lede:last-child { margin-bottom: 0; }

.note {
  margin: var(--s2) 0 0;
  font-size: 1.0625rem;
  color: var(--ink-soft);
  text-wrap: balance;
}
.note--strong { font-weight: 700; }
.band--red .note { color: var(--cream); }
.note[hidden] { display: none; }

.script {
  font-family: "Homemade Apple", cursive;
  line-height: 1.75;
  letter-spacing: 0.005em;
}

.link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.link--onchoc { text-decoration-color: var(--blue); }

@media (hover: hover) {
  .link:hover { text-decoration-color: var(--red-deep); color: var(--red-deep); }
  .link--onchoc:hover { color: var(--blue); text-decoration-color: var(--blue); }
  .link--pending:hover { color: inherit; text-decoration-color: var(--rule); }
}

.link:active { text-decoration-color: var(--red-deep); color: var(--red-deep); }
.link--onchoc:active { color: var(--blue); text-decoration-color: var(--blue); }

/* Same guard as .btn--pending: dashed, not dimmed, so it stays legible. */
.link--pending {
  text-decoration-style: dashed;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  cursor: default;
}
.link--pending:active { color: inherit; text-decoration-color: var(--rule); }

/* Leaves the page. Sized in em so it holds at 17px and at the display sized
   next-stop line, and inherits colour so it never needs its own token. */
.offsite {
  width: min(0.62em, 22px);
  height: min(0.62em, 22px);
  margin-left: min(0.34em, 12px);
  vertical-align: baseline;
  overflow: visible;
}

.tag {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--pink);
  padding: 4px 10px;
  margin-right: var(--s1);
  vertical-align: 2px;
}

/* ---------- buttons ---------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s4);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 12px 26px;
  font-family: Mulish, sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}

/* Scoped to .actions so a .btn used outside a row (the 404 page's flex
   column) never inherits a flex-basis on the wrong axis. */
.actions .btn { flex: 1 1 260px; max-width: 340px; }

@media (min-width: 620px) {
  .actions .btn { flex: 0 1 auto; }
}

.btn--red {
  background: var(--red);
  color: var(--cream);
  box-shadow: inset 0 0 0 1px var(--red), inset 0 0 0 3px var(--cream);
}

.btn--quiet {
  background: var(--cream);
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.btn--cream {
  background: var(--cream);
  color: var(--red-deep);
  box-shadow: inset 0 0 0 1px var(--cream), inset 0 0 0 3px var(--red);
}

.btn--outline {
  background: transparent;
  color: var(--cream);
  box-shadow: inset 0 0 0 1.5px var(--cream);
}

/* Hover is guarded: on a phone an unguarded :hover sticks after the tap and
   the button reads as still pressed. */
@media (hover: hover) {
  .btn--red:hover { background: var(--red-deep); box-shadow: inset 0 0 0 1px var(--red-deep), inset 0 0 0 3px var(--cream); }
  .btn--quiet:hover { background: var(--cream-deep); }
  .btn--cream:hover { background: var(--cream-deep); }
  .btn--outline:hover { background: var(--red-deep); }
  .btn--pending:hover { background: var(--cream-deep); }
  .band--red .btn--pending:hover { background: transparent; }
}

/* Press feedback. Transform, not a layout property, and it lands instantly:
   a delayed press state reads as lag. */
.btn:active { transform: translateY(1px); transition-duration: 0ms; }
.btn--red:active { background: var(--red-deep); box-shadow: inset 0 0 0 1px var(--red-deep), inset 0 0 0 3px var(--cream); }
.btn--quiet:active { background: var(--cream-deep); }
.btn--cream:active { background: var(--cream-deep); }
.btn--outline:active { background: var(--red-deep); }

/* Waiting on a real PHONE (main.js). Dashed keyline, full contrast: a
   half-opacity red button rendered as a washed out pink and fell under 3:1.
   This reads as "not yet" without going illegible, and main.js strips the
   class the moment PHONE is real. */
.btn--pending {
  background: var(--cream-deep);
  color: var(--ink-soft);
  border: 1.5px dashed var(--rule);
  box-shadow: none;
  cursor: default;
}
.btn--pending:active { transform: none; }

.band--red .btn--pending {
  background: transparent;
  color: var(--cream);
  border-color: var(--cream);
}

/* ---------- masthead ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 10px var(--gutter);
  background: var(--cream);
  border-bottom: 1px solid var(--rule);
}

/* Aligned to the same centred content column as .head/.menu (max-width:
   var(--measure)), so the mark sits on the column's left edge and the nav
   on its right instead of floating as a centred cluster that lines up with
   nothing else on the page (impeccable I-2). */
.masthead__inner {
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 5vw, 56px);
}

.masthead__mark {
  display: flex;
  align-items: center;
  min-height: 48px;
}
.masthead__mark img { width: clamp(112px, 15vw, 150px); height: auto; }

/* Below 560 the lockup steps aside for .masthead__mark-sm, so the sticky bar
   still carries a brand mark once the hero badge scrolls off (impeccable
   M-4) instead of reading "Menu Where Order" with no wagon in sight. */
.masthead__mark-sm {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
}
.masthead__mark-sm img { width: auto; height: 32px; }

/* Shown at every width: PRODUCT.md's primary device is a phone at a ballgame
   and the page is 5,700px tall there, so the three anchors are the one
   accelerator that earns its room. Below 560 the lockup steps aside for them;
   the badge is 20px underneath and says the same thing louder. */
.masthead__nav { display: flex; gap: clamp(16px, 4vw, 30px); }
.masthead__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: 4px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.masthead__nav a[aria-current="true"],
.masthead__nav a:active { border-bottom-color: var(--red); }

@media (hover: hover) {
  .masthead__nav a:hover { border-bottom-color: var(--red); }
}

@media (max-width: 559px) {
  .masthead__mark { display: none; }
  .masthead__mark-sm { display: flex; }
}

[id] { scroll-margin-top: 84px; }

/* ---------- hero ---------- */

.hero { padding-top: clamp(var(--s4), 4vw, 56px); }

.hero__stack {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__badge { margin: 0; }
/* Sized by HEIGHT at every width, never by max-height on a width sized img:
   max-height squishes it in Chromium, because aspect-ratio does not feed back
   into the used width. 1.35 is the badge's own 600x810 ratio, so the vw term
   is the width it would otherwise have had, and the svh term is what shortens
   it on a short phone so both CTAs still clear the fold. */
.hero__badge img {
  width: auto;
  height: min(calc(68vw * 1.35), 405px, 44svh);
}

.hero__script {
  margin: var(--s4) 0 0;
  font-size: clamp(1.125rem, 0.98rem + 0.75vw, 1.5rem);
  max-width: 24ch;
  text-wrap: balance;
}

.hero__actions { width: 100%; max-width: 560px; }

@media (min-width: 620px) and (max-width: 899px) {
  .hero__badge img { height: min(calc(46vw * 1.35), 459px, 48svh); }
  .hero__script { max-width: 30ch; }
}

@media (min-width: 900px) {
  .hero { padding-top: min(clamp(var(--s4), 4vw, 56px), 5svh); }
  .hero__badge img { height: min(clamp(330px, 27vw, 440px), 46svh); }
  .hero__script {
    max-width: 34ch;
    margin-top: min(var(--s4), 4svh);
  }
  .hero__actions { margin-top: min(var(--s4), 4.4svh); }
}

/* Short-phone fold: the 44svh cap on .hero__badge img still left the second
   CTA 21-35px under the fold at SE/6-8 and small-Android heights (impeccable
   C-1). Scoped by height, not just width, so 736px+ phones keep the rhythm
   above untouched. */
@media (max-width: 619px) and (max-height: 700px) {
  .hero { padding-top: var(--s3); }
  .hero__badge img { height: min(calc(68vw * 1.35), 405px, 40svh); }
  .hero__script { margin-top: var(--s3); }
}

/* ---------- photo strips: the one photo treatment on the page ---------- */

.strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--s6);
}
.strip--wide { grid-template-columns: 1fr; }

.strip img {
  width: 100%;
  height: clamp(150px, 44vw, 260px);
  object-fit: cover;
}
.strip--wide img { height: clamp(220px, 60vw, 340px); }

@media (min-width: 900px) {
  .strip--four { grid-template-columns: repeat(4, 1fr); }
  .strip img { height: clamp(240px, 23vw, 330px); }
  .strip--wide img { height: clamp(320px, 31vw, 440px); }
}

/* ---------- menu ---------- */

.menu { margin-top: var(--s5); }

.group + .group { margin-top: var(--s5); }

.group__title {
  font-family: Marcellus, Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  color: var(--ink-soft);
  margin-bottom: var(--s2);
}

.group__note {
  margin: var(--s3) 0 0;
  font-size: 1.0625rem;
  color: var(--ink-soft);
  text-wrap: balance;
}

.list { list-style: none; margin: 0; padding: 0; }

.item + .item { margin-top: var(--s3); }

.item__name {
  margin: 0;
  font-weight: 700;
}

.item__note {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 1.0625rem;
  text-wrap: balance;
}

.kitchen {
  max-width: var(--measure);
  margin: var(--s5) auto 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: 1.0625rem;
  color: var(--ink-soft);
  text-wrap: balance;
}

/* ---------- where the wagon is ---------- */

.stops__next {
  font-family: Marcellus, Georgia, serif;
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.75rem);
  line-height: 1.08;
  max-width: 18ch;
  margin: 0 auto 0.45em;
  text-wrap: balance;
}

.stops__next .link {
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
  /* At display size the underline is a rule, not a text underline: skip-ink was
     leaving a two pixel red crumb beside the p descender. */
  text-decoration-skip-ink: none;
}

.stops__wagon {
  width: clamp(190px, 40vw, 300px);
  margin: var(--s5) auto 0;
}

/* ---------- about ---------- */

.about__note {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  color: var(--red);
  max-width: 22ch;
  margin: var(--s5) auto 0;
}

/* ---------- footer ---------- */

.footer {
  background: var(--choc);
  color: var(--cream);
  padding-block: var(--s6);
  text-align: center;
}

.footer__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer__wagon { display: block; width: clamp(120px, 22vw, 164px); }
.footer__wagon img { width: 100%; }

.footer__name {
  font-family: Marcellus, Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  margin: var(--s4) 0 var(--s1);
}

.footer__line { margin: 0; color: var(--rule); }

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2) var(--s5);
  margin-top: var(--s3);
}
.footer__nav a,
.footer__nav button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 700;
}

.footer__share {
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
}
.footer__share[hidden] { display: none; }

/* ---------- motion, opt-in from main.js ---------- */
/* One grammar: everything that moves fades up. Nothing else. */

.reveal { transition: opacity 500ms var(--ease), transform 500ms var(--ease); }

.motion .reveal {
  opacity: 0;
  transform: translateY(18px);
}
.motion .reveal.is-in {
  opacity: 1;
  transform: none;
}

.motion .hero__badge img {
  animation: roll-in 800ms var(--ease) both;
}

@keyframes roll-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion .reveal { opacity: 1; transform: none; transition: none; }
  .motion .hero__badge img { animation: none; }
  .btn:active { transform: none; }
}