/*
 * Sear & Shred site styles - BRAND SYSTEM 2.0 (2026-09-19) over the V9-V12 layout rules.
 *
 * Architecture: EXPRESSIVE SHELL, DISCIPLINED COMMERCE CORE. Home, the menus directory, menu header bands, about and 404 may be
 * editorial. From the live-menu tool bar inward (cards, filters, cart, checkout, forms, totals, legal) the page is a typeset kitchen
 * ticket: flat Paper Light, Ink rules, mono figures, one Sear action.
 *
 * How this file is organised
 *   1. Fonts: four SIL OFL 1.1 families, self-hosted WOFF2 (licences beside the files in assets/fonts/).
 *   2. Tokens: brand primitives are namespaced --ss-*; the ROLE names the existing rules already use (--bg, --ink, --paper, --panel,
 *      --line, --muted, --focus ...) are kept and aliased to the new values, so no component had to be renamed. Dark theme keeps
 *      the site's existing mechanism (body.dark, set by the existing toggle).
 *   3. The V9-V12 layout rules, unchanged, so every functional component keeps the geometry its tests and screenshots were built on.
 *   4. The Brand 2.0 layer: shell, type, buttons, forms, badges, meal card, cart, totals, feedback, page archetypes, responsive, motion.
 *
 * Contrast (brand contrast matrix, re-measured in the build): Ink on Paper Light 17.3:1, Ink on Sear 5.4:1, Sear Deep on Paper Light
 * 6.1:1, Smoke on Paper Light 6.4:1, Paper on Ink 15.1:1, Ash on Ink 5.3:1, Sear Bright on Ink 6.5:1, Flame ring on Paper Light 6.3:1.
 * Sear is never body text on Paper; text on Sear is always Ink.
 */
@font-face { font-family: 'Anybody'; src: url('fonts/Anybody-wdth-wght.woff2') format('woff2'); font-weight: 100 900; font-stretch: 50% 150%; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('fonts/InstrumentSerif-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('fonts/InstrumentSerif-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('fonts/HankenGrotesk-wght.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('fonts/DMMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Mono'; src: url('fonts/DMMono-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  /* brand primitives */
  --ss-paper: #EFE6D5; --ss-paper-light: #FAF6EC; --ss-paper-deep: #E2D6BF;
  --ss-ink: #15120E; --ss-ink-2: #1F1B16; --ss-ink-3: #2B261F;
  --ss-sear: #F2551D; --ss-sear-deep: #A8360C; --ss-sear-bright: #FF6A33;
  --ss-smoke: #5E5A51; --ss-ash: #8F887A; --ss-foil: #D4D3CD; --ss-steel: #AEB6B3;
  --ss-yolk: #F6C22F; --ss-scallion: #1F5B3A; --ss-tomato: #BF2A1D; --ss-onion: #DE5A90; --ss-flame: #2C4BD8; --ss-bark: #3A2418;
  --ss-butter: #F3DFA2; --ss-tungsten: #E39A3B; --ss-walkin: #10201B;
  /* roles (light) */
  --bg: var(--ss-paper-light); --bg-expressive: var(--ss-paper); --bg-well: var(--ss-paper-deep); --bg-inverse: var(--ss-ink);
  --fg: var(--ss-ink); --fg-2: var(--ss-smoke); --fg-inverse: var(--ss-paper);
  --line: var(--ss-ink); --line-soft: rgba(21, 18, 14, .28);
  --action: var(--ss-sear); --action-fg: var(--ss-ink); --action-hover: var(--ss-sear-bright);
  --link: var(--ss-sear-deep); --focus: var(--ss-flame);
  --c-ok: #1F6B3A; --c-warn: #8A5A00; --c-err: #B3261E; --c-info: #1F3FB8;
  --c-ok-bg: #DCEBDD; --c-warn-bg: #F8E7B8; --c-err-bg: #F6D9D3; --c-info-bg: #DCE2F7;
  /* role names the V9-V12 rules were written against, aliased (not renamed) */
  --ink: var(--fg); --paper: var(--bg); --panel: var(--bg-well); --muted: var(--fg-2); --error: var(--c-err);
  --charcoal: var(--ss-ink); --cream: var(--ss-paper-light); --stone: var(--ss-paper); --sage: var(--ss-paper-deep);
  --ember: var(--line); --gold: var(--line); --ochre: var(--line); --olive: var(--fg);
  --button-bg: var(--fg); --button-ink: var(--bg);
  /* type */
  --f-display: 'Anybody', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --f-serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --f-ui: 'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-mono: 'DM Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-body: var(--f-ui); --font-display: var(--f-display);
  --hw-1: clamp(96px, 16.5vw, 240px); --hw-2: clamp(72px, 11.5vw, 160px); --hw-3: clamp(56px, 8vw, 112px);
  /* space, frame, rules */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: 24px; --margin: 48px; --maxw: 1440px; --measure: 68ch;
  --bw-hair: 1px; --bw: 2px; --bw-heavy: 6px; --bw-input: 1.5px; --radius: 0px; --radius-input: 2px;
  --shadow-sticker: 6px 6px 0 var(--ss-ink); --shadow-overlay: 10px 10px 0 var(--ss-ink);
  --dur-instant: 100ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 480ms; --dur-cut: 700ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-in-out: cubic-bezier(.76, 0, .24, 1);
  --z-sticky: 100; --z-cartbar: 200; --z-drawer: 300; --z-dialog: 400; --z-toast: 500;
}
body.dark {
  color-scheme: dark;
  --bg: var(--ss-ink); --bg-expressive: var(--ss-ink); --bg-well: var(--ss-ink-2); --bg-inverse: var(--ss-paper);
  --fg: var(--ss-paper); --fg-2: var(--ss-ash); --fg-inverse: var(--ss-ink);
  --line: var(--ss-paper); --line-soft: rgba(239, 230, 213, .3);
  --link: var(--ss-sear-bright); --focus: #8FA6FF;
  --c-ok: #6FCF8E; --c-warn: #F6C22F; --c-err: #FF8A7A; --c-info: #8FA6FF;
  --c-ok-bg: #16301F; --c-warn-bg: #3A2E0A; --c-err-bg: #3D1713; --c-info-bg: #151F45;
  --shadow-sticker: 6px 6px 0 var(--ss-sear); --shadow-overlay: none;
  /* An alias is computed where it is declared, so the role aliases are declared again in the dark scope. */
  --ink: var(--fg); --paper: var(--bg); --panel: var(--bg-well); --muted: var(--fg-2); --error: var(--c-err);
  --ember: var(--line); --gold: var(--line); --ochre: var(--line); --olive: var(--fg); --button-bg: var(--fg); --button-ink: var(--bg);
}
@media (max-width: 1199px) { :root { --margin: 32px; --gutter: 20px; } }
@media (max-width: 767px) { :root { --margin: 16px; --gutter: 12px; } }
@media (prefers-reduced-motion: reduce) { :root { --dur-base: 0ms; --dur-slow: 0ms; --dur-cut: 0ms; } }

/* =====================================================================================================================
   V9-V12 LAYOUT RULES (unchanged)
   ===================================================================================================================== */
* { box-sizing: border-box; }
html { scroll-padding-top: 110px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--font-body); }
a { color: inherit; text-underline-offset: 4px; }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons: charcoal on stone, uppercase labels. */
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 46px; padding: .7rem 1.1rem; border: 1px solid var(--button-bg); border-radius: 2px;
  background: var(--button-bg); color: var(--button-ink); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; cursor: pointer;
  /* A long label must never widen the PAGE.
     Found by the responsive capture matrix: "Email searandshred@gmail.com" on
     the contact page forced the document to 335px at a 320px viewport, and the
     scroll-progress bar then stretched to match, so the whole page scrolled
     sideways. An inline-flex button will not shrink below the intrinsic width of
     its text unless it is told it may wrap. */
  max-width: 100%; text-align: center; overflow-wrap: anywhere;
}
button:disabled { background: #d6d2c9; color: #4f4c45; border-color: #a19d93; cursor: not-allowed; }
body.dark button:disabled { background: #3a3a36; color: #c9c6bd; border-color: #6d6c64; }
.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.text-button { background: transparent; border: 0; color: inherit; padding: 0; min-height: 0; justify-content: flex-start; text-decoration: underline; font-weight: 400; letter-spacing: 0; text-transform: none; }
.text-link { padding: 10px 0; display: inline-block; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, textarea:focus-visible, main:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 4px;
}
/* Date fields keep their own focus ring: the browser's :focus-visible heuristic
   does not always apply to a date control reached with the keyboard. */
input[type=date]:focus { outline: 3px solid var(--focus); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) {
  button, .button, .menu-link { transition: background-color .15s ease, color .15s ease; }
  button[aria-busy=true] { animation: pulse 1s ease-in-out infinite; }
  @keyframes pulse { 50% { opacity: .65; } }
}

.skip-link { position: fixed; top: -90px; left: 16px; z-index: 30; padding: 12px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); }
.skip-link:focus { top: 12px; }

/* Masthead */
.site-header {
  position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem;
  padding: .8rem 4vw; background: var(--charcoal); color: var(--stone); border-bottom: 3px solid var(--ember);
}
.site-header a, .site-header button { color: var(--stone); }
.site-header a:focus-visible, .site-header button:focus-visible { outline-color: var(--stone); }
.brand { text-decoration: none; }
.brand img { display: block; width: 210px; height: auto; object-fit: contain; }
/* The nav takes the remaining row and wraps its own links, so the cart count
   never drops to a second line on desktop. */
#site-nav { display: flex; flex: 1 1 0; min-width: 0; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .3rem 1.1rem; margin-left: auto; font-size: .8rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
@media (max-width: 1100px) { #site-nav { flex: 0 0 100%; justify-content: flex-start; } }
#site-nav a { text-decoration: none; padding: .35rem 0; border-bottom: 2px solid transparent; }
#site-nav a:hover, #site-nav a[aria-current="page"] { border-bottom-color: var(--ochre); }
.cart-link { order: 3; font-size: .85rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--sage); padding: .45rem .8rem; white-space: nowrap; }
.cart-link[aria-current="page"] { background: var(--stone); color: var(--charcoal) !important; }
#nav-toggle { display: none; background: transparent; border-color: var(--sage); min-height: 42px; padding: .4rem .8rem; font-size: .85rem; }
#theme-toggle { background: transparent; border-color: var(--sage); min-height: 36px; padding: .3rem .6rem; font-size: .7rem; }
#scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 11; border: none; accent-color: var(--ochre); pointer-events: none; }

main { max-width: 1240px; margin: auto; padding: 1.5rem 5vw 6rem; min-height: 70vh; }
.breadcrumbs { font-size: .8rem; margin-bottom: 2rem; color: var(--muted); }
.page-heading { max-width: 980px; margin: 0 0 2rem; }
h1, h2, h3 { color: var(--ink); overflow-wrap: break-word; }
h1 { font-family: var(--font-display); font-size: clamp(2.3rem, 6vw, 4.8rem); line-height: 1.04; letter-spacing: -.02em; margin: .4rem 0 1.2rem; font-weight: 800; text-transform: uppercase; }
h2 { font-family: var(--font-display); font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.15; letter-spacing: .02em; margin: .8rem 0 1rem; text-transform: uppercase; }
h3 { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.3; letter-spacing: 0; text-transform: none; }
p { max-width: 76ch; }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; }
.lead { font-size: 1.2rem; max-width: 760px; line-height: 1.55; }
.hero-actions { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 80px; }
.editorial { display: grid; grid-template-columns: 1fr 1fr; gap: 9%; margin: 65px 0; }
.menu-link { display: flex; gap: 20px; align-items: center; justify-content: space-between; text-decoration: none; border-bottom: 1px solid var(--line); padding: 20px 0; font-size: 1.5rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.menu-link:hover { color: var(--olive); }
body.dark .menu-link:hover { color: var(--ochre); }
.family-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 2rem 0; }
.band { background: var(--charcoal); color: var(--stone); border-top: 4px solid var(--ember); padding: 42px; margin-top: 64px; }
.band h2, .band .eyebrow, .band p { color: var(--stone); }
.band .button { background: var(--stone); color: var(--charcoal); border-color: var(--stone); }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 55px; }
.two-column section { border-top: 1px solid var(--line); padding-top: 24px; }
.equipment-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.equipment-list section { border-top: 1px solid var(--line); padding: 20px 0 28px; }
.notice { background: var(--panel); border-left: 4px solid var(--olive); padding: 1.1rem 1.5rem; margin: 1.3rem 0; }
.notice:empty { display: none; }
.notice h2 { font-size: 1.3rem; }
.steps { padding-left: 26px; }
.steps li { padding: 15px 0 30px 15px; }
details { border-top: 1px solid var(--line); padding: 1rem 0; }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; font-size: 1.15rem; font-weight: 700; line-height: 1.4; }
details p { margin-left: 0; }

