/* T03 Chalkboard — a wall-sized chalk menu.
   Matrix row: long scroll · type-only splash · text-only board · KINETIC TYPOGRAPHY · balanced ·
   NO photography (approved 2026-09-14) · handwritten script · WhatsApp-first.
   Images exist in the data and are never rendered — not in the hero, not in the sheet, not in the
   promo. Everything is drawn: the board, the rules, the QR frame, the chat. */
:root {
  --font-hand: "Caveat", "Segoe Script", "Bradley Hand", "Snell Roundhand", cursive;
  --font-chalk: "Kalam", "Segoe Print", "Comic Sans MS", cursive;
  --font-ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-hand);        /* brand-tokens.js may override */

  --slate: #1E2621;
  --slate-2: #253029;
  --slate-3: #161C18;
  --chalk: #F2EFE4;
  --chalk-2: rgba(242,239,228,.74);
  --chalk-3: rgba(242,239,228,.46);
  --chalk-line: rgba(242,239,228,.24);
  --brand: #F2C14E;                        /* yellow chalk; tenant --brand overrides */
  --brand-2: #8FD6A0;                      /* green chalk */
  --wa: #25D366;
  --r-soft: 22px;
  --r-pill: 99px;
  --brand-ink: #14120F;             /* brand-tokens.js flips this on a dark brand */
  --frame: 14px;
  --wood: #4A3526;
  --wood-2: #2E2016;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-chalk); color: var(--chalk); font-size: 18px; line-height: 1.6;
  background: var(--slate);
  background-image:
    radial-gradient(ellipse 120% 80% at 20% 0%, rgba(255,255,255,.055), transparent 60%),
    radial-gradient(ellipse 90% 70% at 85% 30%, rgba(255,255,255,.04), transparent 62%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(0,0,0,.35), transparent 70%);
  -webkit-font-smoothing: antialiased;
}
/* The board is mounted: a wooden frame around the viewport and a tray along the foot.
   This is what makes T03 readable as a chalkboard at a glance, with or without Caveat. */
