/* T02 Broadsheet — the restaurant as a newspaper.
   Matrix row: multi-page · type-only masthead · editorial columns · STILL · dense · framed+matted · serif.
   Nothing here animates. Softness lives only in the modern furniture (order panel, sheet, buttons,
   forms) so the standing soft-geometry requirement is met without rounding the newsprint itself. */
:root {
  --font-head: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-label: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-head);          /* brand-tokens.js overrides from tenant data */

  --paper: #F5F2EA;
  --paper-2: #ECE7DB;
  --paper-3: #E2DCCC;
  --ink: #16150F;
  --ink-2: #3C3A31;
  --ink-3: #625E52;             /* was #6E6A5D — 4.4:1, just under the 4.5 floor */
  --rule: #CFC7B5;
  --rule-hard: #16150F;
  --brand: #A81D18;                          /* printer's red; tenant --brand overrides */
  --brand-dark: #7C1310;
  --wa: #0F7A40;   /* white text needs 4.5:1; #128C4A gives 4.31 */
  --r-soft: 22px;
  --r-pill: 99px;
  --brand-ink: #fff;                /* brand-tokens.js flips this on a light brand */
  --brand-readable: var(--brand);   /* brand-tokens.js darkens this when the brand fails AA */
  --brand-on-dark: var(--brand);    /* and lightens it for dark panels */                /* brand-tokens.js flips this on a light brand */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--font-body);
  font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(rgba(22,21,15,.022) 1px, transparent 1px);
  background-size: 3px 3px;
}
body.wsf-locked { overflow: hidden; }
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
*:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
/* 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(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r-pill); z-index: 99; }
.rtl-text { direction: rtl; }

/* Mixed-language safety — see the note in t03's stylesheet. English fallback text inside an RTL
   page must resolve its own direction, or its punctuation lands at the wrong end. */
.dish .nm, .dish .ds, .plate h3, .plate p, .lead h2, .lead .deck, .lead .body p, .letter blockquote,
.letter figcaption, .notice h3, .notice p, .cat h2, .railbox li b, .railbox li small, .verdict h4,
.verdict p, .tdh li .nm, .story p, .story h2, .story h3, .pack h4, .vcard address, .vcard p,
.contact figcaption b, .fixtures .what b, .fixtures .what small, .howto li, .deck,
.wsf-sheet-body h3, .wsf-sh-alt, .wsf-sh-story, .wsf-facts dd, .wsf-pairs button,
.wsf-promo-body h3, .wsf-promo-body p {
  unicode-bidi: plaintext;
}
h1, h2, h3, .kicker, .byline, .masthead .motto, .masthead .estab { unicode-bidi: plaintext; }


.paper { width: min(1280px, 100% - 40px); margin: 0 auto; }

/* ── Masthead: type only, no imagery, on every page ─────────────────────────── */
.folio { border-bottom: 1px solid var(--rule); font-family: var(--font-label); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.folio .paper { display: flex; gap: 18px; align-items: center; justify-content: space-between; padding: 7px 0; flex-wrap: wrap; }
.folio .lang { display: inline-flex; border: 1px solid var(--rule); border-radius: var(--r-pill); padding: 2px; }
.folio .lang button { font: inherit; font-size: .7rem; letter-spacing: .06em; border: 0; background: none;
  color: var(--ink-3); padding: 4px 10px; border-radius: var(--r-pill); cursor: pointer; }
.folio .lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.masthead { border-bottom: 3px double var(--rule-hard); padding: 22px 0 14px; text-align: center; }
.masthead h1 { font-family: var(--font-head); font-weight: 900; font-size: clamp(2.6rem, 8.5vw, 6.2rem);
  line-height: .92; letter-spacing: -.02em; }
.masthead .motto { font-style: italic; color: var(--ink-2); font-size: clamp(1rem, 1.6vw, 1.22rem); margin-top: 6px; }
.masthead .estab { font-family: var(--font-label); font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brand); margin-top: 10px; }

.sections { border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 30;
  background: var(--paper); box-shadow: 0 1px 0 var(--rule); }
.sections .paper { display: flex; align-items: center; gap: 4px; }
.seclinks { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1; justify-content: center; }
.sections a:not(.btn) { font-family: var(--font-label); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 12px 16px; color: var(--ink-2); border-bottom: 3px solid transparent; }
.sections a:not(.btn):hover { color: var(--brand); }
.sections a:not(.btn)[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand); font-weight: 700; }
.sections .order { margin-inline-start: auto; }
.sections .order .btn { margin: 6px 0; }

