/* ==========================================================================
   Mehr & Mah: Persian Cuisine
   theme.css: design system + components
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Typography & ornaments
   4.  Layout & sections
   5.  Buttons, pills, badges
   6.  Forms
   7.  Header & navigation
   8.  Hero & reservation bar
   9.  Cards & content blocks
   10. Menu experience
   11. Drawers, modals, lightbox
   12. Auth & legal
   13. Footer, cookie bar, utilities
   14. Motion & responsive
   ========================================================================== */

/* 1. Tokens ============================================================== */
:root {
  /* Surface: warm paper tones */
  --cream-50:  #FDFBF7;
  --cream-100: #F9F4EC;
  --cream-200: #F3EBDE;
  --cream-300: #EBE0CE;
  --cream-400: #DFD1B9;
  --paper:     #FFFFFF;

  /* Ink */
  --ink:       #241E18;
  --ink-2:     #3A3129;
  --muted:     #6B6055;   /* AA on every ground the site uses (audit 2026-11-11) */
  --muted-2:   #72675A;   /* was #796E62, 4.2:1 on the gold wash */

  /* Brand: mehr (sun) gold, mah (moon) light */
  --gold:      #A97B3E;   /* brand gold: icons, rules, large figures */
  --gold-cta:  #966C33;   /* button/badge fill: 4.7:1 with white text */
  --gold-deep: #8A6229;   /* small text on light backgrounds */
  --gold-mid:  #C1934F;
  --gold-soft: #E0C79A;
  --gold-wash: #F5EBD9;

  /* Support */
  --espresso:  #211B15;
  --espresso-2:#2E251D;
  --olive:     #5E6B52;
  --plum:      #6B4A46;
  --success:   #4C7A5A;
  --danger:    #A6483C;

  /* Lines */
  --line:      #E4D8C2;
  --line-soft: #EFE7D9;
  --line-dark: rgba(224,199,154,.22);

  /* Radii */
  --r-xs: 3px;
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Shadows: warm, never grey */
  --sh-xs: 0 1px 2px rgba(64,45,20,.05);
  --sh-sm: 0 2px 8px rgba(64,45,20,.06);
  --sh-md: 0 10px 28px -12px rgba(64,45,20,.20);
  --sh-lg: 0 24px 56px -24px rgba(50,34,12,.32);
  --sh-gold: 0 12px 28px -12px rgba(169,123,62,.45);

  /* Type */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-script: "Sacramento", "Segoe Script", cursive;

  /* Rhythm */
  --container: 1240px;
  --container-narrow: 900px;
  --gutter: clamp(16px, 4vw, 40px);
  --sec-y: clamp(56px, 6.5vw, 104px);
  --header-h: 82px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .32s;
}

/* 2. Reset & base ======================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.72;
  color: var(--muted);
  background: var(--cream-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
  /* clip, not hidden: hidden makes the body a scroll container of its own,
     and then nothing inside can be sticky (the menu's course list scrolled
     away with the dishes). clip trims the same overflow and makes no box. */
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }

::selection { background: var(--gold-soft); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.skip-link {
  position: absolute; left: 50%; top: -90px; transform: translateX(-50%);
  z-index: 999; background: var(--espresso); color: var(--cream-50);
  padding: 12px 22px; border-radius: 0 0 var(--r) var(--r);
  font-size: 14px; letter-spacing: .04em; transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 3. Typography & ornaments ============================================= */
h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.14;
  color: var(--ink);
  letter-spacing: -.005em;
}
h1 { font-size: clamp(38px, 5.4vw, 66px); line-height: 1.08; }
h2 { font-size: clamp(28px, 3.5vw, 44px); }
h3 { font-size: clamp(21px, 2.1vw, 29px); }
h4 { font-size: clamp(18px, 1.5vw, 22px); }
h5 { font-size: 17px; }
p  { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
strong { color: var(--ink-2); font-weight: 600; }
small { font-size: 13px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--gold-soft); flex: none; }
.eyebrow--plain::before { display: none; }

.lede { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.75; color: var(--muted); }
.text-ink { color: var(--ink); }
.text-gold { color: var(--gold); }
.script {
  font-family: var(--font-script);
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.25; color: var(--gold);
}

/* Word-mark ------------------------------------------------------------- */
.wordmark { display: inline-flex; flex-direction: column; gap: 3px; line-height: 1; }
.wordmark__name {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 500; letter-spacing: .10em;
  color: var(--ink); white-space: nowrap;
}
.wordmark__amp { color: var(--gold); font-style: italic; padding: 0 .1em; }
.wordmark__sub {
  font-size: 8.5px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 500; white-space: nowrap;
}
.wordmark--light .wordmark__name { color: var(--cream-50); }
.wordmark--light .wordmark__sub  { color: var(--gold-soft); }
.wordmark--lg .wordmark__name { font-size: clamp(30px, 3.2vw, 38px); }
.wordmark--lg .wordmark__sub  { font-size: 9.5px; }

/* Ornament divider ------------------------------------------------------ */
.ornament { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--gold-soft); }
.ornament::before, .ornament::after {
  content: ""; height: 1px; width: min(90px, 16vw);
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}
.ornament::after { background: linear-gradient(90deg, var(--gold-soft), transparent); }
.ornament span { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; }

/* Underline link -------------------------------------------------------- */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 12.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-deep); padding-bottom: 3px;
  border-bottom: 1px solid var(--gold-soft);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link-arrow svg { width: 15px; height: 15px; transition: transform var(--dur) var(--ease); }
.link-arrow:hover { color: var(--gold); border-color: var(--gold); }
.link-arrow:hover svg { transform: translateX(4px); }
.promo__body .link-arrow, .event__body .link-arrow, .offer-row__body .link-arrow,
.branch__body .link-arrow, .card__body .link-arrow, .branch-choice__body .link-arrow { align-self: flex-start; }
.link-arrow--light { color: var(--gold-soft); border-color: rgba(224,199,154,.4); }
.link-arrow--light:hover { color: #fff; border-color: var(--gold-soft); }

/* 4. Layout & sections ================================================== */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: 1440px; }

.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(40px, 4.5vw, 68px); }
.section--cream { background: var(--cream-100); }
.section--cream-2 { background: var(--cream-200); }
.section--paper { background: var(--paper); }
.section--dark { background: var(--espresso); color: rgba(247,242,234,.74); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--cream-50); }
.section--dark .eyebrow { color: var(--gold-soft); }
.section--dark .eyebrow::before { background: rgba(224,199,154,.5); }
.section--edge { border-top: 1px solid var(--line-soft); }

.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 18px 40px; margin-bottom: clamp(26px, 3vw, 44px);
}
.section-head__text { max-width: 640px; }
.section-head__text p { margin-top: 12px; }
.section-head--center { flex-direction: column; align-items: center; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

.grid { display: grid; gap: clamp(16px, 1.8vw, 26px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack > * + * { margin-top: 18px; }

/* Page banner ----------------------------------------------------------- */
.page-banner {
  position: relative; display: grid; align-items: end;
  min-height: clamp(280px, 33vw, 420px);
  padding-top: calc(var(--header-h) + 40px); padding-bottom: clamp(34px, 4vw, 60px);
  background: var(--espresso); overflow: hidden; isolation: isolate;
}
.page-banner__media { position: absolute; inset: 0; z-index: -2; }
.page-banner__media img { width: 100%; height: 100%; object-fit: cover; }
.page-banner::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(28,22,16,.80) 0%, rgba(28,22,16,.52) 45%, rgba(28,22,16,.88) 100%);
}
.page-banner h1 { color: var(--cream-50); max-width: 20ch; }
.page-banner__sub { color: rgba(247,242,234,.78); max-width: 62ch; margin-top: 14px; }
.page-banner .eyebrow { color: var(--gold-soft); }
.page-banner .eyebrow::before { background: rgba(224,199,154,.55); }
.page-banner__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 16px; color: rgba(247,242,234,.6); }
.breadcrumb a { color: rgba(247,242,234,.72); transition: color .2s var(--ease); }
.breadcrumb a:hover { color: var(--gold-soft); }
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.breadcrumb li + li::before { content: "/"; color: rgba(224,199,154,.45); }