/* Rotation banner and date control */
.edition { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; border-top: 3px solid var(--ember); border-bottom: 1px solid var(--line); padding: 1.1rem 0; margin: 0 0 1.2rem; }
.edition-statement { font-size: 1.2rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 .3rem; }
.edition-support { margin: 0; }
.edition-dates p { margin: .15rem 0; font-weight: 700; letter-spacing: .06em; font-size: .92rem; }
.edition-status { display: inline-block; background: var(--ink); color: var(--bg); padding: .2rem .6rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; }
.edition-status:empty { display: none; }
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin: 1rem 0 .5rem; }
.toolbar label { margin-top: 0; text-transform: uppercase; letter-spacing: .06em; }
.toolbar input[type=date] { width: 16rem; }
.menu-status { font-size: 1.05rem; }
.menu-status strong { font-size: 1.15rem; }
.course-tiers { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.course-tiers a { border: 1px solid var(--line); padding: .5rem .9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; text-decoration: none; }
.course-tiers a[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Menu cards: 3 / 2 / 1 columns */
.meal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin: 1.2rem 0 2.5rem; }
.meal-card { display: flex; flex-direction: column; gap: .55rem; padding: 1.3rem; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--ember); min-width: 0; }
.meal-card h3 { margin: 0; font-size: 1.22rem; }
.meal-card .eyebrow { margin: 0; }
.meal-card p { margin: 0; }
.card-description { color: var(--ink); }
.price { font-size: 1.35rem; font-weight: 700; }
.price small { font-size: .9rem; font-weight: 400; }
.nutrition { font-size: .88rem; color: var(--muted); border-block: 1px solid var(--line); padding: .5rem 0; }
.meal-card details { padding: .55rem 0; }
.meal-card summary { font-size: 1rem; }
.meal-card details p, .meal-card details li { font-size: .92rem; }
.courses { margin: 0; padding-left: 1.2rem; }
.courses li { margin: .15rem 0; }
.course-role { font-weight: 700; }
.card-order { margin-top: auto; display: grid; gap: .5rem; padding-top: .5rem; }
.card-order label { margin: 0; font-size: .9rem; }
.card-order .option-note { font-size: .88rem; color: var(--muted); }
.unavailable { font-weight: 700; border-left: 3px solid var(--olive); padding-left: .6rem; }
.allergen-note { font-size: .88rem; }

/* Cart and checkout */
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 50px; }
.order-summary { align-self: start; border: 1px solid var(--line); border-top: 4px solid var(--ember); padding: 26px; background: var(--paper); }
.order-summary h2 { font-size: 1.4rem; }
.order-summary p { font-size: .9rem; }
fieldset { border: 0; padding: 15px 0 25px; margin: 0; }
legend { font-weight: 700; font-size: 1.25rem; text-transform: uppercase; letter-spacing: .04em; }
label { display: block; font-weight: 700; margin: 14px 0 5px; }
input:not([type=checkbox]), select, textarea { display: block; max-width: 100%; width: 100%; min-height: 48px; padding: 10px 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 2px; }
input[type=date] { max-width: 330px; }
input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--olive); flex-shrink: 0; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; font-weight: 400; }
.check input { margin-top: 3px; }
.error { color: var(--error); font-weight: 700; }
.cart-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: end; border-bottom: 1px solid var(--line); padding: 1rem 0; }
.cart-row h3 { font-size: 1.1rem; margin: 0; grid-column: 1 / -1; }
.cart-row p { margin: 0; }
.cart-row .line-total { font-weight: 700; text-align: right; }
.cart-row .cart-controls { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; grid-column: 1 / -1; }
.cart-row .cart-controls label { margin: 0; }
.cart-row input { max-width: 100px; }
.cart-row .line-problem { color: var(--error); font-weight: 700; grid-column: 1 / -1; }
.quote-row { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding: 12px 0; font-size: 15px; }
/* A customer's own words, read back before payment. Indented under the line
   they belong to so two of the same dish never look like one instruction. */