/* Dispatch: tonight's live signals, set as a wire strip */
.dispatch { background: var(--ink); color: var(--paper); font-family: var(--font-label);
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }
.dispatch .paper { display: flex; gap: 26px; flex-wrap: wrap; padding: 9px 0; }
.dispatch span { display: inline-flex; align-items: center; gap: 8px; }
.dispatch span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
.dispatch span:first-child::before { background: #6FD08C; }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-label); font-weight: 700; font-size: .84rem; letter-spacing: .06em;
  padding: 12px 22px; border-radius: var(--r-pill); border: 1.5px solid transparent; cursor: pointer; }
.btn svg { width: 17px; height: 17px; }
.btn-wa { background: var(--wa); color: #fff; }   /* --wa is 5.4:1 with white; see :root */
.btn-wa:hover { background: #0D6E39; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--brand); }
.btn-ghost { border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-sm { padding: 8px 15px; font-size: .74rem; }

/* ── Editorial furniture ────────────────────────────────────────────────────── */
.kicker { font-family: var(--font-label); font-size: .7rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brand); }
.rule-head { border-top: 2px solid var(--rule-hard); border-bottom: 1px solid var(--rule);
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 7px 0; margin: 34px 0 18px; flex-wrap: wrap; }
.rule-head h2 { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1; }
.rule-head .note { font-family: var(--font-label); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3); }
.deck { font-style: italic; color: var(--ink-2); font-size: 1.1rem; }
.byline { font-family: var(--font-label); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }

/* Framed and matted: a printed plate, not a web photo */
.framed { background: #fff; padding: 11px 11px 0; border: 1px solid var(--rule); box-shadow: 0 1px 0 rgba(0,0,0,.05); }
.framed img, .framed video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.92) contrast(1.03); }
.framed figcaption { font-family: var(--font-label); font-size: .72rem; line-height: 1.4; color: var(--ink-3);
  padding: 8px 2px 10px; border-top: 1px solid var(--rule); margin-top: 10px; }
.framed figcaption b { color: var(--ink); font-weight: 700; }

/* ── Front page ─────────────────────────────────────────────────────────────── */
.front { display: grid; grid-template-columns: 1.55fr 1fr; gap: 0 38px; padding: 26px 0 8px; }
.front > * { min-width: 0; }
.lead { border-inline-end: 1px solid var(--rule); padding-inline-end: 38px; }
.lead h2 { font-family: var(--font-head); font-weight: 900; font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  line-height: 1.02; letter-spacing: -.02em; margin: 10px 0 12px; }
.lead h2 em { font-style: italic; color: var(--brand); }
.lead .deck { margin-bottom: 14px; }
.lead .body { column-count: 2; column-gap: 30px; column-rule: 1px solid var(--rule); margin-top: 14px; }
.lead .body p { text-indent: 1.2em; margin-bottom: .5em; }
.lead .body p:first-child { text-indent: 0; }
.lead .body p:first-child::first-letter { font-family: var(--font-head); font-weight: 900; float: left;
  font-size: 3.1em; line-height: .8; padding: .06em .09em 0 0; color: var(--brand); }
.lead .tags { display: flex; gap: 7px; flex-wrap: wrap; margin: 14px 0 0; font-family: var(--font-label); }
.lead .tags span { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--rule); padding: 5px 11px; border-radius: var(--r-pill); color: var(--ink-2); }
.lead .tags .halal { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.lead .acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* The order panel — the moat, boxed above the fold. Soft geometry lives here. */
.howto { background: var(--ink); color: var(--paper); border-radius: var(--r-soft); padding: 24px 22px; }
.howto .kicker { color: #8FE0A9; }
.howto h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.62rem; line-height: 1.1; margin: 8px 0 16px; }
.howto ol { list-style: none; counter-reset: s; display: grid; gap: 13px; }
.howto li { counter-increment: s; display: grid; grid-template-columns: 27px 1fr; gap: 12px; align-items: start;
  font-size: .96rem; line-height: 1.35; }
.howto li::before { content: counter(s); font-family: var(--font-label); font-weight: 700; font-size: .78rem;
  width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); }
.howto .speaks { font-family: var(--font-label); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(245,242,234,.6); margin: 16px 0 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.14); }
.howto .speaks b { color: var(--paper); display: block; letter-spacing: .02em; text-transform: none;
  font-family: var(--font-body); font-size: 1rem; margin-top: 5px; }
.howto .btn { width: 100%; }
.howto .fineprint { font-size: .8rem; color: rgba(245,242,234,.62); text-align: center; margin-top: 10px; font-style: italic; }

