/* T20 Terminal — "the arcade kiosk".
   A putty plastic housing (the page) holding one black screen (everything a guest reads) and bone
   keycaps (everything a guest presses). Cyan is the accent only: the cursor, latched keys, the
   primary key, prices on the screen. Pixelify Sans for short display lines in sentence case, IBM Plex
   Mono for everything that is read. Radius 12, with a hard drop edge and no blur anywhere.
   Motion is the key press: a key sinks 4px onto its edge. Every panel is a solid colour. */

:root {
  --bg: #D9D4C7;            /* putty: the housing */
  --bg-2: #C8C2B3;          /* a deeper putty: the strip, recesses */
  --bg-card: #EFEBE0;       /* bone: keycap faces */
  --paper: #F4F1E8;         /* what the kiosk prints: the receipt, the story */
  --ink: #0B0F0C;
  --ink-soft: #2C332E;
  --ink-muted: #474F49;
  --line: #B7B1A1;
  --line-bright: #9C9584;
  --edge: #9C9584;          /* the side of a bone key */
  --key-up: #F8F5EC;
  --key-down: #DDD8CA;

  --screen: #0B0F0C;        /* the screen */
  --screen-2: #141A16;      /* panels on the screen */
  --screen-3: #1C2420;      /* raised panels, chips */
  --screen-line: #2E3933;
  --on: #E8EDE6;            /* text on the screen */
  --on-soft: #C9D2CB;
  --on-muted: #9FB0A6;

  --brand: #00A3C4;         /* cyan; a tenant colour overrides this via brand-tokens.js */
  --brand-ink: #14120F;     /* what is written ON the brand colour */
  --brand-readable: #00566A;/* the brand as small text on putty and bone */
  --brand-on-dark: #00A3C4; /* the brand as text on the screen */
  --brand-edge: #006A80;    /* the side of the primary key */
  --brand-down: #008FAC;
  --tint-hi: #A6E3EF;       /* the two tones of a photograph */
  --tint-lo: #06222A;

  --wa: #0F7A40;            /* the one deep-green key; white on it is 5.4:1 */
  --wa-edge: #08512A;
  --wa-glyph: #0E6F3A;      /* the WhatsApp glyph on a bone key */

  --r: 12px;
  --r-in: 8px;
  --font-display: "Pixelify Sans", "IBM Plex Mono", ui-monospace, monospace;
  --font-body: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --strip-h: 64px;
}
/* The side, the pressed face and the photo tint follow whatever the brand colour is. */
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --brand-edge: color-mix(in srgb, var(--brand) 64%, #000000);
    --brand-down: color-mix(in srgb, var(--brand) 88%, #000000);
    --tint-hi: color-mix(in srgb, var(--brand) 36%, #FFFFFF);
    --tint-lo: color-mix(in srgb, var(--brand) 16%, #050A0C);
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: .95rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
body.wsf-locked { overflow: hidden; }
img, video, iframe { max-width: 100%; display: block; }
h1, h2, h3, h4, p, ul, figure, blockquote, table { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; letter-spacing: 0; overflow-wrap: anywhere; text-wrap: balance; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
:is(.screen, .dock, .wsf-sheet, .wsf-promo) :focus-visible { outline-color: #FFFFFF; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; clip-path: inset(50%); }
.skip:focus { clip-path: none; inset-inline-start: 12px; top: 12px; z-index: 99; background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: var(--r); }

/* Urdu and Punjabi: neither face has Arabic letters, and a monospace fallback breaks the joins, so
   reading text takes the system face. Text runs right to left inside a layout that stays as designed. */
body.rtl-text { --font-body: "Segoe UI", Tahoma, "Noto Naskh Arabic", system-ui, sans-serif;
  --font-display: "Pixelify Sans", "Segoe UI", Tahoma, "Noto Naskh Arabic", system-ui, sans-serif; line-height: 1.9; }
body.rtl-text :is(h1, h2, h3, h4, p, li, span, b, td, blockquote, small, label, figcaption, dt, dd, input) { unicode-bidi: plaintext; }
/* A line built from several spans has no strong character of its own, so it is told its direction. */
body.rtl-text :is(.closing-line, .maya-lede, .week h3, .meta, .rituals .day, .crumb, .ask .lbl, .receipt > .sum, .hours) { direction: rtl; unicode-bidi: isolate; }
body.rtl-text :is(h1, h2, h3, h4, .key, .closing-line, .face .nm, .wsf-sh-add, .wsf-promo-cta) { line-height: 1.5; }
body.rtl-text :is(.promises, .points) li { padding-inline: 0 18px; }
body.rtl-text :is(.promises, .points) li::before { left: auto; right: 0; }
body.rtl-text .story-body p { line-height: 2.1; }
/* The pixel before a heading sits at the reading edge. */
body.rtl-text .screen h2:not(.sr-only) { direction: rtl; }
body.rtl-text .readout li { direction: rtl; }
body.no-wa :is(.key-wa, .mini-wa, .dock-wa, .st-wa, #h-wa, #c-wa, #maya-wa, #cat-wa) { display: none; }
body.no-wa:not(.has-order) .dock { display: none; }

.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 10px; }
.lede { color: var(--on-soft); max-width: 60ch; }
.hint { color: var(--on-muted); font-size: .9rem; max-width: 60ch; }
.pr { font-family: var(--font-body); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prompt { color: var(--brand-on-dark); font-weight: 600; }
.noresult { color: var(--on-soft); }

/* ── Keys ──────────────────────────────────────────────────────────────────── */
/* A key is a solid face with a hard edge under it. Pressed, it sinks onto the edge. On the putty
   housing a key also carries a thin ring of the same edge colour, so bone reads against putty. */
.key { --kedge: var(--edge); --drop: 6px; --travel: 4px; --ring: 0px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 8px 20px; margin: 0 0 var(--drop);
  border: 0; border-radius: var(--r); background: var(--bg-card); color: var(--ink);
  font-family: var(--font-display); font-weight: 400; font-size: 1.06rem; line-height: 1.15; text-decoration: none; text-align: center;
  box-shadow: 0 0 0 var(--ring) var(--kedge), 0 var(--drop) 0 var(--ring) var(--kedge);
  transition: transform .06s linear, box-shadow .06s linear, background-color .06s linear; }
.key:hover { background: var(--key-up); }
.key:active { background: var(--key-down); }
.key svg { width: 20px; height: 20px; flex: none; color: var(--wa-glyph); }
.key.wide { width: 100%; }
.key-sm { --drop: 4px; --travel: 3px; min-height: 42px; padding: 6px 14px; border-radius: 10px; font-size: .96rem; }
.key-brand { --kedge: var(--brand-edge); background: var(--brand); color: var(--brand-ink); }
.key-brand:hover { background: var(--brand); }
.key-brand:active { background: var(--brand-down); }
.key-wa { --kedge: var(--wa-edge); background: var(--wa); color: #FFFFFF; }
.key-wa:hover, .key-wa:active { background: var(--wa); }
.key-wa svg { color: #FFFFFF; }
:is(.top, .strip, .closing, .foot) .key { --ring: 2px; }
/* A latched key stays down and turns cyan: the answer given, the size chosen, the section you are in. */
.key[aria-pressed="true"], .rail .key[aria-current] { --kedge: var(--brand-edge); background: var(--brand); color: var(--brand-ink); }
.plus { flex: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--brand); color: var(--brand-ink);
  font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1; display: inline-grid; place-items: center;
  box-shadow: 0 4px 0 var(--brand-edge); transition: transform .06s linear, box-shadow .06s linear; }
.plus:active { background: var(--brand-down); }
.plus.added { font-size: 0; }
.plus.added::after { content: "✓"; font-size: 1.2rem; }
@media (prefers-reduced-motion: no-preference) {
  .key:active, .key[aria-pressed="true"], .rail .key[aria-current] { transform: translateY(var(--travel)); box-shadow: 0 0 0 var(--ring) var(--kedge), 0 0 0 var(--ring) var(--kedge); }
  .plus:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--brand-edge); }
  .card:has(.face:active) { transform: translateY(4px); box-shadow: 0 0 0 var(--edge); }
}

/* Photographs: two tones, cyan over near-black, kept light enough that the food still reads. The true
   colours come back under the pointer, on focus, and in the dish dialog. */
.ph { display: block; position: relative; overflow: hidden; border-radius: var(--r-in); background: var(--screen-3); aspect-ratio: 1; isolation: isolate; }
.ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) contrast(1.08) brightness(1.04); transition: filter .18s linear; }
.ph::before, .ph::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity .18s linear; }
.ph::before { background: var(--tint-hi); mix-blend-mode: multiply; opacity: .24; }   /* a light wash: at .5 food read teal-grey (design lead, 2026-10-07) */
.ph::after { background: var(--tint-lo); mix-blend-mode: screen; opacity: .4; }
:is(.card, .cat-key, .sig-face, .cycle, .mosaic button, .t-today):is(:hover, :focus-visible, :focus-within) .ph img { filter: none; }
:is(.card, .cat-key, .sig-face, .cycle, .mosaic button, .t-today):is(:hover, :focus-visible, :focus-within) .ph::before,
:is(.card, .cat-key, .sig-face, .cycle, .mosaic button, .t-today):is(:hover, :focus-visible, :focus-within) .ph::after { opacity: 0; }
/* No photograph yet: the initial on a small dark tile. */
.ph.type { display: grid; place-items: center; background: var(--screen-2); }
.ph.type::before, .ph.type::after { display: none; }
.ph.type > span:first-child, .noimg { font-family: var(--font-display); font-weight: 400; font-size: 2.2rem; line-height: 1; color: var(--brand-on-dark); }

/* ── The top of the housing (scrolls away) ─────────────────────────────────── */
.top { background: var(--bg); }
.top-in { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; padding-block: 12px 8px; min-height: 84px; }
.who { display: flex; align-items: center; gap: 12px; flex: 1 1 0; min-width: 0; }
.who img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--bg-card); flex: none; }
.who > span { display: grid; min-width: 0; }
.who b { font-family: var(--font-display); font-weight: 400; font-size: 1.2rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who small { display: flex; align-items: center; gap: 7px; font-size: .76rem; color: var(--ink-muted); white-space: nowrap; }
.who small::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--brand); box-shadow: 0 0 0 2px var(--ink); }
.who small.off::before { background: var(--line-bright); }
.who small:empty { display: none; }
.quick { display: flex; gap: 12px; flex: 1 0 100%; order: 3; margin-top: 10px; padding-inline: 2px; }
.lang { display: flex; gap: 8px; flex: none; padding-inline-end: 2px; }
.lang button { min-width: 42px; min-height: 42px; padding: 4px 10px; margin-bottom: 4px; border: 0; border-radius: 10px; background: var(--bg-card); color: var(--ink);
  font-weight: 600; font-size: .86rem; box-shadow: 0 0 0 2px var(--edge), 0 4px 0 2px var(--edge); transition: transform .06s linear, box-shadow .06s linear; }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: 0 0 0 2px var(--ink), 0 4px 0 2px var(--edge); }