.quote-note { margin: 6px 0 0 12px; font-size: .88rem; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.meal-request { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.meal-request label { display: block; font-size: .9rem; margin-bottom: 4px; }
.meal-request textarea { width: 100%; font: inherit; font-size: 15px; padding: 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: inherit; resize: vertical; }
.meal-request .option-note { font-size: .82rem; color: var(--muted); margin: 4px 0 8px; }
#notes-fieldset textarea { width: 100%; font: inherit; font-size: 15px; padding: 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: inherit; resize: vertical; }
#notes-fieldset .option-note { font-size: .85rem; color: var(--muted); margin: 4px 0 8px; }
.quote-total { font-size: 1.4rem; font-weight: 700; margin-bottom: 22px; }
#pay-now { width: 100%; font-size: 1.1rem; }
dialog { max-width: 550px; width: calc(100% - 32px); padding: 30px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-top: 4px solid var(--ember); }
dialog::backdrop { background: rgb(0 0 0 / .6); }
dialog button { margin: 6px 6px 0 0; }

footer { background: var(--panel); padding: 50px 5vw 75px; font-size: 14px; border-top: 1px solid var(--line); }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; margin: 30px 0; }
footer .brand { font-weight: 900; font-size: 20px; }
.floating-contact { position: fixed; bottom: 18px; right: 20px; background: var(--charcoal); color: var(--stone); padding: 10px 17px; border-radius: 2px; font-size: 14px; font-weight: 700; z-index: 8; text-decoration: none; text-transform: uppercase; letter-spacing: .06em; }
#back-top { position: fixed; right: 20px; bottom: 72px; background: var(--paper); color: var(--ink); font-size: 12px; z-index: 8; }
.cookie-banner { position: fixed; bottom: 14px; left: 14px; max-width: 590px; z-index: 15; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 5px 30px #0003; padding: 22px; }
.cookie-banner h2 { font-size: 1.2rem; margin-top: 0; }
.cookie-banner p { font-size: 14px; }
.cookie-banner button, .cookie-banner a { font-size: 13px; margin: 4px; }
.search-result { border-top: 1px solid var(--line); padding: 20px 0; }
.search-result h2 { font-size: 1.25rem; text-transform: none; letter-spacing: 0; }
#search-form { max-width: 700px; }
#search-form button { margin-top: 15px; }

@media (max-width: 1100px) {
  #nav-toggle { display: inline-flex; order: 4; }
  .cart-link { margin-left: auto; }
  #site-nav { display: none; order: 5; width: 100%; flex-direction: column; align-items: stretch; margin-left: 0; font-size: .95rem; padding: .4rem 0 .6rem; }
  #site-nav.open { display: flex; }
  #site-nav a { padding: .6rem 0; }
  #theme-toggle { align-self: flex-start; margin-top: .4rem; }
}
@media (max-width: 900px) {
  .meal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .family-list { grid-template-columns: 1fr; gap: 1rem; }
}
@media (max-width: 800px) {
  .editorial, .two-column, .checkout-layout { grid-template-columns: 1fr; gap: 30px; }
  .equipment-list { grid-template-columns: 1fr; }
  .lead { font-size: 1.1rem; }
  .band { padding: 25px; }
  .hero-actions { margin-bottom: 48px; }
  .menu-link { font-size: 1.25rem; }
  .cookie-banner { right: 14px; max-width: none; }
  .order-summary { order: 2; }
}
@media (max-width: 640px) {
  .meal-grid { grid-template-columns: 1fr; }
  main { padding: 1.1rem 5vw 5rem; }
  h1 { font-size: 2.1rem; }
  .brand img { width: 150px; }
  .site-header { gap: .5rem .7rem; padding: .6rem 4vw; }
  .toolbar input[type=date] { width: 100%; }
}

@media print {
  body { background: white; color: black; font-size: 10pt; }
  .site-header, footer, .cookie-banner, .floating-contact, #back-top, #scroll-progress, .hero-actions, button, .breadcrumbs, .toolbar, .card-order { display: none !important; }
  main { padding: 0; max-width: none; }
  h1 { font-size: 26pt; }
  h2 { font-size: 16pt; }
  .meal-grid, .two-column, .equipment-list, .family-list { display: block; }
  .meal-card, section, details { break-inside: avoid; }
  .meal-card { margin-bottom: 12pt; border-color: #555; }
  .band, .notice { background: white; color: black; border: 1px solid #555; }
  .band h2, .band .eyebrow, .band p { color: black; }
  a { text-decoration: none; }
  .checkout-layout { display: block; }
}

/* Promo code: part of the cart form, never a modal. */
.promo-row { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.promo-row input { flex: 1 1 12rem; min-width: 0; text-transform: uppercase; }
.quote-discount { color: var(--ink); font-weight: 700; }
.quote-discount span:last-child { white-space: nowrap; }

/* Bookable times. Real radio inputs, so keyboard and screen readers work
   without any scripting: arrow keys move, space selects. */
#service-window-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin: 8px 0; }
.window-choice { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 4px; padding: 10px; cursor: pointer; font-size: 15px; }
.window-choice:hover { border-color: var(--ember); }
.window-choice:has(input:checked) { border-color: var(--ember); box-shadow: inset 0 0 0 1px var(--ember); }
.window-choice:has(input:focus-visible) { outline: 2px solid var(--ember); outline-offset: 2px; }
#service-window-status { margin-top: 4px; }

/* The gluten-free variant control, directly below ADD TO CART.
   The checkbox and its label are one row with a 44px target; the reason sits
   underneath and is linked by aria-describedby, so a screen reader reads why a
   disabled control is disabled. A disabled control keeps readable contrast
   rather than fading to grey, because the reason matters more than the state. */
.meal-variant { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line, #77776f); }
.meal-variant > input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: #596341; flex: none; margin: 0; }
.meal-variant > label { font-weight: 600; cursor: pointer; }
.meal-variant { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.6rem; row-gap: 0.35rem; }
.meal-variant > label { min-height: 1.5rem; display: inline-flex; align-items: center; }
.meal-variant__note { grid-column: 1 / -1; margin: 0; font-size: 0.85rem; line-height: 1.45; color: #4a4a45; }
.meal-variant > input[type="checkbox"]:disabled { cursor: not-allowed; }
.meal-variant > input[type="checkbox"]:disabled + label { color: #4a4a45; cursor: not-allowed; }
/* The dark palette is an explicit `body.dark` class on this site, NOT a
   prefers-color-scheme switch. A first version used the media query, so a
   visitor whose OS is in dark mode got sage text on the light stone card:
   measured at 1.44:1, far under the 4.5:1 minimum and effectively unreadable. */
body.dark .meal-variant__note { color: #cbd0c6; }
body.dark .meal-variant > input[type="checkbox"]:disabled + label { color: #cbd0c6; }

/* THE THREE DIETARY STATES.

   A badge and a checkbox mean different things and must not look alike. The
   badge states a fact about the standard dish; the checkbox asks for a
   different dish to be made. The unresolved state has neither - just a
   sentence - because a greyed-out control is still a control, and for a dish
   that is already gluten free it says the opposite of the truth. */
.meal-variant__control { display: inline-flex; align-items: center; gap: 0.6rem; }
.meal-variant__badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.15rem 0.55rem; border-radius: 999px;
  border: 1px solid #596341; background: #eef1e7; color: #2f3722;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
}
/* A shape as well as a colour, so the badge survives greyscale and forced
   colours. */
.meal-variant__badge::before { content: "\2713"; font-weight: 700; }
body.dark .meal-variant__badge { background: #2b3222; border-color: #8a9a6b; color: #e4ead9; }

/* THE FIVE-PEPPER HEAT GUIDE.

   Filled and empty peppers differ in opacity and stroke as well as fill, and
   the level is always stated in words beside them. Nothing here is the only
   carrier of its meaning. */
.meal-heat { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0.35rem 0 0; font-size: 0.85rem; }
.meal-heat__peppers { flex: none; }
.meal-heat__peppers .is-on { fill: #a3341f; stroke: #a3341f; stroke-width: 0.5; }
.meal-heat__peppers .is-off { fill: none; stroke: #77776f; stroke-width: 1; opacity: 0.55; }
.meal-heat__text { font-weight: 600; color: #2f3722; }
.meal-heat__basis { color: #4a4a45; }
.meal-heat[data-level="unrated"] .meal-heat__text { font-weight: 500; color: #4a4a45; font-style: italic; }
body.dark .meal-heat__text { color: #e4ead9; }
body.dark .meal-heat__basis, body.dark .meal-heat[data-level="unrated"] .meal-heat__text { color: #cbd0c6; }
body.dark .meal-heat__peppers .is-on { fill: #e0714f; stroke: #e0714f; }

/* =========================================================================
   V9 LAST PASS: badges, legend, filters, variant controls, recipe pages,
   the library, the six-menu home page.
   ========================================================================= */

/* A BADGE IS ICON + TEXT + COLOUR + TOOLTIP, NEVER COLOUR ALONE.
   The colour token (visual_icon_system.colour_tokens) is carried by the border
   and the inset rule; the text is always ink on a light tint of the token, so
   every badge reads at 8:1 or better in both themes (the raw token as text
   would fail 4.5:1 for amber, ochre and harvest on a light tint). The label is
   real text; the emoji is aria-hidden; the meaning travels in title/aria-label. */
.badges { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.badges li { margin: 0; }
.badge {
  --badge-colour: #2b3a34;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .12rem .6rem .12rem .5rem; border-radius: 999px;
  border: 1px solid var(--badge-colour); box-shadow: inset 4px 0 0 var(--badge-colour);
  background: var(--paper);
  background: color-mix(in srgb, var(--badge-colour) 12%, var(--paper));
  color: var(--ink); font-size: .78rem; font-weight: 700; letter-spacing: .01em; line-height: 1.5; white-space: nowrap;
}
.badge__icon { font-size: .9em; line-height: 1; }
/* The colour token per badge code lives HERE, not in a style attribute: the site's Content
   Security Policy is style-src 'self', so an inline style is blocked in production. */
.badge[data-badge="GF"] { --badge-colour: #0f7a4a; }
.badge[data-badge="V"] { --badge-colour: #5c7a1f; }
.badge[data-badge="VG"] { --badge-colour: #1d5c2c; }
.badge[data-badge="DF"] { --badge-colour: #0b6e75; }
.badge[data-badge="P"] { --badge-colour: #1f5fa8; }
.badge[data-badge="SPICY1"] { --badge-colour: #b8741a; }
.badge[data-badge="SPICY2"] { --badge-colour: #a3271f; }
.badge[data-badge="HOT"], .badge[data-badge="MIXED"] { --badge-colour: #8a3d12; }
.badge[data-badge="CHILLED"], .badge[data-badge="MICRO"], .badge[data-badge="OVEN"] { --badge-colour: #4c5b66; }
.badge[data-badge="COLD"] { --badge-colour: #37728c; }
.badge[data-badge="PORTION"], .badge[data-badge="PIECES"], .badge[data-badge="PIE"], .badge[data-badge="TRAY"], .badge[data-badge="PROTEIN"] { --badge-colour: #2b3a34; }
.badge[data-badge="NUTS"] { --badge-colour: #7a4b2a; }
.badge[data-badge="EGG"] { --badge-colour: #9c7a1c; }
.badge[data-badge="SEAFOOD"] { --badge-colour: #245f8a; }
.badge[data-badge="SEASONAL"] { --badge-colour: #a86a12; }
.badge[data-badge="EVENT"] { --badge-colour: #7d6520; }
body.dark .badge {
  background: #d9ddd6;
  background: color-mix(in srgb, var(--badge-colour) 30%, #f6f4ee);
  color: #10201b;
}
@media (forced-colors: active) {
  .badge { border: 1px solid CanvasText; box-shadow: none; background: Canvas; color: CanvasText; }
}

/* The legend: every badge on the page with its meaning, on every menu page. */
.legend { border: 1px solid var(--line); border-left: 4px solid var(--gold); padding: .6rem 1rem; margin: .8rem 0 1.4rem; background: var(--paper); }
.legend summary { font-size: 1rem; }
.legend dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem 1rem; margin: .8rem 0 .2rem; align-items: center; }
.legend dt, .legend dd { margin: 0; }
.legend dd { font-size: .92rem; }
.legend-static { padding: 0; }
.legend-static dl { grid-template-columns: max-content minmax(0, 1fr); }

/* Filters: real selects and a search box, all client-side on the loaded edit. */
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem 1rem; margin: .8rem 0 .4rem; }
.filters:empty { display: none; }
.filters label { margin: 0 0 .25rem; font-size: .88rem; text-transform: uppercase; letter-spacing: .06em; }
.filters select, .filters input { min-height: 44px; }

/* The two variant controls inside a card (gluten-free formulation; dairy-free
   where the formula has no dairy). 44px targets, labels linked, note underneath. */
.variants { border: 0; padding: .35rem 0 0; margin: 0; display: grid; gap: .35rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.variants legend { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; padding: 0; }
.variant { display: flex; align-items: center; gap: .6rem; min-height: 2rem; }
.variant input[type="checkbox"] { width: 1.3rem; height: 1.3rem; margin: 0; flex: none; accent-color: var(--ember); }
.variant label { margin: 0; font-weight: 600; font-size: .95rem; cursor: pointer; }
.variant__note { margin: 0; font-size: .85rem; color: var(--muted); }
.meal-card[data-variant="gluten-free"] { border-top-color: #0f7a4a; }

/* Ingredient transparency: names only, house blends spelled out. */
.ingredient-list { margin: .3rem 0 .6rem; padding-left: 1.15rem; font-size: .92rem; }
.ingredient-list li { margin: .1rem 0; }
.dish-details h4 { margin: .9rem 0 .2rem; font-size: 1rem; }
.card-link { margin-top: .2rem; font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.why-order { list-style: none; margin: 0 0 .4rem; padding: 0; display: grid; gap: .25rem; max-width: 76ch; }
.why-order li { padding-left: 1rem; position: relative; font-size: 1.02rem; }
.why-order li::before { content: ""; position: absolute; left: 0; top: .7em; width: .5rem; height: 2px; background: var(--ember); }
.ordering-rules { border-left: 3px solid var(--gold); padding: .2rem 0 .2rem .8rem; margin: .8rem 0; font-size: .98rem; }
.ordering-rules:empty { display: none; }
.menu-notes { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; font-size: .92rem; }
.menu-notes p { margin: .4rem 0; }

/* Recipe detail page. */
.recipe { max-width: 900px; }
.recipe h1 { font-size: clamp(1.9rem, 4.5vw, 3.2rem); text-transform: none; letter-spacing: -.01em; }
.recipe h2 { font-size: 1.25rem; margin-top: 1.8rem; }
.recipe .variants { margin: 1rem 0; border-top: 0; padding-top: 0; }
.recipe .badges { margin: .6rem 0; }

/* The library: 600 recipes, browseable, never an ordering root. */
.library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.library-card { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 1.1rem; background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--charcoal); min-width: 0; }
.library-card h3 { margin: 0; font-size: 1.08rem; }
.library-card p { margin: 0; }
.library-card .price { font-size: 1.05rem; }
.library-card .card-description { font-size: .92rem; }

/* Home page. */
.hero { padding: 1rem 0 0; }
.hero h1 { max-width: 18ch; }
.hero .lead { max-width: 62ch; }
.hero-actions .button.secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.rotation-preview { margin: 3rem 0; border-top: 3px solid var(--ember); padding-top: 1rem; }
.preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem 2rem; }
.preview-menu h3 { margin: .4rem 0 .2rem; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .04em; }
.preview-list { margin: .4rem 0 0; padding-left: 1.2rem; font-size: .92rem; }
.preview-list li { margin: .35rem 0; }
.preview-list .badges { margin-top: .2rem; }
.preview-price { color: var(--muted); white-space: nowrap; }
.menu-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; margin: 1.2rem 0 3rem; }
.menu-tile { padding: 1.2rem 1.3rem; background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--ember); min-width: 0; }
.menu-tile h3 { margin: 0 0 .4rem; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .04em; }
.menu-tile h3 a { text-decoration: none; }
.menu-tile h3 a:hover { text-decoration: underline; }
.menu-tile p { margin: 0 0 .6rem; font-size: .96rem; }
.value-props { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; margin: 2.5rem 0; }
.value-props section { border-top: 1px solid var(--line); padding-top: .8rem; }
.value-props h3 { margin: 0 0 .4rem; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .05em; }
.value-props p { margin: 0; font-size: .95rem; }
.featured { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0 3rem; list-style: none; padding: 0; }
.featured li { border: 1px solid var(--line); border-top: 3px solid var(--charcoal); background: var(--paper); padding: .9rem 1rem; min-width: 0; }
.featured .eyebrow { margin: 0 0 .3rem; }
.featured a { font-weight: 700; }
.featured p { margin: .3rem 0 0; font-size: .92rem; }
.explainers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 2.5rem 0; }
.explainers h3 { margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .04em; font-size: 1.15rem; }
.dietary-explainer { background: var(--panel); padding: 1.6rem 1.8rem; margin: 2.5rem 0; border-left: 4px solid #0f7a4a; }
.dietary-explainer h2 { margin-top: 0; }
.service-area { margin: 2.5rem 0; }
.home-faq details { padding: .8rem 0; }
.home-faq summary { font-size: 1.05rem; }

/* A dairy-free tag on a cart line: a fact about the formula, in words. */
.cart-row__tag {
  display: inline-flex; align-items: center; margin-left: .5rem; padding: .1rem .5rem; border-radius: 999px; vertical-align: middle;
  border: 1px solid #0b6e75; background: #e3f1f1; color: #10201b; font-size: .72rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}
body.dark .cart-row__tag { background: #b0ccca; border-color: #b0ccca; }

/* Sticky cart access on mobile: the masthead scrolls away, the cart does not. */
@media (max-width: 640px) {
  .cart-link { position: fixed; left: 16px; bottom: 18px; z-index: 8; background: var(--charcoal); color: var(--cream) !important; border-color: var(--cream); box-shadow: 0 4px 18px #0004; margin-left: 0; }
  .site-header { padding-right: 4vw; }
}
@media (max-width: 1100px) {
  .featured, .value-props { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-grid, .menu-tiles, .library-grid, .explainers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  /* minmax(0, 1fr), not 1fr: a bare 1fr track is minmax(auto, 1fr) and grows to the widest
     unbreakable child, which pushed the home page to 486px on a 375px phone. */
  .featured, .value-props, .preview-grid, .menu-tiles, .library-grid, .explainers { grid-template-columns: minmax(0, 1fr); }
  .preview-menu, .menu-tile, .library-card, .featured li { min-width: 0; }
  .preview-list a, .preview-menu h3, .featured a, .library-card h3 { overflow-wrap: anywhere; }
  .preview-price { white-space: normal; }
  .legend dl { grid-template-columns: 1fr; gap: .2rem; }
  .legend dd { margin-bottom: .5rem; }
  .badge { white-space: normal; }
}
@media print {
  .filters, .variants, .card-link, .legend summary { display: none !important; }
  .legend { border: 1px solid #555; }
}

/* =========================================================================
   V10: the kitchen hero (steam, pan, opt-in sound), tilt, custom menus,
   the minimum-order meter, photo slots, the social band.
   ========================================================================= */
/* FULL-BLEED RECTANGLES (owner, 2026-09-18): the hero and the coloured bands run edge to edge,
   while their text stays on the same column as the rest of the page. The negative margins pull a
   block out to the viewport width; the padding puts the content back where main's content sits
   (main is 1240px wide at most with 5vw of side padding, so half of 1240 is the 620px below). */
.full-bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(5vw, calc(55vw - 620px)); padding-right: max(5vw, calc(55vw - 620px)); }
/* A 100vw-wide block includes the scrollbar's width; clip the sliver rather than scroll sideways. */
html, body { overflow-x: clip; }
.hero--kitchen {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr); gap: 2rem;
  align-items: center; margin: 0 calc(50% - 50vw) 2.5rem; padding: 3rem max(5vw, calc(55vw - 620px)) 3.5rem;
  background: var(--charcoal); color: var(--cream);
  background-image: radial-gradient(ellipse at 80% 110%, rgba(152, 84, 48, .55), transparent 55%), radial-gradient(ellipse at 10% -10%, rgba(200, 162, 74, .25), transparent 50%);
}
.hero--kitchen .eyebrow, .hero--kitchen h1, .hero--kitchen .lead { color: var(--cream); }
.hero--kitchen .eyebrow { color: var(--gold); }
.hero--kitchen h1 { max-width: 16ch; margin-bottom: 1rem; }
.hero--kitchen .lead { max-width: 60ch; color: #dfe6e1; }
.hero--kitchen .hero-actions { margin: 1.4rem 0 0; align-items: center; }
.hero--kitchen .button { background: var(--cream); color: var(--charcoal); border-color: var(--cream); }
.hero--kitchen .button.secondary { background: transparent; color: var(--cream); border-color: var(--cream); }
.hero--kitchen a:focus-visible, .hero--kitchen button:focus-visible { outline-color: var(--gold); }
.hero__copy { position: relative; z-index: 2; }
.hero__visual { position: relative; z-index: 1; min-height: 260px; }
.sound-toggle { background: transparent; color: var(--cream); border: 1px solid rgba(246, 244, 238, .55); min-height: 44px; padding: .5rem .9rem; font-size: .78rem; letter-spacing: .1em; }
.sound-toggle::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .5rem; background: rgba(246, 244, 238, .45); vertical-align: middle; }
.sound-toggle[aria-pressed="true"]::before { background: var(--gold); box-shadow: 0 0 0 4px rgba(200, 162, 74, .25); animation: sizzle-pulse 1.1s ease-in-out infinite; }
@keyframes sizzle-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }

/* The pan: a sear mark of light, drawn in CSS, that breathes. */
.pan { position: absolute; right: 6%; bottom: -8%; width: min(46vw, 420px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 45% 40%, #2a3b36 0 58%, #1a2724 60% 70%, transparent 71%); box-shadow: inset 0 0 60px rgba(0, 0, 0, .7), 0 30px 60px rgba(0, 0, 0, .45); }
.pan__sear { position: absolute; inset: 22% 24% 26% 22%; border-radius: 45% 55% 50% 50%; background: radial-gradient(ellipse at 40% 45%, rgba(200, 162, 74, .85), rgba(152, 84, 48, .8) 45%, rgba(74, 34, 14, .9) 80%); filter: blur(1px); animation: sear-breathe 3.6s ease-in-out infinite; }
@keyframes sear-breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.04) rotate(-2deg); opacity: 1; } }
.steam { position: absolute; bottom: 8%; left: var(--x); width: var(--size); height: var(--size); border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(246, 244, 238, .28), rgba(246, 244, 238, 0) 65%); filter: blur(8px);
  animation: steam-rise var(--duration) linear var(--delay) infinite; }
@keyframes steam-rise { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(var(--drift), -140%) scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pan__sear, .steam, .sound-toggle[aria-pressed="true"]::before { animation: none; } }

/* Photo slots: an honest frame until real photographs exist. */
.photo-slot { margin: 0; }
.photo-slot__frame { aspect-ratio: 4 / 3; border: 1px solid rgba(246, 244, 238, .25); background: repeating-linear-gradient(135deg, rgba(246, 244, 238, .05) 0 12px, transparent 12px 24px); display: grid; place-items: center; border-radius: 4px; }
.photo-slot__mark { font-family: var(--font-display); font-weight: 800; letter-spacing: .3em; font-size: 1.4rem; color: rgba(246, 244, 238, .45); }
.photo-slot figcaption { font-size: .78rem; margin-top: .4rem; color: rgba(246, 244, 238, .7); text-align: center; }
.photo-slot--hero { position: relative; z-index: 2; max-width: 360px; margin-left: auto; }

/* Tilt: transform is set by script; the glare follows the pointer. */
[data-tilt] { transition: transform .18s ease-out, box-shadow .18s ease-out; transform-style: preserve-3d; will-change: transform; position: relative; }
[data-tilt]:hover { box-shadow: 0 18px 40px rgba(23, 37, 34, .18); }
[data-tilt]::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .18s; background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255, 255, 255, .22), transparent 55%); }
[data-tilt]:hover::after { opacity: 1; }
body.dark [data-tilt]::after { background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(200, 162, 74, .18), transparent 55%); }
.meal-card:focus-within { box-shadow: 0 12px 30px rgba(23, 37, 34, .16); }

/* Custom menus. */
.custom-menu-host { margin: 2rem 0 1rem; }
.custom-menu { border: 1px solid var(--line); border-top: 4px solid var(--gold); background: var(--paper); padding: 1.4rem 1.6rem; }
.custom-menu h2 { margin-top: .2rem; }
.custom-menu__steps { padding-left: 1.2rem; margin: .8rem 0; display: grid; gap: .3rem; }
.custom-menu__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.4rem; margin-top: 1rem; align-items: end; }
.custom-menu__form > div:nth-child(4), .custom-menu__form > div:nth-child(5) { grid-column: 1 / -1; }
.custom-menu__form label { margin: 0 0 .3rem; }
.custom-menu__form textarea { width: 100%; min-height: 4.5rem; padding: 10px 12px; border: 1px solid var(--line); border-radius: 2px; background: var(--paper); color: inherit; resize: vertical; }
.custom-menu__form button[type="submit"] { grid-column: 1 / -1; justify-self: start; }
.custom-menu__form .option-note { grid-column: 1 / -1; margin: 0; }

/* The minimum-order meter in the cart. */
.minimum { margin: 1rem 0; }
.minimum__bar { height: 8px; border-radius: 999px; background: var(--panel); overflow: hidden; position: relative; }
.minimum__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--fill, 0%); background: linear-gradient(90deg, var(--ember), var(--gold)); transition: width .4s ease; }
.minimum__text { margin: .5rem 0 0; font-size: .92rem; }

/* The compact home page: six menus, each with its description and why-order lines, nothing else. */
.home-menus { margin: 1.5rem 0 2.5rem; }
.home-menus .lead { margin-bottom: 1.4rem; }
.menu-tiles--home { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin: 0 0 1.6rem; }
.menu-tile--home { display: flex; flex-direction: column; gap: .6rem; padding: 1.5rem 1.5rem 1.4rem; }
.menu-tile--home h3 { font-size: 1.45rem; }
.menu-tile__lead { font-size: .98rem; line-height: 1.5; margin: 0; color: var(--ink); }
.why-order--tile { margin: 0 0 .4rem; gap: .35rem; }
.why-order--tile li { font-size: .92rem; color: var(--muted); }
.menu-tile--home .button { margin-top: auto; align-self: flex-start; }
@media (max-width: 1100px) { .menu-tiles--home { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .menu-tiles--home { grid-template-columns: minmax(0, 1fr); } .menu-tile--home { padding: 1.2rem 1.1rem; } }

/* Bands: social thank-you and custom menus, edge to edge like the hero. */
.band--social, .band--custom { margin-top: 2.5rem; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(5vw, calc(55vw - 620px)); padding-right: max(5vw, calc(55vw - 620px)); }
.band .social a { color: var(--cream); }
.social { margin: .6rem 0 0; font-size: .95rem; }
.band .button.secondary { background: transparent; color: var(--cream); border-color: var(--cream); }
.featured__copy { font-size: .9rem; color: var(--muted); }
.featured__price { font-weight: 700; }

@media (max-width: 900px) {
  .hero--kitchen { grid-template-columns: 1fr; padding-top: 2.2rem; padding-bottom: 3rem; }
  .hero__visual { min-height: 180px; }
  .pan { right: -10%; bottom: -30%; width: 70vw; }
  .photo-slot--hero { max-width: 280px; margin-left: 0; }
}
@media (max-width: 640px) {
  .custom-menu__form { grid-template-columns: 1fr; }
  .custom-menu { padding: 1.1rem 1rem; }
  .hero--kitchen h1 { font-size: 2.2rem; }
  .hero--kitchen .hero-actions { gap: .8rem; }
}
body.dark .meal-heat__peppers .is-off { stroke: #9a9a90; }

.meal-diet { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0 0; }
.meal-diet__pill {
  padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid #77776f;
  font-size: 0.78rem; font-weight: 600; color: #2f3722;
}
body.dark .meal-diet__pill { border-color: #9a9a90; color: #e4ead9; }

/* Forced colours: let the platform decide the palette and keep the shapes. */
@media (forced-colors: active) {
  .meal-variant__badge { border: 1px solid CanvasText; background: Canvas; color: CanvasText; }
  .meal-heat__peppers .is-on { fill: CanvasText; stroke: CanvasText; }
  .meal-heat__peppers .is-off { fill: none; stroke: GrayText; }
  .meal-diet__pill { border-color: CanvasText; color: CanvasText; }
}

/* THE PREPARATION ON A CART LINE.
   A standard portion and a gluten-free portion of the same dish are two rows
   with the same heading and, for most dishes, the same price. Without this the
   two are indistinguishable on screen and identical to a screen reader. The
   word itself carries the meaning - the pill is only emphasis - so it survives
   greyscale, forced colours and a stylesheet that fails to load. */
.cart-row__preparation {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 0.5rem;
  padding: 0.1rem 0.5rem; border-radius: 999px; vertical-align: middle;
  border: 1px solid #596341; background: #eef1e7; color: #2f3722;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase;
}
.cart-row__preparation::before { content: "\2713"; font-weight: 700; }
body.dark .cart-row__preparation { background: #2b3222; border-color: #8a9a6b; color: #e4ead9; }

/* ---------------------------------------------------------------------------
   V11 (2026-09-18): the same design, less on the page. One line says the menu rotates and how to
   order; filters are a row of chips; the fine print folds away; the cart follows the thumb.
   --------------------------------------------------------------------------- */
.edition--line { display: block; padding: .8rem 0; margin-bottom: .8rem; }
.edition--line .edition-statement { font-size: 1rem; margin: 0 0 .2rem; }
.edition--line .ordering-rules { margin: 0; }
.toolbar { align-items: flex-end; justify-content: space-between; }
.filters--chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.chip { min-height: 44px; padding: .45rem .95rem; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font-weight: 700; font-size: .9rem; letter-spacing: .02em; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
details.menu-notes { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: 1.2rem; font-size: .92rem; }
details.menu-notes > summary { cursor: pointer; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-size: .88rem; }
.trust-strip { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; justify-content: center; padding: 0; margin: 0 0 2rem; font-weight: 700; font-size: .92rem; letter-spacing: .02em; }
.trust-strip li::before { content: "✓"; color: var(--ember); margin-right: .45rem; }
.how-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 1.6rem 0 1rem; }
.how-steps li { counter-increment: step; border-top: 3px solid var(--ember); padding-top: .7rem; }
.how-steps li::before { content: counter(step); display: block; font-weight: 800; font-size: 1.5rem; line-height: 1; margin-bottom: .3rem; }
.menu-tile__from { font-weight: 800; letter-spacing: .03em; margin: .2rem 0 .4rem; }
.cart-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; padding: .7rem max(5vw, calc(55vw - 620px)); background: var(--ink); color: var(--bg); box-shadow: 0 -6px 24px rgba(0, 0, 0, .18); }
.cart-bar[hidden] { display: none; }
.cart-bar p { margin: 0; font-size: .95rem; }
.cart-bar .button { margin: 0; white-space: nowrap; background: var(--ember); border-color: var(--ember); color: #fff; }
.cart-bar__meter { display: block; height: 4px; margin-top: .35rem; background: rgba(255, 255, 255, .25); border-radius: 2px; overflow: hidden; }
.cart-bar__meter span { display: block; height: 100%; background: var(--ember); }
body.has-cart-bar { padding-bottom: 5.5rem; }
@media (max-width: 700px) {
  .how-steps { grid-template-columns: 1fr; gap: .6rem; }
  .trust-strip { justify-content: flex-start; }
  .toolbar { align-items: stretch; }
}
@media print { .cart-bar, .trust-strip, .how-steps { display: none !important; } }
/* Five tiles: three across, then two that share the row, so no cell is left empty. */
@media (min-width: 1101px) {
  .menu-tiles, .menu-tiles--home { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .menu-tiles > *, .menu-tiles--home > * { grid-column: span 2; }
  .menu-tiles > :nth-child(4):nth-last-child(2), .menu-tiles > :nth-child(5):last-child { grid-column: span 3; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .menu-tiles > :nth-child(5):last-child { grid-column: 1 / -1; }
}
/* The cart bar owns the bottom edge; the floating controls step up out of its way. */
body.has-cart-bar .floating-contact { bottom: calc(18px + 4.4rem); }
body.has-cart-bar #back-top { bottom: calc(72px + 4.4rem); }
@media (max-width: 700px) { .cart-bar { gap: .6rem; padding-top: .55rem; padding-bottom: .55rem; } .cart-bar p { flex: 1 1 0; min-width: 0; font-size: .84rem; line-height: 1.3; } .cart-bar .button { padding: .6rem .9rem; font-size: .82rem; } }
/* The custom-menu brief opens on request. */
.custom-menu__more > summary { display: inline-flex; align-items: center; min-height: 44px; margin-top: .6rem; padding: .55rem 1.1rem; border: 1.5px solid currentColor; font-weight: 800; font-size: .9rem; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; list-style: none; }
.custom-menu__more > summary::-webkit-details-marker { display: none; }
.custom-menu__more > summary::after { content: "+"; margin-left: .6rem; font-size: 1.1rem; line-height: 1; }
.custom-menu__more[open] > summary::after { content: "–"; }
.custom-menu__more[open] > summary { margin-bottom: 1rem; }

/* =====================================================================================================================
   BRAND SYSTEM 2.0 LAYER
   ===================================================================================================================== */

/* ---------- base ---------- */
html { -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; scroll-padding-top: 96px; }
body { background: var(--bg); color: var(--fg); font: 400 17px/1.5 var(--f-ui); }
h1, h2, h3, .lead { text-wrap: balance; }
p, li { text-wrap: pretty; }
p { max-width: var(--measure); }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
main a:not(.button):not(.text-link):not(.menu-link) { color: var(--link); }
main a:not(.button):hover { text-decoration-thickness: 3px; }
*, *::before, *::after { border-radius: 0; }
input:not([type=checkbox]):not([type=radio]), select, textarea { border-radius: var(--radius-input); }
.price, .line-total, .quote-row, .quote-total, .menu-tile__from, .featured__price, .preview-price, time, input[type=date], input[type=time], #cart-count, .cart-bar, .minimum__text {
  font-variant-numeric: tabular-nums;
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, textarea:focus-visible, main:focus-visible,
input[type=date]:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.site-header a:focus-visible, .site-header button:focus-visible { outline-color: var(--focus); }
.skip-link { background: var(--fg); color: var(--bg); border: var(--bw) solid var(--fg); font: 800 15px/1 var(--f-ui); letter-spacing: .07em; text-transform: uppercase; padding: 14px 18px; z-index: 600; }
main { max-width: var(--maxw); padding: var(--s-5) var(--margin) var(--s-9); }
.full-bleed, .hero--kitchen, .page-heading--field, .band { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-left: max(var(--margin), calc(50vw - 720px + var(--margin))); padding-right: max(var(--margin), calc(50vw - 720px + var(--margin))); }

/* ---------- type ---------- */
h1 { font: 800 clamp(40px, 5vw, 64px)/.92 var(--f-display); font-stretch: 80%; letter-spacing: 0; text-transform: uppercase; margin: var(--s-3) 0 var(--s-5); }
h2 { font: 800 clamp(30px, 3.2vw, 40px)/.95 var(--f-display); font-stretch: 80%; letter-spacing: 0; text-transform: uppercase; margin: var(--s-5) 0 var(--s-4); }
h3 { font: 800 clamp(18px, 1.6vw, 20px)/1.05 var(--f-display); font-stretch: 80%; letter-spacing: .005em; text-transform: uppercase; }
h4 { font: 500 12px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.eyebrow, .breadcrumbs, legend small, .folio-bar, .edit-strip, .ft-h { font: 500 12px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
.eyebrow { color: var(--fg); margin: 0 0 var(--s-2); }
.breadcrumbs { color: var(--fg-2); margin-bottom: var(--s-5); padding: var(--s-3) 0; border-bottom: var(--bw) solid var(--line); }
.breadcrumbs a { color: inherit !important; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.lead { font: italic 400 clamp(24px, 2.4vw, 28px)/1.15 var(--f-serif); letter-spacing: 0; max-width: 30em; }
.page-heading { max-width: none; margin-bottom: var(--s-6); }
.folio-bar { display: flex; justify-content: space-between; gap: var(--s-5); padding: var(--s-3) 0; border-bottom: var(--bw) solid currentColor; margin: 0 0 var(--s-5); max-width: none; }
.folio-bar > span:last-child { text-align: right; }

/* ---------- buttons and links ---------- */
button, .button { min-height: 48px; padding: 0 var(--s-5); border: var(--bw) solid var(--line); background: var(--fg); color: var(--bg); font: 800 15px/1 var(--f-ui); letter-spacing: .07em; text-transform: uppercase; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-instant); }
button:hover, .button:hover { background: var(--action); color: var(--action-fg); }
button:active, .button:active { transform: translate(2px, 2px); }
.secondary, button.secondary, .button.secondary { background: transparent; color: var(--fg); border-color: var(--line); }
.secondary:hover, button.secondary:hover, .button.secondary:hover { background: var(--fg); color: var(--bg); }
/* the one Sear action of a view */
#pay-now, #review-order, #confirm-pay, .hero-actions .button:not(.secondary), .card-order button[type=submit], .custom-menu__form button[type=submit], .cart-bar .button, #search-form button {
  background: var(--action); color: var(--action-fg); border-color: var(--ss-ink);
}
#pay-now:hover, #review-order:hover, #confirm-pay:hover, .hero-actions .button:not(.secondary):hover, .card-order button[type=submit]:hover, .custom-menu__form button[type=submit]:hover, .cart-bar .button:hover, #search-form button:hover { background: var(--action-hover); color: var(--action-fg); }
.meal-grid .card-order button[type=submit] { background: var(--fg); color: var(--bg); border-color: var(--line); }
.meal-grid .card-order button[type=submit]:hover { background: var(--action); color: var(--action-fg); border-color: var(--ss-ink); }
button:disabled, button:disabled:hover, body.dark button:disabled { background: var(--bg-well); color: var(--fg-2); border-color: var(--line-soft); cursor: not-allowed; transform: none; }
button[aria-busy=true] { animation: none; background-image: repeating-linear-gradient(90deg, currentColor 0 8px, transparent 8px 16px); background-size: 40px 4px; background-repeat: no-repeat; background-position: center calc(100% - 8px); }
.text-button { min-height: 44px; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: 0; text-transform: none; text-decoration: underline; padding: 0; }
.text-button:hover { background: transparent; color: inherit; text-decoration-thickness: 3px; }
.text-link, .card-link { font: 500 13px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--fg) !important; border-bottom: var(--bw) solid var(--line); padding: 0 0 3px; display: inline-flex; gap: var(--s-2); align-items: center; min-height: 0; }
.text-link::after, .menu-tile .button.secondary::after, .menu-link::after, .dir-row__go::after { content: ""; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: url('icons/ss-icon-arrow-right.svg') center/contain no-repeat; mask: url('icons/ss-icon-arrow-right.svg') center/contain no-repeat; transition: transform var(--dur-fast) var(--ease-out); }
.text-link:hover::after, .menu-tile:hover .button.secondary::after, .menu-link:hover::after, .dir-row:hover .dir-row__go::after { transform: translateX(4px); }
.hero-actions .text-link { min-height: 48px; border: var(--bw) solid var(--line); padding: 0 var(--s-5); font: 800 15px/1 var(--f-ui); letter-spacing: .07em; }
.hero-actions .text-link::after { display: none; }
.hero-actions .text-link:hover { background: var(--fg); color: var(--bg) !important; }

/* ---------- global shell ---------- */
.edit-strip { background: var(--ss-ink); color: var(--ss-paper); }
.edit-strip .wrap { display: flex; justify-content: space-between; gap: var(--s-5); max-width: var(--maxw); margin: 0 auto; padding: 10px var(--margin); }
body[data-page="order"] .edit-strip, body[data-page="order-success"] .edit-strip { display: none; }
.site-header { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); min-height: 72px; padding: 0 max(var(--margin), calc(50vw - 720px + var(--margin))); background: var(--bg); color: var(--fg); border-bottom: var(--bw) solid var(--line); }
.site-header a, .site-header button { color: var(--fg); }
.brand img { display: block; height: 26px; width: auto; }
.brand .brand__logo--dark, body.dark .brand .brand__logo--light { display: none; }
body.dark .brand .brand__logo--dark { display: block; }
#site-nav { flex: 1 1 0; justify-content: center; gap: var(--s-2) 26px; margin-left: 0; font: 800 13px/1 var(--f-ui); letter-spacing: .07em; text-transform: uppercase; }
#site-nav a { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) 0; border-bottom: var(--bw) solid transparent; white-space: nowrap; }
#site-nav a:hover, #site-nav a[aria-current="page"] { border-bottom-color: var(--line); }
#site-nav a[data-field]::before { content: ""; width: 10px; height: 10px; outline: 1.5px solid var(--line); background: var(--field, transparent); flex: none; }
[data-field="B"] { --field: var(--ss-yolk); --on-field: var(--ss-ink); }
[data-field="MP"] { --field: var(--ss-scallion); --on-field: var(--ss-paper); }
[data-field="COM"] { --field: var(--ss-tomato); --on-field: var(--ss-paper); }
[data-field="CAT"] { --field: var(--ss-flame); --on-field: var(--ss-paper); }
[data-field="PE"] { --field: var(--ss-bark); --on-field: var(--ss-paper); }
#site-nav a:not([data-field]) { font: 500 12px/1 var(--f-mono); letter-spacing: .12em; }
.cart-link { order: 3; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; border: var(--bw) solid var(--line); padding: 0 14px; min-height: 40px; display: inline-flex; align-items: center; gap: var(--s-2); }
.cart-link:hover { background: var(--fg); color: var(--bg); }
.cart-link.has-items, .cart-link[aria-current="page"] { background: var(--action); color: var(--action-fg) !important; border-color: var(--ss-ink); }
#nav-toggle { order: 4; min-height: 44px; min-width: 44px; padding: 0 var(--s-3); background: transparent; color: var(--fg); border: var(--bw) solid var(--line); font: 500 12px/1 var(--f-mono); letter-spacing: .12em; gap: var(--s-2); }
#nav-toggle::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: url('icons/ss-icon-menu.svg') center/contain no-repeat; mask: url('icons/ss-icon-menu.svg') center/contain no-repeat; }
#nav-toggle[aria-expanded="true"]::before { -webkit-mask-image: url('icons/ss-icon-close.svg'); mask-image: url('icons/ss-icon-close.svg'); }
#nav-toggle:hover { background: var(--fg); color: var(--bg); }
#theme-toggle { min-height: 40px; padding: 0 var(--s-3); background: transparent; color: var(--fg); border: 1.5px solid var(--line); font: 500 11px/1 var(--f-mono); letter-spacing: .12em; }
#theme-toggle:hover { background: var(--fg); color: var(--bg); }
#scroll-progress { display: none; }
@media (max-width: 1099px) {
  .site-header { min-height: 60px; gap: var(--s-2) var(--s-3); }
  .edit-strip .opt { display: none; }
  .cart-link { margin-left: auto; }
  #nav-toggle { display: inline-flex; }
  #site-nav { display: none; order: 5; flex: 0 0 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 0 0 var(--s-4); margin: 0; max-width: 480px; margin-left: auto; border-top: var(--bw) solid var(--line); }
  #site-nav.open { display: flex; }
  #site-nav a[data-field] { min-height: 56px; font: 800 24px/1 var(--f-display); font-stretch: 80%; letter-spacing: .002em; border-bottom: var(--bw-hair) solid var(--line); justify-content: flex-start; }
  #site-nav a[data-field]::before { width: 12px; height: 12px; }
  #site-nav a[data-field]::after { content: ""; margin-left: auto; width: 22px; height: 22px; background: currentColor; -webkit-mask: url('icons/ss-icon-arrow-right.svg') center/contain no-repeat; mask: url('icons/ss-icon-arrow-right.svg') center/contain no-repeat; }
  #site-nav a:not([data-field]) { min-height: 44px; font-size: 13px; border-bottom: var(--bw-hair) solid var(--line-soft); }
  #theme-toggle { align-self: flex-start; margin-top: var(--s-4); min-height: 44px; }
}
@media (max-width: 767px) { .brand img { height: 20px; } .edit-strip .wrap { font-size: 10.5px; padding: 8px var(--margin); } }

footer { background: var(--ss-ink); color: var(--ss-paper); border-top: 0; margin-top: var(--s-9); padding: var(--s-8) max(var(--margin), calc(50vw - 720px + var(--margin))) var(--s-6); font-size: 16px; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }
.ft-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-7) var(--gutter); }
.ft-brand { grid-column: span 5; }
.ft-brand img { display: block; width: min(320px, 100%); height: auto; }
.ft-brand p { font: italic 400 24px/1.15 var(--f-serif); margin: var(--s-5) 0 0; max-width: 18em; }
.ft-col { grid-column: span 2; display: flex; flex-direction: column; gap: var(--s-2); margin: 0; }
.ft-col--wide { grid-column: span 3; }
.ft-col a, .ft-col p { margin: 0; font-size: 15.5px; line-height: 1.45; min-height: 28px; display: block; }
.ft-h { color: var(--ss-ash); margin: 0 0 var(--s-2); font-weight: 500; }
.ft-col .ft-h:not(:first-child) { margin-top: var(--s-5); }
footer .social { font-size: 15.5px; }
.ft-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); border-top: var(--bw-hair) solid rgba(239, 230, 213, .4); margin-top: var(--s-8); padding-top: var(--s-5); font: 500 12px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ss-ash); }
.ft-legal p { margin: 0; max-width: none; }
.ft-legal nav { display: flex; flex-wrap: wrap; gap: var(--s-2) 18px; margin: 0; align-items: center; }
.ft-legal a, .ft-legal .text-button { color: var(--ss-paper); min-height: 44px; display: inline-flex; align-items: center; font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: none; }
.ft-legal .text-button:hover, .ft-legal a:hover { text-decoration: underline; }
footer #print-page { background: transparent; color: var(--ss-paper); border: 1.5px solid var(--ss-paper); min-height: 44px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; }
footer #print-page:hover { background: var(--ss-paper); color: var(--ss-ink); }
footer a:focus-visible, footer button:focus-visible { outline-color: #8FA6FF; }
body[data-page="order"] .ft-grid, body[data-page="order-success"] .ft-grid { display: none; }
body[data-page="order"] .ft-legal, body[data-page="order-success"] .ft-legal { border-top: 0; margin-top: 0; padding-top: 0; }
body[data-page="order"] footer, body[data-page="order-success"] footer { padding-top: var(--s-6); margin-top: var(--s-8); }
@media (max-width: 1099px) { .ft-brand { grid-column: 1 / -1; } .ft-col, .ft-col--wide { grid-column: span 4; } }
@media (max-width: 767px) { .ft-col { grid-column: span 6; } .ft-col--wide { grid-column: 1 / -1; } .ft-legal { flex-direction: column; align-items: flex-start; } footer { overflow-wrap: anywhere; } }
.floating-contact { background: var(--fg); color: var(--bg); border: var(--bw) solid var(--line); font: 500 12px/1 var(--f-mono); letter-spacing: .12em; min-height: 44px; display: inline-flex; align-items: center; padding: 0 var(--s-4); z-index: 90; }
#back-top { background: var(--bg); color: var(--fg); border: var(--bw) solid var(--line); z-index: 90; min-height: 44px; font: 500 12px/1 var(--f-mono); letter-spacing: .12em; }
body.has-cart-bar .floating-contact, body.has-cart-bar #back-top { display: none; }

/* section head: heavy rule, mono index, Display 2 title, mono meta */
.sec-head { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: baseline; border-top: var(--bw-heavy) solid var(--line); padding-top: 14px; margin: var(--s-9) 0 var(--s-6); }
.sec-head .n, .sec-head .meta { font: 500 13px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.sec-head h2 { margin: 0; }
@media (max-width: 767px) { .sec-head { grid-template-columns: auto 1fr; margin-top: var(--s-8); } .sec-head .meta { display: none; } }

/* ---------- forms ---------- */
label { font: 500 12px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; margin: var(--s-5) 0 6px; }
input:not([type=checkbox]):not([type=radio]), select, textarea { min-height: 48px; padding: 0 14px; border: var(--bw-input) solid var(--line); background: var(--bg); color: var(--fg); font: 400 17px/1.3 var(--f-ui); }
textarea, .meal-request textarea, #notes-fieldset textarea, .custom-menu__form textarea { padding: 12px 14px; min-height: 112px; border: var(--bw-input) solid var(--line); border-radius: var(--radius-input); font: 400 17px/1.4 var(--f-ui); }
select { -webkit-appearance: none; appearance: none; padding-right: 44px; background-image: url('icons/ss-icon-arrow-down.svg'); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; }
body.dark select { background-image: url('icons/ss-icon-arrow-down-paper.svg'); }
input:disabled, select:disabled, textarea:disabled { background: var(--bg-well); color: var(--fg-2); border-color: var(--line-soft); }
input:user-invalid, select:user-invalid, textarea:user-invalid, [aria-invalid="true"] { border: var(--bw) solid var(--c-err); }
::placeholder { color: var(--fg-2); opacity: 1; }
.option-note, .variant__note, .quote-note, .meal-variant__note, .card-order .option-note, #notes-fieldset .option-note, .meal-request .option-note { font-size: 14px; line-height: 1.45; color: var(--fg-2); }
input[type=checkbox], .variant input[type="checkbox"], .meal-variant > input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin: 0; flex: none; border: var(--bw) solid var(--line); background: var(--bg); display: inline-grid; place-content: center; cursor: pointer; }
input[type=checkbox]::before { content: ""; width: 16px; height: 16px; background: var(--bg); -webkit-mask: url('icons/ss-icon-check.svg') center/contain no-repeat; mask: url('icons/ss-icon-check.svg') center/contain no-repeat; transform: scale(0); }
input[type=checkbox]:checked { background: var(--fg); }
input[type=checkbox]:checked::before { transform: scale(1); }
input[type=checkbox]:disabled { border-color: var(--line-soft); background: var(--bg-well); cursor: not-allowed; }
input[type=radio] { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; margin: 0; flex: none; border: var(--bw) solid var(--line); border-radius: 50%; background: var(--bg); display: inline-grid; place-content: center; }
input[type=radio]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--bg); transform: scale(0); }
input[type=radio]:checked { background: var(--fg); }
input[type=radio]:checked::before { transform: scale(1); }
.check, .variant { min-height: 44px; align-items: center; gap: var(--s-3); font: 400 16px/1.4 var(--f-ui); letter-spacing: 0; text-transform: none; }
.check { align-items: flex-start; font-size: 16px; }
.check input { margin-top: 1px; }
.variant label, .meal-variant > label { font: 400 15.5px/1.35 var(--f-ui); letter-spacing: 0; text-transform: none; margin: 0; }
fieldset { padding: 0 0 var(--s-6); }
#checkout-form { counter-reset: section; margin-top: var(--s-7); }
#checkout-form > fieldset:not([hidden]) { counter-increment: section; border-top: var(--bw-heavy) solid var(--line); padding-top: 14px; margin-top: var(--s-6); }
#checkout-form > fieldset > legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--s-2); font: 800 clamp(24px, 2.4vw, 28px)/1 var(--f-display); font-stretch: 80%; letter-spacing: .002em; text-transform: uppercase; display: flex; align-items: baseline; gap: var(--s-4); }
#checkout-form > fieldset > legend::before { content: counter(section, decimal-leading-zero); font: 500 13px/1 var(--f-mono); letter-spacing: .14em; }
#checkout-form > fieldset > legend + * { clear: both; }
legend { font: 800 20px/1.05 var(--f-display); font-stretch: 80%; letter-spacing: .005em; text-transform: uppercase; }
.error, .line-problem, .cart-row .line-problem { color: var(--c-err); font-weight: 600; }
#checkout-error:not(:empty), .notice, .ordering-rules, .unavailable, .dietary-explainer { border: var(--bw) solid var(--c-info); border-left-width: var(--bw); background: var(--c-info-bg); color: var(--fg); padding: 14px 16px; font-size: 15.5px; line-height: 1.4; }
#checkout-error:not(:empty) { border-color: var(--c-err); background: var(--c-err-bg); color: var(--fg); font-weight: 400; }
.unavailable { border-color: var(--c-warn); background: var(--c-warn-bg); font-weight: 400; }
.allergen-note { font-size: 14px; color: var(--fg-2); }
#service-window-list { gap: 0; border: var(--bw) solid var(--line); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
#service-window-list:empty { display: none; }
.window-choice { border: 0; border-right: var(--bw-hair) solid var(--line); border-bottom: var(--bw-hair) solid var(--line); min-height: 56px; padding: var(--s-3) 14px; font: 500 14px/1.3 var(--f-mono); letter-spacing: .04em; text-transform: none; margin: 0; }
.window-choice:hover { background: var(--bg-well); border-color: var(--line); }
.window-choice:has(input:checked) { background: var(--fg); color: var(--bg); box-shadow: none; border-color: var(--line); }
.window-choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
.promo-row button { min-height: 48px; }

/* ---------- badges, chips, legend ---------- */
.badge, body.dark .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px; border: 1.5px solid var(--line); box-shadow: none; background: transparent; color: var(--fg); font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.badge__icon { display: none; }
.badge[data-badge="NUTS"], .badge[data-badge="EGG"], .badge[data-badge="SEAFOOD"] { background: var(--fg); color: var(--bg); border-width: var(--bw); border-color: var(--fg); order: -1; }
.badges { gap: 6px; }
.badges li:has(.badge[data-badge="NUTS"]), .badges li:has(.badge[data-badge="EGG"]), .badges li:has(.badge[data-badge="SEAFOOD"]) { order: -1; }
.cart-row__tag, body.dark .cart-row__tag, .meal-variant__badge, body.dark .meal-variant__badge, .edition-status { border: 1.5px solid var(--line); background: var(--fg); color: var(--bg); font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 5px 7px; }
.meal-variant__badge::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: url('icons/ss-icon-check.svg') center/contain no-repeat; mask: url('icons/ss-icon-check.svg') center/contain no-repeat; }
.chip, .filters--chips .chip, .course-tiers a { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line); background: transparent; color: var(--fg); font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.chip:hover, .course-tiers a:hover { background: var(--bg-well); color: var(--fg); }
.chip[aria-pressed="true"], .chip.is-on, .course-tiers a[aria-current="page"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.legend, .custom-menu, .menu-notes { border: var(--bw) solid var(--line); background: var(--bg); padding: var(--s-4) var(--s-5); }
.legend summary, .menu-notes summary, .custom-menu__more summary { font: 500 12px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }
details { border-top: var(--bw-hair) solid var(--line); }
details:last-of-type { border-bottom: var(--bw-hair) solid var(--line); }
.legend, .legend:last-of-type, .menu-notes, .menu-notes:last-of-type { border: var(--bw) solid var(--line); }
summary { font: 800 20px/1.1 var(--f-display); font-stretch: 80%; letter-spacing: .005em; text-transform: uppercase; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: url('icons/ss-icon-plus.svg') center/contain no-repeat; mask: url('icons/ss-icon-plus.svg') center/contain no-repeat; }
details[open] > summary::after { -webkit-mask-image: url('icons/ss-icon-minus.svg'); mask-image: url('icons/ss-icon-minus.svg'); }

/* ---------- live menu: header band, tool bar, info strip ---------- */
.page-heading--field { background: var(--field); color: var(--on-field); padding-top: var(--s-6); padding-bottom: var(--s-7); margin-top: calc(var(--s-5) * -1); margin-bottom: 0; border-bottom: var(--bw) solid var(--ss-ink); }
.page-heading--field h1 { font: 900 var(--hw-2)/.8 var(--f-display); font-stretch: 62%; letter-spacing: 0; color: inherit; margin: var(--s-4) 0 var(--s-5); }
.page-heading--field .lead, .page-heading--field .eyebrow, .page-heading--field .folio-bar { color: inherit; }
.page-heading--field .lead { font-size: clamp(28px, 3.2vw, 44px); line-height: 1; letter-spacing: -.01em; max-width: 22em; }
.page-heading--field a:focus-visible { outline-color: currentColor; }
.why-order { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: none; border: var(--bw) solid var(--line); margin: var(--s-6) 0; }
.why-order li { padding: var(--s-3) var(--s-4); border-right: var(--bw-hair) solid var(--line); font: 800 15px/1.2 var(--f-display); font-stretch: 80%; text-transform: uppercase; letter-spacing: .005em; }
.why-order li:last-child { border-right: 0; }
.why-order li::before { display: none; }
.why-order--tile { display: none; }
@media (max-width: 767px) { .why-order { grid-template-columns: 1fr; } .why-order li { border-right: 0; border-bottom: var(--bw-hair) solid var(--line); } .why-order li:last-child { border-bottom: 0; } }
.edition, .edition--line { border-top: 0; border-bottom: var(--bw-hair) solid var(--line); padding: 0 0 var(--s-4); margin: 0 0 var(--s-4); display: block; }
.edition-statement { font: 500 13px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--s-2); }
.edition .ordering-rules, .ordering-rules { border: 0; background: transparent; padding: 0; margin: 0; font-size: 15.5px; color: var(--fg-2); max-width: none; }
.toolbar { position: sticky; top: 72px; z-index: 50; background: var(--bg); border-bottom: var(--bw) solid var(--line); margin: 0 calc(var(--margin) * -1) var(--s-5); padding: var(--s-3) var(--margin); align-items: center; }
.toolbar label { margin: 0; }
.toolbar > div:first-child { display: flex; align-items: center; gap: var(--s-3); }
.toolbar input[type=date] { width: 13rem; min-height: 44px; font: 500 14px/1 var(--f-mono); }
.filters, .filters--chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
.menu-status { font: 500 13px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.menu-status strong { font: inherit; color: var(--fg); }
@media (max-width: 1099px) { .toolbar { top: 60px; } }
@media (max-width: 767px) {
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar > div:first-child { justify-content: space-between; }
  .toolbar input[type=date] { width: auto; flex: 1; }
  .filters, .filters--chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--s-1); scrollbar-width: thin; margin-right: calc(var(--margin) * -1); padding-right: var(--margin); }
  .chip { flex: none; }
}

/* ---------- the meal card: a Ticket ---------- */
.meal-grid { gap: 0; border-top: var(--bw) solid var(--line); border-left: var(--bw-hair) solid var(--line-soft); margin: 0 0 var(--s-7); counter-reset: dish; }
.meal-card { counter-increment: dish; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; gap: var(--s-3) var(--s-3); padding: var(--s-5); background: var(--bg); border: 0; border-right: var(--bw-hair) solid var(--line-soft); border-bottom: var(--bw-hair) solid var(--line); transition: background-color var(--dur-fast) var(--ease-out); }
.meal-card[data-variant="gluten-free"] { border-top-color: transparent; }
.meal-card:hover { background: var(--bg-expressive); }
body.dark .meal-card:hover { background: var(--bg-well); }
.meal-card:focus-within { box-shadow: none; }
[data-tilt], [data-tilt]:hover { transform: none !important; box-shadow: none; will-change: auto; }
[data-tilt]::after { display: none; }
.meal-card > * { grid-column: 1 / -1; }
.meal-card::before { content: attr(data-no) " / " attr(data-count); grid-column: 1 / -1; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; color: var(--fg); }
.meal-card:not([data-no])::before { content: counter(dish, decimal-leading-zero); }
/* Adaptation: real dish names run to several words, so the mono price sits on its own line under the name instead of sharing its baseline. */
.meal-card > h3 { grid-column: 1 / -1; grid-row: 2; font: 800 clamp(20px, 1.6vw, 24px)/1.02 var(--f-display); font-stretch: 80%; letter-spacing: .002em; margin: 0; overflow-wrap: break-word; hyphens: none; }
.meal-card > .eyebrow { grid-row: 1; grid-column: 2; justify-self: end; }
.meal-card > .price { grid-column: 1 / -1; grid-row: 3; font: 500 clamp(18px, 1.5vw, 22px)/1.1 var(--f-mono); letter-spacing: .01em; }
.price small { font: 500 11px/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; display: block; margin-top: 4px; color: var(--fg-2); }
.meal-card .card-description { font-size: 15.5px; line-height: 1.4; color: var(--fg); }
.meal-card .courses { list-style: none; padding: 0; border-top: var(--bw-hair) solid var(--line); }
.meal-card .courses li { display: grid; grid-template-columns: 7.5em 1fr; gap: var(--s-3); padding: var(--s-2) 0; margin: 0; border-bottom: var(--bw-hair) solid var(--line-soft); font-size: 15.5px; line-height: 1.35; }
.course-role { font: 500 11px/1.6 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.meal-card details, .meal-card details:last-of-type { padding: 0; border-top: var(--bw-hair) solid var(--line-soft); border-bottom: var(--bw-hair) solid var(--line-soft); }
.meal-card summary { font: 500 12px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; min-height: 44px; }
.meal-card details p, .meal-card details li { font-size: 14.5px; line-height: 1.45; }
.meal-card details > p:last-child { margin-bottom: var(--s-4); }
.dish-details h4 { margin: var(--s-4) 0 var(--s-1); }
.dish-details p strong:first-child, .dish-details p > strong { display: block; font: 500 11px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 2px; }
.card-order { margin-top: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2); align-items: end; padding-top: var(--s-2); }
.card-order > * { grid-column: 1 / -1; }
.card-order > label { font-size: 11px; margin: 0; }
.card-order > select { grid-column: 1; }
.card-order > select:not([hidden]) ~ button[type=submit] { grid-column: 1 / -1; }
.card-order .variants { border-top: 0; padding: 0; }
.card-order button[type=submit] { width: 100%; }
.card-order .option-note:empty { display: none; }
@media (max-width: 1199px) { .meal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .meal-grid { grid-template-columns: 1fr; border-left: 0; } .meal-card { border-right: 0; padding: var(--s-4) 0 var(--s-5); } }
@media (min-width: 1920px) { .meal-card { max-width: 480px; } }

/* sticky cart bar on menu pages */
.cart-bar { background: var(--ss-ink); color: var(--ss-paper); border-top: 0; z-index: var(--z-cartbar); font: 500 13px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.cart-bar .button { min-height: 44px; }
.cart-bar__meter { accent-color: var(--ss-sear); }
.minimum, .cart-row.minimum, #cart-items .minimum { border: var(--bw) solid var(--c-warn); background: var(--c-warn-bg); padding: 14px 16px; margin: var(--s-4) 0; }
.minimum__text { font-size: 15.5px; margin: 0; }
.minimum__bar { accent-color: var(--fg); width: 100%; }

/* ---------- cart and checkout: the order sheet ---------- */
body[data-page="order"] main > .page-heading h1, body[data-page="order-success"] main > .page-heading h1 { font-size: clamp(40px, 5vw, 64px); }
body[data-page="order"] .lead, body[data-page="order-success"] .lead, body[data-page="legal"] .lead { font: 400 clamp(18px, 1.5vw, 20px)/1.5 var(--f-ui); }
.checkout-layout { grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); gap: var(--s-7); }
.checkout-layout > section > h2, .order-summary h2 { font: 500 12px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 var(--s-3); }
#cart-items { border-top: var(--bw-heavy) solid var(--line); }
#cart-items:empty { border-top: 0; }
.cart-row { border-bottom: var(--bw-hair) solid var(--line); padding: var(--s-4) 0; gap: var(--s-2) var(--s-4); align-items: center; }
.cart-row h3 { font: 800 clamp(18px, 1.6vw, 20px)/1.05 var(--f-display); font-stretch: 80%; text-transform: uppercase; }
.cart-row .line-total { font: 500 17px/1 var(--f-mono); letter-spacing: .01em; }
.cart-row input { max-width: 96px; text-align: center; font: 500 17px/1 var(--f-mono); }
.cart-row .cart-controls button { min-height: 48px; }
.cart-row__preparation { font-size: 14px; color: var(--fg-2); }
.meal-request { border-top: var(--bw-hair) solid var(--line-soft); }
.order-summary { position: sticky; top: 96px; border: var(--bw) solid var(--line); background: var(--bg); padding: var(--s-5); }
.quote-row { border-bottom: var(--bw-hair) solid var(--line-soft); padding: 10px 0; font-size: 16px; align-items: baseline; }
.quote-row span:last-child { font: 500 16px/1 var(--f-mono); letter-spacing: .01em; white-space: nowrap; text-align: right; }
.quote-total { border-top: var(--bw) solid var(--line); margin-top: 6px; padding-top: var(--s-4); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); font: 500 clamp(24px, 2.4vw, 30px)/1 var(--f-mono); letter-spacing: .01em; }
.quote-discount { color: var(--c-ok); }
#pay-now { min-height: 56px; font-size: 16px; }
.pay-note, .order-summary p { font-size: 14px; color: var(--fg-2); }
dialog { border: var(--bw) solid var(--line); border-top: var(--bw) solid var(--line); box-shadow: var(--shadow-overlay); max-width: 560px; padding: var(--s-6); background: var(--bg); color: var(--fg); }
dialog::backdrop { background: rgba(21, 18, 14, .62); }
dialog h2 { font-size: 28px; margin-top: 0; }
@media (max-width: 1023px) { .checkout-layout { grid-template-columns: 1fr; gap: var(--s-6); } .order-summary { position: static; order: 2; } }
@media (max-width: 767px) { dialog { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; margin: 0; box-shadow: none; border-width: var(--bw) 0 0; } dialog button { width: 100%; margin: var(--s-2) 0 0; } }
.cookie-banner { background: var(--bg); color: var(--fg); border: var(--bw) solid var(--line); box-shadow: var(--shadow-overlay); padding: var(--s-5); z-index: var(--z-toast); }
.cookie-banner h2 { font-size: 20px; }
.cookie-banner button, .cookie-banner a { font-size: 13px; min-height: 44px; }
.cookie-banner button { background: transparent; color: var(--fg); }
.cookie-banner button:hover { background: var(--fg); color: var(--bg); }

/* ---------- story surfaces ---------- */
.hero--kitchen { display: block; background: var(--bg-expressive); background-image: none; color: var(--fg); padding-top: var(--s-7); padding-bottom: var(--s-8); margin-top: calc(var(--s-5) * -1); margin-bottom: 0; border-bottom: var(--bw) solid var(--line); position: relative; overflow: hidden; }
.hero--kitchen::before { content: ""; position: absolute; inset: 0; background: url('textures/paper_grain_512.png') 0 0/512px; mix-blend-mode: multiply; opacity: .5; pointer-events: none; }
body.dark .hero--kitchen::before { display: none; }
@media (prefers-reduced-data: reduce) { .hero--kitchen::before { display: none; } }
.hero--kitchen > * { position: relative; }
.steam, .pan { display: none !important; }
.hero__wordmark { position: relative; margin: 0 0 var(--s-5); }
.hero__wordmark img { display: block; width: 100%; height: auto; }
.hero__wordmark .wm-dark, body.dark .hero__wordmark .wm-light { display: none; }
body.dark .hero__wordmark .wm-dark { display: block; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gutter); align-items: start; padding-top: var(--s-6); }
.hero--kitchen .eyebrow, .hero--kitchen h1, .hero--kitchen .lead { color: var(--fg); }
.hero--kitchen h1 { font: italic 400 clamp(44px, 5.4vw, 72px)/.95 var(--f-serif); letter-spacing: -.01em; text-transform: none; max-width: none; margin: 0 0 var(--s-5); }
.hero--kitchen .lead { font: 400 clamp(18px, 1.5vw, 20px)/1.5 var(--f-ui); max-width: 30em; color: var(--fg); }
.hero--kitchen .hero-actions { margin: var(--s-6) 0 0; gap: var(--s-3); align-items: center; }
.hero--kitchen .button { background: var(--action); color: var(--action-fg); border-color: var(--ss-ink); min-height: 56px; padding: 0 var(--s-6); font-size: 16px; }
.hero--kitchen .hero-actions .text-link { min-height: 56px; color: var(--fg) !important; }
.sound-toggle { background: transparent; color: var(--fg); border: 0; border-bottom: var(--bw) solid var(--line); min-height: 44px; padding: 0; font: 500 12px/1 var(--f-mono); letter-spacing: .14em; }
.sound-toggle:hover { background: transparent; color: var(--fg); }
.sound-toggle::before { background: transparent; border: 1.5px solid var(--line); border-radius: 50%; }
.sound-toggle[aria-pressed="true"]::before { background: var(--ss-sear); box-shadow: none; animation: none; }
.hero__visual { min-height: 0; position: relative; aspect-ratio: 5 / 4; }
.hero__field { position: absolute; inset: 40px 0 0 12%; background: var(--ss-scallion); }
.hero__amp { position: absolute; inset: 0 8% 48px 0; background: var(--ss-ink); display: grid; place-items: center; overflow: hidden; }
.hero__amp img { width: 62%; height: auto; display: block; }
.hero__sticker { position: absolute; left: -48px; bottom: 8px; width: 170px; height: 170px; border-radius: 50%; background: var(--ss-yolk); color: var(--ss-ink); display: grid; place-content: center; text-align: center; transform: rotate(-10deg); font: 900 30px/.9 var(--f-display); font-stretch: 75%; text-transform: uppercase; margin: 0; z-index: 2; }
.hero__sticker small { display: block; font: 500 11px/1.2 var(--f-mono); letter-spacing: .12em; margin-top: 8px; }
.hero__caption { position: absolute; left: calc(12% + 24px); right: 16px; bottom: 16px; margin: 0; color: var(--ss-paper); font: 500 11px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 1099px) { .hero__grid { grid-template-columns: 1fr 1fr; } .hero__sticker { left: auto; right: -8px; bottom: 56px; } }
@media (max-width: 767px) { .hero__grid { grid-template-columns: 1fr; padding-top: var(--s-5); } .hero__visual { aspect-ratio: 1 / 1; margin-top: var(--s-6); } .hero__sticker { width: 110px; height: 110px; font-size: 20px; right: 8px; bottom: -10px; } .hero__sticker small { font-size: 9px; } .hero__caption { display: none; } }
.trust-strip { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 calc(50% - 50vw); padding: 0 max(var(--margin), calc(50vw - 720px + var(--margin))); background: var(--ss-ink); color: var(--ss-paper); font: 500 12px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.trust-strip li { padding: 14px var(--s-4) 14px 0; }
@media (max-width: 1023px) { .trust-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .trust-strip { grid-template-columns: 1fr; } .trust-strip li { padding: 8px 0; } }

/* menu tiles: Fields */
.menu-tiles, .menu-tiles--home { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: var(--bw) solid var(--ss-ink); margin: 0 0 var(--s-7); }
.menu-tile, .menu-tile--home { position: relative; container-type: inline-size; min-height: 300px; padding: 22px; display: flex; flex-direction: column; background: var(--field, var(--ss-ink)); color: var(--on-field, var(--ss-paper)); border: 0; border-right: var(--bw) solid var(--ss-ink); border-bottom: var(--bw) solid var(--ss-ink); overflow: hidden; }
.menu-tile:nth-child(3n) { border-right: 0; }
.menu-tile:nth-child(n+4) { border-bottom: 0; }
.menu-tile .eyebrow { color: inherit; display: flex; justify-content: space-between; margin: 0; }
.menu-tile h3 { font: 900 min(96px, 17cqw)/.8 var(--f-display); font-stretch: 62%; letter-spacing: 0; color: inherit; margin: auto 0 var(--s-2); padding-top: var(--s-7); }
.menu-tile h3 a { color: inherit !important; text-decoration: none; }
.menu-tile h3 a::after { content: ""; position: absolute; inset: 0; }
.menu-tile h3 a:hover { text-decoration: none; }
.menu-tile h3 a:focus-visible { outline: 0; }
.menu-tile:has(h3 a:focus-visible) { outline: 3px solid var(--focus); outline-offset: -6px; }
.menu-tile p, .menu-tile__lead { font: italic 400 clamp(22px, 1.9vw, 26px)/1.12 var(--f-serif); color: inherit; margin: 0 0 var(--s-3); max-width: 22em; }
.menu-tile__from { font: 500 12px/1.3 var(--f-mono) !important; letter-spacing: .14em; text-transform: uppercase; font-style: normal !important; margin: 0 !important; }
.menu-tile .button.secondary, .menu-tile .text-link { position: absolute; right: 22px; top: 18px; min-height: 0; padding: 0; border: 0; background: transparent; color: inherit !important; font-size: 0; letter-spacing: 0; gap: 0; }
.menu-tile .button.secondary::after, .menu-tile .text-link::after { width: 28px; height: 28px; }
.menu-tile .button.secondary:hover { background: transparent; color: inherit; }
.menu-tile--custom { --field: var(--ss-ink); --on-field: var(--ss-paper); }
.menu-tile--custom a:not(h3 a) { color: inherit !important; position: relative; z-index: 1; }
body.dark .menu-tiles, body.dark .menu-tile { border-color: var(--ss-paper); }
@media (max-width: 1099px) { .menu-tiles, .menu-tiles--home { grid-template-columns: 1fr 1fr; } .menu-tile:nth-child(3n) { border-right: var(--bw) solid var(--ss-ink); } .menu-tile:nth-child(2n) { border-right: 0; } .menu-tile:nth-child(n+4) { border-bottom: var(--bw) solid var(--ss-ink); } .menu-tile:nth-last-child(-n+2) { border-bottom: 0; } }
@media (max-width: 767px) { .menu-tiles, .menu-tiles--home { grid-template-columns: 1fr; } .menu-tile, .menu-tile--home { min-height: 132px; border-right: 0 !important; border-bottom: var(--bw) solid var(--ss-ink) !important; } .menu-tile:last-child { border-bottom: 0 !important; } .menu-tile h3 { padding-top: var(--s-5); font-size: min(64px, 15cqw); } .menu-tile p, .menu-tile__lead { font-size: 22px; } }

/* menus directory: full-width Field rows */
.dir { border: var(--bw) solid var(--ss-ink); margin: var(--s-6) 0; }
.dir-row { position: relative; display: grid; grid-template-columns: 96px minmax(0, 5fr) minmax(0, 6fr) 48px; gap: var(--gutter); align-items: center; padding: var(--s-5) var(--s-5); background: var(--field); color: var(--on-field); border-bottom: var(--bw) solid var(--ss-ink); container-type: inline-size; }
.dir-row:last-child { border-bottom: 0; }
.dir-row__n { font: 500 13px/1 var(--f-mono); letter-spacing: .14em; margin: 0; }
.dir-row h2 { font: 900 clamp(44px, 6.4vw, 96px)/.8 var(--f-display); font-stretch: 62%; color: inherit; margin: 0; white-space: nowrap; }
.dir-row h2 a { color: inherit !important; text-decoration: none; }
.dir-row h2 a::after { content: ""; position: absolute; inset: 0; }
.dir-row:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: -6px; }
.dir-row h2 a:focus-visible { outline: 0; }
.dir-row p { font: italic 400 clamp(22px, 2vw, 28px)/1.15 var(--f-serif); margin: 0; color: inherit; }
.dir-row .dir-row__k { font: 500 12px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; font-style: normal; display: block; margin-bottom: 6px; }
.dir-row__go { display: grid; place-items: center; }
.dir-row__go::after { width: 36px; height: 36px; }
@media (max-width: 1023px) { .dir-row { grid-template-columns: auto minmax(0, 1fr) 36px; } .dir-row > p:not(.dir-row__n) { grid-column: 1 / -1; grid-row: 2; } .dir-row h2 { white-space: normal; } }
@media (max-width: 767px) { .dir-row { padding: var(--s-4); gap: var(--s-2) var(--s-3); } .dir-row h2 { font-size: clamp(40px, 12vw, 56px); } .dir-row__go::after { width: 28px; height: 28px; } }

/* bands */
.band { background: var(--ss-sear); color: var(--ss-ink); border-top: var(--bw) solid var(--ss-ink); border-bottom: var(--bw) solid var(--ss-ink); padding-top: var(--s-7); padding-bottom: var(--s-7); margin-top: var(--s-9); }
.band h2, .band .eyebrow, .band p { color: var(--ss-ink); }
.band h2 { font: 900 clamp(48px, 7vw, 104px)/.8 var(--f-display); font-stretch: 62%; margin: var(--s-2) 0 var(--s-5); }
.band p:not(.eyebrow) { font-size: clamp(18px, 1.5vw, 20px); }
.band a:not(.button) { color: var(--ss-ink) !important; }
.band .button, .band .button.secondary { background: var(--ss-ink); color: var(--ss-paper); border-color: var(--ss-ink); margin: var(--s-3) var(--s-2) 0 0; }
.band .button.secondary { background: transparent; color: var(--ss-ink); }
.band .button:hover { background: var(--ss-paper); color: var(--ss-ink); }
.band a:focus-visible, .band button:focus-visible { outline-color: var(--ss-ink); }
.band--custom { background: var(--ss-ink); }
.band--custom h2, .band--custom .eyebrow, .band--custom p { color: var(--ss-paper); }
.band--custom .button { background: var(--ss-sear); color: var(--ss-ink); border-color: var(--ss-sear); }
.band--custom .button.secondary { background: transparent; color: var(--ss-paper); border-color: var(--ss-paper); }
.band--custom a:focus-visible { outline-color: #8FA6FF; }

/* tickets: steps, facts, FAQ */
.how-steps, .steps { list-style: none; counter-reset: step; margin: 0; padding: 0; border-top: var(--bw-heavy) solid var(--line); max-width: none; }
.how-steps li, .steps > li { counter-increment: step; display: grid; grid-template-columns: clamp(64px, 8vw, 112px) minmax(0, 1fr); gap: var(--gutter); align-items: baseline; padding: var(--s-5) 0; border-bottom: var(--bw-hair) solid var(--line); font-size: clamp(17px, 1.4vw, 20px); }
.how-steps li::before, .steps > li::before { content: counter(step, decimal-leading-zero); font: 900 clamp(48px, 6vw, 80px)/.8 var(--f-display); font-stretch: 62%; grid-row: span 3; }
.steps > li > * { grid-column: 2; margin-top: 0; }
.how-steps strong { font: 800 clamp(24px, 2.2vw, 28px)/1 var(--f-display); font-stretch: 80%; text-transform: uppercase; margin-right: var(--s-2); }
.ticket { list-style: none; margin: 0; padding: 0; border-top: var(--bw-heavy) solid var(--line); max-width: none; }
.ticket li { padding: var(--s-4) 0; border-bottom: var(--bw-hair) solid var(--line); font: 500 clamp(15px, 1.2vw, 17px)/1.4 var(--f-mono); letter-spacing: .01em; }
.service-area { margin: 0; }
.service-area .split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gutter); align-items: start; }
.service-area .split > p:first-child { font: italic 400 clamp(32px, 3.4vw, 44px)/1 var(--f-serif); letter-spacing: -.01em; margin: 0; }
@media (max-width: 767px) { .service-area .split { grid-template-columns: 1fr; gap: var(--s-5); } }
.two-column section, .equipment-list section, .value-props section { border-top: var(--bw-heavy) solid var(--line); padding-top: 14px; }
.search-result { border-top: var(--bw-hair) solid var(--line); }
.search-result h2 { font: 800 20px/1.05 var(--f-display); font-stretch: 80%; text-transform: uppercase; }
#search-form input { min-height: 72px; font: 800 clamp(24px, 2.4vw, 28px)/1 var(--f-display); font-stretch: 80%; text-transform: uppercase; border-width: var(--bw); }
.custom-menu { border-top: var(--bw-heavy) solid var(--line); }
.custom-menu__steps { list-style: decimal-leading-zero; font-size: 15.5px; }

/* 404: the Yolk field */
body[data-page="404"] main { max-width: none; padding: 0; min-height: 0; }
body[data-page="404"] main > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; padding-left: var(--margin); padding-right: var(--margin); }
body[data-page="404"] main { background: var(--ss-yolk); color: var(--ss-ink); padding: var(--s-8) 0 var(--s-9); }
body[data-page="404"] h1 { font: 900 var(--hw-1)/.78 var(--f-display); font-stretch: 62%; letter-spacing: -.012em; color: var(--ss-ink); }
body[data-page="404"] main p, body[data-page="404"] main a:not(.button) { color: var(--ss-ink) !important; }
body[data-page="404"] main .button { background: var(--ss-ink); color: var(--ss-paper); border-color: var(--ss-ink); }
body[data-page="404"] main .button:hover { background: var(--ss-paper); color: var(--ss-ink); }
body[data-page="404"] .lead, body[data-page="404"] main p:first-of-type { font: italic 400 clamp(28px, 3vw, 44px)/1.05 var(--f-serif); }
body[data-page="404"] footer { margin-top: 0; }
body[data-page="order-success"] h1 { font: 900 var(--hw-3)/.82 var(--f-display); font-stretch: 62%; }

/* ---------- motion: decorative, once, and off when asked ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__wordmark .wm-cut { position: absolute; inset: 0; }
  .hero__wordmark .wm-top { clip-path: inset(0 0 50% 0); animation: cut-top var(--dur-cut) var(--ease-in-out) both; }
  .hero__wordmark .wm-bottom { clip-path: inset(50% 0 0 0); animation: cut-bottom var(--dur-cut) var(--ease-in-out) both; }
  @keyframes cut-top { from { transform: translateX(-3%); } to { transform: none; } }
  @keyframes cut-bottom { from { transform: translateX(3%); } to { transform: none; } }
  .menu-tiles--home .menu-tile, .dir-row { animation: reveal var(--dur-slow) var(--ease-out) both; }
  .menu-tiles--home .menu-tile:nth-child(2), .dir-row:nth-child(2) { animation-delay: 90ms; }
  .menu-tiles--home .menu-tile:nth-child(3), .dir-row:nth-child(3) { animation-delay: 180ms; }
  .menu-tiles--home .menu-tile:nth-child(4), .dir-row:nth-child(4) { animation-delay: 270ms; }
  .menu-tiles--home .menu-tile:nth-child(5), .dir-row:nth-child(5) { animation-delay: 360ms; }
  .menu-tiles--home .menu-tile:nth-child(6) { animation-delay: 450ms; }
  @keyframes reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .hero__sticker { transition: transform var(--dur-slow) var(--ease-out); }
  .hero__visual:hover .hero__sticker { transform: rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; }
  .hero__wordmark .wm-cut { display: none; }
}
/* opacity, not visibility: the base image keeps its alt text in the accessibility tree while the two halves perform the Cut */
@media (prefers-reduced-motion: no-preference) { .hero__wordmark .wm-base { opacity: 0; } }

@media print {
  .edit-strip, .trust-strip, .hero__visual, .cart-bar { display: none !important; }
  .page-heading--field, .menu-tile, .dir-row, .band, .hero--kitchen { background: #fff !important; color: #000 !important; }
  footer { background: #fff; color: #000; }
}
@media (forced-colors: active) { .badge, .chip, .menu-tile, .dir-row { border: 1px solid CanvasText; } }

/* ---------- corrections after the first render ---------- */
.badge, body.dark .badge, .chip, .cart-row__tag, .meal-variant__badge, .window-choice, .floating-contact, .photo-slot__frame, button, .button, .cart-bar .button { border-radius: 0; }
textarea, .meal-request textarea, #notes-fieldset textarea, .custom-menu__form textarea { border-radius: var(--radius-input); }
.menu-tiles > .menu-tile, .menu-tiles--home > .menu-tile { grid-column: auto; }
.menu-tile p.eyebrow { font: 500 12px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; font-style: normal; margin: 0; padding-right: 44px; }
.trust-strip li::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; background: currentColor; -webkit-mask: url('icons/ss-icon-check.svg') center/contain no-repeat; mask: url('icons/ss-icon-check.svg') center/contain no-repeat; }
.how-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gutter); margin: 0 0 var(--s-5); }
.how-steps li { border-top: 0; padding: var(--s-5) 0; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.how-steps li::before { content: counter(step, decimal-leading-zero); display: block; margin: 0; font: 900 clamp(48px, 5vw, 72px)/.8 var(--f-display); font-stretch: 62%; grid-row: auto; }
.how-steps strong { display: block; margin: 0 0 var(--s-2); }
@media (max-width: 767px) { .how-steps { grid-template-columns: 1fr; } }
.custom-menu__more > summary { border: var(--bw) solid currentColor; font: 800 15px/1 var(--f-ui); letter-spacing: .07em; padding: 0 var(--s-5); min-height: 48px; display: inline-flex; }
.custom-menu__more > summary::after, .custom-menu__more[open] > summary::after { content: ""; margin-left: var(--s-3); }
.cart-bar { box-shadow: none; }
.cart-bar .button, .cart-bar .button:hover { color: var(--ss-ink); border-color: var(--ss-ink); }
.cart-bar__meter { background: rgba(239, 230, 213, .3); }
.cart-bar__meter span { background: var(--ss-sear); }
footer { padding-bottom: 96px; }
footer a, footer a:visited { color: var(--ss-paper); }
.home-menus { margin: 0; }
.home-menus .sec-head:first-child { margin-top: var(--s-8); }
#pay-now:disabled, #review-order:disabled, #confirm-pay:disabled, .card-order button[type=submit]:disabled, .meal-grid .card-order button[type=submit]:disabled, .custom-menu__form button[type=submit]:disabled, #search-form button:disabled,
#pay-now:disabled:hover, #review-order:disabled:hover, .meal-grid .card-order button[type=submit]:disabled:hover { background: var(--bg-well); color: var(--fg-2); border-color: var(--line-soft); }
@media (max-width: 640px) { .cart-link { position: static; left: auto; bottom: auto; z-index: auto; box-shadow: none; background: transparent; color: var(--fg) !important; border-color: var(--line); margin-left: auto; } .cart-link.has-items, .cart-link[aria-current="page"] { background: var(--action); color: var(--action-fg) !important; border-color: var(--ss-ink); } }
.dir-row p.dir-row__n { font: 500 13px/1 var(--f-mono); letter-spacing: .14em; font-style: normal; }
h1.headword { font: 900 var(--hw-2)/.8 var(--f-display); font-stretch: 62%; letter-spacing: 0; margin: var(--s-5) 0; }
footer { margin-top: 0; }
main { padding-bottom: var(--s-9); }
main:has(> .band:last-child) { padding-bottom: 0; }
.ft-col .social a { display: inline; }
@media (min-width: 768px) { .ft-legal { padding-right: 120px; } }
.how-steps li::before { grid-row: 1 / span 2; }
.how-steps strong { justify-self: start; grid-column: 2; }
.menu-tile .eyebrow { justify-content: flex-start; gap: var(--s-4); }

/* ---------- touch targets: 44 px for every control (brand acceptance list) ---------- */
.brand { display: inline-flex; align-items: center; min-height: 44px; }
.cart-link, #theme-toggle { min-height: 44px; }
#site-nav a { min-height: 44px; }
.breadcrumbs { padding: 0; }
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.ft-col a { display: flex; align-items: center; min-height: 44px; }
.ft-col .social a { display: inline-flex; min-height: 44px; }
.ft-col { gap: 0; }
.ft-col p { margin: 0 0 var(--s-2); }
.ft-legal a, .ft-legal .text-button { padding: 0 4px; min-width: 44px; justify-content: center; }
.text-link, .card-link { border-bottom: 0; padding: 0; min-height: 44px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.hero-actions .text-link { text-decoration: none; }
.text-button { min-width: 44px; }
#site-nav a { min-width: 44px; justify-content: center; }
.menu-tile .button.secondary, .menu-tile .text-link { width: 44px; height: 44px; min-height: 44px; right: 12px; top: 8px; display: grid; place-items: center; z-index: 1; }
body[data-page="404"] .breadcrumbs, body[data-page="404"] .breadcrumbs a { color: var(--ss-ink) !important; border-color: var(--ss-ink); }
main :is(section, div, article, header, aside) > a:not(.button):not(.text-link):not(.brand) { display: inline-flex; align-items: center; min-height: 44px; }
.search-result h2 a, .menu-tile h3 a { display: inline-block; min-height: 44px; }
.search-result h2 a { display: inline-flex; align-items: center; }
main > a:not(.button):not(.text-link), .hero-actions > a:not(.button):not(.text-link) { display: inline-flex; align-items: center; min-height: 44px; }
.dir-row h2 a { display: inline-block; min-height: 44px; }

/* ---------- readability on phones (owner report 2026-09-19): no two pieces of text may share pixels ---------- */
.dir-row > .dir-row__n { grid-column: 1; grid-row: 1; align-self: center; }
.dir-row > h2 { grid-row: 1; }
.dir-row > .dir-row__go { grid-row: 1; }
/* a Headword that wraps needs room for its own commas and apostrophes; one that fits on a line keeps the tight poster leading */
.menu-tile h3, .band h2, .dir-row h2 { line-height: .9; }
.page-heading--field h1, h1.headword, body[data-page="404"] h1, body[data-page="order-success"] h1 { line-height: .9; }
.hero--kitchen h1 { line-height: 1.02; }
.page-heading--field .lead, .menu-tile p, .menu-tile__lead, .dir-row p, .service-area .split > p:first-child { line-height: 1.12; }
body[data-page="404"] .lead, body[data-page="404"] main p:first-of-type { line-height: 1.12; }
/* floating controls sit on top of text on a narrow screen; the sticky masthead and the footer already carry Contact and the way back up */
@media (max-width: 1099px) { .floating-contact, #back-top { display: none !important; } }

/* the tile's closing call to action reuses the mono metadata voice the price line had (owner, 2026-09-19: no prices on the landing page) */
.menu-tile__cta { font: 500 12px/1.3 var(--f-mono) !important; letter-spacing: .14em; text-transform: uppercase; font-style: normal !important; margin: 0 !important; display: inline-flex; align-items: center; gap: var(--s-2); }
.menu-tile__cta::after { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url('icons/ss-icon-arrow-right.svg') center/contain no-repeat; mask: url('icons/ss-icon-arrow-right.svg') center/contain no-repeat; transition: transform var(--dur-fast) var(--ease-out); }
.menu-tile:hover .menu-tile__cta::after { transform: translateX(4px); }

/* owner's phone screenshots, 2026-09-19: the strip's check mark inherited the legacy accent (now ink) and vanished on the ink strip, so a wrapped
   line looked pushed out of line. The check takes the text colour, and every item is a two-column row so a second line hangs under the first. */
.trust-strip li { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 8px; align-items: start; }
.trust-strip li::before { color: inherit; margin: 1px 0 0; }