/* 5. Buttons ============================================================= */
.btn {
  --btn-bg: var(--gold-cta);
  --btn-fg: #fff;
  --btn-bd: var(--gold-cta);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 26px; min-height: 50px;
  font-size: 13px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-sm);
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--sh-gold); }
.btn:active { transform: translateY(0); }
.btn--primary:hover { --btn-bg: var(--gold-deep); --btn-bd: var(--gold-deep); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line); }
.btn--ghost:hover { --btn-bg: var(--paper); --btn-bd: var(--gold-soft); --btn-fg: var(--gold-deep); box-shadow: var(--sh-md); }
.btn--dark { --btn-bg: var(--espresso); --btn-bd: var(--espresso); --btn-fg: var(--cream-50); }
.btn--dark:hover { --btn-bg: #120E0A; box-shadow: var(--sh-lg); }
.btn--light { --btn-bg: rgba(255,255,255,.08); --btn-fg: var(--cream-50); --btn-bd: rgba(247,242,234,.32); }
.btn--light:hover { --btn-bg: var(--cream-50); --btn-fg: var(--espresso); --btn-bd: var(--cream-50); }
.btn--sm { min-height: 42px; padding: 10px 18px; font-size: 11.5px; }
.btn--lg { min-height: 58px; padding: 17px 34px; font-size: 13.5px; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--ink-2); background: transparent;
  transition: all var(--dur) var(--ease);
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-wash); }
.icon-btn--sm { width: 36px; height: 36px; }
.icon-btn--sm svg { width: 15px; height: 15px; }
.icon-btn--solid { background: var(--gold-cta); border-color: var(--gold-cta); color: #fff; }
.icon-btn--solid:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--gold-wash); border: 1px solid var(--line);
  font-size: 11.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-deep);
}
.pill svg { width: 13px; height: 13px; }
.pill--ink { background: rgba(36,30,24,.06); color: var(--ink-2); border-color: transparent; }
.pill--olive { background: rgba(94,107,82,.12); color: var(--olive); border-color: transparent; }
.pill--danger { background: rgba(166,72,60,.1); color: var(--danger); border-color: transparent; }
.pill--dark { background: rgba(255,255,255,.08); color: var(--gold-soft); border-color: rgba(224,199,154,.28); }

.badge {
  display: inline-block; padding: 3px 9px; border-radius: var(--r-xs);
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  background: var(--gold-cta); color: #fff; vertical-align: middle;
}
.badge--soft { background: var(--gold-wash); color: var(--gold-deep); }
.badge--olive { background: rgba(94,107,82,.14); color: var(--olive); }
.badge--plum  { background: rgba(107,74,70,.12); color: var(--plum); }

/* 6. Forms =============================================================== */
.field { display: block; margin-bottom: 18px; }
.field__label {
  display: block; margin-bottom: 8px;
  font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.field__hint { margin-top: 7px; font-size: 12.5px; color: var(--muted-2); }
.field__req { color: var(--gold); }

.input, .select, .textarea {
  width: 100%; padding: 14px 16px; min-height: 52px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 15px; line-height: 1.5;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
  appearance: none;
}
.textarea { min-height: 140px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--muted-2); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--gold-soft); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(169,123,62,.13);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--danger); box-shadow: 0 0 0 3px rgba(166,72,60,.12);
}
.field__error { display: none; margin-top: 7px; font-size: 12.5px; color: var(--danger); }
.field.has-error .check__box { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(166,72,60,.12); }
.field.has-error .select, .field.has-error .input, .field.has-error .textarea { border-color: var(--danger); }
.field.has-error .field__error { display: block; }

.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px;
  border-right: 1.6px solid var(--gold); border-bottom: 1.6px solid var(--gold);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.select { padding-right: 42px; cursor: pointer; }

.field--icon { position: relative; }
.field--icon .input, .field--icon .select { padding-left: 46px; }
.field--icon > svg {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--gold); pointer-events: none;
}

.check {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 14px; line-height: 1.55; color: var(--muted); cursor: pointer;
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  flex: none; width: 20px; height: 20px; margin-top: 2px;
  border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--paper);
  display: grid; place-items: center; transition: all var(--dur) var(--ease);
}
.check__box::after {
  content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(.4); opacity: 0; transition: all var(--dur) var(--ease);
}
.check input:checked + .check__box { background: var(--gold-cta); border-color: var(--gold-cta); }
.check input:checked + .check__box::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--gold); outline-offset: 3px; }

.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; }
.switch input { position: absolute; opacity: 0; }
.switch__track {
  width: 46px; height: 26px; border-radius: var(--r-pill);
  background: var(--cream-300); position: relative; transition: background var(--dur) var(--ease); flex: none;
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--paper); box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease);
}
.switch input:checked + .switch__track { background: var(--gold-cta); }
.switch input:checked + .switch__track::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--gold); outline-offset: 3px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.form-grid .field--full { grid-column: 1 / -1; }
.form-note { font-size: 13px; color: var(--muted-2); }

.form-card {
  background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); padding: clamp(22px, 3vw, 40px); box-shadow: var(--sh-sm);
}

.form-status {
  display: none; align-items: flex-start; gap: 12px; margin-bottom: 20px;
  padding: 14px 18px; border-radius: var(--r-sm); font-size: 14.5px;
  background: rgba(76,122,90,.1); color: #35604A; border: 1px solid rgba(76,122,90,.25);
}
.form-status.is-visible { display: flex; }
.form-status svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }

/* 7. Header & navigation ================================================= */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 120;
  background: transparent;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header__inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 22px;
  min-height: var(--header-h);
}
.site-header--solid, .site-header.is-stuck {
  background: rgba(253,251,247,.94);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 10px 30px -24px rgba(64,45,20,.5);
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header { transition: transform .4s var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }

/* transparent-over-hero variant */
.site-header--over .wordmark__name { color: var(--cream-50); }
.site-header--over .wordmark__sub { color: var(--gold-soft); }
.site-header--over .nav__link { color: rgba(250,246,240,.88); }
.site-header--over .header-action { color: var(--cream-50); border-color: rgba(250,246,240,.28); }
.site-header--over .burger span { background: var(--cream-50); }
.site-header--over.is-stuck .wordmark__name { color: var(--ink); }
.site-header--over.is-stuck .wordmark__sub { color: var(--gold-deep); }
.site-header--over.is-stuck .nav__link { color: var(--ink-2); }
.site-header--over.is-stuck .header-action { color: var(--ink-2); border-color: var(--line); }
.site-header--over.is-stuck .burger span { background: var(--ink); }

.nav { display: flex; align-items: center; justify-content: center; }
.nav__list { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 28px); }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 2px; font-size: 13.5px; font-weight: 500; letter-spacing: .04em;
  color: var(--ink-2); position: relative; transition: color var(--dur) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover, .nav__item.is-current > .nav__link, .nav__item:hover > .nav__link { color: var(--gold); }
.nav__link:hover::after, .nav__item.is-current > .nav__link::after { transform: scaleX(1); }
.nav__caret { width: 11px; height: 11px; transition: transform var(--dur) var(--ease); opacity: .8; }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

.nav__panel {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 232px; padding: 10px; z-index: 30;
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r);
  box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  /* It waits a moment before closing, so a pointer that leaves the link on a
     slight diagonal still reaches the panel. */
  transition: opacity var(--dur) var(--ease) .18s, transform var(--dur) var(--ease) .18s, visibility 0s linear calc(var(--dur) + .18s);
}
/* The 12px between the link and the panel is part of the panel for the
   pointer: without it the hover dropped in the gap and the panel shut before
   Dine-In Menu or Online Menu could be clicked. */