/* ── The strip (stays) ─────────────────────────────────────────────────────── */
.strip { position: sticky; top: 0; z-index: 30; height: var(--strip-h); background: var(--bg-2); border-block: 2px solid var(--line-bright); }
.strip-in { display: flex; align-items: center; gap: 14px; height: 100%; }
.strip .key { margin-bottom: 4px; flex: none; }
.all svg { width: 15px; height: 15px; color: var(--ink); }
.crumb { display: flex; align-items: baseline; gap: 8px; flex: 1 1 auto; min-width: 0; font-size: .88rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; }
.crumb b { min-width: 0; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.crumb .sep { color: var(--ink-soft); }
.st-order, .st-wa { display: none; }
.n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 6px; background: var(--brand); color: var(--brand-ink); font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.amt { font-family: var(--font-body); font-weight: 600; font-size: 1.1rem; font-variant-numeric: tabular-nums; }

/* ── The screen ────────────────────────────────────────────────────────────── */
/* A black panel with a thin inner bezel, set into a recess of deeper putty. */
.screen { margin-block: 14px 30px; padding: 14px 12px 22px; border: 3px solid #000000; border-radius: 22px; background: var(--screen); color: var(--on);
  box-shadow: inset 0 0 0 2px var(--screen-line), 0 0 0 6px var(--bg-2), 0 0 0 8px var(--line-bright); }
.screen h2:not(.sr-only) { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); }
/* A pixel before each heading on the screen. */
.screen h2:not(.sr-only)::before { content: ""; display: inline-block; width: .42em; height: .42em; margin-inline-end: .45em; background: var(--brand); vertical-align: .12em; }
/* A view fills the screen under the strip, so opening one always lands with the housing top scrolled away. */
.view { min-height: calc(100vh - var(--strip-h) - 60px); scroll-margin-top: calc(var(--strip-h) + 14px); }
.view:focus { outline: none; }
.view.enter { animation: t20-in .16s steps(4, end); }
@keyframes t20-in { from { opacity: .2; } to { opacity: 1; } }
@keyframes t20-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
#sections, #reserve, #catering, #table { scroll-margin-top: calc(var(--strip-h) + 14px); }
.hub { display: grid; gap: 36px; align-content: start; }
.head { display: grid; gap: 6px; }

