/* Kepos Street Kitchen demo theme: near-black #1d1d1d (their site), the yellow wall #d5c62d
   stylesheet: orange #d5c62d (logo marks, every heading on the site), charcoal #1d1d1d (nav and
   footer), warm off-white page. Orange is the accent fill with charcoal text on it (8.3:1);
   charcoal on off-white is 15.6:1, muted #5b5650 on off-white 6.5:1. Always light.
   Token values, plus three venue rules: the fonts, a charcoal header that carries the white
   logo, and the logo plate on the order page. No shared component changes.
   Known: small orange text on the light ground (outline buttons, the order page "Menu" link) is
   2.1:1; .secondary below uses a darker orange for its text. */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Raleway:wght@400;600&display=swap');
:root {
  color-scheme: light;
  --bg: #faf9f4;
  --surface: #ffffff;
  --fg: #1d1d1d;
  --muted: #5b5650;
  --accent: #d5c62d;
  --accent-fg: #1d1d1d;
  --border: #e4ded2;
  --surface-2: #f1efe4;
  --edge: #8f8a82;
  --focus: #1d1d1d;
  --sheet-shadow: 0 -8px 30px rgba(35, 31, 32, 0.16);
  --card-shadow: 0 1px 2px rgba(35, 31, 32, 0.08);
  --status-new: #a85e00;
  --status-claimed: #5b5650;
  --status-ready: #1d1d1d;
  --font-display: 'Jost', 'Futura', sans-serif;
  --font-body: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #faf9f4; --surface: #ffffff; --fg: #1d1d1d; --muted: #5b5650;
    --accent: #d5c62d; --accent-fg: #1d1d1d; --border: #e4ded2;
    --surface-2: #f1efe4; --edge: #8f8a82; --focus: #1d1d1d; --danger: #b3261e;
  }
}

/* Charcoal header (menu, booking, privacy) with the white logo. The tokens are re-scoped inside
   it so the app's own search field, view switch and Book link read on charcoal. */
.hero, .site-head {
  background: #1d1d1d; color: #ffffff;
  --fg: #ffffff; --muted: #cfc9bd; --surface-2: #3a3638; --border: #4a4547; --edge: #a7a195; --focus: #d5c62d;
}
.hero h1 { color: #ffffff; }
.hero .brand-word, .hero .brand-mark { height: 40px; width: auto; filter: none; }
.hero .brand-word { content: url(/v/ksk/assets/logo-white.png); }
/* The booking page repeats the name as text beside the logo: keep it for screen readers only. */
.hero .brand h1:not(:has(img)) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* On a phone the logo gets its own row: the app would otherwise hide it beside the Book link. */
@media (max-width: 719px) {
  .hero { flex-wrap: wrap; }
  .hero .brand { flex: 1 0 100%; }
  .hero:has(.hero-book:not([hidden])) .brand-word { display: block; }
}
/* Order page: the white logo sits on a charcoal plate; the name is in the logo. */
.order-page .order-logo { background: #1d1d1d; padding: 10px 18px; border-radius: 6px; }
.order-page .order-logo img { height: 40px; }
.order-page .order-logo .order-logo-word { display: none; }
/* The site bar above carries the logo. */
.order-page .order-logo { display: none; }
/* Thank-you page, the Kepos Street Kitchen page's warmth in this brand: a full-width charcoal band with the
   logo and an orange rule, the thank-you in Oswald capitals with a short orange bar, orange
   edges on the item list and the upsell cards. Tokens only; no layout or component change. */
.order-page .order-logo { align-self: stretch; margin: calc(-48px - env(safe-area-inset-top)) -24px 28px;
  padding: calc(22px + env(safe-area-inset-top)) 24px 22px; border-radius: 0; border-bottom: 4px solid var(--accent); }
.order-page .order-logo img { height: 48px; }
.order-page .status-headline { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; }
.order-page #order-status::after { content: ""; display: block; width: 56px; height: 4px; margin: 10px auto 0; background: var(--accent); }
.order-page .order-details-list { border-top: 4px solid var(--accent); }
.order-page .upsell .food-card { border-bottom: 3px solid var(--accent); }
.order-page .suggestions-head a { color: #8a5000; }
@media (min-width: 900px) {
  .order-page .order-logo { grid-column: 1 / -1; grid-row: 1; justify-self: stretch; margin: 0 0 40px; padding: 22px 24px; }
  main.order-page > .order-thanks { grid-row: 2 / span 12; }
}
/* Order page layout. The "Order something else" bar sits in the flow between the page and the footer
   (it was fixed to the viewport, which hid the receipt on a phone and left a gap on a tall screen);
   the page no longer stretches to a full screen. On a phone the receipt comes before "Anything else?". */
body:has(.order-page) { display: flex; flex-direction: column; min-height: 100dvh; }
body:has(.order-page) .order-back-bar { order: 1; position: static; padding: var(--sp-5) var(--sp-4) var(--sp-6);
  background: none; pointer-events: auto; width: 100%; box-sizing: border-box; }
body:has(.order-page) .mega-footer { order: 2; margin-top: auto; }
main.order-page { width: 100%; min-height: 0; padding-bottom: var(--sp-5); box-sizing: border-box; }
@media (max-width: 899px) {
  main.order-page > .order-thanks { order: 1; }
}
.secondary { color: #8a5000; }
/* The item sheet image has no src until a photo item opens: draw nothing for it (it shows as a broken image in some browsers). */
#sheet-img:not([src]) { display: none; }
/* The longer "Ready to check out" label squeezes the order-type pill at 390 px: let its text wrap
   to two lines instead of cutting it off, and trim the cart button's side padding. */
.order-type-pill { white-space: normal; text-overflow: clip; line-height: 1.15; padding: 4px var(--sp-3); }
.cart-bar-inner { padding-inline: var(--sp-4); }