.frame-t, .frame-b, .frame-l, .frame-r { position: fixed; z-index: 50; pointer-events: none;
  background: linear-gradient(180deg, #5C4230, var(--wood) 40%, var(--wood-2));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), 0 0 22px rgba(0,0,0,.5); }
.frame-t { top: 0; left: 0; right: 0; height: var(--frame); }
.frame-b { bottom: 0; left: 0; right: 0; height: calc(var(--frame) + 8px);
  background: linear-gradient(180deg, var(--wood-2), var(--wood) 30%, #5C4230); }
.frame-l, .frame-r { top: 0; bottom: 0; width: var(--frame);
  background: linear-gradient(90deg, #5C4230, var(--wood) 40%, var(--wood-2)); }
.frame-l { left: 0; } .frame-r { right: 0; }
/* three sticks of chalk resting in the tray */
.frame-b::after { content: ""; position: absolute; left: 6vw; bottom: calc(var(--frame) - 2px);
  width: 128px; height: 7px; border-radius: 4px; opacity: .92;
  background: linear-gradient(90deg, var(--chalk) 0 34%, transparent 34% 38%, var(--brand) 38% 64%,
    transparent 64% 68%, var(--brand-2) 68% 100%);
  box-shadow: 0 -1px 0 rgba(255,255,255,.25), 0 2px 5px rgba(0,0,0,.5); }
body { padding: var(--frame) var(--frame) calc(var(--frame) + 8px); }
.top { top: var(--frame); }
.dock { inset-inline: var(--frame); bottom: calc(var(--frame) + 8px); }
body.has-dock { padding-bottom: 86px; }

/* chalk dust: a faint noise wash over the whole board */
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: .5;
  background-image: radial-gradient(rgba(242,239,228,.07) .6px, transparent .7px),
    radial-gradient(rgba(242,239,228,.05) .5px, transparent .6px);
  background-size: 7px 7px, 11px 13px; background-position: 0 0, 3px 5px; }
body.wsf-locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
*:focus-visible { outline: 3px dashed var(--brand); outline-offset: 4px; }
/* Direction-safe visually-hidden. `left: -999px` is harmless in LTR but in RTL the scroll origin
   flips and the off-screen element becomes a thousand pixels of scrollable page. */
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { width: auto; height: auto; overflow: visible; clip-path: none; inset-inline-start: 12px; top: 12px;
  background: var(--chalk); color: var(--slate); padding: 10px 18px; border-radius: var(--r-pill); z-index: 99; }
.rtl-text { direction: rtl; }

/* Mixed-language safety: while translations are partial, an English string sits inside an RTL
   page and the bidi algorithm throws its punctuation to the wrong end (".A Lahore street classic").
   `plaintext` resolves each run's direction from its own first strong character, so an English
   fallback reads LTR and an Urdu name reads RTL, on the same line. Applies to every template. */
.bn, .bd, .sig h3, .sig .body p, .today h3, .today p, .answer h3, .answer p, .tablecard .nm,
.promises b, .promises span, .guest blockquote, .guest figcaption, .story p, .storyside dd,
.vcard address, .vcard p, .pack h4, .pack p, .sub, .splash .promise, .howto span,
.wsf-sheet-body h3, .wsf-sh-alt, .wsf-sh-story, .wsf-facts dd, .wsf-pairs button,
.wsf-promo-body h3, .wsf-promo-body p, .bcat h3, .catrail button {
  unicode-bidi: plaintext;
}
h1, h2, h3, .label, .facts, .splash .promise { unicode-bidi: plaintext; }

.wrap { width: min(1180px, 100% - 44px); margin: 0 auto; position: relative; z-index: 2; }

/* ── Chalk primitives ───────────────────────────────────────────────────────── */
.hand { font-family: var(--font-hand); font-weight: 700; line-height: 1.02; letter-spacing: .005em; }
h1, h2, h3 { font-family: var(--font-hand); font-weight: 700; line-height: 1.04; }
/* Chalk is a dusty, slightly doubled stroke. This reads as chalk even if Caveat never loads,
   so the template does not depend on a webfont for its character. */
h1, h2, h3, .bn, .bp, .sig .pr, .tablecard .total b, .answer h3, .today h3, .today .pr,
.promises b, .guest blockquote, .vcard address, .storyside dd, .gscore b, .dock .sum,
.howto b, .howto .speaks span, .chips button, .party button, .catrail button {
  text-shadow: 0 0 1px rgba(242,239,228,.7), 0 1px 0 rgba(242,239,228,.18), 0 0 18px rgba(242,239,228,.16);
}
em, .today .pr, .bp, .sig .pr, .answer .pr, .tablecard .total b, .howto b, .gscore b, .storyside dd,
.wsf-sh-price, .wsf-promo-price, .dock .sum {
  text-shadow: 0 0 1px rgba(242,193,78,.5), 0 0 16px rgba(242,193,78,.16);
}
h1 { font-size: clamp(2.6rem, 9.4vw, 7.5rem); text-wrap: balance; }
h2 { font-size: clamp(2.4rem, 6vw, 4.2rem); }
em { font-style: normal; color: var(--brand); }
.label { display: block; font-family: var(--font-ui); font-size: .72rem; font-weight: 700; letter-spacing: .26em;
  text-transform: uppercase; color: var(--chalk-3); margin-bottom: 8px; }
.sub { color: var(--chalk-2); font-size: clamp(1.05rem, 1.5vw, 1.2rem); max-width: 56ch; }

/* a hand-drawn rule: slightly wobbly, like a chalk stroke */
.chalkrule { height: 7px; border: 0; margin: 0; color: var(--chalk-line);
  background: radial-gradient(ellipse 50% 60% at 50% 50%, currentColor 40%, transparent 70%) repeat-x;
  background-size: 9px 5px; opacity: .8; }

/* Write-on: the kinetic typography of this template. Reveals left→right as it enters. */
/* clip-path on a wrapped inline box hides whole lines, so every write-on is its own block box */
.write { display: inline-block; clip-path: inset(0 100% 0 0); unicode-bidi: plaintext; }
/* A mixed-direction heading ("مینو — Daawat") is reordered by the bidi algorithm after the
   inline-block box is sized, so a clip-path reveal shears the first letter off. In RTL the
   write-on degrades to a fade: the motion stays, the words stay whole. */
.rtl-text .write { clip-path: none; opacity: 0; }
.rtl-text .write.in { opacity: 1; animation: fadeUp .55s ease forwards; }
.write.in { animation: writeOn 1.05s cubic-bezier(.32,.72,.3,1) forwards; }
@keyframes writeOn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2% 0 0); } }

.write.d1.in { animation-delay: .1s } .write.d2.in { animation-delay: .25s } .write.d3.in { animation-delay: .4s }
.write.d4.in { animation-delay: .55s } .write.d5.in { animation-delay: .7s }
.fadein { opacity: 0; }
.fadein.in { animation: fadeUp .6s .5s ease forwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .write, .write.in { clip-path: none !important; opacity: 1 !important; animation: none !important; }
  .fadein, .fadein.in { opacity: 1 !important; animation: none !important; }
}

/* ── Buttons: chalk-drawn boxes ─────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-ui); font-weight: 700; font-size: .84rem; letter-spacing: .1em;
  text-transform: uppercase; padding: 14px 26px; border-radius: var(--r-pill);
  border: 2px solid var(--chalk-line); color: var(--chalk); cursor: pointer; background: none;
  transition: border-color .18s, color .18s, background .18s; }
.btn svg { width: 19px; height: 19px; }
.btn:hover { border-color: var(--chalk); }
.btn-wa { background: var(--wa); border-color: var(--wa); color: #08150D; }
.btn-wa:hover { background: #4BE283; border-color: #4BE283; }
.btn-chalk { border-color: var(--brand); color: var(--brand); }
.btn-chalk:hover { background: var(--brand); color: var(--slate); }
.btn-sm { padding: 9px 17px; font-size: .72rem; }

/* ── Top bar: always-there WhatsApp, always-there language ──────────────────── */
.top { position: sticky; top: 0; z-index: 40; background: rgba(30,38,33,.93);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--chalk-line); }
.top .wrap { display: flex; align-items: center; gap: 14px; padding: 9px 0; }
.top .name { font-family: var(--font-hand); font-weight: 700; font-size: 1.7rem; line-height: 1; }
.top nav { display: flex; gap: 2px; margin-inline-start: auto; }
.top nav a { font-family: var(--font-ui); font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--chalk-3); padding: 8px 11px; border-radius: var(--r-pill); }
.top nav a:hover { color: var(--chalk); background: rgba(242,239,228,.07); }
.lang { display: inline-flex; border: 1px solid var(--chalk-line); border-radius: var(--r-pill); padding: 2px; }
.lang button { font-family: var(--font-ui); font-size: .7rem; border: 0; background: none; color: var(--chalk-3);
  padding: 5px 10px; border-radius: var(--r-pill); cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--chalk); color: var(--slate); }