/* ── The attract screen ────────────────────────────────────────────────────── */
.attract { display: grid; gap: 14px; }
.at-name { display: flex; align-items: center; gap: 9px; font-size: .88rem; color: var(--on-muted); }
.at-name::before { content: ""; width: 8px; height: 8px; flex: none; background: var(--brand); }
.attract h1 { font-size: clamp(2rem, 1.5rem + 2.6vw, 3.1rem); line-height: 1.08; }
.display { position: relative; min-width: 0; }
.display.empty { display: none; }
.cycle { display: grid; width: 100%; padding: 0; border: 0; border-radius: var(--r); overflow: hidden; background: var(--screen-2); color: var(--on); text-align: start; box-shadow: inset 0 0 0 2px var(--screen-line); }
.cycle .ph { aspect-ratio: 16 / 10; border-radius: var(--r) var(--r) 0 0; }
.cycle .ph img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease, filter .18s linear; }
.cycle .ph img.on { opacity: 1; }
/* The first thing a visitor sees is food: the attract photograph is shown in true colour. */
.cycle .ph img { filter: none; }
.cycle .ph::before, .cycle .ph::after { opacity: 0; }
.cycle .cap { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 14px 12px; }
.cycle .nm { font-family: var(--font-body); font-weight: 600; font-size: 1rem; line-height: 1.25; min-width: 0; }
.cycle .pr { font-size: 1.2rem; color: var(--brand-on-dark); }
.cta { display: grid; gap: 10px; }
/* The readout: status lines, each behind a prompt, the last one followed by the cursor. */
.readout { display: grid; gap: 3px; font-size: .92rem; color: var(--on); }
.readout li::before { content: ">"; margin-inline-end: 9px; color: var(--brand-on-dark); font-weight: 600; }
.readout li:last-child::after, .boot li.typing::after { content: ""; display: inline-block; width: .58em; height: 1.05em; margin-inline-start: 6px; vertical-align: text-bottom; background: var(--brand); animation: t20-blink 1.1s linear infinite; }
.boot { position: absolute; inset: 0; z-index: 3; align-content: center; gap: 8px; padding: 16px 18px; border-radius: var(--r); background: var(--screen); box-shadow: inset 0 0 0 2px var(--brand); font-size: 1rem; }
.boot li:empty { visibility: hidden; }
.boot li:not(.typing)::after { display: none; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.facts li { padding: 3px 10px; border-radius: 6px; background: var(--screen-3); font-size: .84rem; color: var(--on); }
.facts .halal-li { flex-basis: 100%; padding: 0; background: none; font-size: .9rem; }

/* ── The section keys ──────────────────────────────────────────────────────── */
.sections { display: grid; gap: 16px; }
.search { display: flex; align-items: center; gap: 10px; max-width: 460px; min-height: 50px; padding: 4px 14px; border-radius: var(--r); background: var(--screen-2); box-shadow: inset 0 0 0 2px var(--screen-line); }
.search:focus-within { box-shadow: inset 0 0 0 2px var(--brand); }
.search input { flex: 1; min-width: 0; min-height: 42px; padding: 0; border: 0; outline: 0; background: none; color: var(--on); }
.search input::placeholder { color: var(--on-muted); opacity: 1; }
.hits { margin-top: 10px; max-width: 640px; padding: 4px 14px; border-radius: var(--r); background: var(--screen-2); box-shadow: inset 0 0 0 2px var(--screen-line); }
.hits li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; border-bottom: 2px dashed var(--screen-line); }
.hits li:last-child { border-bottom: 0; }
.hits button { min-height: 48px; padding: 6px 0; border: 0; background: none; text-align: start; font-weight: 600; color: var(--on); }
.hits a { display: inline-flex; align-items: center; min-height: 44px; min-width: 40px; font-size: .84rem; color: var(--on-muted); }
.hits .pr { color: var(--brand-on-dark); font-size: 1.2rem; }
.finder .noresult { margin-top: 10px; }
.cat-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cat-key { display: grid; align-content: start; justify-items: stretch; gap: 8px; padding: 8px 8px 10px; text-align: start; min-width: 0; }
.cat-key .ph { aspect-ratio: 16 / 10; }
.ck-body { display: grid; gap: 4px; padding-inline: 2px; min-width: 0; }
.cat-key h3 { font-size: 1.1rem; line-height: 1.15; }
.meta { display: flex; flex-wrap: wrap; gap: 0 10px; font-family: var(--font-body); font-weight: 400; font-size: .8rem; line-height: 1.45; color: var(--ink-muted); }
.meta .from { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.also-h { margin-top: 10px; font-size: 1.14rem; }
.spokes { display: grid; gap: 10px; }
.spoke { display: grid; justify-items: start; gap: 4px; padding: 14px 16px; text-align: start; }
.sp-nm { font-size: 1.2rem; }
.sp-d { font-family: var(--font-body); font-weight: 400; font-size: .86rem; line-height: 1.5; color: var(--ink-soft); }

/* ── Kitchen tonight: the status panel ─────────────────────────────────────── */
.status { display: grid; gap: 16px; padding: 16px 14px; border-radius: var(--r); background: var(--screen-2); box-shadow: inset 0 0 0 2px var(--screen-line); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 2px dashed var(--screen-line); }
.stats div { display: grid; gap: 2px; align-content: start; padding: 12px 10px 12px 0; border-top: 2px dashed var(--screen-line); }
.stats b { font-family: var(--font-body); font-weight: 600; font-size: 1.2rem; line-height: 1.2; }
.stats span { font-size: .82rem; line-height: 1.4; color: var(--on-muted); }
.soldline { color: var(--on-soft); }
.t-today { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; padding: 10px; border-radius: var(--r); background: var(--screen-3); }
.t-today:not(:has(.ph)) { grid-template-columns: minmax(0, 1fr); padding: 14px; }
.t-today-body { display: grid; gap: 6px; min-width: 0; }
.t-today .when { font-size: .84rem; font-weight: 600; color: var(--brand-on-dark); }
.t-today h3 { font-size: 1.36rem; }
.t-today .d { color: var(--on-soft); font-size: .92rem; }
.t-today .buy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 4px; }
.t-today .pr { font-size: 1.5rem; color: var(--brand-on-dark); }
.was s { color: var(--on-muted); font-variant-numeric: tabular-nums; }
.week { display: grid; gap: 8px; }
.week h3 { font-size: 1.24rem; }
.week-note { color: var(--on-muted); font-size: .9rem; max-width: 56ch; }
.rituals { margin-top: 6px; border-bottom: 2px dashed var(--screen-line); }
.rituals li { display: grid; gap: 6px 20px; padding: 14px 0; border-top: 2px dashed var(--screen-line); }
.rituals li.now { border-top: 3px solid var(--brand); }
.rituals .day { display: flex; align-items: center; gap: 10px; font-size: .86rem; color: var(--on-muted); }
.rituals .day b { padding: 0 8px; border-radius: 5px; background: var(--brand); color: var(--brand-ink); font-size: .78rem; font-weight: 600; }
.rituals h4 { font-size: 1.12rem; }
.rituals .what p { color: var(--on-soft); font-size: .9rem; }
.rituals .buy { display: flex; align-items: center; gap: 14px; }
.rituals .pr { font-size: 1.2rem; color: var(--brand-on-dark); }

