/* Tomato Canteen — a first-party restaurant/café demo.
   Static energy only: no CSS animation, no idle requestAnimationFrame and no autoplay media. */

:root {
  --ink: #111827;
  --paper: #fff8e7;
  --white: #ffffff;
  --tomato: #ff4e2f;
  --tomato-dark: #a5261b;
  --blue: #173fd4;
  --blue-dark: #102a92;
  --lemon: #ffe34f;
  --mint: #a9efca;
  --pink: #ffb9cb;
  --lilac: #d6c6ff;
  --line: #111827;
  --muted: #5b5d65;
  --display: "Arial Black", "Franklin Gothic Heavy", Impact, sans-serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shadow: 8px 8px 0 var(--ink);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { min-width: 320px; color: var(--ink); background: var(--paper); font-family: var(--sans); font-size: 1rem; line-height: 1.55; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, .wordmark, .wordmark-footer { font-family: var(--display); line-height: 0.95; letter-spacing: -0.04em; }
ul { list-style: none; }

.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; z-index: 100; top: -5rem; left: 1rem; padding: .75rem 1rem; color: var(--white); background: var(--ink); border: 2px solid var(--white); }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 4px solid var(--blue); outline-offset: 3px; }

.ticker { display: flex; align-items: center; justify-content: center; gap: clamp(.55rem, 2vw, 1.6rem); min-height: 34px; padding: .35rem 1rem; color: var(--ink); background: var(--lemon); border-bottom: 2px solid var(--ink); font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }

.site-header { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 92px; padding: .9rem clamp(1rem, 4vw, 3.5rem); background: var(--paper); border-bottom: 3px solid var(--ink); }
/* S147: `min-height` only. The wordmark sits inside a header that is already 76–92px tall and is
   vertically centred, so a 44px hit area costs nothing on screen and gives a thumb something to
   land on — measured at 122.5×32 before, which is a target no phone user can hit reliably. */
.wordmark { display: inline-flex; align-items: center; min-height: 44px; gap: .55rem; color: var(--ink); font-size: 1.35rem; text-decoration: none; text-transform: uppercase; }
.wordmark-fruit { position: relative; width: 38px; height: 38px; overflow: hidden; color: var(--tomato); font-size: 3.15rem; line-height: .65; }
.wordmark-fruit::after { content: "+"; position: absolute; top: -.33rem; left: .65rem; color: var(--ink); font-family: var(--sans); font-size: 1.35rem; font-weight: 900; transform: rotate(22deg); }
.header-call { display: none; }
/* S148 (owner) — "book a table needs adding to the footer and header also". It WAS in both, and
   that is exactly why it was invisible: in the header it sat INSIDE the <details> disclosure, so on
   a phone there was no booking action on screen until you opened a menu; in the footer it was the
   word "Book", one of four plain nav links. A restaurant's primary action cannot live behind a
   disclosure. This one is always on screen, and stands down at 840px where the inline nav shows
   its own copy. */
/* ⚠ The header is a flex row and its width is already spoken for. Adding this button pushed the
   "Menu" disclosure clean off the right edge — measured at left=302 right=384 against a 320px
   viewport, i.e. the nav was unreachable. So the label collapses to "Book" on small screens and
   the button is allowed to shrink; the full wording returns as soon as there is room for it. */
/* ⚠ `.site-header` prefix, not a bare `.header-book`. `.button` sets `display: inline-flex` and
   is declared LATER in this file; at equal specificity the later rule wins, so the bare version
   of the desktop rule below lost to it and the button rendered TWICE in the header at 1440px —
   once here and once inside the inline nav. Caught by looking at the render, not the source.
   ⚠ And the label's space is `&nbsp;` in the HTML: `.button` is a flex container, so a leading
   space inside the `<span>` is whitespace between flex items and gets collapsed away. It shipped
   as "Booka table" for exactly one render. Same trap as [[judged-at-1-1-is-two-checks]]. */