.nav__panel::after { content: ""; position: absolute; left: -16px; right: -16px; top: -16px; height: 16px; }
.nav__item:hover > .nav__panel, .nav__item.is-open > .nav__panel, .nav__item:focus-within > .nav__panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s;
}
.nav__panel::before {
  content: ""; position: absolute; top: -6px; left: 50%; width: 12px; height: 12px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--paper); border-left: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft);
}
.nav__panel a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; border-radius: var(--r-sm);
  font-size: 14px; color: var(--ink-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__panel a span { font-size: 12px; color: var(--muted-2); }
.nav__panel a:hover { background: var(--gold-wash); color: var(--gold-deep); }
.nav__panel a:hover span { color: var(--gold-deep); }

.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.header-action {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--ink-2);
  transition: all var(--dur) var(--ease);
}
.header-action svg { width: 19px; height: 19px; }
.header-action:hover { color: var(--gold); border-color: var(--gold); background: rgba(169,123,62,.08); }
.header-action__count {
  position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px;
  display: grid; place-items: center; border-radius: var(--r-pill);
  background: var(--gold-cta); color: #fff; font-size: 10.5px; font-weight: 600; line-height: 1;
  border: 2px solid var(--cream-100);
}
.header-action__count[hidden] { display: none; }

.burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--r-pill);
  align-items: center;
}
.burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); transition: all var(--dur) var(--ease); }

/* Mobile navigation drawer ---------------------------------------------- */
.mobile-nav {
  position: fixed; inset: 0 0 0 auto; width: min(400px, 88vw); z-index: 200;
  background: var(--cream-50); box-shadow: var(--sh-lg);
  transform: translateX(101%); transition: transform .42s var(--ease-out);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__head { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--gutter); border-bottom: 1px solid var(--line-soft); }
.mobile-nav__body { padding: 12px var(--gutter) 26px; flex: 1; }
.mobile-nav__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 0; border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-display); font-size: 22px; color: var(--ink);
  width: 100%; text-align: left;
}
.mobile-nav__link svg { width: 16px; height: 16px; color: var(--gold); transition: transform var(--dur) var(--ease); }
.mobile-nav__group.is-open .mobile-nav__link svg { transform: rotate(180deg); }
.mobile-nav__sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.mobile-nav__group.is-open .mobile-nav__sub { grid-template-rows: 1fr; }
.mobile-nav__sub > div { overflow: hidden; }
.mobile-nav__sub a {
  display: block; padding: 12px 0 12px 16px; font-size: 15px; color: var(--muted);
  border-left: 1px solid var(--line); margin-left: 2px;
}
.mobile-nav__sub a:hover { color: var(--gold); border-color: var(--gold); }
.mobile-nav__foot { padding: 22px var(--gutter) 34px; border-top: 1px solid var(--line-soft); background: var(--cream-100); }
.mobile-nav__contact { margin-top: 18px; font-size: 14px; }
.mobile-nav__contact a { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--ink-2); }
.mobile-nav__contact svg { width: 16px; height: 16px; color: var(--gold); }

.overlay {
  position: fixed; inset: 0; z-index: 150; background: rgba(28,22,16,.55);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s;
  backdrop-filter: blur(2px);
}
.overlay.is-active { opacity: 1; visibility: visible; }

/* 8. Hero & reservation bar ============================================= */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(92vh, 860px);
  display: grid; align-items: center;
  padding-top: calc(var(--header-h) + clamp(30px, 6vw, 80px));
  padding-bottom: clamp(120px, 12vw, 150px);
  background: var(--espresso);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(24,19,14,.90) 0%, rgba(24,19,14,.72) 38%, rgba(24,19,14,.28) 68%, rgba(24,19,14,.45) 100%);
}
.hero__inner { max-width: 680px; }
.hero h1 { color: var(--cream-50); }
.hero__sub { margin-top: 20px; font-size: clamp(16px, 1.35vw, 19px); color: rgba(247,242,234,.82); max-width: 46ch; }
.hero .btn-row { margin-top: 32px; }
.hero__aside {
  position: absolute; right: clamp(18px, 3vw, 52px); top: 50%; transform: translateY(-50%);
  writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap;
  font-family: var(--font-script); font-size: clamp(22px, 1.8vw, 30px);
  color: rgba(240,220,183,.9); letter-spacing: .04em; z-index: 2; margin: 0;
}
.hero__scroll {
  position: absolute; left: 50%; bottom: 108px; transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: rgba(247,242,234,.6);
}
.hero__scroll::after {
  content: ""; width: 1px; height: 42px;
  background: linear-gradient(180deg, rgba(224,199,154,.8), transparent);
  animation: scrollPulse 2.4s var(--ease) infinite;
}
@keyframes scrollPulse { 0%,100% { opacity: .25; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }

/* Reservation bar ------------------------------------------------------- */
.res-bar {
  position: relative; z-index: 5;
  margin-top: clamp(-96px, -7vw, -70px);
}
.res-bar__inner {
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  align-items: stretch; gap: 0; overflow: hidden;
}
.res-bar__field {
  display: flex; align-items: center; gap: 12px;
  padding: 16px clamp(14px, 1.6vw, 24px);
  border-right: 1px solid var(--line-soft); position: relative;
}
.res-bar__field:last-of-type { border-right: 0; }
.res-bar__field > svg { width: 20px; height: 20px; color: var(--gold); flex: none; }
.res-bar__label { display: block; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); }
.res-bar__control {
  border: 0; padding: 0; min-height: 0; background: transparent;
  font-size: 15px; font-weight: 500; color: var(--ink); width: 100%;
  appearance: none; cursor: pointer;
}
.res-bar__control:focus { outline: none; box-shadow: none; }
.res-bar__submit { display: grid; }
.res-bar__submit .btn { border-radius: 0; height: 100%; min-height: 68px; padding-inline: clamp(20px, 2.6vw, 40px); }
.res-bar__submit .btn:hover { transform: none; }

/* 9. Cards & content blocks ============================================= */
.card {
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  overflow: hidden; position: relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--gold-soft); }
/* A block, because this is an <a> on most cards and an inline box ignores
   aspect-ratio entirely. Left inline, a 387px journal card was given a 721px
   image, and the body below it fell outside a card that clips its overflow, so
   a journal entry was a photograph with no title, no date and no words. */
.card__media { display: block; position: relative; overflow: hidden; background: var(--cream-200); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.card:hover .card__media img { transform: scale(1.055); }
.card__body { padding: clamp(18px, 2vw, 26px); }
.card__title { margin-bottom: 8px; }
.card__text { font-size: 14.5px; line-height: 1.65; }
.card__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 14px;
  padding: 14px clamp(18px, 2vw, 26px); border-top: 1px solid var(--line-soft);
}
.card__tag { position: absolute; top: 14px; left: 14px; z-index: 2; }
.card--flat { box-shadow: none; }
.card--link { display: block; }

/* Split feature --------------------------------------------------------- */
.split {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 64px); align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.split__media img { width: 100%; border-radius: var(--r-lg); }
.split__media--framed::before {
  content: ""; position: absolute; inset: 18px -18px -18px 18px;
  border: 1px solid var(--gold-soft); border-radius: var(--r-lg); z-index: -1;
}
.split__stat {
  position: absolute; right: -14px; bottom: -22px;
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r);
  padding: 16px 20px; box-shadow: var(--sh-md); text-align: center; min-width: 132px;
}
.split__stat strong { display: block; font-family: var(--font-display); font-size: 34px; color: var(--gold); line-height: 1; }
.split__stat span { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }

/* Quote ----------------------------------------------------------------- */
.quote { position: relative; padding-left: 34px; }
.quote::before {
  content: "\201C"; position: absolute; left: 0; top: -10px;
  font-family: var(--font-display); font-size: 68px; line-height: 1; color: var(--gold-soft);
}
.quote__text { font-family: var(--font-display); font-size: clamp(20px, 2vw, 27px); line-height: 1.4; color: var(--ink); }
.quote__by { margin-top: 16px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }

/* Menu promo cards (home) ----------------------------------------------- */
.promo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.promo:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.promo__media { position: relative; min-height: 210px; overflow: hidden; }
.promo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.promo:hover .promo__media img { transform: scale(1.05); }
.promo__body { padding: clamp(20px, 2.2vw, 30px); display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.promo__body p { font-size: 14.5px; }

.promo--stacked { grid-template-columns: minmax(0, 1fr); }
.promo--stacked .promo__media { aspect-ratio: 16 / 10; min-height: 0; }

/* Compact offer row (home) ---------------------------------------------- */
.offer-row {
  display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg);
  overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.offer-row:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--gold-soft); }