/* ── Can't decide, most ordered, the promise ───────────────────────────────── */
.decide { display: grid; gap: 12px; }
.asks { display: grid; gap: 12px; }
.ask { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ask .lbl { flex: 0 0 100%; display: flex; gap: 9px; color: var(--on); }
.pick:empty { display: none; }
.pick-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; max-width: 640px; padding: 12px; border-radius: var(--r); background: var(--screen-2); box-shadow: inset 0 0 0 2px var(--brand); }
.pick-card button.ph { width: 100%; padding: 0; border: 0; align-self: start; }
.pick-card .ph img { filter: none; }
.pick-card .ph::before, .pick-card .ph::after { display: none; }
.noimg { display: grid; place-items: center; width: 100%; height: 100%; background: var(--screen-3); }
.pick-card .what { display: grid; gap: 4px; align-content: start; min-width: 0; }
.pick-card h3 { font-size: 1.2rem; }
.why { font-size: .86rem; color: var(--on-muted); }
.why:empty { display: none; }
.asked { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.asked span { padding: 0 8px; border-radius: 5px; background: var(--screen-3); font-size: .78rem; color: var(--on); }
.pick-card .buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.pick-card .pr { font-size: 1.3rem; color: var(--brand-on-dark); }
.sigs { display: grid; gap: 16px; }
.sig-list { display: grid; gap: 10px; }
.sig { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.sig h3 { min-width: 0; }
.sig-face { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; justify-items: start; align-items: center; width: 100%; min-height: 72px; padding: 8px 12px 8px 8px; text-align: start; }
.sig-face .ph { grid-row: 1 / 3; width: 56px; }
.sig-face .ph.type > span { font-size: 1.5rem; }
.sig-face .nm { align-self: end; font-family: var(--font-body); font-weight: 600; font-size: .95rem; line-height: 1.25; }
.sig-face .pr { align-self: start; font-size: 1.1rem; }
.sig .mini-wa { min-height: 72px; flex-direction: column; gap: 4px; padding: 6px 12px; font-size: .88rem; }
.sig .out { display: inline-flex; align-items: center; min-height: 72px; font-size: .84rem; color: var(--on-muted); }
.sig.soldout .ph img { filter: grayscale(1) contrast(.9); opacity: .6; }
.sig.soldout .ph::before, .sig.soldout .ph::after { display: none; }
.promise { display: grid; gap: 10px; }
.promise p { font-size: 1.02rem; line-height: 1.7; max-width: 56ch; }

/* ── A section's own view ──────────────────────────────────────────────────── */
.rail { display: none; }
.cat-head { display: grid; gap: 6px; margin-bottom: 16px; }
.page-h { font-size: clamp(1.9rem, 1.5rem + 2vw, 2.8rem); }
.cat-head .meta { font-size: .88rem; color: var(--on-muted); }
.cat-head .meta .from { color: var(--on); }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
/* The whole card is the key: its face is one button, the round "+" a second one set into the corner. */
.card { position: relative; display: flex; flex-direction: column; min-width: 0; margin-bottom: 6px; border-radius: var(--r); background: var(--bg-card); color: var(--ink);
  box-shadow: 0 6px 0 var(--edge); transition: transform .06s linear, box-shadow .06s linear, background-color .06s linear; }
.card:hover { background: var(--key-up); }
.card:has(.face:active) { background: var(--key-down); }
.card h3 { display: flex; flex: 1; font-size: 1rem; }
.face { display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 8px 8px 10px; border: 0; border-radius: var(--r); background: none; color: inherit; text-align: start; font: inherit; }
.face .ph { aspect-ratio: 5 / 4; flex: none; }
.face .nm { padding-inline: 2px; font-family: var(--font-body); font-weight: 600; font-size: .95rem; line-height: 1.25; }
.face .tg { padding-inline: 2px; font-family: var(--font-body); font-weight: 400; font-size: .76rem; line-height: 1.35; color: var(--ink-muted); }
.face .pr { display: flex; align-items: center; min-height: 46px; margin-top: auto; padding-inline: 2px 54px; font-size: 1.22rem; }
.card .plus, .card > .out { position: absolute; right: 8px; bottom: 10px; }
.card > .out { display: inline-flex; align-items: center; min-height: 46px; font-size: .78rem; font-weight: 600; color: var(--ink-muted); }
.card.soldout .face .pr { padding-inline-end: 76px; }
.flag { position: absolute; z-index: 2; top: 6px; left: 6px; padding: 1px 8px; border-radius: 5px; background: var(--ink); color: var(--paper); font-family: var(--font-body); font-size: .74rem; font-weight: 600; }
.card.soldout .ph img { filter: grayscale(1) contrast(.9); opacity: .6; }
.card.soldout .ph::before, .card.soldout .ph::after { display: none; }
.card.soldout :is(.nm, .pr) { color: var(--ink-muted); }
.cat-foot { display: grid; gap: 18px; justify-items: start; margin-top: 26px; }
.pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.pn a { display: grid; justify-items: start; align-content: center; gap: 2px; min-height: 62px; padding: 8px 14px; text-align: start; min-width: 0; }
.pn .next { justify-items: end; text-align: end; }
.pn small { font-family: var(--font-body); font-weight: 400; font-size: .76rem; color: var(--ink-muted); }
.pn span { overflow-wrap: anywhere; }
.pn .prev span::before { content: "< "; }
.pn .next span::after { content: " >"; }

/* ── What the kiosk prints: the receipt, the story ─────────────────────────── */
.paper { position: relative; margin-bottom: 14px; padding: 18px 16px 20px; border-radius: 4px 4px 0 0; background: var(--paper); color: var(--ink); }
.paper::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 7px;
  background: linear-gradient(135deg, var(--paper) 25%, transparent 25%) -7px 0 / 14px 14px, linear-gradient(225deg, var(--paper) 25%, transparent 25%) -7px 0 / 14px 14px; }
.screen .paper h2::before { display: none; }
.paper :focus-visible { outline-color: var(--ink); }
.paper .key { background: var(--bg); }
.paper .key:hover { background: var(--bg-card); }
.paper .key:active { background: var(--bg-2); }
.paper .key[aria-pressed="true"] { background: var(--brand); }
.paper .key-wa, .paper .key-wa:hover, .paper .key-wa:active { background: var(--wa); }
.receipt { display: grid; gap: 12px; width: 100%; max-width: 520px; scroll-margin-top: calc(var(--strip-h) + 14px); }
.screen .receipt h2 { font-size: 1.4rem; text-align: center; }
.rc-date { padding-bottom: 12px; border-bottom: 2px dashed var(--line-bright); text-align: center; font-size: .82rem; color: var(--ink-muted); }
.form-dock .receipt { margin-top: 36px; }
.form-dock .plan { display: none; }
.plan { display: grid; gap: 12px; padding-bottom: 14px; border-bottom: 2px dashed var(--line-bright); }
.field { display: grid; gap: 6px; }
.lbl { font-size: .84rem; font-weight: 600; color: var(--ink-soft); }
.party { display: flex; flex-wrap: wrap; gap: 8px; }
.party .key { min-width: 46px; }
.range { display: flex; align-items: center; gap: 12px; }
.range input { flex: 1; min-width: 0; min-height: 40px; accent-color: var(--ink); }
.range b { min-width: 3.4ch; font-family: var(--font-body); font-weight: 600; font-size: 1.14rem; font-variant-numeric: tabular-nums; }
.empty { color: var(--ink-soft); }
.lines li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 2px dashed var(--line); }
.lines .ln { font-weight: 500; overflow-wrap: anywhere; }
.lines .q { display: inline-flex; align-items: center; gap: 6px; }
.lines .q .key { width: 42px; padding: 0; font-size: 1.2rem; }
.lines .q b { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.lines .lp { min-width: 62px; text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }
.receipt > .sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 4px; font-weight: 600; }
.receipt > .sum b { font-family: var(--font-body); font-weight: 600; font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.per, .paynote { font-size: .84rem; color: var(--ink-muted); }
#table-clear { justify-self: start; }

/* ── Your order, story, visit ──────────────────────────────────────────────── */
.order-grid, .visit-grid { display: grid; gap: 18px; align-content: start; }
.spoke-head { display: grid; gap: 8px; }
.panel { display: grid; gap: 12px; align-content: start; min-width: 0; padding: 16px 14px 18px; border-radius: var(--r); background: var(--screen-2); box-shadow: inset 0 0 0 2px var(--screen-line); }
.panel .key { justify-self: start; }
.promises { display: grid; gap: 10px; }
.promises li { display: grid; gap: 1px; position: relative; padding-inline-start: 18px; }
.promises li::before, .points li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; background: var(--brand); }
.promises b { font-weight: 600; }
.promises span { color: var(--on-muted); font-size: .9rem; }
.chat { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-in); background: var(--screen); }
.chat p { max-width: 88%; padding: 8px 12px; border-radius: 10px; font-size: .9rem; line-height: 1.45; }
.chat .me { justify-self: end; background: var(--screen-3); color: var(--on); border-end-end-radius: 3px; }
.chat .maya { justify-self: start; background: var(--bg-card); color: var(--ink); border-end-start-radius: 3px; }