/* ── Splash: the board is blank, then the welcome is written on ─────────────── */
.splash { min-height: 92svh; display: grid; align-content: center; padding: 60px 0 44px; }
.splash .label { margin-bottom: 18px; }
.splash h1 .write { display: block; }
.splash .promise { font-family: var(--font-hand); font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  color: var(--chalk-2); margin: 16px 0 6px; max-width: 22ch; line-height: 1.2; }
.splash .acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.splash .facts { display: flex; gap: 10px 26px; flex-wrap: wrap; margin-top: 30px; padding-top: 22px;
  border-top: 1px solid var(--chalk-line); font-family: var(--font-ui); font-size: .74rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--chalk-3); }
.splash .facts b { color: var(--brand); font-weight: 700; }
.splash .facts .halal { color: var(--brand-2); }

/* The moat, chalked onto the board: three steps written in sequence */
.howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 34px;
  border: 2px solid var(--chalk-line); border-radius: var(--r-soft); overflow: hidden; }
.howto div { padding: 20px 22px; border-inline-end: 1px dashed var(--chalk-line); }
.howto div:last-child { border-inline-end: 0; }
.howto b { display: block; font-family: var(--font-hand); font-size: 2.3rem; color: var(--brand); line-height: 1; }
.howto span { display: block; margin-top: 7px; color: var(--chalk-2); font-size: 1rem; line-height: 1.35; }
.howto .speaks { grid-column: 1 / -1; border-inline-end: 0; border-top: 1px dashed var(--chalk-line);
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.howto .speaks b { font-family: var(--font-ui); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--chalk-3); }
.howto .speaks span { margin: 0; font-family: var(--font-hand); font-size: 1.5rem; color: var(--chalk); }

/* ── Section head: chalk rule + written heading ─────────────────────────────── */
.sec { padding: 56px 0; position: relative; z-index: 2; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  flex-wrap: wrap; margin-bottom: 26px; }
.sec-head .label { display: block; margin-bottom: 8px; }
.sec-head h2 { margin: 0; }

/* ── Today's board: the specials, chalked large ─────────────────────────────── */
.today { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0;
  border: 2px solid var(--chalk-line); border-radius: var(--r-soft); }
.today a { padding: 24px 26px; border-inline-end: 1px dashed var(--chalk-line); display: block; }
.today a:last-child { border-inline-end: 0; }
.today a:hover { background: rgba(242,239,228,.05); }
.today .day { font-family: var(--font-ui); font-size: .68rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brand-2); }
.today h3 { font-size: 2.1rem; margin: 8px 0 6px; }
.today p { color: var(--chalk-2); font-size: .97rem; }
.today .pr { font-family: var(--font-hand); font-size: 2rem; color: var(--brand); margin-top: 10px; display: block; }
.today .pr s { font-size: 1.1rem; color: var(--chalk-3); margin-inline-start: 8px; }