.offer-row__media { position: relative; overflow: hidden; min-height: 156px; }
.offer-row__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.offer-row:hover .offer-row__media img { transform: scale(1.06); }
.offer-row__body { padding: 18px 22px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.offer-row__price { font-family: var(--font-display); font-size: 26px; color: var(--gold); line-height: 1; font-variant-numeric: lining-nums; }
.offer-row__price small { font-family: var(--font-body); font-size: 12px; color: var(--muted-2); }

/* Category list --------------------------------------------------------- */
.cat-list { display: grid; gap: 10px; }
.cat-list__item {
  display: flex; align-items: center; gap: 14px; padding: 13px 18px;
  background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  font-size: 14.5px; color: var(--ink-2);
  transition: all var(--dur) var(--ease);
}
.cat-list__item svg:first-child { width: 20px; height: 20px; color: var(--gold); flex: none; }
.cat-list__item span { flex: 1; }
.cat-list__item .cat-list__arrow { width: 15px; height: 15px; color: var(--gold-soft); transition: transform var(--dur) var(--ease); }
.cat-list__item:hover { border-color: var(--gold-soft); background: var(--gold-wash); color: var(--gold-deep); }
.cat-list__item:hover .cat-list__arrow { transform: translateX(4px); color: var(--gold); }

/* Dish card ------------------------------------------------------------- */
.dish, .card--stack { display: flex; flex-direction: column; }
.dish .card__body, .card--stack .card__body { flex: 1 1 auto; }
.dish .card__foot, .card--stack .card__foot { margin-top: auto; }
.dish__media { aspect-ratio: 4 / 3; }
.dish__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dish__name { font-size: 20px; }
.dish__price { font-family: var(--font-display); font-size: 21px; color: var(--gold); white-space: nowrap; }
.dish__desc { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.dish__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* Numerals in prices read better lining than old-style */
.dish__price, .offer__price, .menu-item__price, .cart-line__price,
.totals__row--big strong, .event__date strong, .stat strong, .split__stat strong {
  font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
}

/* Offer card ------------------------------------------------------------ */
.offer { position: relative; display: grid; grid-template-rows: auto 1fr auto; }
.offer__media { aspect-ratio: 16 / 10; }
/* The body of an offer, given a rhythm. The title, the price, the description,
   what is included and the small print were all sitting flush against one
   another at the same distance, so nothing grouped and the eye had nowhere to
   rest. The gold here is the deeper one, which is the readable one on paper. */
.offer .card__body { display: flex; flex-direction: column; gap: 12px; }
.offer .card__body > * { margin: 0; }
.offer .card__title { margin: 0; line-height: 1.25; }
.offer__price { font-family: var(--font-display); font-size: 30px; color: var(--gold-deep); line-height: 1; white-space: nowrap; }
.offer__price small { font-size: 13px; color: var(--faint); font-family: var(--font-body); }
.offer__terms { margin: 2px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); display: grid; gap: 7px; }
.offer__terms li { position: relative; padding-left: 20px; margin: 0; }
.offer__terms li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-soft); }
/* The saving and the closing date, set apart from what is included above them. */
.offer .card__body > .u-small {
  margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: 13px; line-height: 1.6;
}

/* Event card ------------------------------------------------------------ */
.event { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: stretch; }
/* An <a>, so it needs to be told it is a block before anything can give it a
   height. Its image is absolutely positioned, so with no height the picture was
   not there at all and the date plate, absolute as well, landed on the words
   underneath it. Inside a row the grid cell supplies the height; inside a card
   nothing does, so the card's own media carries the ratio. */
.event__media { display: block; position: relative; overflow: hidden; }
.card > .event__media { aspect-ratio: 16 / 9; }
.event__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.event__date {
  position: absolute; left: 12px; top: 12px; z-index: 2;
  background: var(--paper); border-radius: var(--r-sm); padding: 8px 12px; text-align: center;
  box-shadow: var(--sh-sm); line-height: 1.05;
}
.event__date strong { display: block; font-family: var(--font-display); font-size: 24px; color: var(--ink); }
.event__date span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-deep); }
.event__body { padding: 18px 22px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.event__meta { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12.5px; color: var(--muted-2); }
.event__meta span { display: inline-flex; align-items: center; gap: 6px; }
.event__meta svg { width: 14px; height: 14px; color: var(--gold); }

/* Branch card ----------------------------------------------------------- */
.branch { display: grid; grid-template-columns: minmax(0, 168px) minmax(0, 1fr); }
.branch__media { position: relative; min-height: 190px; }
.branch__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.branch__body { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.branch__row { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--muted); }
.branch__row svg { width: 15px; height: 15px; color: var(--gold); flex: none; margin-top: 4px; }

/* Gallery --------------------------------------------------------------- */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gallery-item {
  position: relative; display: block; overflow: hidden; border-radius: var(--r);
  aspect-ratio: 1 / 1; background: var(--cream-200); cursor: zoom-in;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gallery-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(28,22,16,0) 45%, rgba(28,22,16,.68));
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.gallery-item__cap {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2;
  color: var(--cream-50); font-size: 13px; letter-spacing: .04em;
  transform: translateY(8px); opacity: 0; transition: all var(--dur) var(--ease);
}
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item:hover::after, .gallery-item:hover .gallery-item__cap { opacity: 1; transform: translateY(0); }
.gallery-item--wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.gallery-item--tall { grid-row: span 2; aspect-ratio: 1 / 2; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.filter-chip {
  padding: 9px 18px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: transparent; font-size: 13px; color: var(--muted); letter-spacing: .03em;
  transition: all var(--dur) var(--ease);
}
.filter-chip:hover { border-color: var(--gold-soft); color: var(--gold-deep); }
.filter-chip.is-active { background: var(--espresso); border-color: var(--espresso); color: var(--cream-50); }

/* Feature / value tiles -------------------------------------------------- */
.tile { padding: clamp(20px, 2.2vw, 30px); background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); }
.tile__icon {
  width: 52px; height: 52px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--gold-wash); color: var(--gold); margin-bottom: 16px;
}
.tile__icon svg { width: 24px; height: 24px; }
.tile h4 { margin-bottom: 8px; }
.tile p { font-size: 14.5px; }

/* Four columns were hardcoded and no page has four stats: offers has two and
   about has three, so both drew empty cells with nothing in them. It now fits
   however many it is given. */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden; }
.stat { background: var(--paper); padding: clamp(20px, 2.4vw, 32px); text-align: center; }
.stat strong { display: block; font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 44px); color: var(--gold); line-height: 1; }
.stat span { display: block; margin-top: 8px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }

/* Info list (hours, contact) -------------------------------------------- */
.info-list { display: grid; gap: 2px; }
.info-list__row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px dashed var(--line);
  font-size: 14.5px;
}
.info-list__row:last-child { border-bottom: 0; }
.info-list__row dt { color: var(--ink-2); }
.info-list__row dd { margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.info-list__row.is-today dt, .info-list__row.is-today dd { color: var(--gold-deep); font-weight: 500; }

.contact-line { display: flex; align-items: flex-start; gap: 14px; }
.contact-line__icon {
  width: 42px; height: 42px; flex: none; border-radius: var(--r-pill);
  display: grid; place-items: center; background: var(--gold-wash); color: var(--gold);
}
.contact-line__icon svg { width: 18px; height: 18px; }
.contact-line h5 { margin-bottom: 3px; font-family: var(--font-body); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); font-weight: 500; }
.contact-line p, .contact-line a { font-size: 15px; color: var(--ink-2); }
.contact-line a:hover { color: var(--gold); }