.story { display: grid; gap: 18px; }
.story-wrap { display: grid; gap: 18px; }
.portrait { max-width: 360px; margin-bottom: 6px; padding: 8px; border-radius: var(--r); background: var(--bg-card); box-shadow: 0 6px 0 var(--edge); }
.portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-in); }
.story-body { display: grid; gap: 14px; max-width: 68ch; padding: 22px 18px 26px; }
.story-body p { font-size: 1rem; line-height: 1.75; }
.screen .story-body h2 { margin-top: 6px; font-size: 1.26rem; }
.story-body .sign { font-family: var(--font-display); font-weight: 400; font-size: 1.14rem; }
.reel video { width: 100%; max-width: 720px; border-radius: var(--r); background: var(--screen-2); }
.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.mosaic:empty { display: none; }
.mosaic button { padding: 0; border: 0; border-radius: var(--r-in); background: none; }
.guests { display: grid; gap: 14px; margin-top: 32px; }
.score { color: var(--on-muted); }
.quotes { display: grid; gap: 12px; }
.quote { display: grid; gap: 10px; align-content: space-between; padding: 16px; border-radius: var(--r); background: var(--screen-2); box-shadow: inset 0 0 0 2px var(--screen-line); }
.quote blockquote { font-size: 1rem; line-height: 1.65; }
.quote figcaption { font-size: .88rem; font-weight: 600; color: var(--on-muted); }
.stars { color: var(--brand-on-dark); letter-spacing: 1px; }