.header-book { flex: 0 1 auto; min-width: 0; }
@media (max-width: 430px) { .header-book-long { display: none; } .header-book { padding: .55rem .6rem !important; } }
@media (min-width: 840px) { .site-header .header-book { display: none; } }
.footer-book { align-self: start; margin-top: .4rem; padding: .5rem .8rem; color: var(--white) !important; background: var(--tomato-dark); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); text-decoration: none; }
.footer-book:hover { background: #a92018; transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.call-link { color: var(--tomato-dark); font-weight: 900; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.nav-disclosure summary { min-height: 44px; padding: .65rem .9rem; color: var(--white); background: var(--ink); border: 2px solid var(--ink); cursor: pointer; font-weight: 900; list-style: none; text-transform: uppercase; }
.nav-disclosure summary::-webkit-details-marker { display: none; }
.nav-disclosure nav { position: absolute; z-index: 30; top: calc(100% + 3px); right: .75rem; left: .75rem; display: grid; gap: .25rem; padding: .75rem; background: var(--white); border: 3px solid var(--ink); box-shadow: var(--shadow); }
.nav-disclosure:not([open]) nav { display: none; }
.nav-disclosure nav a { display: flex; align-items: center; min-height: 44px; padding: .55rem .75rem; font-weight: 900; text-decoration: none; }
.nav-disclosure nav a:not(.button):hover { background: var(--lemon); }
.nav-disclosure nav a[aria-current="page"]:not(.button) { text-decoration: underline 4px var(--tomato); text-underline-offset: 5px; }
.nav-disclosure.nav-inline summary { display: none; }
.nav-disclosure.nav-inline nav { position: static; display: flex; align-items: center; gap: .15rem; padding: 0; background: transparent; border: 0; box-shadow: none; }
.nav-disclosure.nav-inline nav a { padding: .55rem .7rem; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: .78rem 1.25rem; color: var(--white); background: var(--tomato-dark); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); cursor: pointer; font-weight: 950; line-height: 1.1; text-align: center; text-decoration: none; transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease; }
.button:hover { background: #a92018; transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.button:active { transform: translate(5px, 5px); box-shadow: none; }
.button-small { min-height: 44px !important; padding: .55rem .85rem !important; box-shadow: 3px 3px 0 var(--ink); }
.button-dark { background: var(--ink); }
.button-dark:hover { background: #2b3342; }
.button-blue { background: var(--blue); }
.button-blue:hover { background: var(--blue-dark); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 900; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.text-link:hover { color: var(--tomato-dark); }
.text-link-light { color: var(--white); }
.text-link-light:hover { color: var(--lemon); }

.hero { max-width: 1500px; margin: 0 auto; padding: clamp(2.5rem, 6vw, 6.5rem) clamp(1rem, 5vw, 5rem); }
.poster-grid { display: grid; gap: 2.5rem; align-items: center; }
.eyebrow, .section-kicker { margin-bottom: 1rem; color: var(--tomato-dark); font-size: .78rem; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow span { display: inline-block; margin-right: .6rem; padding: .28rem .45rem; color: var(--ink); background: var(--lemon); border: 2px solid var(--ink); transform: rotate(-1deg); }
.hero h1 { max-width: 9ch; font-size: clamp(3.15rem, 9vw, 7.5rem); text-transform: uppercase; }
.hero h1 em { display: inline; color: var(--blue); font-style: normal; }
.hero-sub { max-width: 40rem; margin-top: 1.35rem; font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 650; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.35rem; margin-top: 1.7rem; }
.hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 40rem; margin-top: 2rem; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
.hero-facts div { padding: .75rem .55rem; border-right: 2px solid var(--ink); }
.hero-facts div:last-child { border-right: 0; }
.hero-facts dt { color: var(--muted); font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.hero-facts dd { margin-top: .15rem; font-size: .9rem; font-weight: 900; }

.hero-art { position: relative; min-height: clamp(390px, 58vw, 650px); isolation: isolate; }
.hero-art::before { content: ""; position: absolute; z-index: -2; inset: 3% 1% 7% 8%; background: var(--blue); border: 3px solid var(--ink); border-radius: 48% 52% 45% 55% / 45% 38% 62% 55%; transform: rotate(-3deg); }
.hero-art::after { content: ""; position: absolute; z-index: -1; right: -4%; bottom: 2%; width: 44%; aspect-ratio: 1; background: var(--lemon); border: 3px solid var(--ink); border-radius: 50%; }
.hero-photo { position: absolute; overflow: hidden; background: var(--white); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-photo-main { top: 12%; left: 3%; width: 78%; height: 58%; transform: rotate(3deg); }
.hero-photo-small { right: 2%; bottom: 4%; width: 43%; height: 34%; transform: rotate(-6deg); }
.poster-note { position: absolute; z-index: 5; font-family: var(--display); line-height: .83; text-transform: uppercase; }
.poster-note-one { right: 0; top: 2%; padding: .7rem; color: var(--ink); background: var(--pink); border: 3px solid var(--ink); font-size: clamp(1.35rem, 4vw, 2.55rem); transform: rotate(4deg); }
.poster-note-two { left: 0; bottom: 3%; display: grid; place-content: center; width: 110px; aspect-ratio: 1; color: var(--white); background: var(--tomato-dark); border: 3px solid var(--ink); border-radius: 50%; font-size: 2.7rem; text-align: center; transform: rotate(-8deg); }
.poster-note-two small { font-family: var(--sans); font-size: .7rem; letter-spacing: .12em; }
.tomato-mark { position: absolute; z-index: 4; left: 2%; top: 0; width: 58px; aspect-ratio: 1; background: var(--tomato); border: 3px solid var(--ink); border-radius: 50%; }
.tomato-mark::before, .tomato-mark::after, .tomato-mark i { content: ""; position: absolute; left: 50%; top: -10px; width: 9px; height: 24px; background: var(--ink); transform-origin: bottom; }
.tomato-mark::before { transform: translateX(-50%) rotate(-50deg); }
.tomato-mark::after { transform: translateX(-50%) rotate(50deg); }
.tomato-mark i { transform: translateX(-50%); }

.menu-splash { padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 5vw, 5rem); color: var(--white); background: var(--blue); border-block: 4px solid var(--ink); }
.menu-splash > * { max-width: 1400px; margin-inline: auto; }
.section-kicker { color: var(--lemon); }
.section-kicker-dark { color: var(--tomato-dark); }
.section-title-row { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.section-title-row h2 { font-size: clamp(2.5rem, 6vw, 5.5rem); text-transform: uppercase; }
.dish-strip { display: grid; gap: 1.2rem; margin-top: 2rem; }
.dish-ticket { position: relative; display: flex; flex-direction: column; min-height: 270px; padding: 1.35rem; color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--shadow); }
.dish-ticket h3 { max-width: 8ch; margin-top: auto; font-size: clamp(2rem, 4vw, 3.2rem); text-transform: uppercase; }
.dish-ticket p { max-width: 28ch; margin-top: .65rem; font-weight: 700; }
.dish-ticket > div { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: .75rem; border-top: 2px solid var(--ink); font-weight: 900; }
.dish-ticket-yellow { background: var(--lemon); transform: rotate(-1deg); }
.dish-ticket-red { background: var(--tomato); transform: rotate(1deg); }
.dish-ticket-mint { background: var(--mint); transform: rotate(-.5deg); }
.dish-number { font-family: var(--display); font-size: 1.1rem; }

/* ── S148 — SAGE ON EVERY PAGE ────────────────────────────────────────────────────────────────
   ⛔ NOT a round pastel bubble. That component is the most copied object on the web and the
   moment one demo has it, every demo has it (the S146 law is about FORM). This is a hard-edged
   tomato tile in the flagship's own poster grammar: square corners, 3px ink border, 8px offset
   shadow, display type. It would look wrong on any of its siblings, which is the point. */
.sage-dock { position: fixed; right: clamp(.75rem, 3vw, 1.75rem); bottom: clamp(.75rem, 3vw, 1.75rem); z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; }
.sage-dock-button { display: inline-flex; align-items: center; gap: .55rem; min-height: 52px; padding: .7rem 1.1rem; color: var(--white); background: var(--tomato-dark); border: 3px solid var(--ink); box-shadow: var(--shadow); cursor: pointer; font-family: var(--sans); font-weight: 950; font-size: 1rem; }
.sage-dock-button:hover { background: #a92018; transform: translate(2px, 2px); box-shadow: 5px 5px 0 var(--ink); }
.sage-dock-button:active { transform: translate(8px, 8px); box-shadow: none; }
.sage-dock-dot { width: .7rem; height: .7rem; background: var(--lemon); border: 2px solid var(--ink); }
.sage-dock-panel { display: flex; flex-direction: column; gap: .7rem; width: min(23rem, calc(100vw - 1.5rem)); max-height: min(32rem, calc(100vh - 8rem)); padding: 1rem; overflow-y: auto; color: var(--ink); background: var(--white); border: 3px solid var(--ink); box-shadow: var(--shadow); }
.sage-dock-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .6rem; border-bottom: 3px solid var(--ink); }
.sage-dock-head p { margin: 0; font-family: var(--display); font-size: 1.05rem; text-transform: uppercase; }
.sage-dock-close { min-height: 44px; padding: 0 .6rem; color: var(--ink); background: none; border: 2px solid var(--ink); cursor: pointer; font-weight: 900; }
.sage-dock-intro { margin: 0; font-size: .82rem; font-weight: 600; color: var(--muted); }
.sage-dock-log { display: grid; gap: .55rem; max-height: 14rem; overflow-y: auto; }
.sage-dock-log:empty { display: none; }
.sage-dock-guest { margin: 0; padding: .5rem .65rem; background: var(--lemon); border: 2px solid var(--ink); font-weight: 800; }
.sage-dock-reply { margin: 0; padding: .5rem .65rem; background: var(--mint); border: 2px solid var(--ink); font-weight: 600; }
.sage-dock-proposal, .sage-dock-unanswered { display: block; margin: .4rem 0 0; font-size: .8rem; font-weight: 800; color: var(--tomato-dark); }
.sage-dock-form { display: grid; gap: .5rem; }
.sage-dock-label { font-size: .72rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; color: var(--tomato-dark); }
.sage-dock-form input { min-height: 48px; padding: .55rem .7rem; font: inherit; color: var(--ink); background: var(--white); border: 3px solid var(--ink); }
/* ⚠ These were added to sage.js AFTER this block was written and had NO styles at all — three
   default browser buttons sitting under a mint reply, which is exactly the "looks like nothing"
   half of the defect the citations had in reverse. Found by looking at the deployed render. */
.sage-dock-followups { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.sage-dock-followup { min-height: 44px; padding: .4rem .6rem; color: var(--ink); background: var(--mint); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; font: inherit; font-size: .8rem; font-weight: 900; }
.sage-dock-followup:hover { background: var(--lemon); transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.sage-dock-followup:active { transform: translate(3px, 3px); box-shadow: none; }
.sage-dock-status { margin: 0; min-height: 1.1rem; font-size: .8rem; font-weight: 800; }
.sage-dock-status:empty { min-height: 0; }
.sage-dock-foot { margin: 0; padding-top: .6rem; border-top: 2px dashed var(--ink); font-weight: 900; }
@media (max-width: 430px) { .sage-dock-button span:not(.sage-dock-dot) { font-size: .95rem; } }

/* S148 — the counter band. Mint field so it reads as the same room as order.html's own hero,
   and a tilted pad card: a shape no other band on this page uses (the poster grid, the ticket
   strip, the circular stamp, the split room and the film are all taken). */
.counter-band { display: grid; gap: 2rem; align-items: center; padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1rem, 5vw, 5rem); background: var(--mint); border-block: 4px solid var(--ink); }
.counter-band > * { max-width: 1400px; margin-inline: auto; width: 100%; }
.counter-copy h2 { max-width: 11ch; font-size: clamp(2.5rem, 6vw, 5.5rem); text-transform: uppercase; }
.counter-copy > p:not(.eyebrow) { max-width: 46rem; margin: 1rem 0 0; font-size: 1.08rem; font-weight: 500; }
.counter-note { padding-left: 1rem; border-left: 5px solid var(--ink); }
.counter-pad { padding: 1.4rem; background: var(--white); border: 3px solid var(--ink); box-shadow: var(--shadow); transform: rotate(1.2deg); }
.counter-pad-head { margin: 0 0 .9rem; font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; }
.counter-pad-lines { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.counter-pad-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 2px dashed var(--ink); font-weight: 700; }
.counter-pad-lines em { font-style: normal; font-weight: 900; }
.counter-pad-total { display: flex; justify-content: space-between; gap: 1rem; margin: .9rem 0 0; padding-top: .7rem; border-top: 3px solid var(--ink); font-weight: 900; text-transform: uppercase; }
.counter-pad-total strong { color: var(--tomato-dark); }
.counter-pad .fine-print { margin-top: .9rem; }

.nutrition-callout { display: grid; gap: 2rem; align-items: center; max-width: 1400px; margin: 0 auto; padding: clamp(4rem, 8vw, 7rem) clamp(1rem, 5vw, 5rem); }
.nutrition-callout h2 { max-width: 12ch; font-size: clamp(2.5rem, 5.5vw, 5rem); text-transform: uppercase; }
.nutrition-callout > div > p:not(.eyebrow) { max-width: 48rem; margin: 1rem 0 1.5rem; font-size: 1.08rem; }
.eyebrow-blue { color: var(--blue); }
.nutrition-stamp { display: grid; place-content: center; width: min(210px, 55vw); aspect-ratio: 1; margin-inline: auto; color: var(--white); background: var(--tomato-dark); border: 4px solid var(--ink); border-radius: 50%; box-shadow: var(--shadow); font-family: var(--display); font-size: 2.2rem; line-height: .8; text-align: center; transform: rotate(-7deg); }
.nutrition-stamp span { color: var(--lemon); }
.nutrition-preview { padding: 1.5rem; color: var(--white); background: var(--ink); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--tomato); }
.nutrition-preview > p:first-child { color: var(--lemon); font-weight: 900; text-transform: uppercase; }
.nutrition-preview > strong { display: block; margin: .7rem 0; font-family: var(--display); font-size: clamp(4rem, 8vw, 6.5rem); line-height: .8; }
.nutrition-preview > strong small { font-family: var(--sans); font-size: 1rem; }
.nutrition-preview dl { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding-top: 1rem; border-top: 2px solid #6b7280; }
.nutrition-preview dl div { display: flex; justify-content: space-between; gap: .5rem; }
.nutrition-preview .fine-print { margin-top: 1rem; color: #d1d5db; font-size: .78rem; }

.room-section { display: grid; border-block: 4px solid var(--ink); }
.room-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 5vw, 5rem); background: var(--lemon); }
.room-copy h2 { max-width: 10ch; font-size: clamp(2.7rem, 6vw, 5.5rem); text-transform: uppercase; }
.room-copy > p:not(.section-kicker) { max-width: 38rem; margin-top: 1.2rem; font-weight: 650; }
.room-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 2rem; border-top: 3px solid var(--ink); }
.room-list li { padding-top: .8rem; font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.room-list strong { display: block; font-family: var(--display); font-size: 2rem; }
.room-photo { position: relative; min-height: 420px; background: var(--blue); overflow: hidden; }
.room-photo img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; filter: saturate(1.2) contrast(1.05); }
.room-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 8px var(--blue); mix-blend-mode: multiply; }
.room-photo figcaption { position: absolute; z-index: 2; right: 1rem; bottom: 1rem; left: 1rem; max-width: 34rem; padding: .65rem .8rem; color: var(--white); background: rgba(17, 24, 39, .92); border: 2px solid var(--white); font-size: .78rem; }

.kitchen-film { display: grid; gap: 2rem; align-items: center; max-width: 1400px; margin: 0 auto; padding: clamp(3.5rem, 8vw, 7rem) clamp(1rem, 5vw, 5rem); }
.film-copy h2 { max-width: 9ch; font-size: clamp(2.7rem, 6vw, 5rem); text-transform: uppercase; }
.film-copy > p:last-child { max-width: 38rem; margin-top: 1rem; }
.kitchen-video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--ink); border: 4px solid var(--ink); box-shadow: var(--shadow); }

.booking-band { padding: clamp(3.5rem, 8vw, 7rem) 1rem; background: var(--tomato); border-block: 4px solid var(--ink); text-align: center; }
.booking-band h2 { max-width: 13ch; margin-inline: auto; font-size: clamp(2.8rem, 7vw, 6rem); text-transform: uppercase; }
.booking-band > p:not(.eyebrow) { max-width: 44rem; margin: 1rem auto 1.5rem; font-weight: 700; }
.booking-band .eyebrow { color: var(--ink); }
.booking-band-blue { color: var(--white); background: var(--blue); }
.booking-band-blue .eyebrow { color: var(--lemon); }

/* Interior-page heroes and menu */
.breadcrumb { margin-bottom: 2rem; }
.breadcrumb a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 900; text-underline-offset: 4px; }
.page-hero { padding: clamp(2.5rem, 7vw, 6rem) clamp(1rem, 6vw, 6rem); border-bottom: 4px solid var(--ink); }
.page-hero h1 { max-width: 11ch; font-size: clamp(3.5rem, 10vw, 8rem); text-transform: uppercase; }
.page-hero > p:not(.breadcrumb, .eyebrow, .service-note, .accuracy-note) { max-width: 56rem; margin-top: 1rem; font-size: 1.15rem; font-weight: 650; }
.page-hero-menu { background: var(--pink); }
.service-note, .accuracy-note { max-width: 58rem; margin-top: 1.4rem; padding: 1rem; background: var(--white); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.filter-panel { position: relative; z-index: 3; padding: 1.15rem clamp(1rem, 6vw, 6rem); color: var(--white); background: var(--ink); }
.filter-form { display: grid; gap: .8rem; align-items: end; max-width: 1100px; margin: 0 auto; }
.field label { display: block; margin-bottom: .35rem; font-size: .78rem; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.field input, .field select, .field textarea, .builder-card select { width: 100%; min-height: 48px; padding: .65rem .75rem; color: var(--ink); background: var(--white); border: 3px solid var(--ink); border-radius: 0; }
.filter-form .field select { border-color: var(--white); }
.menu-page { max-width: 1500px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 5vw, 5rem); }
.section-title-row-dark h2 { color: var(--ink); }
.filter-count { font-weight: 950; text-transform: uppercase; }
.menu-grid { display: grid; gap: 2rem; margin-top: 2rem; }
.menu-card { display: grid; overflow: hidden; border: 3px solid var(--ink); box-shadow: var(--shadow); }
.menu-image { min-height: 220px; overflow: hidden; background: var(--ink); }
.menu-image img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; transition: transform 180ms ease; }
.menu-card:hover .menu-image img { transform: scale(1.025); }
.menu-ticket { display: flex; flex-direction: column; padding: 1.25rem; }
.menu-ticket h3 { margin-top: auto; font-size: clamp(2rem, 5vw, 3.5rem); text-transform: uppercase; }
.menu-ticket > p:not(.menu-index, .allergen-line) { margin-top: .65rem; font-weight: 700; }
.menu-index { margin-bottom: 2rem; font-size: .72rem; font-weight: 950; letter-spacing: .08em; }
.allergen-line { margin-top: 1rem; padding-top: .7rem; border-top: 2px solid var(--ink); font-size: .8rem; }
.menu-meta { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1rem; font-weight: 950; }
.menu-card-yellow .menu-ticket { background: var(--lemon); }
.menu-card-red .menu-ticket { background: var(--tomato); }
.menu-card-mint .menu-ticket { background: var(--mint); }
.menu-card-blue .menu-ticket { color: var(--white); background: var(--blue); }
.menu-card-blue .allergen-line { border-color: var(--white); }
.menu-card-pink .menu-ticket { background: var(--pink); }
.menu-card-lilac .menu-ticket { background: var(--lilac); }
.filter-empty { margin-top: 2rem; padding: 1.25rem; background: var(--lemon); border: 3px solid var(--ink); font-weight: 800; }
.menu-disclaimer { display: grid; gap: 1rem; margin-top: 3rem; padding: clamp(1.5rem, 4vw, 2.5rem); color: var(--white); background: var(--ink); border: 4px solid var(--tomato); }
.menu-disclaimer h2 { font-size: clamp(2rem, 4vw, 3.5rem); text-transform: uppercase; }
.menu-disclaimer p { max-width: 55rem; }