/* ── Signatures: written up, no pictures — the words do the selling ─────────── */
.sigs { display: grid; gap: 0; }
.sig { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 22px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px dashed var(--chalk-line); cursor: pointer; }
.sig:hover { background: rgba(242,239,228,.04); }
.sig .no { font-family: var(--font-hand); font-size: 2.4rem; color: var(--chalk-3); line-height: 1; }
.sig h3 { font-size: 2.3rem; }
.sig .pr { font-family: var(--font-hand); font-size: 2.3rem; color: var(--brand); white-space: nowrap; }
.sig .body { grid-column: 2 / 3; }
.sig .body p { color: var(--chalk-2); max-width: 62ch; margin-top: 4px; }
.sig .tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.sig .tags span { font-family: var(--font-ui); font-size: .64rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--chalk-3); border: 1px solid var(--chalk-line);
  padding: 4px 11px; border-radius: var(--r-pill); }
.sig .go { grid-column: 2 / -1; display: flex; gap: 9px; flex-wrap: wrap; margin-top: 12px; }

/* ── Kitchen tonight: the corner of the board that changes ──────────────────── */
.tonight { border: 2px solid var(--chalk-line); border-radius: var(--r-soft); padding: 26px 28px;
  background: var(--slate-3); display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; }
.tonight div b { display: block; font-family: var(--font-hand); font-size: clamp(1.9rem, 2.4vw, 2.5rem);
  color: var(--brand); line-height: 1.08; text-wrap: balance; }
.tonight div span { font-family: var(--font-ui); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--chalk-3); display: block; margin-top: 6px; }
.tonight .gone { grid-column: 1 / -1; border-top: 1px dashed var(--chalk-line); padding-top: 16px;
  font-family: var(--font-hand); font-size: 1.5rem; color: var(--chalk-2); }
.tonight .gone b { display: inline; font-size: inherit; color: var(--chalk); }

/* ── The board: the menu, two chalk columns, dotted leaders, no pictures ────── */
.boardtools { position: sticky; top: 46px; z-index: 30; background: rgba(30,38,33,.95);
  backdrop-filter: blur(8px); border-block: 1px solid var(--chalk-line); padding: 9px 0; }
.boardtools .wrap { display: flex; gap: 12px; align-items: center; }
.catrail { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.catrail::-webkit-scrollbar { display: none; }
.catrail button { font-family: var(--font-hand); font-size: 1.22rem; white-space: nowrap; border: 0;
  background: none; color: var(--chalk-3); padding: 5px 13px; border-radius: var(--r-pill); cursor: pointer; }
.catrail button:hover { color: var(--chalk); }
.catrail button[aria-pressed="true"] { background: var(--chalk); color: var(--slate); }
.boardsearch { font-family: var(--font-ui); font-size: .84rem; color: var(--chalk); background: none;
  border: 1.5px solid var(--chalk-line); border-radius: var(--r-pill); padding: 8px 16px; width: 200px; }
.boardsearch::placeholder { color: var(--chalk-3); }
.boardsearch:focus { border-color: var(--chalk); outline: none; }

.board { columns: 2; column-gap: 54px; column-rule: 1px dashed var(--chalk-line); }
.bcat { break-inside: avoid-column; margin-bottom: 34px; }
.bcat h3 { font-size: 2.2rem; color: var(--brand); display: flex; align-items: baseline;
  justify-content: space-between; gap: 12px; border-bottom: 2px solid var(--chalk-line);
  padding-bottom: 6px; margin-bottom: 4px; }
.bcat h3 small { font-family: var(--font-ui); font-size: .64rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--chalk-3); }
.bcat .cdesc { color: var(--chalk-3); font-size: .92rem; margin: 2px 0 12px; }
.bitem { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; align-items: baseline;
  padding: 7px 0; cursor: pointer; }
.bitem:hover .bn { color: var(--brand); }
.bn { font-family: var(--font-hand); font-size: 1.5rem; line-height: 1.15;
  display: flex; align-items: baseline; gap: 8px; }
.bn .dots { flex: 1; border-bottom: 2px dotted var(--chalk-line); translate: 0 -6px; min-width: 16px; }
.bn i { font-style: normal; font-family: var(--font-ui); font-size: .58rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--brand-2); }
.bp { font-family: var(--font-hand); font-size: 1.5rem; color: var(--brand); }
.bd { grid-column: 1 / -1; color: var(--chalk-3); font-size: .88rem; line-height: 1.35; margin-top: -1px; }
.bitem .plus { grid-column: 1 / -1; justify-self: start; font-family: var(--font-ui); font-size: .64rem;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--chalk-2);
  background: none; border: 0; border-bottom: 1px solid var(--chalk-line); cursor: pointer; padding: 2px 0; margin-top: 4px; }