.hours { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours td { padding: 8px 0; border-bottom: 2px dashed var(--screen-line); color: var(--on-soft); }
.hours td:last-child { text-align: end; }
.hours tr:last-child td { border-bottom: 0; }
.hours tr.today td { font-weight: 600; color: var(--on); }
.hours tr.today td:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 9px; background: var(--brand); }
.addr { font-size: 1.02rem; font-weight: 500; }
.addr:empty { display: none; }
.where-act { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.map iframe { width: 100%; height: 280px; border: 0; border-radius: var(--r-in); }
.points { display: grid; gap: 6px; }
.points li { position: relative; padding-inline-start: 18px; color: var(--on-soft); }
.packs { display: grid; gap: 10px; }
.packs:empty { display: none; }
.pack { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-in); background: var(--screen-3); }
.pack h3 { font-size: 1.08rem; }
.pack p { color: var(--on-soft); font-size: .9rem; }
.pack .serves { font-weight: 600; }
.pack .pr { font-size: 1.2rem; color: var(--brand-on-dark); }
.panel.qr { grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
.panel.qr img { width: 132px; height: 132px; padding: 8px; border-radius: var(--r-in); background: #FFFFFF; }
.panel.qr div { display: grid; gap: 6px; }
.panel.qr p { color: var(--on-soft); font-size: .9rem; }

/* Booking widget (shared/reserve.js ships hooks only): fields on the screen, times as keys. */
.wsr { display: grid; gap: 14px; }
.wsr-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wsr-field { display: grid; gap: 4px; font-size: .84rem; font-weight: 600; color: var(--on-muted); }
.wsr-field :is(select, input) { width: 100%; min-height: 48px; padding: 8px 12px; border: 0; border-radius: var(--r-in); background: var(--screen-3); color: var(--on); font-weight: 500; color-scheme: dark; box-shadow: inset 0 0 0 2px var(--screen-line); }
.wsr-field :is(select, input):focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--brand); }
.wsr-field input::placeholder { color: var(--on-muted); opacity: 1; }
.wsr-slots { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.wsr-slot { min-height: 46px; margin-bottom: 4px; padding: 6px 16px; border: 0; border-radius: 10px; background: var(--bg-card); color: var(--ink);
  font-family: var(--font-display); font-weight: 400; font-size: 1rem; box-shadow: 0 4px 0 var(--edge); transition: transform .06s linear, box-shadow .06s linear; }
.wsr-slot small { display: block; font-family: var(--font-body); font-size: .7rem; font-weight: 500; color: var(--ink-muted); }
.wsr-slot[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); box-shadow: 0 4px 0 var(--brand-edge); }
.wsr-slot[aria-pressed="true"] small { color: var(--brand-ink); }
.wsr-slot.is-out { background: var(--screen-3); color: var(--on-muted); text-decoration: line-through; box-shadow: none; cursor: default; }
.wsr-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-top: 14px; border-top: 2px dashed var(--screen-line); }
.wsr-form > :not(.wsr-field), .wsr-wide { grid-column: 1 / -1; }
.wsr-chosen { font-family: var(--font-display); font-weight: 400; font-size: 1.12rem; }
.wsr-check { display: flex; gap: 10px; align-items: center; min-height: 44px; font-size: .9rem; color: var(--on); }
.wsr-check input { width: 20px; height: 20px; accent-color: var(--brand); flex: none; }
.wsr-submit, .wsr-wa, .wsr-waitlist { display: inline-flex; align-items: center; justify-content: center; justify-self: start; min-height: 52px; margin-bottom: 6px; padding: 8px 24px; border: 0; border-radius: var(--r);
  font-family: var(--font-display); font-weight: 400; font-size: 1.06rem; text-decoration: none; transition: transform .06s linear, box-shadow .06s linear; }