/* Map ------------------------------------------------------------------- */
.map { width: 100%; min-height: 320px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-soft); background: var(--cream-200); }
.map--tall { min-height: 460px; }
.map__fallback {
  position: absolute; inset: 0; display: grid; align-content: center; gap: 6px;
  padding: 22px; text-align: center; font-size: 13.5px; color: var(--muted-2);
  background: repeating-linear-gradient(45deg, var(--cream-200) 0 12px, var(--cream-100) 12px 24px);
}
.map { position: relative; }
.leaflet-container { font-family: var(--font-body); }
.leaflet-container + .map__fallback, .map.leaflet-container .map__fallback { display: none; }
.leaflet-popup-content-wrapper { border-radius: var(--r-sm); }
.map-pin { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50% 50% 50% 0; background: var(--gold-cta); transform: rotate(-45deg); border: 2px solid #fff; box-shadow: var(--sh-md); }

/* Accordion ------------------------------------------------------------- */
.accordion { border-top: 1px solid var(--line); }
.accordion__item { border-bottom: 1px solid var(--line); }
.accordion__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  width: 100%; padding: 20px 0; text-align: left;
  font-family: var(--font-display); font-size: clamp(18px, 1.6vw, 22px); color: var(--ink);
  transition: color var(--dur) var(--ease);
}
.accordion__btn:hover { color: var(--gold); }
.accordion__icon { position: relative; width: 22px; height: 22px; flex: none; }
.accordion__icon::before, .accordion__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--gold);
  transform: translate(-50%, -50%); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.accordion__icon::before { width: 14px; height: 1.5px; }
.accordion__icon::after  { width: 1.5px; height: 14px; }
.accordion__item.is-open .accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--ease); }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__panel p { padding-bottom: 22px; font-size: 15px; max-width: 76ch; }

/* Steps ----------------------------------------------------------------- */
.steps { display: grid; gap: clamp(18px, 2vw, 26px); counter-reset: step; }
.step { position: relative; padding-left: 66px; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: -4px;
  font-family: var(--font-display); font-size: 34px; color: var(--gold-soft);
}
.step h4 { margin-bottom: 6px; }
.step p { font-size: 14.5px; }

/* Testimonial ----------------------------------------------------------- */
.testimonial { display: grid; gap: 18px; padding: clamp(22px, 2.6vw, 34px); background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); }
.testimonial__stars { display: flex; gap: 3px; color: var(--gold); }
.testimonial__stars svg { width: 16px; height: 16px; }
.testimonial__who { display: flex; align-items: center; gap: 12px; }
.testimonial__who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testimonial__initials {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-wash); border: 1px solid var(--gold-soft);
  font-family: var(--font-display); font-size: 17px; letter-spacing: .04em; color: var(--gold-deep);
}
.testimonial__who strong { display: block; color: var(--ink); font-size: 15px; }
.testimonial__who span { font-size: 12.5px; color: var(--muted-2); }

/* CTA band -------------------------------------------------------------- */
.cta-band { position: relative; isolation: isolate; overflow: hidden; background: var(--espresso); }
.cta-band__media { position: absolute; inset: 0; z-index: -2; opacity: .34; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(24,19,14,.94), rgba(24,19,14,.6)); }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px; padding-block: clamp(44px, 5vw, 72px); }
.cta-band h2 { color: var(--cream-50); max-width: 20ch; }
.cta-band p { color: rgba(247,242,234,.72); margin-top: 12px; max-width: 52ch; }

/* 10. Menu experience =================================================== */
.menu-layout {
  display: grid; grid-template-columns: 312px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px); align-items: start;
}
.menu-layout > * { min-width: 0; }
.menu-aside { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 18px; }
/* Taller than the window on a laptop: it keeps to the window and scrolls
   inside itself, so the courses stay in reach wherever the dishes are. */
@media (min-width: 1025px) {
  .menu-aside {
    max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding-right: 2px;
  }
}
/* This column becomes a drawer on a phone and the button closes it. There is
   nothing to close on a desktop, where it sat alone above the search box. */
.menu-aside__close { display: none; }
.menu-aside__head { display: none; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.menu-aside__head h3 { font-family: var(--font-display); font-size: 19px; margin: 0; }
.menu-aside__card { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 20px; }
.menu-aside__title { font-family: var(--font-body); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px; }
/* A heading that follows the search or the Food and Drinks switch gets room above it. */
.menu-aside__card > .menu-aside__title:not(:first-child) { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-soft); }

.find-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 10px; background: var(--cream-200); border-radius: var(--r-sm); }
.find-mode__b { padding: 8px 10px; border-radius: var(--r-xs); font-size: 12.5px; font-weight: 500; color: var(--muted); transition: all var(--dur) var(--ease); }
.find-mode__b.is-on { background: var(--paper); color: var(--ink); box-shadow: var(--sh-xs); }
.find-tastes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.find-tastes[hidden] { display: none; }
.find-tastes__b { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--paper); font-size: 12.5px; color: var(--ink-2); transition: all var(--dur) var(--ease); }
.find-tastes__b:hover, .find-tastes__b.is-on { border-color: var(--gold); background: var(--gold-wash); color: var(--gold-deep); }
.menu-search { position: relative; }
.menu-search .input { padding-left: 44px; min-height: 48px; }
.menu-search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--gold); }

.type-switch { display: grid; grid-auto-flow: column; gap: 4px; padding: 4px; background: var(--cream-200); border-radius: var(--r-sm); }
.type-switch__btn {
  padding: 11px 14px; border-radius: var(--r-xs); font-size: 13px; font-weight: 500;
  color: var(--muted); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: all var(--dur) var(--ease);
}
.type-switch__btn svg { width: 16px; height: 16px; }
.type-switch__btn.is-active { background: var(--paper); color: var(--ink); box-shadow: var(--sh-xs); }

.cat-nav { display: grid; gap: 2px; }
.cat-nav__link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px; border-radius: var(--r-sm); font-size: 14px; color: var(--muted);
  transition: all .25s var(--ease); border-left: 2px solid transparent;
}
.cat-nav__link span:last-child { font-size: 12px; color: var(--muted-2); }
.cat-nav__link:hover { background: var(--gold-wash); color: var(--gold-deep); }
.cat-nav__link.is-active { background: var(--gold-wash); color: var(--gold-deep); border-left-color: var(--gold); font-weight: 500; }

.diet-filters { display: grid; gap: 10px; }

.menu-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line);
}
.menu-toolbar__count { font-size: 13.5px; color: var(--muted-2); }
.menu-mobile-bar { display: none; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.menu-mobile-bar .btn { flex: 1 1 140px; white-space: normal; }

.branch-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.branch-choice__card {
  position: relative; display: grid; overflow: hidden; border-radius: var(--r-lg);
  border: 1px solid var(--line-soft); background: var(--paper); text-align: left;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.branch-choice__card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: var(--gold-soft); }
.branch-choice__media { aspect-ratio: 16 / 9; overflow: hidden; }
.branch-choice__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.branch-choice__card:hover .branch-choice__media img { transform: scale(1.05); }
.branch-choice__body { padding: 22px; display: grid; gap: 10px; }
.branch-choice__status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--success); }
.branch-choice__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(76,122,90,.18); }
.branch-choice__status--closed { color: var(--danger); }
.branch-choice__status--closed::before { background: var(--danger); box-shadow: 0 0 0 3px rgba(166,72,60,.16); }

.category-block { scroll-margin-top: calc(var(--header-h) + 24px); margin-bottom: clamp(34px, 4vw, 56px); }
.category-head {
  position: relative; border-radius: var(--r-lg); overflow: hidden; isolation: isolate;
  min-height: 148px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px 26px; margin-bottom: 22px;
}
.category-head img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.category-head::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28,22,16,.25), rgba(28,22,16,.82)); }
.category-head h2 { color: var(--cream-50); }
.category-head__meta { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 12.5px; color: rgba(247,242,234,.76); }

.menu-item {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 18px; align-items: start;
  padding: 18px; border-radius: var(--r);
  border: 1px solid transparent; background: var(--paper);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.menu-item > * { min-width: 0; }
.menu-item + .menu-item { margin-top: 10px; }
.menu-item:hover { border-color: var(--gold-soft); box-shadow: var(--sh-sm); }
.menu-item.is-hidden { display: none; }
.menu-item__thumb { width: 92px; height: 92px; border-radius: var(--r-sm); overflow: hidden; background: var(--cream-200); }
.menu-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.menu-item__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.menu-item__name { font-size: 20px; }
.menu-item__desc { margin-top: 6px; font-size: 14px; line-height: 1.62; max-width: 62ch; }
.menu-item__meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.menu-item__meta .tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--muted-2); padding: 4px 9px;
  border: 1px solid var(--line-soft); border-radius: var(--r-pill); background: var(--cream-50);
}
.menu-item__meta .tag svg { width: 12px; height: 12px; color: var(--gold); }
.menu-item__side { display: grid; gap: 10px; justify-items: end; align-content: start; min-width: 118px; }
.menu-item__price { font-family: var(--font-display); font-size: 23px; color: var(--gold); line-height: 1; }
.menu-item__price del { font-size: 15px; color: var(--muted-2); margin-right: 6px; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; background: var(--paper); }
.qty button { width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink-2); transition: all .2s var(--ease); }
.qty button:hover { background: var(--gold-wash); color: var(--gold-deep); }
.qty button svg { width: 13px; height: 13px; }
.qty input { width: 34px; text-align: center; border: 0; background: transparent; font-size: 14px; font-weight: 500; color: var(--ink); }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { appearance: none; margin: 0; }