.bitem .plus:hover { color: var(--brand); border-color: var(--brand); }
.bitem.soldout { opacity: .4; }
.bitem.soldout .bp::after { content: " ✕"; }

/* ── Ask the board (find your dish) ─────────────────────────────────────────── */
.ask { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: start;
  border: 2px solid var(--chalk-line); border-radius: var(--r-soft); padding: 30px; }
.q { margin-bottom: 18px; }
.q > span { display: block; font-family: var(--font-ui); font-size: .68rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--chalk-3); margin-bottom: 9px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips button { font-family: var(--font-hand); font-size: 1.35rem; border: 2px solid var(--chalk-line);
  background: none; color: var(--chalk-2); padding: 5px 17px; border-radius: var(--r-pill); cursor: pointer; }
.chips button:hover { border-color: var(--chalk); color: var(--chalk); }
.chips button[aria-pressed="true"] { background: var(--chalk); border-color: var(--chalk); color: var(--slate); }
.answer { border: 2px dashed var(--chalk-line); border-radius: var(--r-soft); padding: 26px; min-height: 200px; }
.answer .empty { color: var(--chalk-3); font-family: var(--font-hand); font-size: 1.6rem; }
.answer .why { font-family: var(--font-ui); font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brand-2); }
.answer h3 { font-size: 2.6rem; margin: 10px 0 8px; }
.answer p { color: var(--chalk-2); }
.answer .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 18px; }
.answer .pr { font-family: var(--font-hand); font-size: 2.2rem; color: var(--brand); }

/* ── Set the table ──────────────────────────────────────────────────────────── */
.table2 { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }
.party { display: flex; gap: 9px; margin: 18px 0 20px; flex-wrap: wrap; }
.party button { font-family: var(--font-hand); font-size: 1.8rem; width: 58px; height: 52px;
  border: 2px solid var(--chalk-line); background: none; color: var(--chalk-2);
  border-radius: var(--r-pill); cursor: pointer; line-height: 1; }
.party button[aria-pressed="true"] { background: var(--chalk); border-color: var(--chalk); color: var(--slate); }
.budget { display: block; font-family: var(--font-ui); font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--chalk-3); }
.budget b { font-family: var(--font-hand); font-size: 1.9rem; color: var(--brand); letter-spacing: 0; margin-inline-start: 10px; }
.budget input { width: 100%; margin-top: 12px; accent-color: var(--brand); }
.hint { color: var(--chalk-3); margin-top: 14px; font-size: .95rem; }
.tablecard { border: 2px solid var(--chalk-line); border-radius: var(--r-soft); padding: 24px 26px; background: var(--slate-3); }
.tablecard ul { list-style: none; }
.tablecard li { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  padding: 10px 0; border-bottom: 1px dashed var(--chalk-line); }
.tablecard li.empty { display: block; border: 0; color: var(--chalk-3); font-family: var(--font-hand); font-size: 1.4rem; }
.tablecard .nm { font-family: var(--font-hand); font-size: 1.4rem; line-height: 1.2; }
.tablecard .nm small { display: block; font-family: var(--font-ui); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--chalk-3); }
.tablecard .qty { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-hand); font-size: 1.4rem; }
.tablecard .qty button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--chalk-line);
  background: none; color: var(--chalk); font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.tablecard .qty button:hover { border-color: var(--chalk); }
.tablecard .pr { font-family: var(--font-hand); font-size: 1.4rem; color: var(--brand); min-width: 62px; text-align: end; }
.tablecard .total { display: flex; justify-content: space-between; align-items: baseline;
  border-top: 2px solid var(--chalk-line); margin-top: 12px; padding-top: 14px; margin-bottom: 16px; }
.tablecard .total span { font-family: var(--font-ui); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--chalk-3); }
.tablecard .total b { font-family: var(--font-hand); font-size: 2.6rem; color: var(--brand); }
.tablecard .btn { width: 100%; }
.paynote { text-align: center; color: var(--chalk-3); font-size: .88rem; margin-top: 12px; }

/* ── Maya, drawn as a chat on the board ─────────────────────────────────────── */
.maya { display: grid; grid-template-columns: 1fr 360px; gap: 44px; align-items: start; }
.promises { list-style: none; display: grid; gap: 14px; margin-top: 20px; }
.promises li { border-inline-start: 3px solid var(--brand); padding-inline-start: 15px; }
.promises b { display: block; font-family: var(--font-hand); font-size: 1.6rem; color: var(--chalk); }
.promises span { color: var(--chalk-2); font-size: .97rem; }
.chat { border: 2px solid var(--chalk-line); border-radius: var(--r-soft); padding: 18px; }
.chat .top2 { display: flex; align-items: center; gap: 11px; padding-bottom: 13px; border-bottom: 1px dashed var(--chalk-line); }
.chat .top2 i { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--wa); color: var(--wa);
  display: grid; place-items: center; font-family: var(--font-hand); font-size: 1.4rem; font-style: normal; }