.wsr-submit { background: var(--brand); color: var(--brand-ink); box-shadow: 0 6px 0 var(--brand-edge); }
.wsr-wa, .wsr-waitlist { background: var(--bg-card); color: var(--ink); box-shadow: 0 6px 0 var(--edge); }
.wsr-error { color: #FFB4A8; font-weight: 600; }
.wsr-policy, .wsr-bigparty, .wsr-closed, .wsr-off, .wsr-loading { margin: 0; color: var(--on-muted); font-size: .88rem; }
.wsr-policy { display: grid; gap: 2px; padding-inline-start: 18px; list-style: square; }
.wsr-policy:empty { display: none; }
.wsr-done { display: grid; gap: 6px; }
.wsr-done h3 { font-size: 1.3rem; }
@media (prefers-reduced-motion: no-preference) {
  .lang button:active, .lang button[aria-pressed="true"] { transform: translateY(3px); box-shadow: 0 0 0 2px var(--edge), 0 1px 0 2px var(--edge); }
  .lang button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--ink), 0 1px 0 2px var(--ink); }
  .wsr-slot:not(.is-out):active, .wsr-slot[aria-pressed="true"] { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge); }
  .wsr-slot[aria-pressed="true"] { box-shadow: 0 1px 0 var(--brand-edge); }
  :is(.wsr-submit, .wsr-wa, .wsr-waitlist, .wsf-sh-add, .wsf-promo-cta):active { transform: translateY(4px); box-shadow: none; }
}

/* ── Below the screen, on the housing ──────────────────────────────────────── */
.closing { padding-block: 4px 30px; }
.closing .wrap { display: grid; gap: 10px; justify-items: start; padding-inline: 14px; }
.closing-line { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.3rem); line-height: 1.12; }
.closing-note { color: var(--ink-soft); max-width: 46ch; }
.closing .key { margin-top: 4px; }
.foot { padding-block: 22px 30px; border-top: 2px solid var(--line-bright); }
.foot .wrap { display: grid; gap: 10px; justify-items: start; padding-inline: 14px; }
/* The speaker grille. */
.foot .wrap::before { content: ""; width: 116px; height: 20px; background: repeating-linear-gradient(90deg, var(--line-bright) 0 4px, transparent 4px 10px); }
.foot p { color: var(--ink-soft); font-size: .88rem; }
.fine a { display: inline-flex; align-items: center; min-height: 42px; min-width: 42px; font-weight: 600; color: var(--ink); }
.socials { display: flex; flex-wrap: wrap; gap: 12px; }
.socials .social { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 4px; border-radius: 10px; background: var(--bg-card); color: var(--ink); box-shadow: 0 0 0 2px var(--edge), 0 4px 0 2px var(--edge); }
.socials .social svg { width: 20px; height: 20px; }

/* ── The status strip at the foot (phones): WhatsApp never leaves the screen ─ */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px;
  padding: 9px 12px calc(7px + env(safe-area-inset-bottom, 0px)); background: var(--screen); color: var(--on); border-top: 3px solid var(--line-bright); }
.dock-order { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; flex: none; min-height: 50px; min-width: 44px; margin-bottom: 4px; text-decoration: none; }
.dock-order span { grid-column: 1 / -1; font-size: .72rem; line-height: 1.2; color: var(--on-muted); }
.dock-order .amt { color: var(--brand-on-dark); font-size: 1.2rem; }
.dock-wa { flex: 1; min-width: 0; min-height: 50px; }

/* ── Dish dialog and tonight's promo (shared/floor.js ships hooks only) ────── */
/* A second, smaller screen in its own putty frame. The photograph here is in its true colours. */
.wsf-sheet, .wsf-promo { position: fixed; inset: 0; z-index: 60; display: grid; place-items: end center; }
.wsf-sheet-back, .wsf-promo-back { position: absolute; inset: 0; background: rgba(11, 15, 12, .74); }
.wsf-sheet-card, .wsf-promo-card { position: relative; z-index: 1; width: min(880px, 100%); max-height: 92vh; overflow: auto; overscroll-behavior: contain;
  background: var(--screen); color: var(--on); border: 6px solid var(--bg); border-bottom: 0; border-radius: 22px 22px 0 0; animation: t20-in .16s steps(4, end); }
.wsf-promo-card { width: min(480px, 100%); }
.wsf-sheet-close, .wsf-promo-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--bg-card); color: var(--ink);
  font-size: 1.5rem; line-height: 1; box-shadow: 0 4px 0 var(--edge); }