/* Nutrition tool */
.nutrition-hero { color: var(--white); background: var(--blue); }
.nutrition-hero .eyebrow { color: var(--lemon); }
.nutrition-hero .breadcrumb a { color: var(--white); }
.accuracy-note { color: var(--ink); background: var(--lemon); }
.builder-layout { display: grid; align-items: start; max-width: 1500px; margin: 0 auto; padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 5vw, 5rem); }
.builder-menu > .section-title-row h2 { font-size: clamp(2.25rem, 5vw, 4.5rem); }
.reset-button { min-height: 44px; padding: .55rem .8rem; color: var(--ink); background: var(--white); border: 3px solid var(--ink); cursor: pointer; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }
.mobile-total { position: sticky; z-index: 8; top: 0; display: flex; align-items: center; justify-content: space-between; gap: .65rem; min-height: 48px; margin-top: 1rem; padding: .55rem .7rem; color: var(--white); background: var(--ink); border: 3px solid var(--ink); font-size: .78rem; font-weight: 900; text-decoration: none; text-transform: uppercase; }
.mobile-total strong { margin-left: auto; color: var(--lemon); white-space: nowrap; }
.builder-grid { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.builder-card { display: flex; flex-direction: column; min-height: 360px; padding: 1.25rem; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.builder-card h3 { font-size: clamp(1.9rem, 4vw, 3rem); text-transform: uppercase; }
.builder-card > p:not(.menu-index, .builder-nutrients, .allergen-line) { margin-top: .7rem; font-weight: 700; }
.builder-card .menu-index { margin-bottom: 1rem; }
.builder-card .allergen-line { margin-top: auto; }
.builder-nutrients { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin: 1rem 0; padding: .65rem 0; border-block: 2px solid var(--ink); }
.builder-card label { margin-top: .25rem; font-size: .78rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.builder-card select { margin-top: .35rem; }
.builder-yellow { background: var(--lemon); }
.builder-red { background: var(--tomato); }
.builder-mint { background: var(--mint); }
.builder-blue { color: var(--white); background: var(--blue); }
.builder-blue .builder-nutrients, .builder-blue .allergen-line { border-color: var(--white); }
.builder-pink { background: var(--pink); }
.builder-lilac { background: var(--lilac); }
.builder-summary { margin-top: 2rem; padding: 1.5rem; color: var(--white); background: var(--ink); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--tomato); }
.summary-label { color: var(--lemon); font-size: .78rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.builder-summary h2 { margin-top: .7rem; font-size: clamp(4.5rem, 12vw, 7.5rem); }
.builder-summary h2 small { font-family: var(--sans); font-size: 1rem; letter-spacing: 0; }
.summary-kj { color: #d1d5db; font-weight: 800; }
.macro-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 1.5rem; border: 2px solid #667085; }
.macro-grid div { padding: .7rem; border-right: 1px solid #667085; border-bottom: 1px solid #667085; }
.macro-grid div:nth-child(even) { border-right: 0; }
.macro-grid div:nth-last-child(-n+2) { border-bottom: 0; }
.macro-grid dt { color: #d1d5db; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.macro-grid dd { margin-top: .15rem; font-family: var(--display); font-size: 1.35rem; }
.builder-summary h3 { margin-top: 1.5rem; font-family: var(--sans); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.meal-lines { margin-top: .5rem; }
.meal-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid #667085; }
.allergen-summary { margin-top: 1.25rem; padding: .85rem; color: var(--ink); background: var(--lemon); }
.allergen-summary p { margin-top: .3rem; font-size: .83rem; }
.method-section { padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 5vw, 5rem); background: var(--mint); border-block: 4px solid var(--ink); }
.method-section > * { max-width: 1400px; margin-inline: auto; }
.method-section > div:first-child h2 { max-width: 12ch; font-size: clamp(2.8rem, 6vw, 5.5rem); text-transform: uppercase; }
.method-grid { display: grid; gap: 1rem; margin-top: 2rem; }
.method-grid article { padding: 1.25rem; background: var(--white); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.method-grid article > span { color: var(--tomato-dark); font-family: var(--display); }
.method-grid h3 { margin-top: 1rem; font-size: 1.7rem; text-transform: uppercase; }
.method-grid p { margin-top: .6rem; }
.source-disclosure { margin-top: 2rem; background: var(--white); border: 3px solid var(--ink); }
.source-disclosure summary { min-height: 52px; padding: .8rem 1rem; cursor: pointer; font-weight: 950; }
.source-disclosure > div { padding: 0 1rem 1rem; border-top: 2px solid var(--ink); }
.source-disclosure p { max-width: 70rem; margin-top: 1rem; }
.source-disclosure a { color: var(--blue-dark); font-weight: 900; text-underline-offset: 3px; }

/* Booking */
.booking-hero { display: grid; min-height: 750px; border-bottom: 4px solid var(--ink); }
.booking-intro { position: relative; overflow: hidden; padding: clamp(2.5rem, 7vw, 6rem) clamp(1rem, 5vw, 5rem); background: var(--pink); }
.booking-intro h1 { max-width: 8ch; font-size: clamp(3.5rem, 9vw, 7rem); text-transform: uppercase; }
.booking-intro > p:not(.breadcrumb, .eyebrow) { max-width: 40rem; margin: 1rem 0; font-weight: 700; }
.booking-poster { display: grid; grid-template-columns: 1fr 1fr; max-width: 450px; margin-top: 3rem; border: 3px solid var(--ink); box-shadow: var(--shadow); transform: rotate(-2deg); }
.booking-poster span { display: grid; place-content: center; min-height: 90px; font-family: var(--display); font-size: 2.2rem; text-transform: uppercase; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.booking-poster span:nth-child(2n) { border-right: 0; }
.booking-poster span:nth-last-child(-n+2) { border-bottom: 0; }
.booking-poster span:nth-child(1) { background: var(--lemon); }.booking-poster span:nth-child(2) { color: var(--white); background: var(--blue); }.booking-poster span:nth-child(3) { background: var(--tomato); }.booking-poster span:nth-child(4) { background: var(--mint); }
.book-form { display: grid; align-self: stretch; gap: 1rem; padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 5vw, 4rem); color: var(--white); background: var(--blue); }
.form-label { padding-bottom: .7rem; color: var(--lemon); border-bottom: 2px solid var(--white); font-weight: 950; letter-spacing: .1em; }
.book-form .field input, .book-form .field select, .book-form .field textarea { border-color: var(--white); }
.label-optional { font-weight: 500; text-transform: none; }
.check-field { display: grid; grid-template-columns: 26px 1fr; gap: .65rem; align-items: start; font-size: .9rem; }
.check-field input { width: 24px; height: 24px; accent-color: var(--lemon); }
.book-form .button { justify-self: start; border-color: var(--white); box-shadow: 5px 5px 0 var(--white); }
.form-status { min-height: 2.5rem; color: var(--lemon); font-weight: 900; }
.visit-strip { display: grid; gap: 2rem; padding: clamp(3rem, 7vw, 6rem) clamp(1rem, 5vw, 5rem); background: var(--lemon); }
.visit-strip .section-kicker { color: var(--ink); }
.visit-strip h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); text-transform: uppercase; }
.hours { border-block: 3px solid var(--ink); }
.hours div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .25rem; border-bottom: 1px solid var(--ink); }
.hours div:last-child { border-bottom: 0; }
.hours dt { font-weight: 700; }.hours dd { font-weight: 950; }
.visit-note { max-width: 35rem; }
.visit-note p { margin-top: .4rem; }

footer { display: grid; gap: 2rem; padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 5vw, 5rem); color: var(--white); background: var(--ink); border-top: 4px solid var(--ink); }
.wordmark-footer { color: var(--lemon); font-size: 2.2rem; text-transform: uppercase; }
.footer-brand > p:not(.wordmark-footer) { margin-top: .4rem; }
/* S147: the phone, the email and the Neubor credit were 21px, 21px and 18px tall — the three
   smallest targets on the site, and two of them are the ways a guest actually gets in touch.
   `inline-flex` keeps them on their own line beside the "·" exactly as before; only the hit area
   grows. The footer nav above already carries the same 44px floor. */
.footer-brand a { display: inline-flex; align-items: center; min-height: 44px; }
/* S147: the phone and the email were separated by a literal "·" in the markup, which orphaned at
   the end of the first line on every page at 320–390px ("01632 960181 ·" / "hello@…"). A flex gap
   separates them when they sit on one line and simply disappears when they stack. */
.footer-contact { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.1rem; }
footer .call-link { color: var(--lemon); }
.footer-powered { margin-top: 1rem !important; font-size: .85rem; opacity: .86; }
.footer-powered a { text-underline-offset: 3px; }
.footer-nav { display: grid; align-content: start; gap: .25rem; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 900; text-underline-offset: 4px; }
.footer-truth { max-width: 40rem; align-self: end; color: #c7cbd3; font-size: .82rem; }

[hidden] { display: none !important; }

@media (min-width: 620px) {
  .dish-strip, .builder-grid, .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-form { grid-template-columns: 1fr 1fr auto; }
  .menu-card { grid-template-columns: .85fr 1.15fr; min-height: 360px; }
  .menu-card:nth-child(even) { grid-template-columns: 1.15fr .85fr; }
  .menu-card:nth-child(even) .menu-image { order: 2; }
  .menu-image img { min-height: 100%; }
  .book-form { grid-template-columns: 1fr 1fr; }
  .field-wide, .form-label, .check-field, .form-status { grid-column: 1 / -1; }
}

@media (min-width: 840px) {
  .poster-grid { grid-template-columns: .92fr 1.08fr; }
  .header-call { display: none; }
  .dish-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nutrition-callout { grid-template-columns: .55fr 1.2fr .8fr; }
  /* One row at desktop; the pad sits beside the copy rather than under it. `> *` above sets a
     max-width on the children, so the grid itself carries the centring at this breakpoint. */
  .counter-band { grid-template-columns: 1.25fr .75fr; column-gap: 3rem; max-width: 1400px; margin-inline: auto; }
  .counter-band > * { margin-inline: 0; }
  .room-section { grid-template-columns: 1fr 1fr; }
  .kitchen-film { grid-template-columns: .72fr 1.28fr; }
  .menu-grid { grid-template-columns: 1fr 1fr; }
  .menu-card, .menu-card:nth-child(even) { grid-template-columns: 1fr; }
  .menu-card:nth-child(even) .menu-image { order: 0; }
  .builder-layout { grid-template-columns: minmax(0, 1fr) minmax(310px, .42fr); gap: 2.5rem; }
  .builder-summary { position: sticky; top: 1.5rem; margin-top: 0; }
  .mobile-total { display: none; }
  .method-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .booking-hero { grid-template-columns: .9fr 1.1fr; }
  .visit-strip { grid-template-columns: .8fr 1fr .8fr; align-items: start; }
  footer { grid-template-columns: 1.2fr .5fr 1fr; }
}

@media (min-width: 1180px) {
  .builder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-card, .menu-card:nth-child(even) { grid-template-columns: .9fr 1.1fr; }
  .menu-card:nth-child(even) .menu-image { order: 0; }
}

@media (max-width: 839px) {
  .ticker span:nth-of-type(3), .ticker span:nth-of-type(4), .ticker span:nth-of-type(5) { display: none; }
  .site-header { min-height: 76px; padding: .7rem 1rem; }
  .wordmark { font-size: 1rem; }
  .wordmark-fruit { width: 32px; height: 32px; font-size: 2.7rem; }
  .header-call { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; font-size: .84rem; }
  .nav-phone { display: none !important; }
  .hero-facts { grid-template-columns: 1fr; }
  .hero-facts div { display: flex; justify-content: space-between; border-right: 0; border-bottom: 1px solid var(--ink); }
  .hero-facts div:last-child { border-bottom: 0; }
  .room-list { gap: .25rem; }
  .room-list strong { font-size: 1.45rem; }
}

@media (max-width: 430px) {
  .ticker { justify-content: space-between; padding-inline: .65rem; font-size: .62rem; }
  .header-call { display: none; }
  .hero { padding-top: 2.2rem; }
  .hero-art { min-height: 350px; }
  .hero-photo-main { width: 87%; height: 56%; }
  .hero-photo-small { width: 50%; }
  .poster-note-one { right: 2%; }
  .poster-note-two { width: 84px; font-size: 2rem; }
  .section-title-row { align-items: start; flex-direction: column; }
  .room-list li { font-size: .61rem; }
  .menu-image, .menu-image img { min-height: 190px; }
  .builder-card { min-height: 330px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .button:hover, .button:active, .menu-card:hover .menu-image img { transform: none; }
}

/* ── The ordering counter (order.html) ──────────────────────────────────────────────────────────
   Appended last so it can lean on the shared components above without editing them. Same law as the
   rest of the file: static energy only — every tilt, edge and shadow here is a fixed transform, and
   nothing on this page moves on its own. No new colour is introduced; every value is a token. */

.page-hero-order { background: var(--mint); }
.noscript-note { margin: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 6vw, 6rem); padding: 1.25rem; background: var(--lemon); border: 4px solid var(--ink); box-shadow: var(--shadow); }
.noscript-note .noscript-head { font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; letter-spacing: -0.04em; }
.noscript-note p + p { margin-top: .6rem; font-weight: 700; }

/* The wait stamp — a range, its assumptions and the minute it was worked out. Never a single number. */
.wait-band { display: grid; gap: 2rem; align-items: center; max-width: 1400px; margin: 0 auto; padding: clamp(3rem, 7vw, 5.5rem) clamp(1rem, 5vw, 5rem); }
.wait-band .nutrition-stamp { margin-inline: 0; }
.wait-stamp { font-size: clamp(2.4rem, 7vw, 3.4rem); }
.wait-stamp small { display: block; margin-top: .35rem; font-family: var(--sans); font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.wait-stamp-unknown { background: var(--ink); }
.wait-copy h2 { max-width: 12ch; font-size: clamp(2.2rem, 5vw, 4rem); text-transform: uppercase; }
.wait-lead { max-width: 40rem; margin-top: 1rem; font-size: 1.05rem; font-weight: 700; }
.wait-assumptions { display: grid; gap: .4rem; max-width: 40rem; margin-top: 1.2rem; }
.wait-assumptions li { padding: .5rem .7rem; background: var(--lemon); border: 2px solid var(--ink); font-size: .85rem; font-weight: 800; }
.wait-assumptions li:nth-child(even) { background: var(--mint); }
.wait-meta { max-width: 40rem; margin-top: 1rem; color: var(--muted); font-size: .82rem; }
.wait-copy .button { margin-top: 1.2rem; }

/* The board and the pad, side by side on a wide screen — the same shape as the meal builder. */
.order-layout { display: grid; align-items: start; max-width: 1500px; margin: 0 auto; padding: 0 clamp(1rem, 5vw, 5rem) clamp(3rem, 6vw, 5rem); }
.order-board .section-title-row h2 { font-size: clamp(2.25rem, 5vw, 4.5rem); }
.state-note { margin-top: 1.5rem; padding: 1.15rem; background: var(--lemon); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.state-line { font-weight: 800; }
.state-fallback { margin-top: .3rem; }
.state-detail { margin-top: .5rem; color: var(--muted); font-size: .8rem; }
.course-block { margin-top: 2.25rem; }
.course-head { display: inline-block; padding: .45rem .8rem; color: var(--white); background: var(--ink); border: 3px solid var(--ink); font-size: clamp(1.1rem, 2.5vw, 1.5rem); text-transform: uppercase; transform: rotate(-1deg); }
.counter-list { margin-top: 1rem; border: 3px solid var(--ink); box-shadow: var(--shadow); }
.counter-row { display: grid; gap: .85rem; padding: 1.1rem; background: var(--white); border-bottom: 2px solid var(--ink); }
.counter-row:last-child { border-bottom: 0; }
.counter-list > .counter-row:nth-child(even) { background: var(--paper); }
.counter-name { font-family: var(--display); font-size: 1.3rem; line-height: 1.05; letter-spacing: -0.03em; text-transform: uppercase; }
.counter-price { display: inline-block; margin-left: .3rem; padding: .1rem .4rem; color: var(--white); background: var(--tomato-dark); border: 2px solid var(--ink); font-family: var(--sans); font-size: .8rem; font-weight: 950; white-space: nowrap; }
.counter-portion { color: var(--muted); font-size: .78rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.counter-desc { font-weight: 650; }
.counter-row .allergen-line { margin-top: .25rem; }
.counter-add { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; }
.counter-count { font-size: .76rem; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }

/* The pad — a paper docket, torn along the top, in the same hand as everything else. */
.order-pad { position: relative; margin-top: 2.5rem; padding: 1.5rem; background: var(--white); border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--tomato); }
.order-pad::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 10px; background: repeating-linear-gradient(90deg, var(--ink) 0 7px, transparent 7px 14px); }
.pad-label { margin-top: .4rem; color: var(--tomato-dark); font-size: .78rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.order-pad h2 { margin-top: .5rem; font-size: clamp(2.4rem, 6vw, 3.4rem); text-transform: uppercase; }
.pad-empty { margin-top: 1rem; padding: .85rem; background: var(--lemon); border: 2px solid var(--ink); font-weight: 700; }
.pad-lines { margin-top: 1.25rem; }
.pad-line { display: grid; gap: .55rem; padding: .85rem 0; border-bottom: 2px dashed var(--ink); }
.pad-line-name { font-weight: 950; }
.pad-line-unit { display: inline-block; color: var(--muted); font-size: .78rem; font-weight: 800; white-space: nowrap; }
.pad-line-total { font-family: var(--display); font-size: 1.35rem; }
.stepper { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.stepper-button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--ink); background: var(--white); border: 3px solid var(--ink); cursor: pointer; font-family: var(--display); font-size: 1.4rem; line-height: 1; }
.stepper-button:hover { background: var(--lemon); }
.stepper-button:disabled { color: var(--muted); background: var(--paper); cursor: not-allowed; }
.stepper-count { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-family: var(--display); font-size: 1.2rem; }
.stepper-remove { min-height: 44px; padding: .5rem .7rem; color: var(--ink); background: var(--paper); border: 3px solid var(--ink); cursor: pointer; font-size: .76rem; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; }
.stepper-remove:hover { color: var(--white); background: var(--tomato-dark); }
.pad-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding-top: .9rem; border-top: 4px solid var(--ink); font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.pad-total strong { font-family: var(--display); font-size: clamp(2rem, 6vw, 2.8rem); letter-spacing: -0.04em; }
.pad-note { margin-top: .9rem; font-size: .84rem; font-weight: 650; }
.pad-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.order-pad .button:disabled { background: var(--muted); cursor: not-allowed; box-shadow: 5px 5px 0 var(--ink); transform: none; }
.reset-button:disabled { color: var(--muted); background: var(--paper); cursor: not-allowed; text-decoration: none; }
.send-note { margin-top: 1rem; padding: .8rem; background: var(--lilac); border: 2px solid var(--ink); font-size: .82rem; }

/* Sage — a suggestion is a suggestion, and it never becomes an order on its own. */
.sage-panel { margin-top: 3rem; padding: clamp(1.5rem, 4vw, 2.5rem); color: var(--white); background: var(--blue); border: 4px solid var(--ink); box-shadow: var(--shadow); }
.sage-panel h2 { margin-top: 1rem; font-size: clamp(2.2rem, 5vw, 3.6rem); text-transform: uppercase; }
.sage-lead { max-width: 44rem; margin-top: .9rem; font-weight: 650; }
.sage-thread { display: grid; gap: 1rem; margin-top: 1.75rem; }
.sage-turn { padding: 1rem; color: var(--ink); border: 3px solid var(--ink); }
.sage-turn-guest { background: var(--lemon); }
.sage-turn-host { background: var(--white); }
.sage-who { margin-bottom: .45rem; color: var(--tomato-dark); font-size: .72rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.sage-turn p:not(.sage-who, .sage-proposal-head, .sage-proposal-note, .sage-unanswered) { font-weight: 650; }
.sage-unanswered { margin-top: .7rem; padding: .55rem .7rem; color: var(--white); background: var(--tomato-dark); border: 2px solid var(--ink); font-size: .8rem; font-weight: 800; }
/* ⚠ S148 — A CITATION MUST NOT LOOK LIKE A CONTROL.
   These chips were mint blocks with a 2px ink border and uppercase bold type, which is exactly
   what every ACTION on this site looks like, so the owner tried to click them. They are a list of
   what Sage read. Now: no fill, a dashed hairline, normal case, and a visible "Sage read" lead-in.
   The pressable things sit below in .sage-followups and look pressable because they are. */
.sage-sources-wrap { margin-top: .85rem; }
.sage-sources-label { margin: 0 0 .35rem; font-size: .68rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sage-sources { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.sage-chip { padding: .2rem .45rem; color: var(--muted); background: transparent; border: 1px dashed var(--muted); font-size: .72rem; font-weight: 700; }
.sage-followups { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.sage-followups .sage-sources-label { flex-basis: 100%; margin: 0; color: var(--tomato-dark); }
.sage-followup { min-height: 44px; padding: .45rem .75rem; color: var(--ink); background: var(--mint); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); cursor: pointer; font: inherit; font-size: .85rem; font-weight: 900; }
.sage-followup:hover { background: var(--lemon); transform: translate(1px, 1px); box-shadow: 2px 2px 0 var(--ink); }
.sage-followup:active { transform: translate(3px, 3px); box-shadow: none; }
.sage-proposal { margin-top: 1.1rem; padding: 1rem; background: var(--paper); border: 3px dashed var(--ink); }
.sage-proposal-head { color: var(--tomato-dark); font-family: var(--display); font-size: 1.1rem; letter-spacing: -0.02em; text-transform: uppercase; }
.sage-proposal-lines { margin-top: .75rem; }
.sage-proposal-lines li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--ink); font-weight: 800; }
.sage-line-unknown { color: var(--muted); font-weight: 800; }
.sage-proposal-total { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-top: .75rem; padding-top: .6rem; border-top: 3px solid var(--ink); font-weight: 950; text-transform: uppercase; }
.sage-proposal-note { margin-top: .8rem; font-size: .83rem; font-weight: 700; }
.sage-proposal .button { margin-top: 1rem; }
.sage-proposal .button:disabled { background: var(--muted); cursor: not-allowed; transform: none; }
.sage-form { display: grid; gap: .9rem; align-items: end; margin-top: 1.5rem; }
.sage-form .field input { border-color: var(--white); }
.sage-status { min-height: 2.2rem; margin-top: .8rem; color: var(--lemon); font-weight: 900; }

@media (min-width: 620px) {
  .counter-row { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .counter-add { flex-direction: column; align-items: flex-end; justify-content: flex-start; }
  .pad-line { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .pad-line-total { grid-column: 2; grid-row: 1; text-align: right; }
  .pad-line .stepper { grid-column: 1 / -1; }
  .sage-form { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (min-width: 840px) {
  .wait-band { grid-template-columns: auto minmax(0, 1fr); gap: 3rem; }
  .order-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, .44fr); gap: 2.5rem; }
  .order-pad { position: sticky; top: 1.5rem; margin-top: 0; }
}

@media (max-width: 430px) {
  /* "counter." is a long word set in Arial Black, and the shared `.page-hero h1` floor of 3.5rem
     runs it 27px past a 320px screen — measured, not guessed. Only this page's headline is tuned;
     every other heading keeps the size the rest of the site gave it. */
  .page-hero-order h1 { font-size: 2.9rem; }
}