.chat .top2 b { font-family: var(--font-hand); font-size: 1.35rem; display: block; line-height: 1.1; }
.chat .top2 small { font-family: var(--font-ui); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--wa); }
.chat .msgs { display: grid; gap: 9px; padding-top: 15px; }
.chat .bub { max-width: 86%; padding: 10px 15px; border-radius: 18px; font-size: .95rem; line-height: 1.35;
  border: 1.5px solid var(--chalk-line); }
.chat .in { border-end-start-radius: 5px; }
.chat .out { justify-self: end; border-color: var(--wa); color: #C9F5DA; border-end-end-radius: 5px; }

/* ── Guests: quotes chalked up ──────────────────────────────────────────────── */
.guests { columns: 3; column-gap: 34px; }
.guest { break-inside: avoid; border: 2px solid var(--chalk-line); border-radius: var(--r-soft);
  padding: 20px 22px; margin-bottom: 20px; }
.guest.featured { border-color: var(--brand); }
.guest blockquote { font-family: var(--font-hand); font-size: 1.5rem; line-height: 1.3; color: var(--chalk); }
.guest figcaption { font-family: var(--font-ui); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--chalk-3); margin-top: 12px; }
.guest figcaption b { color: var(--chalk-2); }
.gscore { display: flex; align-items: baseline; gap: 12px; }
.gscore b { font-family: var(--font-hand); font-size: 3.2rem; color: var(--brand); line-height: 1; }
.gscore .stars { color: var(--brand); letter-spacing: .12em; }
.gscore small { font-family: var(--font-ui); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-3); }

/* ── Feasts ─────────────────────────────────────────────────────────────────── */
.feasts { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: start; }
.feasts ul.points { list-style: none; display: grid; gap: 9px; margin: 18px 0 22px; }
.feasts ul.points li { padding-inline-start: 22px; position: relative; color: var(--chalk-2); }
.feasts ul.points li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--brand-2); }
.packs { display: grid; gap: 14px; }
.pack { border: 2px solid var(--chalk-line); border-radius: var(--r-soft); padding: 20px 22px; }
.pack h3 { font-family: var(--font-hand); font-size: 1.9rem; }
.pack .serves { font-family: var(--font-ui); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-3); }
.pack .pp { font-family: var(--font-hand); font-size: 2rem; color: var(--brand); margin: 8px 0 10px; }
.pack .pp small { font-family: var(--font-ui); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--chalk-3); }
.pack ul { list-style: none; color: var(--chalk-2); font-size: .95rem; margin: 8px 0 12px; }

/* ── Story ──────────────────────────────────────────────────────────────────── */
.story { display: grid; grid-template-columns: 1.3fr 1fr; gap: 44px; align-items: start; }
.story p { color: var(--chalk-2); margin-bottom: .8em; max-width: 62ch; }
.story .sign { font-family: var(--font-hand); font-size: 1.7rem; color: var(--brand); margin-top: 20px; }
.storyside { border: 2px solid var(--chalk-line); border-radius: var(--r-soft); padding: 24px 26px; }
.storyside dl { display: grid; gap: 14px; }
.storyside dt { font-family: var(--font-ui); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--chalk-3); }
.storyside dd { font-family: var(--font-hand); font-size: 1.8rem; color: var(--brand); line-height: 1.1; }

/* ── Visit + reserve ────────────────────────────────────────────────────────── */
.visit { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.vcard { border: 2px solid var(--chalk-line); border-radius: var(--r-soft); padding: 22px 24px; }
.vcard h3 { font-family: var(--font-ui); font-size: .68rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brand-2); margin-bottom: 12px; }
.vcard address { font-style: normal; font-family: var(--font-hand); font-size: 1.5rem; line-height: 1.3; }
.vcard .hours { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 4px 14px; font-size: .95rem; }
.vcard .hours dd { overflow-wrap: anywhere; }
.vcard .hours dt { font-family: var(--font-ui); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--chalk-3); }
.vcard .hours .today { color: var(--brand); }
.vcard .hours dt.today { position: relative; }
.vcard .hours dt.today::after { content: ""; position: absolute; inset: -4px -7px; border: 2px solid var(--brand);
  border-radius: 40% 55% 45% 50% / 55% 45% 55% 45%; opacity: .55; }