.wsf-sheet-media, .wsf-promo-media { padding: 10px 10px 0; }
.wsf-sheet-media img, .wsf-promo-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.wsf-sheet-body, .wsf-promo-body { display: grid; gap: 10px; padding: 16px 18px 22px; }
.wsf-sh-cat { padding-inline-end: 52px; font-size: .84rem; font-weight: 600; color: var(--brand-on-dark); }
.wsf-sh-cat:empty, .wsf-sh-alt:empty, .wsf-sh-story:empty, .wsf-pairs:empty { display: none; }
.wsf-sheet-body h3, .wsf-promo-body h3 { padding-inline-end: 44px; font-size: 1.6rem; }
.wsf-sh-alt { color: var(--on-muted); }
.wsf-sh-story, .wsf-promo-body p { color: var(--on-soft); line-height: 1.65; }
.wsf-facts { display: grid; margin: 0; }
.wsf-facts > div { display: flex; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 2px dashed var(--screen-line); }
.wsf-facts dt { min-width: 84px; font-size: .84rem; font-weight: 600; color: var(--on-muted); }
.wsf-facts dd { margin: 0; }
.wsf-heat { display: inline-flex; gap: 4px; align-items: center; }
.wsf-heat i { width: 10px; height: 10px; background: var(--screen-line); }
.wsf-heat i.on { background: var(--brand); }
.wsf-heat span { margin-inline-start: 6px; font-size: .9rem; }
.wsf-pairs { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.wsf-pairs-label, .wsf-sh-sizes-label { font-size: .84rem; font-weight: 600; color: var(--on-muted); }
.wsf-pairs button, .wsf-sh-sizes button { min-height: 46px; margin-bottom: 4px; padding: 6px 14px; border: 0; border-radius: 10px; background: var(--bg-card); color: var(--ink);
  font-family: var(--font-display); font-weight: 400; font-size: .96rem; box-shadow: 0 4px 0 var(--edge); }
.wsf-sh-sizes { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; width: 100%; }
.wsf-sh-sizes button[aria-pressed="true"] { background: var(--brand); color: var(--brand-ink); box-shadow: 0 4px 0 var(--brand-edge); }
.wsf-sh-sizes small { display: block; font-family: var(--font-body); font-size: .74rem; font-weight: 500; }
.wsf-sheet-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 2px dashed var(--screen-line); }
.wsf-sh-price, .wsf-promo-price { font-family: var(--font-body); font-weight: 600; font-size: 1.7rem; font-variant-numeric: tabular-nums; color: var(--brand-on-dark); }
.wsf-promo-body .wsf-promo-price { color: var(--brand-on-dark); }
.wsf-promo-price s { margin-inline-start: 6px; font-family: var(--font-body); font-size: .95rem; font-weight: 500; color: var(--on-muted); }
.wsf-sh-add, .wsf-promo-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; margin-bottom: 6px; padding: 8px 26px; border: 0; border-radius: var(--r); background: var(--brand); color: var(--brand-ink);
  font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; text-decoration: none; box-shadow: 0 6px 0 var(--brand-edge); transition: transform .06s linear, box-shadow .06s linear; }
.wsf-sh-add:active, .wsf-promo-cta:active { background: var(--brand-down); }
.wsf-promo-badge { justify-self: start; padding: 1px 10px; border-radius: 5px; background: var(--brand); color: var(--brand-ink); font-size: .8rem; font-weight: 600; }
.wsf-promo-skip { justify-self: start; min-height: 44px; padding: 4px 2px; border: 0; background: none; color: var(--on-muted); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* ── From 700px ────────────────────────────────────────────────────────────── */
@media (min-width: 700px) {
  .wrap { padding-inline: 24px; }
  .closing .wrap, .foot .wrap { padding-inline: 30px; }
  .quick { flex: none; order: 0; margin-top: 0; }
  .screen { padding: 24px 24px 30px; }
  .cta { display: flex; flex-wrap: wrap; gap: 6px 14px; }
  .cat-keys, .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .cat-key h3 { font-size: 1.2rem; }
  .spokes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .spoke { align-content: start; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .status { padding: 22px 22px 24px; }
  .t-today { grid-template-columns: 180px minmax(0, 1fr); gap: 20px; padding: 12px; }
  .t-today-body { align-content: center; padding-block: 6px; }
  .t-today h3 { font-size: 1.7rem; }
  .rituals li { grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; }
  .ask .lbl { flex: 0 0 150px; }
  .sig-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .panel { padding: 22px; }
  .paper { padding: 24px 24px 26px; }
  .story-body { padding: 30px 30px 34px; }
  .wsf-sheet, .wsf-promo { place-items: center; padding: 24px; }
  .wsf-sheet-card, .wsf-promo-card { border-bottom: 6px solid var(--bg); border-radius: 22px; box-shadow: 0 8px 0 var(--edge); }
  .wsf-sheet-card:has(.wsf-sheet-media:not([hidden])) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .wsf-sheet-media { padding: 10px 0 10px 10px; }
  .wsf-sheet-media img { aspect-ratio: 1; }
}

/* ── From 960px: the strip carries the order, the status strip at the foot goes ── */
@media (min-width: 960px) {
  body { padding-bottom: 0; font-size: 1rem; }
  .dock { display: none; }
  .wrap { padding-inline: 32px; }
  .closing .wrap, .foot .wrap { padding-inline: 40px; }
  .top-in { min-height: 88px; }
  .st-order { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 4px 6px; font-weight: 600; text-decoration: none; }
  .st-wa { display: inline-flex; }
  .screen { padding: 34px 36px 40px; border-radius: 28px; }
  .hub { gap: 52px; }
  .attract { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); column-gap: 52px; row-gap: 16px; align-items: start; }
  .attract > * { grid-column: 1; }
  .attract > .display { grid-column: 2; grid-row: 1 / span 7; align-self: center; }
  .attract:has(.display.empty) { grid-template-columns: minmax(0, 1fr); }
  .cycle .ph { aspect-ratio: 4 / 3; }
  .cycle .nm { font-size: 1.1rem; }
  .cycle .pr { font-size: 1.4rem; }
  .boot { padding: 28px 30px; font-size: 1.14rem; }
  .cat-keys { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .stats b { font-size: 1.4rem; }
  .sig-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .menu { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 32px; align-items: start; }
  .rail { display: grid; gap: 8px; position: sticky; top: calc(var(--strip-h) + 18px); }
  .rail .key { justify-content: space-between; gap: 10px; text-align: start; }
  .rail small { font-family: var(--font-body); font-weight: 500; font-size: .8rem; font-variant-numeric: tabular-nums; }
  .cards { gap: 16px; }
  .face .nm { font-size: 1rem; }
  .order-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; align-items: start; }
  .order-grid .spoke-head { grid-column: 1 / -1; }
  .visit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .visit-grid :is(.spoke-head, #reserve, #catering, .panel.qr) { grid-column: 1 / -1; }
  .story-wrap:has(.portrait:not([hidden])) { grid-template-columns: 340px minmax(0, 1fr); gap: 36px; align-items: start; }
  .packs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}