.menu-empty { padding: 60px 20px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r-lg); background: var(--cream-50); }
.menu-empty svg { width: 46px; height: 46px; color: var(--gold-soft); margin: 0 auto 16px; }

.menu-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12.5px; color: var(--muted-2); margin-top: 26px; }
.menu-legend span { display: inline-flex; align-items: center; gap: 7px; }
.menu-legend svg { width: 14px; height: 14px; color: var(--gold); }

/* Table / QR strip ------------------------------------------------------ */
.table-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 20px; border-radius: var(--r); margin-bottom: 22px;
  background: var(--gold-wash); border: 1px solid var(--line);
  font-size: 14px; color: var(--gold-deep);
}
.table-strip__left { display: flex; align-items: center; gap: 12px; }
.table-strip svg { width: 20px; height: 20px; }

/* Sticky basket bar (mobile) -------------------------------------------- */
.basket-bar {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 140%); z-index: 110;
  width: min(560px, calc(100vw - 28px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 14px 12px 20px; border-radius: var(--r-pill);
  background: var(--espresso); color: var(--cream-50); box-shadow: var(--sh-lg);
  transition: transform .42s var(--ease-out);
}
.basket-bar.is-visible { transform: translate(-50%, 0); }
.basket-bar__meta { display: grid; line-height: 1.3; }
.basket-bar__meta strong { font-size: 15px; }
.basket-bar__meta span { font-size: 12px; color: rgba(247,242,234,.62); }

/* 11. Drawers, modals, lightbox ========================================= */
.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(430px, 92vw); z-index: 200;
  background: var(--cream-50); box-shadow: var(--sh-lg);
  display: flex; flex-direction: column;
  transform: translateX(101%); transition: transform .42s var(--ease-out);
}
.drawer.is-open { transform: translateX(0); }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 24px; border-bottom: 1px solid var(--line-soft); background: var(--paper);
}
.drawer__head h3 { font-size: 21px; }
.drawer__body { flex: 1; overflow-y: auto; padding: 20px 24px; overscroll-behavior: contain; }
.drawer__foot { padding: 20px 24px; border-top: 1px solid var(--line-soft); background: var(--paper); }

.cart-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.cart-line__thumb { width: 64px; height: 64px; border-radius: var(--r-sm); overflow: hidden; background: var(--cream-200); }
.cart-line__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-line__name { font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.cart-line__opt { font-size: 12.5px; color: var(--muted-2); }
.cart-line__side { display: grid; gap: 8px; justify-items: end; }
.cart-line__price { font-family: var(--font-display); font-size: 18px; color: var(--gold); }
.cart-line__remove { font-size: 12px; color: var(--muted-2); border-bottom: 1px solid transparent; }
.cart-line__remove:hover { color: var(--danger); border-color: currentColor; }

.cart-empty { text-align: center; padding: 48px 10px; }
.cart-empty svg { width: 54px; height: 54px; color: var(--gold-soft); margin: 0 auto 18px; }

.totals { display: grid; gap: 10px; margin-bottom: 16px; }
.totals__row { display: flex; align-items: center; justify-content: space-between; font-size: 14.5px; }
.totals__row--big { padding-top: 12px; border-top: 1px solid var(--line); font-size: 16px; color: var(--ink); }
.totals__row--big strong { font-family: var(--font-display); font-size: 24px; color: var(--gold); }

.modal {
  position: fixed; inset: 0; z-index: 210; display: grid; place-items: center;
  padding: clamp(14px, 3vw, 40px);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__dialog {
  position: relative; width: min(620px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--cream-50); border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  transform: translateY(18px) scale(.98); transition: transform .38s var(--ease-out);
}
.modal.is-open .modal__dialog { transform: none; }
.modal__dialog--wide { width: min(880px, 100%); }
.modal__head { padding: 24px clamp(20px, 3vw, 32px) 0; }
.modal__body { padding: 20px clamp(20px, 3vw, 32px) clamp(24px, 3vw, 32px); }
/* The close button stands on whatever the dialog opens with, which for a dish
   is a photograph, and it carried no background of its own: a dark mark on a
   bright plate, invisible until it was hovered. It has a solid ground now, so
   it reads on a photograph and on the paper alike, and it is always the thing
   nearest the eye in that corner.
   The head also keeps a lane clear for it. With no photograph the dialog opens
   on the head instead, and the button came down inside it. */
.modal__close {
  position: absolute; top: 16px; right: 16px; z-index: 4;
  background: var(--paper); border-color: var(--line);
  color: var(--ink); box-shadow: var(--sh-sm);
  backdrop-filter: saturate(1.2) blur(6px);
}
.modal__close:hover { background: var(--gold-wash); border-color: var(--gold); color: var(--gold-deep); }
.modal__head { padding-right: 68px; }

.table-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.table-chip {
  display: grid; place-items: center; gap: 2px; padding: 14px 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper);
  font-size: 14px; color: var(--ink-2); transition: all var(--dur) var(--ease);
}
.table-chip span { font-size: 11px; color: var(--muted-2); }
.table-chip:hover:not(:disabled) { border-color: var(--gold); background: var(--gold-wash); }
.table-chip.is-active { background: var(--espresso); border-color: var(--espresso); color: var(--cream-50); }
.table-chip.is-active span { color: rgba(247,242,234,.6); }
.table-chip:disabled { opacity: .42; cursor: not-allowed; text-decoration: line-through; }

/* Lightbox -------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 240; background: rgba(20,15,10,.94);
  display: grid; place-items: center; padding: clamp(16px, 4vw, 60px);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: var(--r); box-shadow: var(--sh-lg); }
.lightbox__cap { margin-top: 16px; text-align: center; color: rgba(247,242,234,.72); font-size: 14px; }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(247,242,234,.25); color: var(--cream-50);
  transition: all var(--dur) var(--ease);
}
.lightbox__nav:hover { background: var(--gold-cta); border-color: var(--gold-cta); }
.lightbox__nav svg { width: 20px; height: 20px; }
.lightbox__nav--prev { left: clamp(10px, 3vw, 34px); }
.lightbox__nav--next { right: clamp(10px, 3vw, 34px); }
.lightbox__close { position: absolute; top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); }
.lightbox__count { position: absolute; top: clamp(16px, 3vw, 32px); left: clamp(16px, 3vw, 32px); color: rgba(247,242,234,.6); font-size: 13px; letter-spacing: .1em; }

/* Toast ----------------------------------------------------------------- */
.toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 260; display: grid; gap: 10px; width: min(340px, calc(100vw - 36px)); }
.toast {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  background: var(--espresso); color: var(--cream-50); border-radius: var(--r);
  box-shadow: var(--sh-lg); font-size: 14px;
  transform: translateY(16px); opacity: 0; transition: all .34s var(--ease-out);
}
.toast.is-shown { transform: none; opacity: 1; }
.toast svg { width: 18px; height: 18px; color: var(--gold-soft); flex: none; margin-top: 2px; }

/* 12. Auth & legal ====================================================== */
.auth { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
.auth__aside { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px, 4vw, 56px); background: var(--espresso); color: rgba(247,242,234,.76); overflow: hidden; }
.auth__aside img.auth__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .36; }
.auth__aside::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(24,19,14,.9), rgba(24,19,14,.6)); }
.auth__aside h2 { color: var(--cream-50); max-width: 16ch; }
.auth__points { display: grid; gap: 14px; margin-top: 26px; }
.auth__points li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; }
.auth__points svg { width: 18px; height: 18px; color: var(--gold-soft); flex: none; margin-top: 3px; }
.auth__main { display: flex; align-items: center; justify-content: center; padding: clamp(28px, 4vw, 56px); background: var(--cream-50); }
.auth__card { width: min(430px, 100%); }
.auth__card h1 { font-size: clamp(30px, 3vw, 40px); margin-bottom: 8px; }