.railbox { border: 1px solid var(--rule); background: #fff; border-radius: var(--r-soft); padding: 18px 20px; margin-top: 20px; }
.railbox h3 { font-family: var(--font-head); font-size: 1.2rem; font-weight: 800; margin-bottom: 4px; }
.railbox .kicker { display: block; margin-bottom: 8px; }
.railbox ul { list-style: none; display: grid; gap: 10px; margin-top: 12px; }
.railbox li { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: baseline;
  border-bottom: 1px dotted var(--rule); padding-bottom: 9px; font-size: .95rem; }
.railbox li:last-child { border-bottom: 0; padding-bottom: 0; }
.railbox li b { font-weight: 700; }
.railbox li small { display: block; color: var(--ink-3); font-size: .82rem; font-style: italic; }
.railbox .price { font-family: var(--font-label); font-weight: 700; color: var(--brand); white-space: nowrap; }

/* Stop press: a set rule of dish names, not a marquee (Still) */
.stoppress { border-top: 2px solid var(--rule-hard); border-bottom: 2px solid var(--rule-hard);
  padding: 9px 0; margin-top: 22px; font-family: var(--font-label); font-size: .76rem;
  letter-spacing: .08em; text-transform: uppercase; overflow: hidden; }
.stoppress .paper { display: flex; gap: 0 22px; flex-wrap: wrap; align-items: baseline; }
.stoppress .lbl { color: var(--brand); font-weight: 700; }
.stoppress span b { font-weight: 700; }
.stoppress span i { font-style: normal; color: var(--ink-3); }

/* Recommendations: framed plates, three across */
.plates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.plate h3 { font-family: var(--font-head); font-size: 1.32rem; font-weight: 800; line-height: 1.15; margin: 12px 0 6px; }
.plate p { font-size: .95rem; color: var(--ink-2); }
.plate .foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--rule); margin-top: 11px; padding-top: 10px; flex-wrap: wrap; }
.plate .price { font-family: var(--font-head); font-weight: 800; font-size: 1.32rem; }
.plate .links { display: flex; gap: 8px; }
.plate button { font-family: var(--font-label); font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  border: 1.5px solid var(--rule); background: none; color: var(--ink-2); padding: 7px 13px;
  border-radius: var(--r-pill); cursor: pointer; }