.vcard p { color: var(--chalk-2); font-size: .95rem; }
.vcard .mapbox { border: 1px solid var(--chalk-line); border-radius: 12px; overflow: hidden; margin: 12px 0; }
.vcard .mapbox iframe { width: 100%; height: 150px; border: 0; filter: grayscale(1) invert(.9) contrast(.9); }
.vcard a.inline { display: inline-block; font-family: var(--font-ui); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand); border-bottom: 1px solid currentColor; margin-top: 10px; }
.qrbox { text-align: center; }
.qrbox img { width: 136px; height: 136px; margin: 0 auto 10px; background: var(--chalk);
  padding: 8px; border-radius: 14px; }
.reserve { border: 2px solid var(--chalk-line); border-radius: var(--r-soft); padding: 28px; }
.reserve form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.reserve label { display: grid; gap: 6px; font-family: var(--font-ui); font-size: .64rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-3); }
.reserve label.wide { grid-column: 1 / -1; }
.reserve input { font-family: var(--font-hand); font-size: 1.25rem; color: var(--chalk); background: none;
  border: 2px solid var(--chalk-line); border-radius: 14px; padding: 9px 14px; }
.reserve input:focus { border-color: var(--brand); outline: none; }
.reserve input::placeholder { color: var(--chalk-3); }
.reserve .btn { grid-column: 1 / -1; }

/* ── Closing + foot ─────────────────────────────────────────────────────────── */
.closing { text-align: center; padding: 70px 0 40px; }
.closing h2 { margin-bottom: 14px; }
.closing .sub { margin: 0 auto 26px; }
.closing .acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.foot { border-top: 1px solid var(--chalk-line); margin-top: 46px; padding: 20px 0 40px;
  font-family: var(--font-ui); font-size: .72rem; letter-spacing: .06em; color: var(--chalk-3);
  display: flex; gap: 16px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.foot .socials { display: flex; gap: 14px; text-transform: uppercase; }
.foot a:hover { color: var(--chalk); }

/* ── Dock: a chalk tray along the bottom ────────────────────────────────────── */
.dock { position: fixed; inset-inline: 0; bottom: 0; z-index: 45; background: rgba(22,28,24,.96);
  border-top: 2px solid var(--chalk-line); backdrop-filter: blur(8px); }
.dock .wrap { display: flex; align-items: center; gap: 14px; padding: 12px 0; flex-wrap: wrap; }
.dock .cnt { font-family: var(--font-ui); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--chalk-3); }
.dock .sum { font-family: var(--font-hand); font-size: 1.8rem; color: var(--brand); }
.dock .spacer { flex: 1; }
.dock button.link { font-family: var(--font-ui); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  background: none; border: 0; color: var(--chalk-3); cursor: pointer; border-bottom: 1px solid currentColor; }
.dock button.link:hover { color: var(--chalk); }
body.has-dock { padding-bottom: 76px; }

/* ── Floor overlays, chalked. No images anywhere — sheetImages/promoImages off ─ */
.wsf-sheet, .wsf-promo { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 22px; }
.wsf-sheet-back, .wsf-promo-back { position: absolute; inset: 0; background: rgba(10,14,12,.72); }
.wsf-sheet-card, .wsf-promo-card { position: relative; z-index: 1; width: min(560px, 100%); max-height: 88vh;
  overflow: auto; background: var(--slate-2); border: 2px solid var(--chalk-line);
  border-radius: var(--r-soft); box-shadow: 0 40px 90px -40px #000; }
.wsf-sheet-close, .wsf-promo-close { position: absolute; top: 12px; inset-inline-end: 14px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--chalk-line); background: none;
  color: var(--chalk); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.wsf-sheet-media, .wsf-promo-media { display: none; }   /* T03 never renders photography */
.wsf-sheet-body, .wsf-promo-body { padding: 30px 32px; }
.wsf-sh-cat { font-family: var(--font-ui); font-size: .66rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brand-2); }
.wsf-sheet-body h3, .wsf-promo-body h3 { font-family: var(--font-hand); font-size: 2.8rem; line-height: 1.02; margin: 10px 0 4px; }
.wsf-sh-alt { font-family: var(--font-hand); font-size: 1.5rem; color: var(--chalk-3); margin-bottom: 12px; }
.wsf-sh-alt:empty { display: none; }
.wsf-sh-story, .wsf-promo-body p { color: var(--chalk-2); }
.wsf-facts { display: grid; gap: 10px; border-top: 1px dashed var(--chalk-line); margin-top: 20px; padding-top: 16px; }
.wsf-facts > div { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; }
.wsf-facts dt { font-family: var(--font-ui); font-size: .64rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--chalk-3); }
.wsf-facts dd { font-family: var(--font-hand); font-size: 1.25rem; }
.wsf-heat { display: inline-flex; align-items: center; gap: 5px; }
.wsf-heat i { width: 18px; height: 6px; border-radius: var(--r-pill); background: var(--chalk-line); }
.wsf-heat i.on { background: var(--brand); }
.wsf-heat span { font-family: var(--font-ui); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--chalk-3); margin-inline-start: 7px; }
.wsf-pairs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.wsf-pairs:empty { display: none; }
.wsf-pairs-label { width: 100%; font-family: var(--font-ui); font-size: .64rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-3); }
.wsf-pairs button { font-family: var(--font-hand); font-size: 1.2rem; border: 2px solid var(--chalk-line);
  background: none; color: var(--chalk-2); padding: 5px 15px; border-radius: var(--r-pill); cursor: pointer; }