.tabs { display: flex; gap: 4px; padding: 4px; background: var(--cream-200); border-radius: var(--r-sm); margin-bottom: 24px; }
.tabs__btn { flex: 1; padding: 11px; border-radius: var(--r-xs); font-size: 13.5px; color: var(--muted); transition: all var(--dur) var(--ease); }
.tabs__btn.is-active { background: var(--paper); color: var(--ink); box-shadow: var(--sh-xs); }
.tab-panel[hidden] { display: none; }

.divider-text { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: var(--muted-2); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.otp-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.otp-row input { text-align: center; font-size: 20px; font-family: var(--font-display); padding: 12px 0; }

.legal-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: start; }
.legal-toc { position: sticky; top: calc(var(--header-h) + 20px); padding: 22px; background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--r-lg); }
.legal-toc h4 { font-family: var(--font-body); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px; }
.legal-toc a { display: block; padding: 8px 12px; border-left: 2px solid transparent; font-size: 14px; color: var(--muted); transition: all .25s var(--ease); }
.legal-toc a:hover, .legal-toc a.is-active { color: var(--gold-deep); border-left-color: var(--gold); background: var(--gold-wash); }

.prose { max-width: 76ch; }
.prose h2 { margin: 44px 0 14px; scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 28px 0 10px; font-size: 21px; }
.prose p, .prose li { font-size: 15.5px; line-height: 1.78; }
.prose ul { margin: 0 0 18px; }
.prose ul li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-soft); }
.prose ol { margin: 0 0 18px; padding-left: 20px; list-style: decimal; }
.prose ol li { margin-bottom: 8px; padding-left: 6px; }
.prose a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-soft); }
.prose a:hover { color: var(--gold); }
.prose table { margin: 18px 0; font-size: 14.5px; }
.prose th, .prose td { padding: 12px 14px; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--cream-200); color: var(--ink-2); font-weight: 500; }
.prose blockquote { margin: 22px 0; padding: 18px 22px; background: var(--gold-wash); border-left: 3px solid var(--gold); border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* 13. Footer, cookie bar, utilities ===================================== */
.site-footer { background: var(--espresso); color: rgba(247,242,234,.66); position: relative; }
.site-footer a { color: rgba(247,242,234,.72); transition: color var(--dur) var(--ease); }
.site-footer a:hover { color: var(--gold-soft); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.5fr; gap: clamp(24px, 3vw, 52px); padding-block: clamp(44px, 5vw, 76px); }
.footer-col h4 {
  font-family: var(--font-body); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 18px; font-weight: 500;
}
.footer-col li + li { margin-top: 10px; }
.footer-col a, .footer-col p { font-size: 14.5px; }
.footer-brand p { margin-top: 18px; font-size: 14.5px; max-width: 34ch; }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: var(--r-pill); display: grid; place-items: center;
  border: 1px solid rgba(224,199,154,.28); color: var(--gold-soft);
  transition: all var(--dur) var(--ease);
}
.footer-social a:hover { background: var(--gold-cta); border-color: var(--gold-cta); color: #fff; transform: translateY(-2px); }
.footer-social svg { width: 17px; height: 17px; }
.footer-newsletter { position: relative; margin-top: 16px; }
.footer-newsletter input {
  width: 100%; padding: 14px 56px 14px 16px; min-height: 52px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(224,199,154,.22);
  border-radius: var(--r-sm); color: var(--cream-50); font-size: 14.5px;
}
.footer-newsletter input::placeholder { color: rgba(247,242,234,.42); }
.footer-newsletter input:focus { outline: none; border-color: var(--gold); background: rgba(255,255,255,.08); }
.footer-newsletter button {
  position: absolute; right: 6px; top: 6px; bottom: 6px; width: 44px; border-radius: var(--r-xs);
  background: var(--gold-cta); color: #fff; display: grid; place-items: center; transition: background var(--dur) var(--ease);
}
.footer-newsletter button:hover { background: var(--gold-deep); }
.footer-newsletter button svg { width: 17px; height: 17px; }

.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 30px;
  padding-block: 22px; border-top: 1px solid rgba(224,199,154,.16); font-size: 13.5px;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-tagline { font-family: var(--font-script); font-size: 24px; color: var(--gold-soft); }

.to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 100;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--espresso); color: var(--gold-soft); box-shadow: var(--sh-lg);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: all .34s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--gold-cta); color: #fff; }
.to-top svg { width: 18px; height: 18px; }

.cookie-bar {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 160%); z-index: 230;
  width: min(880px, calc(100vw - 28px));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center;
  padding: 20px 24px; border-radius: var(--r-lg);
  background: var(--cream-50); border: 1px solid var(--line); box-shadow: var(--sh-lg);
  transition: transform .5s var(--ease-out);
}
.cookie-bar.is-visible { transform: translate(-50%, 0); }
.cookie-bar h4 { margin-bottom: 6px; font-size: 20px; }
.cookie-bar p { font-size: 13.5px; }
.cookie-bar__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Utilities ------------------------------------------------------------- */
.u-center { text-align: center; }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-1 { margin-top: 10px; }
.u-mt-2 { margin-top: 20px; }
.u-mt-3 { margin-top: 32px; }
.u-mt-4 { margin-top: 44px; }
.u-mb-2 { margin-bottom: 20px; }
.u-mb-3 { margin-bottom: 32px; }
.u-hide { display: none !important; }
.u-muted { color: var(--muted-2); }
.u-small { font-size: 13px; }
.u-flex { display: flex; }
.u-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.u-gap-1 { gap: 10px; }
.u-gap-2 { gap: 20px; }
.u-wrap { flex-wrap: wrap; }
.u-nowrap { white-space: nowrap; }
.aspect-4-3 { aspect-ratio: 4 / 3; }
.aspect-16-9 { aspect-ratio: 16 / 9; }
.aspect-1-1 { aspect-ratio: 1 / 1; }
.rounded { border-radius: var(--r-lg); overflow: hidden; }
img.rounded { width: 100%; }
.shadow { box-shadow: var(--sh-md); }

/* 14. Motion & responsive =============================================== */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal][data-reveal="fade"] { transform: none; }
[data-reveal][data-reveal="left"] { transform: translateX(-26px); }
[data-reveal][data-reveal="right"] { transform: translateX(26px); }
[data-reveal].is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* >= 1200 */
@media (max-width: 1200px) {
  .footer-top { grid-template-columns: 1.3fr 1fr 1.4fr; }
  .footer-col--links-2 { display: none; }
  .menu-layout { grid-template-columns: 268px minmax(0, 1fr); }
}

/* <= 1024 : tablet */
@media (max-width: 1280px) {
  .hero__aside { display: none; }
}