.plate button:hover { border-color: var(--ink); color: var(--ink); }
.plate button.add { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Picture page: the contact sheet */
.contact { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.contact figure { background: #fff; border: 1px solid var(--rule); padding: 7px 7px 0; cursor: pointer; }
.contact img { width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.9) contrast(1.04); }
.contact figcaption { font-family: var(--font-label); font-size: .66rem; line-height: 1.3; padding: 6px 1px 8px;
  display: flex; justify-content: space-between; gap: 6px; }
.contact figcaption b { font-weight: 700; }
.contact figcaption span { color: var(--brand); }
.contact figure:hover { border-color: var(--ink); }

/* Fixtures (weekly rituals), set as a schedule table */
.fixtures { width: 100%; border-collapse: collapse; font-size: .97rem; }
.fixtures th { font-family: var(--font-label); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-3); text-align: start; border-bottom: 1px solid var(--rule); padding: 0 10px 7px 0; font-weight: 700; }
.fixtures td { border-bottom: 1px dotted var(--rule); padding: 11px 10px 11px 0; vertical-align: baseline; }
.fixtures tr.today td { background: var(--paper-2); }
.fixtures .day { font-family: var(--font-label); font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; white-space: nowrap; }
.fixtures tr.today .day { color: var(--brand); }
.fixtures .what b { font-weight: 700; } .fixtures .what small { display: block; color: var(--ink-3); font-style: italic; }
.fixtures .price { font-family: var(--font-label); font-weight: 700; white-space: nowrap; }
.fixtures .price s { color: var(--ink-3); font-weight: 400; margin-inline-start: 5px; }
.fixtures td a { font-family: var(--font-label); font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  color: var(--brand); border-bottom: 1px solid currentColor; white-space: nowrap; }

/* Classified: three-tap "find your dish" */
.classified { display: grid; grid-template-columns: 1fr 1.1fr; gap: 34px; align-items: start;
  border: 2px solid var(--rule-hard); border-radius: var(--r-soft); padding: 26px; background: #fff; }
.classified .qs { display: grid; gap: 15px; }
.classified .q { display: grid; gap: 7px; }
.classified .q > span { font-family: var(--font-label); font-size: .68rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chips button { font-family: var(--font-body); font-size: .95rem; border: 1.5px solid var(--rule);
  background: var(--paper); color: var(--ink-2); padding: 8px 15px; border-radius: var(--r-pill); cursor: pointer; }
.chips button:hover { border-color: var(--ink); }
.chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.verdict { border: 1px solid var(--rule); border-radius: var(--r-soft); overflow: hidden; background: var(--paper); }
.verdict .empty { padding: 30px 22px; color: var(--ink-3); font-style: italic; font-size: .97rem; }
.verdict img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.verdict .vb { padding: 18px 20px; }
.verdict .why { font-family: var(--font-label); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.verdict h4 { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; margin: 7px 0 6px; }
.verdict p { font-size: .95rem; color: var(--ink-2); }
.verdict .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.verdict .price { font-family: var(--font-head); font-weight: 800; font-size: 1.4rem; }

/* Letters (guest wall) */
.letters { columns: 3; column-gap: 26px; }
.letter { break-inside: avoid; border-top: 1px solid var(--rule); padding: 14px 0 16px; }
.letter:first-child { border-top: 0; padding-top: 0; }
.letter blockquote { font-size: 1.02rem; line-height: 1.45; }
.letter blockquote::before { content: "\201C"; font-family: var(--font-head); font-size: 2.2em; line-height: 0;
  color: var(--brand); vertical-align: -.3em; margin-inline-end: 3px; }
.letter figcaption { font-family: var(--font-label); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 9px; }
.letter figcaption b { color: var(--ink); }
.letter.featured { background: var(--brand); color: #fff; border-radius: var(--r-soft); padding: 20px; border: 0; }
.letter.featured blockquote::before, .letter.featured figcaption b { color: #fff; }
.letter.featured figcaption { color: rgba(255,255,255,.75); }
.score { display: flex; align-items: baseline; gap: 10px; font-family: var(--font-label); }
.score b { font-family: var(--font-head); font-size: 2rem; font-weight: 800; }
.score .stars { color: var(--brand); letter-spacing: .1em; }
.score small { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* Switchboard (Maya) */
.switchboard { display: grid; grid-template-columns: 1fr 340px; gap: 38px; align-items: start; }
.switchboard .promises { list-style: none; display: grid; gap: 11px; margin-top: 14px; }
.switchboard .promises li { border-inline-start: 3px solid var(--brand); padding-inline-start: 13px; font-size: .98rem; }
.switchboard .promises b { display: block; font-family: var(--font-label); font-size: .76rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; }
.switchboard .promises span { color: var(--ink-2); }
.chat { background: var(--ink); border-radius: var(--r-soft); padding: 16px; color: var(--paper); }
.chat .top { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.14); }
.chat .top i { width: 34px; height: 34px; border-radius: 50%; background: var(--wa); display: grid; place-items: center;
  font-style: normal; font-family: var(--font-label); font-weight: 700; }
.chat .top b { font-family: var(--font-label); font-size: .88rem; display: block; }
.chat .top small { font-size: .72rem; color: #8FE0A9; }
.chat .msgs { display: grid; gap: 7px; padding: 14px 0 4px; }
.chat .bub { max-width: 84%; padding: 9px 13px; border-radius: 16px; font-size: .9rem; line-height: 1.35; }
.chat .in { background: rgba(255,255,255,.1); border-end-start-radius: 5px; }
.chat .out { background: var(--wa); color: #fff; justify-self: end; border-end-end-radius: 5px; }

/* Visit box + QR */
.visit { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.vcard { border: 1px solid var(--rule); border-radius: var(--r-soft); background: #fff; padding: 18px 20px; }
.vcard h3 { font-family: var(--font-label); font-size: .7rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
.vcard address { font-style: normal; font-size: 1rem; line-height: 1.45; }
.vcard .hours { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 3px 14px; font-size: .92rem; }
.vcard .hours dd { overflow-wrap: anywhere; }
.vcard .hours dt { font-family: var(--font-label); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.vcard .hours .today { color: var(--brand); font-weight: 700; }
.vcard .mapbox { margin: 12px 0; border: 1px solid var(--rule); }
.vcard .mapbox iframe { width: 100%; height: 150px; border: 0; filter: saturate(.85); }
.vcard p { font-size: .93rem; color: var(--ink-2); }
.vcard a.inline { display: inline-block; font-family: var(--font-label); font-size: .76rem; font-weight: 700;
  letter-spacing: .06em; color: var(--brand); border-bottom: 1px solid currentColor; margin-top: 10px; }
.vcard img.qr { width: 132px; height: 132px; margin: 4px auto 8px; border: 1px solid var(--rule); padding: 6px; background: #fff; }
.vcard .big { font-family: var(--font-head); font-size: 2.2rem; font-weight: 800; }

/* Closing */
.closing { border-top: 3px double var(--rule-hard); margin-top: 40px; padding: 40px 0 26px; text-align: center; }
.closing h2 { font-family: var(--font-head); font-weight: 900; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.05; }
.closing h2 em { font-style: italic; color: var(--brand); }
.closing .deck { margin: 10px auto 20px; max-width: 46ch; }
.closing .acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.colophon { border-top: 1px solid var(--rule); margin-top: 34px; padding: 18px 0 40px;
  font-family: var(--font-label); font-size: .74rem; letter-spacing: .06em; color: var(--ink-3);
  display: flex; gap: 16px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.colophon a:not(.btn) { border-bottom: 1px solid var(--rule); }
.colophon a:hover { color: var(--brand); }
.colophon .socials { display: flex; gap: 12px; text-transform: uppercase; }

/* ── Menu page ──────────────────────────────────────────────────────────────── */
.menutools { position: sticky; top: 45px; z-index: 20; background: var(--paper);
  border-bottom: 1px solid var(--rule); padding: 10px 0; }
.menutools .paper { display: flex; gap: 14px; align-items: center; }
.catrail { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; }
.catrail::-webkit-scrollbar { display: none; }
.catrail button { font-family: var(--font-label); font-size: .74rem; letter-spacing: .06em; white-space: nowrap;
  border: 0; background: none; color: var(--ink-2); padding: 7px 12px; border-radius: var(--r-pill); cursor: pointer; }
.catrail button small { color: var(--ink-3); }
.catrail button:hover { background: var(--paper-2); }
.catrail button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.catrail button[aria-pressed="true"] small { color: rgba(245,242,234,.6); }
.msearch { border: 1.5px solid var(--rule); border-radius: var(--r-pill); padding: 8px 16px; background: #fff;
  font: inherit; font-size: .9rem; width: 220px; }
.msearch:focus { border-color: var(--ink); outline: none; }

.menupage { columns: 2; column-gap: 46px; column-rule: 1px solid var(--rule); padding: 22px 0 10px; }
.cat { break-inside: avoid-column; margin-bottom: 30px; }
.cat h2 { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; border-bottom: 2px solid var(--rule-hard);
  padding-bottom: 5px; margin-bottom: 4px; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cat h2 span { font-family: var(--font-label); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; }
.cat .catdesc { font-style: italic; color: var(--ink-3); font-size: .9rem; margin-bottom: 10px; }
.dish { padding: 9px 0; border-bottom: 1px dotted var(--rule); cursor: pointer; }
.dish:hover { background: var(--paper-2); }
.dish .line { display: flex; align-items: baseline; gap: 6px; }
.dish .nm { font-weight: 600; }
.dish .nm em { font-style: normal; font-family: var(--font-label); font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand); margin-inline-start: 6px; vertical-align: .12em; }
.dish .dots { flex: 1; border-bottom: 2px dotted var(--rule); translate: 0 -5px; min-width: 18px; opacity: .9; }
.dish .pr { font-family: var(--font-label); font-weight: 700; font-size: .92rem; }
.dish .ds { display: block; font-size: .88rem; color: var(--ink-3); line-height: 1.35; margin-top: 2px; }
.dish .add { font-family: var(--font-label); font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  color: var(--brand); background: none; border: 0; cursor: pointer; padding: 2px 0; margin-top: 3px;
  border-bottom: 1px solid currentColor; }
.dish.soldout { opacity: .45; }

/* Table d'hôte — the order form */
.tdh { display: grid; grid-template-columns: 1fr 1.05fr; gap: 34px; align-items: start;
  border: 2px solid var(--rule-hard); border-radius: var(--r-soft); padding: 26px; background: #fff; margin-top: 10px; }
.tdh .party { display: flex; gap: 7px; margin: 14px 0 16px; flex-wrap: wrap; }
.tdh .party button { font-family: var(--font-head); font-size: 1.1rem; font-weight: 800; width: 50px; height: 44px;
  border: 1.5px solid var(--rule); background: var(--paper); border-radius: var(--r-pill); cursor: pointer; }
.tdh .party button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tdh .budget { display: block; font-family: var(--font-label); font-size: .7rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.tdh .budget b { font-family: var(--font-head); font-size: 1.3rem; color: var(--ink); letter-spacing: 0; margin-inline-start: 8px; }
.tdh .budget input { width: 100%; margin-top: 10px; accent-color: var(--brand); }
.tdh .hint { font-size: .9rem; color: var(--ink-3); font-style: italic; margin-top: 12px; }
.tdh ul { list-style: none; }
.tdh li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  border-bottom: 1px dotted var(--rule); padding: 9px 0; font-size: .95rem; }
.tdh li.empty { display: block; color: var(--ink-3); font-style: italic; border: 0; padding: 14px 0; }
.tdh li .nm small { display: block; font-family: var(--font-label); font-size: .64rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); }
.tdh li .qty { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-label); font-weight: 700; }
.tdh li .qty button { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--rule);
  background: var(--paper); font: inherit; cursor: pointer; line-height: 1; }
.tdh li .qty button:hover { border-color: var(--ink); }
.tdh li .pr { font-family: var(--font-label); font-weight: 700; min-width: 58px; text-align: end; }
.tdh .total { display: flex; justify-content: space-between; align-items: baseline;
  border-top: 2px solid var(--rule-hard); margin-top: 8px; padding-top: 12px; margin-bottom: 14px; }
.tdh .total span { font-family: var(--font-label); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.tdh .total b { font-family: var(--font-head); font-size: 1.9rem; font-weight: 800; }
.tdh .btn { width: 100%; }
.tdh .paynote { font-size: .84rem; color: var(--ink-3); font-style: italic; text-align: center; margin-top: 10px; }

/* Dock — a ribbon across the foot of the page */
.dock { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; background: var(--ink); color: var(--paper);
  border-top: 3px double var(--paper-3); }
.dock .paper { display: flex; align-items: center; gap: 16px; padding: 11px 0; flex-wrap: wrap; }
.dock .cnt { font-family: var(--font-label); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.dock .sum { font-family: var(--font-head); font-size: 1.3rem; font-weight: 800; }
.dock .spacer { flex: 1; }
.dock button.link { font-family: var(--font-label); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  background: none; border: 0; color: rgba(245,242,234,.7); cursor: pointer; border-bottom: 1px solid currentColor; }
.dock button.link:hover { color: var(--paper); }
body.has-dock { padding-bottom: 70px; }

/* ── Story page ─────────────────────────────────────────────────────────────── */
.story { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0 40px; padding: 26px 0; }
.story .col { border-inline-end: 1px solid var(--rule); padding-inline-end: 40px; }
.story h2 { font-family: var(--font-head); font-weight: 900; font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.05; margin: 8px 0 12px; }
.story h2 em { font-style: italic; color: var(--brand); }
.story h3 { font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; margin: 26px 0 8px; }
.story p { margin-bottom: .75em; }
.story .col > figure { margin: 20px 0; }
.story .sign { font-family: var(--font-head); font-style: italic; font-size: 1.15rem; color: var(--brand); margin-top: 18px; }
.banquet { border: 2px solid var(--rule-hard); border-radius: var(--r-soft); padding: 22px; background: #fff; }
.banquet h3 { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; margin: 6px 0 8px; }
.banquet ul { list-style: none; display: grid; gap: 7px; margin: 12px 0 16px; font-size: .95rem; }
.banquet ul li { padding-inline-start: 18px; position: relative; }
.banquet ul li::before { content: "\2726"; position: absolute; inset-inline-start: 0; color: var(--brand); font-size: .8em; }
.packs { display: grid; gap: 12px; margin-top: 16px; }
.pack { border: 1px solid var(--rule); border-radius: 14px; padding: 14px 16px; }
.pack h4 { font-family: var(--font-head); font-size: 1.12rem; font-weight: 800; }
.pack .serves { font-family: var(--font-label); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.pack .pp { font-family: var(--font-head); font-size: 1.3rem; font-weight: 800; margin: 6px 0 8px; }
.pack .pp small { font-family: var(--font-label); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* ── Events page ────────────────────────────────────────────────────────────── */
.events { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0 40px; padding: 26px 0; }
.events .col { border-inline-end: 1px solid var(--rule); padding-inline-end: 40px; }
.notice { border-bottom: 1px solid var(--rule); padding: 20px 0; display: grid; grid-template-columns: 200px 1fr; gap: 22px; }
.notice:first-child { padding-top: 0; }
.notice.nophoto { grid-template-columns: 1fr; }
.notice h3 { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; line-height: 1.12; margin-bottom: 6px; }
.notice .when { font-family: var(--font-label); font-size: .7rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brand); }
.notice p { color: var(--ink-2); font-size: .98rem; margin: 7px 0 10px; }
.notice .price { font-family: var(--font-head); font-size: 1.35rem; font-weight: 800; }
.notice .price s { font-family: var(--font-label); font-size: .82rem; color: var(--ink-3); font-weight: 400; margin-inline-start: 7px; }
.notice .acts { display: flex; gap: 9px; margin-top: 11px; flex-wrap: wrap; }

.bookings { border: 2px solid var(--rule-hard); border-radius: var(--r-soft); padding: 24px; background: #fff; }
.bookings h3 { font-family: var(--font-head); font-size: 1.6rem; font-weight: 800; margin: 6px 0 4px; }
.bookings .deck { font-size: .97rem; margin-bottom: 16px; }
.bookings form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bookings label { display: grid; gap: 5px; font-family: var(--font-label); font-size: .68rem;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.bookings label.wide { grid-column: 1 / -1; }
.bookings input { font-family: var(--font-body); font-size: .97rem; color: var(--ink);
  border: 1.5px solid var(--rule); border-radius: 12px; padding: 10px 13px; background: var(--paper); }
.bookings input:focus { border-color: var(--ink); outline: none; background: #fff; }
.bookings .btn { grid-column: 1 / -1; }
.bookings .stat { display: flex; gap: 22px; border-top: 1px solid var(--rule); margin-top: 16px; padding-top: 14px; }
.bookings .stat b { font-family: var(--font-head); font-size: 1.3rem; font-weight: 800; display: block; }
.bookings .stat span { font-family: var(--font-label); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* ── Floor overlays, dressed as print ───────────────────────────────────────── */
.wsf-sheet { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.wsf-sheet-back { position: absolute; inset: 0; background: rgba(22,21,15,.55); }
.wsf-sheet-card { position: relative; z-index: 1; background: var(--paper); border-radius: var(--r-soft);
  border: 1px solid var(--rule); width: min(760px, 100%); max-height: 88vh; overflow: auto;
  display: grid; grid-template-columns: 1fr 1fr; box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.wsf-sheet-close { position: absolute; top: 10px; inset-inline-end: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper);
  font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--ink); }
.wsf-sheet-media { background: #fff; padding: 12px; }
.wsf-sheet-media img { width: 100%; height: 100%; max-height: 420px; object-fit: cover; }
.wsf-sheet-media[hidden] + .wsf-sheet-body { grid-column: 1 / -1; }
.wsf-sheet-body { padding: 26px; }
.wsf-sh-cat { font-family: var(--font-label); font-size: .68rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brand); }
.wsf-sheet-body h3 { font-family: var(--font-head); font-size: 1.9rem; font-weight: 800; line-height: 1.08; margin: 7px 0 2px; }
.wsf-sh-alt { font-size: 1.05rem; color: var(--ink-3); margin-bottom: 10px; }
.wsf-sh-alt:empty { display: none; }
.wsf-sh-story { font-size: .98rem; color: var(--ink-2); }
.wsf-facts { display: grid; gap: 8px; border-top: 1px solid var(--rule); margin-top: 16px; padding-top: 14px; }
.wsf-facts > div { display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: center; }
.wsf-facts dt { font-family: var(--font-label); font-size: .66rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); }
.wsf-facts dd { font-size: .94rem; }
.wsf-heat { display: inline-flex; align-items: center; gap: 4px; }
.wsf-heat i { width: 16px; height: 5px; background: var(--rule); border-radius: var(--r-pill); }
.wsf-heat i.on { background: var(--brand); }
.wsf-heat span { font-family: var(--font-label); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin-inline-start: 6px; }
.wsf-pairs { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.wsf-pairs:empty { display: none; }
.wsf-pairs-label { font-family: var(--font-label); font-size: .66rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); width: 100%; }
.wsf-pairs button { font-family: var(--font-body); font-size: .88rem; border: 1px solid var(--rule);
  background: #fff; padding: 7px 13px; border-radius: var(--r-pill); cursor: pointer; }
.wsf-pairs button:hover { border-color: var(--ink); }
.wsf-sheet-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-top: 2px solid var(--rule-hard); margin-top: 18px; padding-top: 14px; }
.wsf-sh-price { font-family: var(--font-head); font-size: 1.8rem; font-weight: 800; }
.wsf-sh-add { font-family: var(--font-label); font-weight: 700; font-size: .8rem; letter-spacing: .06em;
  background: var(--brand); color: #fff; border: 0; padding: 12px 22px; border-radius: var(--r-pill); cursor: pointer; }
.wsf-sh-add:hover { background: var(--brand-dark); }

.wsf-promo { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; }
.wsf-promo-back { position: absolute; inset: 0; background: rgba(22,21,15,.6); }
.wsf-promo-card { position: relative; z-index: 1; width: min(420px, 100%); background: var(--paper);
  border-radius: var(--r-soft); overflow: hidden; border: 1px solid var(--rule);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.6); }
.wsf-promo-close { position: absolute; top: 10px; inset-inline-end: 12px; z-index: 2; width: 32px; height: 32px;
  border-radius: 50%; border: 0; background: rgba(245,242,234,.9); font-size: 1.15rem; line-height: 1; cursor: pointer; }
.wsf-promo-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.wsf-promo-body { padding: 22px 24px 24px; text-align: center; }
.wsf-promo-badge { display: inline-block; font-family: var(--font-label); font-size: .64rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; background: var(--brand); color: #fff;
  padding: 5px 12px; border-radius: var(--r-pill); }
.wsf-promo-body h3 { font-family: var(--font-head); font-size: 1.7rem; font-weight: 800; line-height: 1.1; margin: 11px 0 7px; }
.wsf-promo-body p { font-size: .96rem; color: var(--ink-2); }
.wsf-promo-price { font-family: var(--font-head); font-size: 1.6rem; font-weight: 800; margin-top: 10px; }
.wsf-promo-price s { font-family: var(--font-label); font-size: .84rem; color: var(--ink-3); font-weight: 400; margin-inline-start: 7px; }
.wsf-promo-cta { display: block; margin-top: 16px; background: var(--wa); color: #fff; font-family: var(--font-label);
  font-weight: 700; font-size: .84rem; letter-spacing: .06em; padding: 13px; border-radius: var(--r-pill); }
.wsf-promo-skip { display: block; margin: 10px auto 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font-label); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* ── Responsive: mobile is the primary screen ───────────────────────────────── */
@media (max-width: 1000px) {
  .front, .story, .events, .switchboard, .classified, .tdh { grid-template-columns: 1fr; gap: 26px; }
  .lead, .story .col, .events .col { border-inline-end: 0; padding-inline-end: 0; }
  .visit { grid-template-columns: repeat(2, 1fr); }
  .plates { grid-template-columns: repeat(2, 1fr); }
  .contact { grid-template-columns: repeat(4, 1fr); }
  .letters { columns: 2; }
  .wsf-sheet-card { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .paper { width: calc(100% - 28px); }
  .masthead { padding: 16px 0 12px; }
  .masthead h1 { font-size: clamp(2.1rem, 11vw, 3.2rem); }
  .folio .paper { justify-content: center; gap: 10px; font-size: .66rem; }
  .folio .edition { display: none; }
  .seclinks { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); }
  .seclinks::-webkit-scrollbar { display: none; }
  .sections .order { flex: none; }
  .sections a:not(.btn) { padding: 11px 12px; font-size: .72rem; }
  .sections .order { margin-inline-start: 0; padding-inline-end: 4px; }
  .dispatch .paper { gap: 6px 18px; font-size: .68rem; }
  .lead .body { column-count: 1; }
  .plates, .visit { grid-template-columns: 1fr; }
  .contact { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .letters { columns: 1; }
  .menupage { columns: 1; }
  .menutools { top: 44px; }
  .menutools .paper { flex-direction: column; align-items: stretch; gap: 9px; }
  .msearch { width: 100%; }
  .notice { grid-template-columns: 1fr; }
  .bookings form { grid-template-columns: 1fr; }
  .fixtures .hide-s { display: none; }
  .wsf-sheet, .wsf-promo { padding: 0; place-items: end stretch; }
  .wsf-sheet-card, .wsf-promo-card { max-height: 92vh; border-radius: var(--r-soft) var(--r-soft) 0 0; width: 100%; }
  .dock .sum { font-size: 1.1rem; }
}
@media print { .sections, .dispatch, .dock, .wsf-sheet, .wsf-promo, .howto .btn { display: none !important; } }

/* ── Touch targets ──────────────────────────────────────────────────────────────
   Same standard as T01: anything a thumb must hit gets ~44px on a phone, while a
   mouse keeps the tighter newsprint spacing. */
@media (pointer: coarse), (max-width: 680px) {
  .folio .lang button, .catrail button, .chips button, .plate button,
  .dish .add, .tdh .party button, .dock button.link, .vcard a.inline,
  .fixtures td a, .notice .btn, .letter a { min-height: 44px; }
  .folio .lang button, .catrail button { padding: 10px 14px; }
  .chips button { padding: 10px 16px; }
  .tdh li .qty button { width: 44px; height: 44px; }
  .sections a:not(.btn) { min-height: 44px; display: inline-flex; align-items: center; }
  .seclinks a { min-height: 44px; }
  .colophon a:not(.btn), .stoppress span { min-height: 44px; display: inline-flex; align-items: center; }
  .contact figure { min-height: 44px; }
  .btn, .btn-sm { min-height: 44px; }
  .fixtures td a, .stoppress span { min-height: 44px; display: inline-flex; align-items: center; }
}