.wsf-pairs button:hover { border-color: var(--chalk); color: var(--chalk); }
.wsf-sheet-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-top: 2px solid var(--chalk-line); margin-top: 22px; padding-top: 16px; }
.wsf-sh-price { font-family: var(--font-hand); font-size: 2.4rem; color: var(--brand); }
.wsf-sh-add { font-family: var(--font-ui); font-weight: 700; font-size: .76rem; letter-spacing: .12em;
  text-transform: uppercase; background: var(--wa); color: #08150D; border: 0; padding: 13px 24px;
  border-radius: var(--r-pill); cursor: pointer; }
.wsf-promo-body { text-align: center; }
.wsf-promo-badge { display: inline-block; font-family: var(--font-ui); font-size: .62rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--slate); background: var(--brand);
  padding: 6px 14px; border-radius: var(--r-pill); }
.wsf-promo-price { font-family: var(--font-hand); font-size: 2.6rem; color: var(--brand); margin-top: 12px; }
.wsf-promo-price s { font-size: 1.3rem; color: var(--chalk-3); margin-inline-start: 10px; }
.wsf-promo-cta { display: block; margin-top: 18px; background: var(--wa); color: #08150D;
  font-family: var(--font-ui); font-weight: 700; font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; padding: 14px; border-radius: var(--r-pill); }
.wsf-promo-skip { display: block; margin: 12px auto 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--chalk-3); }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .ask, .table2, .maya, .feasts, .story { grid-template-columns: 1fr; gap: 30px; }
  .board { columns: 1; }
  .guests { columns: 2; }
  .howto { grid-template-columns: 1fr; }
  .howto div { border-inline-end: 0; border-bottom: 1px dashed var(--chalk-line); }
}
@media (max-width: 680px) {
  body { font-size: 17px; --frame: 8px; }
  .frame-b::after { left: 50%; translate: -50% 0; width: 96px; }
  .wrap { width: calc(100% - 30px); }
  .top .name { font-size: 1.4rem; }
  .top nav { display: none; }
  /* name + order on one row; the language switch gets its own, so the four scripts all fit */
  .top .wrap { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; }
  .top .lang { grid-column: 1 / -1; justify-self: start; }
  .top .lang button { padding: 4px 9px; font-size: .68rem; }
  .boardtools { top: 88px; }
  .sec { padding: 42px 0; }
  .splash { min-height: 88svh; padding: 34px 0 30px; }
  .guests { columns: 1; }
  .sig { grid-template-columns: auto 1fr; }
  .sig .pr { grid-column: 2; margin-top: 2px; }
  .sig .body, .sig .go { grid-column: 1 / -1; }
  .boardtools { top: 44px; }
  .boardsearch { width: 120px; }
  .reserve form { grid-template-columns: 1fr; }
  .wsf-sheet, .wsf-promo { padding: 0; place-items: end stretch; }
  .wsf-sheet-card, .wsf-promo-card { width: 100%; max-height: 92vh; border-radius: var(--r-soft) var(--r-soft) 0 0; }
  .dock .sum { font-size: 1.5rem; }
}


/* ── Touch targets ──────────────────────────────────────────────────────────────
   A chalkboard is read at arm's length on a phone, so the controls need the same
   44px as everywhere else. The chalk look is unchanged; only the hit area grows. */
@media (pointer: coarse), (max-width: 680px) {
  .lang button, .catrail button, .chips button, .party button,
  .bitem .plus, .vcard a.inline, .dock button.link, .top .name,
  .sig .btn, .today a, .btn { min-height: 44px; }
  .lang button, .catrail button { padding: 10px 14px; }
  .chips button, .party button { min-height: 48px; }
  .tablecard .qty button { width: 44px; height: 44px; }
  .bitem .plus { display: inline-flex; align-items: center; padding-block: 8px; }
  .vcard a.inline, .dock button.link, .foot a { display: inline-flex; align-items: center; min-height: 44px; }
  .top .name { display: inline-flex; align-items: center; }
}