@media (max-width: 1024px) {
  :root { --header-h: 74px; }
  .nav, .header-actions .header-action--account { display: none; }
  .burger { display: inline-flex; }
  .site-header__inner { grid-template-columns: auto 1fr; }
  .site-header__inner .header-actions { grid-column: 2; }
  .hero__aside { display: none; }
  .res-bar__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .res-bar__field:nth-child(2) { border-right: 0; }
  .res-bar__field:nth-child(3) { border-bottom: 0; }
  .res-bar__field { border-bottom: 1px solid var(--line-soft); }
  .res-bar__submit { grid-column: 1 / -1; }
  .res-bar__submit .btn { min-height: 58px; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .split__media--framed::before { display: none; }
  .stat-row { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .menu-layout { grid-template-columns: 1fr; }
  .menu-aside { display: none; }
  .menu-aside__close, .menu-aside__head { display: flex; }
  .menu-aside.is-open {
    display: grid; position: fixed; inset: 0 0 0 auto; width: min(360px, 90vw); z-index: 200;
    background: var(--cream-50); padding: 20px; overflow-y: auto; box-shadow: var(--sh-lg); top: 0;
  }
  .menu-mobile-bar { display: flex; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .auth { grid-template-columns: 1fr; }
  .auth__aside { min-height: 300px; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-col--links-2 { display: block; }
}

/* <= 760 : phone */
@media (max-width: 760px) {
  body { font-size: 15.5px; }
  .header-cta { display: none; }
  .hero__scroll { display: none; }
  .header-actions { gap: 6px; }
  .header-action, .burger { width: 42px; height: 42px; }
  .section-head { flex-direction: column; align-items: flex-start; }
  .section-head--center { align-items: center; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .branch-choice { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .promo { grid-template-columns: 1fr; }
  .promo__media { aspect-ratio: 16 / 10; min-height: 0; }
  .event { grid-template-columns: 1fr; }
  .offer-row { grid-template-columns: 1fr; }
  .offer-row__media { aspect-ratio: 16 / 9; min-height: 0; }
  .event__media { aspect-ratio: 16 / 9; }
  .branch { grid-template-columns: 1fr; }
  .branch__media { aspect-ratio: 16 / 9; min-height: 0; }
  .stat-row { grid-template-columns: 1fr; }
  .menu-item { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .menu-item__thumb { width: 64px; height: 64px; }
  .menu-item__side {
    grid-column: 1 / -1; min-width: 0;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  }
  .menu-item__side .btn { flex: 1 1 130px; }
  .menu-item__price { font-size: 20px; }
  .menu-item__desc { max-width: none; }
  .gallery-item--wide, .gallery-item--tall { grid-column: auto; grid-row: auto; aspect-ratio: 1 / 1; }
  .cookie-bar { grid-template-columns: 1fr; }
  .cookie-bar__actions .btn { flex: 1; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .quote { padding-left: 0; padding-top: 34px; }
  .quote::before { top: -18px; }
  .hero { min-height: 0; padding-bottom: clamp(110px, 26vw, 140px); }
  .to-top { right: 12px; bottom: 84px; }
}

@media (max-width: 420px) {
  .btn { width: 100%; }
  .btn-row .btn { flex: 1 1 100%; }
  .otp-row { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .otp-row input { font-size: 17px; }
}

/* Print: a clean menu on paper ---------------------------------------- */
@media print {
  .site-header, .site-footer, .mobile-nav, .drawer, .overlay, .cookie-bar, .to-top,
  .menu-aside, .menu-toolbar, .basket-bar, .page-banner__media, .btn, .menu-mobile-bar { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .section { padding-block: 12pt; }
  .category-block { break-inside: avoid; }
  .menu-item { break-inside: avoid; border-bottom: 1px solid #ddd; border-radius: 0; padding: 8pt 0; }
  .menu-item__thumb { display: none; }
  .menu-item { grid-template-columns: 1fr auto; }
  a[href]::after { content: ""; }
}

/* ==========================================================================
   The audit pass (2026-11-11): every piece of text reads at WCAG AA
   ==========================================================================
   Measured on every page at 390, 768 and 1440 px against the ground it
   actually sits on. Gold (#a97b3e) is the brand's accent for lines, icons
   and fills, but as small text it reached only 3.2 to 3.8:1, and on the gold
   wash 2.5:1. Text in gold takes the deep gold (5.4:1 on white, 4.6:1 on the
   wash). Ink thinned to 44 to 60% for labels fell to 2.6:1 and takes the
   muted ink instead. White on the brass gradient vanished at its pale middle. */
.menu-item__price, .cart-line__price, .dish__price, .bsd-tag, .bx-pol__n,
.bx-hours__d, .field__req, .map-directions-btn, .back-link, .back-link span,
.nav__link:hover, .nav__item.is-current > .nav__link, .nav__item:hover > .nav__link,
.link-arrow, .eyebrow, .bx-info a[href^="tel:"], a[href^="tel:"].bx-info__v { color: var(--gold-deep); }
/* The same, for styles that pages write after this sheet (the branch page and
   the blog's side column set their own gold). */
.bsd-tag, .bx-pol__n, .bx-hours__d, .bx-info__v a, .bx-info a { color: var(--gold-deep) !important; }
.bsd-tag.is-on { color: #fff !important; }
/* These two sit on a gold tint of their own, so they take a darker gold still. */
.bx-pol__n, .bx-hours__d { color: #6b4a1c !important; }
.bx-info__k, .bx-act__s, .bsd-new__d, .stat-label, .detail-label, .bx-map__hint, .cta-note,
.post-byline, .tag-links, .post-date, .dim { color: var(--muted) !important; }
.room-card__vip, .bx-today, .bsd-cat a.is-on, .bsd-tag.is-on, .bkt-tcard__vip { background: var(--gold-deep) !important; border-color: var(--gold-deep) !important; color: #fff !important; }
.bsd-cat a.is-on b { color: #fff !important; }
.bkt-pick { background: linear-gradient(120deg, var(--gold-deep), #9a6f34) !important; color: #fff !important; }
.bkt-tcard.is-on .bkt-pick { background: var(--gold-wash) !important; color: var(--gold-deep) !important; }
input::placeholder, textarea::placeholder { color: var(--faint); opacity: 1; }

/* Small type on a phone is never under 11px. */
@media (max-width: 575px) {
  .badge, .card__tag, .room-card__vip, .post-cat, .mm-here__k, .res-bar__label, .ckt-tip__opt { font-size: 11px !important; }
}

/* Targets a thumb can hit: links in a list are at least 24px tall (WCAG 2.2,
   2.5.8), and the slider's dots keep their look with a larger hit area. */
.site-footer a, .footer a, .footer__links a { display: inline-block; padding-block: 4px; }
.bkt-dot { position: relative; }
.bkt-dot::after { content: ""; position: absolute; inset: -9px -4px; }

/* The arrow stays with its words on a phone. The button carries the class whose
   rule makes it a grid, so the arrow dropped into a second row; it is a row. */
.res-bar__submit .btn, .res-bar__submit { white-space: nowrap; }
.btn.res-bar__submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
@media (max-width: 575px) { .res-bar__submit { letter-spacing: .12em; } }

/* The story picture is a wide panorama; framed at 4:3 it no longer shrinks to a
   strip on a phone with the dishes card covering most of it. */
.split__media img { aspect-ratio: 4 / 3; object-fit: cover; }

/* Two pictures to a row on a phone: a gallery is a grid, not a long scroll. */
@media (max-width: 575px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; grid-auto-flow: dense; }
  /* Wide and tall pieces keep their shape on a laptop; two to a row they left
     a strip and a hole, so on a phone every piece is a square. */
  .gallery-grid > .gallery-item { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 1 / 1 !important; }
}

/* The menu: the branch strip sat in a section of its own with full padding
   above and below, and the menu's section added its own: about 150px of
   nothing before the search. The strip's section now closes at the strip. */
.section--tight:has(> .container > .table-strip) { padding-bottom: 0; }
.table-strip { margin-bottom: 0; }

/* From the final pass at seven widths (2026-11-11). */
.mm-branch__addr { color: var(--muted) !important; }
[data-bsd-find]::placeholder { color: var(--faint) !important; opacity: 1; }
.wordmark__sub { font-size: max(9.5px, .62em); }
@media (max-width: 575px) {
  .ckt-label, .event__date span, .event-date-box span, .cw-row__k, th { font-size: 11px !important; }
}

/* Food and Drinks: the switch hides one course list and shows the other with
   the hidden attribute, but .cat-nav's own display: grid outranked it, so both
   lists always showed (Hot Drinks among the food courses) and pressing Drinks
   seemed to do nothing to the courses. Hidden means hidden. */
.cat-nav[hidden], [data-nav-type][hidden], [data-menu-type][hidden] { display: none !important; }
/* Pages that write their own styles after this sheet: the booking cards' cost
   line and branch label, and on the event page every word set in the light
   gold (labels, Get directions). The event page's gold, as text, is the deep
   one; its rules and fills keep their look through the same variable. */
.bkt-tcard__est { color: var(--gold-deep) !important; }
.mm-here__k { color: var(--muted) !important; }
.event-content-section, .event-sidebar, .event-stats-bar { --gold: #8a6229; }
.bkt-pick { background: linear-gradient(120deg, #7a5522, var(--gold-deep)) !important; }
.contact-info span, .accepts-text span { color: var(--muted) !important; }