@charset "utf-8";
/* =============================================================
   Royal India Kitchen — Musselburgh
   Design system + site styles
   ============================================================= */

/* ---------- 0. Self-hosted fonts ----------
   Variable fonts covering only the weights this design uses (Cormorant 300-500
   plus a 400 italic, Inter 400-700). Self-hosted rather than pulled from Google:
   that removes a render-blocking third-party stylesheet and two extra DNS/TLS
   handshakes from the critical path, and narrowing the weight ranges took the
   payload from 122KB to 107KB at the same time. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("../fonts/cormorant-var.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/cormorant-italic-var.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-var.woff2") format("woff2");
}

/* ---------- 1. Tokens ----------
   Three layers, in order of how often they change:

     :root            rhythm, type scale, and the colour roles that are the
                      same in every theme. Never varies.
     [data-theme]     the ~24 colour tokens and 2 font tokens a theme sets.
     [data-scheme]    structural corrections every light theme needs, derived
                      from the theme rather than chosen separately.

   The rule that makes this work: no layout rule below may contain a colour
   literal. Every colour is named here. That is what lets any hero, body and
   footer combine with any theme without being checked by eye — enforced by
   tools/lint_colors.py, which fails the build on any literal outside a token
   block.

   Colours are stored as space-separated channel triplets (--x-rgb) so a rule
   can take the same colour at any opacity with rgb(var(--x-rgb) / .4). The
   plain --x token is derived from the triplet, so there is one source of
   truth per colour and the two can never drift apart. */

:root {
  /* --- Colour roles that do NOT vary by theme --------------------------
     Anything drawn on top of a photograph keeps light text in every theme:
     the hero, page banners, closing banners, dish cards, gallery captions
     and the offer strip all sit on a dark scrim. Only flat surfaces respond
     to light/dark. This is why choosing a light theme never costs the hero
     its legibility, and why these live outside the theme layer. */
  --on-photo-rgb:   255 255 255;   /* text and controls over photography */
  --on-photo:       rgb(var(--on-photo-rgb));
  --scrim-rgb:       10 20 32;     /* the veil that makes that text legible */
  --shadow-rgb:       0 0 0;       /* drop shadows */
  --veil-media:     rgb(6 12 20 / .94);   /* lightbox: still showing a photo */

  /* The accents as they appear on photography. A light theme darkens its
     accents for flat surfaces; over a dark scrim that reads as mud, so
     anything sitting on a photograph — eyebrows, italic emphasis, the offer
     strip's hairline and glow — uses these instead of the theme accent. */
  --accent-on-photo-rgb:      228 190 120;   /* the bright accent */
  --accent-on-photo:          rgb(var(--accent-on-photo-rgb));
  --accent-deep-on-photo-rgb: 198 151 73;    /* the deeper brass */
  --warm-on-photo-rgb:        224 138 51;    /* saffron */
  --warm-on-photo:            rgb(var(--warm-on-photo-rgb));

  /* KNOWN DEFECT — see tools/known-issues.md #1.
     The outline button's chrome is pale cream in every theme, which is
     near-invisible on a light ground. Held here as an invariant so phase 1
     is provably a no-op; the phase 3 contrast validator will flag it, and
     the fix is to point these at rgb(var(--cream-text-rgb) / ...). */
  --btn-outline-line:       rgb(237 230 217 / .38);
  --btn-outline-fill:       rgb(237 230 217 / .04);
  --btn-outline-fill-hover: rgb(237 230 217 / .1);
  --btn-outline-fg-hover:   rgb(255 255 255);

  /* --- Rhythm ---------------------------------------------------------- */
  --shell:      1220px;
  --shell-wide: 1480px;
  --gutter:     clamp(1.25rem, 4vw, 2.75rem);
  --banner-grid-gap: clamp(1rem, 2vw, 1.5rem);
  --section-y:  clamp(4.5rem, 9vw, 8.5rem);
  --radius:     3px;

  --header-h:   84px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 1a. Theme: Ink (default) ----------
   Dark navy and brass. Also declared on :root so a page that somehow renders
   without a data-theme attribute still gets a complete set of tokens. */
:root,
[data-theme="ink"] {
  /* Ground */
  --ink-rgb:           10 20 32;
  --ink-soft-rgb:      15 30 44;
  --indigo-rgb:        20 48 74;
  --indigo-deep-rgb:   13 33 53;
  --slate-rgb:         26 40 54;

  /* Accents pulled from the crockery, copper & spice in the photography */
  --brass-rgb:         198 151 73;
  --brass-bright-rgb:  228 190 120;
  --saffron-rgb:       224 138 51;
  --saffron-soft-rgb:  240 176 96;

  /* Light */
  --cream-rgb:         248 243 233;
  --cream-2-rgb:       239 231 216;
  --cream-text-rgb:    237 230 217;

  /* Ink as it appears on a pale section (.section--cream) */
  --ink-on-light-rgb:  20 32 45;
  /* The accent as it appears on a pale section */
  --accent-on-light-rgb: 169 118 42;
  /* Text drawn on top of an accent fill: brass buttons, the offer tag */
  --on-accent-rgb:      10 20 32;
  --on-accent-warm-rgb: 20 32 44;

  /* Named surfaces */
  --surface-footer-rgb: 7 14 23;
  --surface-raised:     rgb(var(--ink-soft-rgb));   /* card hover */
  --surface-cream:      rgb(var(--cream-rgb));      /* the pale section band */

  /* --- Derived. Every token the layout rules refer to. --------------- */
  --ink:            rgb(var(--ink-rgb));
  --ink-soft:       rgb(var(--ink-soft-rgb));
  --indigo:         rgb(var(--indigo-rgb));
  --indigo-deep:    rgb(var(--indigo-deep-rgb));
  --slate:          rgb(var(--slate-rgb));

  --brass:          rgb(var(--brass-rgb));
  --brass-bright:   rgb(var(--brass-bright-rgb));
  --saffron:        rgb(var(--saffron-rgb));
  --saffron-soft:   rgb(var(--saffron-soft-rgb));

  --cream:          rgb(var(--cream-rgb));
  --cream-2:        rgb(var(--cream-2-rgb));
  --cream-text:     rgb(var(--cream-text-rgb));

  --muted:          rgb(var(--cream-text-rgb) / .66);
  --muted-dark:     rgb(var(--ink-on-light-rgb) / .68);

  --line-light:     rgb(var(--cream-text-rgb) / .14);
  --line-dark:      rgb(var(--ink-on-light-rgb) / .14);

  --accent-on-light: rgb(var(--accent-on-light-rgb));
  --on-accent:       rgb(var(--on-accent-rgb));
  --on-accent-warm:  rgb(var(--on-accent-warm-rgb));
  --surface-footer:  rgb(var(--surface-footer-rgb));

  /* The condensed / interior header bar, and the lift under it */
  --header-bar:     rgb(var(--ink-rgb) / .94);
  --header-shadow:  0 1px 0 var(--line-light),
                    0 18px 40px -28px rgb(var(--shadow-rgb) / .9);

  /* Full-screen veils that are not showing a photograph */
  --veil-nav:       rgb(5 10 16 / .66);

  /* Type */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--cream-text);
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, picture, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }

::selection { background: var(--brass); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 999;
  background: var(--brass); color: var(--on-accent);
  padding: .75rem 1.25rem; font-weight: 600; font-size: .875rem;
  text-decoration: none; border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- 3. Layout primitives ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--wide { max-width: var(--shell-wide); }

.section { padding-block: var(--section-y); position: relative; }
.section--indigo { background: var(--indigo-deep); }
.section--slate  { background: var(--ink-soft); }
.section--cream  { background: var(--surface-cream); color: var(--slate); }
.section--tight  { padding-block: clamp(3rem, 6vw, 5.5rem); }

/* Hairline dividers between dark sections */
.section--rule::before {
  content: ""; position: absolute; inset-inline: var(--gutter); top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-light) 18%, var(--line-light) 82%, transparent);
}

/* ---------- 4. Typography components ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.015em;
  font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.6rem);
  /* The tight leading needs explicit space beneath, or italic descenders
     ("the Esk.", "patience.") collide with the paragraph that follows. */
  margin: 0 0 1.5rem;
  padding-bottom: .04em;
}
/* Layouts that already space their children shouldn't double up. */
.section-heading .display,
.reserve__inner .display { margin-bottom: 0; }
.display em { font-style: italic; font-weight: 400; color: var(--brass-bright); }
.section--cream .display em { color: var(--saffron); }

.display--sm { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem); }

.eyebrow {
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 1.15rem;
  font-size: .70rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass-bright);
}
.eyebrow span {
  width: 34px; height: 1px; background: currentColor; opacity: .7; flex: none;
}
.section--cream .eyebrow { color: var(--accent-on-light); }
.eyebrow--center { justify-content: center; }

.lead {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.7rem);
  line-height: 1.42; font-weight: 400;
  color: var(--cream-text);
  letter-spacing: -.005em;
}
.section--cream .lead { color: var(--slate); }

.prose p { color: var(--muted); max-width: 62ch; }
.section--cream .prose p { color: var(--muted-dark); }

.section-heading {
  display: grid; gap: clamp(1.25rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-heading > p { color: var(--muted); margin: 0; max-width: 48ch; }
.section--cream .section-heading > p { color: var(--muted-dark); }
.section-heading--center {
  grid-template-columns: 1fr; justify-items: center; text-align: center;
}
.section-heading--center > p { max-width: 54ch; }
@media (max-width: 860px) {
  .section-heading { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- 5. Buttons & links ---------- */
.button {
  --btn-bg: var(--brass);
  --btn-fg: var(--on-accent);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: .6rem;
  padding: 1rem 1.9rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: .82rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--btn-bg); border-radius: var(--radius);
  cursor: pointer; overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s, border-color .3s, color .3s;
}
.button::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 20%, rgb(var(--on-photo-rgb) / .42) 50%, transparent 80%);
  transform: translateX(-120%); transition: transform .75s var(--ease);
}
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgb(var(--brass-rgb) / .7); }
.button:hover::after { transform: translateX(120%); }
.button:active { transform: translateY(0); }

.button--saffron { --btn-bg: var(--saffron); }
.button--saffron:hover { box-shadow: 0 12px 28px -12px rgb(var(--saffron-rgb) / .75); }

.button--outline {
  /* No backdrop-filter here: these sit over a scrim or a solid section, so it
     buys nothing visually and costs a compositing layer on every button. */
  --btn-bg: transparent; --btn-fg: var(--cream-text);
  border-color: var(--btn-outline-line);
  background: var(--btn-outline-fill);
}
.button--outline:hover {
  background: var(--btn-outline-fill-hover); border-color: var(--brass-bright);
  color: var(--btn-outline-fg-hover); box-shadow: none;
}
.section--cream .button--outline {
  --btn-fg: var(--slate); border-color: rgb(var(--ink-on-light-rgb) / .28);
}
.section--cream .button--outline:hover { background: rgb(var(--ink-on-light-rgb) / .06); border-color: var(--slate); }

.button--small { padding: .72rem 1.3rem; font-size: .72rem; letter-spacing: .12em; }
.button--block { width: 100%; }

.text-link {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-bright); text-decoration: none;
  padding-bottom: .35rem; border-bottom: 1px solid rgb(var(--brass-bright-rgb) / .35);
  transition: gap .3s var(--ease), border-color .3s, color .3s;
}
.text-link::after { content: "→"; transition: transform .3s var(--ease); }
.text-link:hover { gap: .85rem; border-color: var(--brass-bright); }
.text-link:hover::after { transform: translateX(3px); }
.section--cream .text-link { color: var(--accent-on-light); border-color: rgb(var(--accent-on-light-rgb) / .35); }

.tick-list { display: grid; gap: .7rem; margin: 1.6rem 0 0; }
.tick-list li {
  position: relative; padding-left: 1.9rem; color: var(--muted); font-size: .95rem;
}
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 11px; height: 6px; border-left: 1.5px solid var(--brass);
  border-bottom: 1.5px solid var(--brass); transform: rotate(-45deg);
}
.section--cream .tick-list li { color: var(--muted-dark); }

/* ---------- 6. Image frame ---------- */
.image-frame { position: relative; overflow: hidden; border-radius: var(--radius); }
.image-frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.image-frame:hover img { transform: scale(1.045); }
.image-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--line-light);
}
.image-frame__note {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--brass); color: var(--on-accent);
  padding: .6rem 1.1rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}

/* ---------- 7. Header ---------- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 100;
  transition: background-color .45s var(--ease), box-shadow .45s var(--ease), padding .45s var(--ease);
  padding-block: .9rem;
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(var(--scrim-rgb) / .82), rgb(var(--scrim-rgb) / 0));
  opacity: 1; transition: opacity .45s var(--ease);
}
.site-header.is-stuck {
  background: var(--header-bar);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--header-shadow);
  padding-block: .45rem;
}
.site-header.is-stuck::before { opacity: 0; }
/* Interior pages: always solid */
.site-header--solid {
  background: var(--header-bar);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 1px 0 var(--line-light);
}
.site-header--solid::before { opacity: 0; }

.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}

.brand {
  display: flex; align-items: center; gap: .8rem;
  text-decoration: none; flex: none;
}
.brand__mark {
  width: 42px; height: 42px; flex: none;
  transition: transform .5s var(--ease);
}
.brand:hover .brand__mark { transform: rotate(-8deg) scale(1.05); }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--font-display); font-size: 1.32rem; font-weight: 500;
  letter-spacing: .04em; color: var(--cream);
  white-space: nowrap;
}
.brand__place {
  font-size: .56rem; font-weight: 600; letter-spacing: .34em; text-transform: uppercase;
  color: var(--brass); margin-top: .28rem;
}

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.site-nav a {
  position: relative; text-decoration: none;
  font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cream-text); white-space: nowrap;
  transition: color .3s;
}
.site-nav a:not(.button)::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 1px; background: var(--brass-bright);
  transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease);
}
.site-nav a:not(.button):hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.site-nav a[aria-current="page"] { color: var(--brass-bright); }

.menu-toggle {
  display: none; align-items: center; gap: .6rem;
  background: none; border: 0; cursor: pointer; padding: .5rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cream-text);
}
.menu-toggle__lines { display: grid; gap: 5px; width: 22px; }
.menu-toggle__lines i {
  display: block; height: 1.5px; background: currentColor; border-radius: 2px;
  transition: transform .4s var(--ease), opacity .3s;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__lines i:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__lines i:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 940px) {
  .menu-toggle { display: inline-flex; min-width: 44px; min-height: 44px; }
  .menu-toggle[aria-expanded="true"] {
    position: relative; z-index: 2;
    color: var(--cream-text) !important;
  }
  .site-nav {
    position: fixed; inset: 0 0 auto auto; width: min(360px, 88vw);
    height: 100vh; height: 100dvh;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: .35rem;
    background: var(--ink-soft);
    padding: 5rem 2rem 2rem;
    box-shadow: -30px 0 70px -30px rgb(var(--shadow-rgb) / .9);
    transform: translateX(100%); transition: transform .5s var(--ease);
    overflow-x: hidden; overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-nav.is-open { transform: translateX(0); }
  .site-nav a:not(.button) {
    padding: 1rem .25rem; font-size: .95rem; letter-spacing: .06em;
    border-bottom: 1px solid var(--line-light);
  }
  .site-nav a:not(.button)::after { display: none; }
  .site-nav .button {
    margin-top: 1.5rem;
    /* A finger-sized target: the drawer's booking button measured 25px
       tall in the mobile audit, well under the 44px tap guideline. */
    min-height: 44px;
    padding-block: .9rem;
  }
  .nav-scrim {
    position: fixed; inset: 0; z-index: 99;
    background: var(--veil-nav); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility .45s;
  }
  .nav-scrim.is-visible { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 480px) {
  .site-header__inner { gap: .75rem; }
  .brand { flex: 1; min-width: 0; gap: .6rem; }
  .brand__mark { width: 38px; height: 38px; }
  .brand__text { min-width: 0; }
  .brand__name {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(1rem, 5.2vw, 1.15rem);
  }
  .brand__place { font-size: .5rem; letter-spacing: .24em; }
  .menu-toggle { flex: none; justify-content: center; padding: .5rem; }
  .menu-toggle__label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* ---------- 8. Hero slider ---------- */
.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: flex; align-items: flex-end;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}
.hero__slides { position: absolute; inset: 0; z-index: -2; background: var(--ink); }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 2.2s var(--ease);
  will-change: opacity;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transform: scale(1.06);
}
/* A slow, barely-perceptible drift rather than a zoom. The previous 9% scale
   over 9s read as restless behind the headline. */
.hero__slide.is-active img { animation: kenburns 18s ease-out forwards; }
@keyframes kenburns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.055); }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgb(var(--scrim-rgb) / .68) 0%, rgb(var(--scrim-rgb) / .18) 32%, rgb(var(--scrim-rgb) / .72) 72%, rgb(var(--scrim-rgb) / .95) 100%),
    linear-gradient(94deg, rgb(var(--scrim-rgb) / .86) 0%, rgb(var(--scrim-rgb) / .42) 46%, rgb(var(--scrim-rgb) / .12) 100%);
}

.hero__inner { position: relative; width: 100%; }
.hero__content { max-width: 40rem; }
.hero h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.7rem, 1.5rem + 5.2vw, 5.7rem);
  line-height: .99; letter-spacing: -.02em;
  color: var(--on-photo);
  text-shadow: 0 2px 30px rgb(var(--shadow-rgb) / .4);
  margin-bottom: 1.35rem;
}
.hero h1 em { font-style: italic; font-weight: 400; color: var(--brass-bright); display: block; }
.hero__intro {
  font-size: clamp(1.02rem, .96rem + .35vw, 1.2rem);
  color: rgb(var(--on-photo-rgb) / .84); max-width: 34rem; line-height: 1.65;
  margin-bottom: 2.1rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }

.hero__details {
  display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 4vw, 3.25rem);
  padding-top: 1.6rem; border-top: 1px solid rgb(var(--on-photo-rgb) / .16);
}
.hero__details > div { display: flex; flex-direction: column; gap: .2rem; }
.hero__details span {
  font-size: .62rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brass-bright);
}
.hero__details strong {
  font-family: var(--font-display); font-size: 1.24rem; font-weight: 500; color: var(--on-photo);
  letter-spacing: .005em;
}
.hero__details small { font-size: .8rem; color: rgb(var(--on-photo-rgb) / .6); }

/* Slider controls.
   These sit level with the content column rather than the viewport edge —
   on a wide monitor the shell is centred, so a plain `right: var(--gutter)`
   strands them hundreds of pixels out on their own. */
.hero__controls {
  position: absolute;
  right: max(var(--gutter), calc(50% - (var(--shell-wide) / 2) + var(--gutter)));
  bottom: clamp(2.5rem, 6vw, 5rem);
  display: flex; align-items: center; gap: 1.1rem; z-index: 3;
}
.hero__dots { display: flex; gap: .55rem; }
.hero__dot {
  width: 30px; height: 3px; padding: 0;
  border: 0; border-radius: 3px; cursor: pointer;
  background: rgb(var(--on-photo-rgb) / .28);
  position: relative; overflow: hidden;
  transition: background-color .3s;
}
.hero__dot:hover { background: rgb(var(--on-photo-rgb) / .5); }
.hero__dot span {
  position: absolute; inset: 0; background: var(--brass-bright);
  transform: scaleX(0); transform-origin: left;
}
.hero__dot.is-active span { animation: dotfill 11s linear forwards; }
.hero--paused .hero__dot.is-active span { animation-play-state: paused; }
@keyframes dotfill { to { transform: scaleX(1); } }

.hero__arrows { display: flex; gap: .45rem; }
.hero__arrow {
  width: 42px; height: 42px; display: grid; place-items: center;
  background: rgb(var(--on-photo-rgb) / .08); border: 1px solid rgb(var(--on-photo-rgb) / .22);
  border-radius: 50%; cursor: pointer; color: var(--on-photo);
  backdrop-filter: blur(8px);
  transition: background-color .3s, border-color .3s, transform .3s var(--ease);
}
.hero__arrow:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); transform: scale(1.07); }
.hero__arrow svg { width: 15px; height: 15px; }

.hero__scroll {
  /* Centred along the bottom: the left of the hero is taken by the address
     block and the right by the slider controls, so the middle is the only
     place this can live without colliding with something. */
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: clamp(2.5rem, 6vw, 5rem); z-index: 3;
  display: inline-flex; flex-direction: column; align-items: center; gap: .6rem;
  font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: rgb(var(--on-photo-rgb) / .55); text-decoration: none;
}
.hero__scroll i {
  display: block; width: 1px; height: 34px;
  background: linear-gradient(180deg, var(--brass-bright), transparent);
  animation: scrollpulse 4.5s var(--ease) infinite;
}
@keyframes scrollpulse { 0%,100% { opacity: .3; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }

@media (max-width: 1100px) { .hero__scroll { display: none; } }
@media (max-width: 820px) {
  .hero__controls { left: var(--gutter); right: auto; bottom: 1.5rem; }
  .hero__arrows { display: none; }
  .hero { padding-bottom: 5.5rem; }
}

/* ---------- 9. Pedigree / story ---------- */
.pedigree__grid {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center;
}
@media (max-width: 900px) { .pedigree__grid { grid-template-columns: 1fr; } }

/* Keep the story photograph level with its eyebrow, regardless of copy length. */
#story .pedigree__grid { align-items: start; }

.pedigree__media { position: relative; }
.pedigree__media .image-frame { aspect-ratio: 4 / 5; }
.pedigree__badge {
  position: absolute; right: -1.25rem; bottom: -1.25rem;
  background: var(--indigo); border: 1px solid var(--line-light);
  padding: 1.35rem 1.6rem; max-width: 15rem;
  box-shadow: 0 26px 60px -30px rgb(var(--shadow-rgb) / .9);
}
.pedigree__badge strong {
  display: block; font-family: var(--font-display); font-size: 1.5rem;
  font-weight: 500; color: var(--brass-bright); line-height: 1.1;
}
.pedigree__badge span { font-size: .78rem; color: var(--muted); }
@media (max-width: 560px) { .pedigree__badge { position: static; margin-top: 1rem; max-width: none; } }

.facts {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--line-light);
  border: 1px solid var(--line-light);
}
.facts > div { background: var(--indigo-deep); padding: 1.6rem 1.5rem; }
.facts strong {
  display: block; font-family: var(--font-display); font-size: 1.42rem;
  font-weight: 500; color: var(--brass-bright); margin-bottom: .2rem;
}
.facts span { font-size: .82rem; color: var(--muted); line-height: 1.5; }

/* ---------- 10. Feature split ---------- */
.feature-split__grid {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.feature-split__grid--reverse .feature-split__media { order: 2; }
@media (max-width: 900px) {
  .feature-split__grid { grid-template-columns: 1fr; }
  .feature-split__grid--reverse .feature-split__media { order: 0; }
}
.feature-split__media .image-frame { aspect-ratio: 5 / 4; }
.feature-split__copy .lead { margin-bottom: 1.2rem; }
.feature-split__links {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-top: 2rem;
}
.feature-split__links > span { font-size: .82rem; color: var(--muted); line-height: 1.5; }

/* ---------- 11. Menu cards ---------- */
.menu-cards {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  background: var(--line-light); border: 1px solid var(--line-light);
}
.menu-card {
  position: relative; background: var(--ink);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  display: flex; flex-direction: column; gap: 1.25rem;
  transition: background-color .45s var(--ease);
  overflow: hidden;
}
.menu-card::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--brass), var(--saffron));
  transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease);
}
.menu-card:hover { background: var(--ink-soft); }
.menu-card:hover::before { transform: scaleX(1); }
.menu-card__number {
  font-family: var(--font-display); font-size: 2.5rem; font-weight: 300;
  color: var(--brass); opacity: .5; line-height: 1;
  transition: opacity .45s, transform .45s var(--ease);
}
.menu-card:hover .menu-card__number { opacity: 1; transform: translateY(-2px); }
.menu-card h3 {
  font-family: var(--font-display); font-size: 1.55rem; font-weight: 500;
  line-height: 1.15; margin-bottom: .55rem; color: var(--cream);
}
.menu-card p { font-size: .93rem; color: var(--muted); margin: 0; }

/* ---------- 12. Signature dish grid ---------- */
.dish-grid {
  display: grid; gap: clamp(1rem, 2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 268px), 1fr));
}
.dish {
  position: relative; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 4 / 5; display: flex; align-items: flex-end;
  text-decoration: none; isolation: isolate;
}
.dish img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.dish::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(var(--scrim-rgb) / 0) 32%, rgb(var(--scrim-rgb) / .5) 62%, rgb(var(--scrim-rgb) / .93) 100%);
  transition: opacity .5s;
}
.dish:hover img { transform: scale(1.07); }
.dish__body { padding: clamp(1.2rem, 2.4vw, 1.85rem); width: 100%; }
.dish__tag {
  display: inline-block; margin-bottom: .55rem;
  font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass-bright);
}
.dish h3 {
  font-family: var(--font-display); font-size: clamp(1.3rem, 1.1rem + .5vw, 1.6rem);
  font-weight: 500; color: var(--on-photo); line-height: 1.12; margin-bottom: .35rem;
}
.dish p { font-size: .85rem; color: rgb(var(--on-photo-rgb) / .68); margin: 0; line-height: 1.5; }

/* ---------- 13. Venue band ---------- */
.venue {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: stretch; background: var(--indigo-deep);
  /* Match the neighbouring content shell instead of touching the viewport. */
  padding-block: clamp(2rem, 4vw, 4rem);
  padding-inline: max(var(--gutter), calc((100% - var(--shell)) / 2 + var(--gutter)));
  gap: clamp(1.5rem, 4vw, 4rem);
}
.venue__media {
  position: relative; width: 100%; min-width: 0; min-height: 380px; overflow: hidden;
  border-radius: clamp(.75rem, 1.5vw, 1.25rem);
}
.venue__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.venue__panel {
  min-width: 0;
  padding: clamp(1rem, 2vw, 2rem) 0;
  display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 900px) {
  .venue { grid-template-columns: 1fr; }
  .venue__media { min-height: 0; aspect-ratio: 4 / 3; }
  .venue__panel { padding-block: 0; }
}

/* ---------- 14. Gallery ---------- */
.gallery-strip {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.gallery-strip figure { margin: 0; }
.gallery-strip .image-frame { aspect-ratio: 3 / 4; }

.gallery-grid {
  columns: 3 280px; column-gap: clamp(.75rem, 1.6vw, 1.25rem);
}
.gallery-grid figure { margin: 0 0 clamp(.75rem, 1.6vw, 1.25rem); break-inside: avoid; }
.gallery-item {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  position: relative; overflow: hidden; border-radius: var(--radius); cursor: zoom-in;
}
.gallery-item img { width: 100%; height: auto; transition: transform 1.1s var(--ease), filter .5s; }
.gallery-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(var(--scrim-rgb) / 0) 55%, rgb(var(--scrim-rgb) / .8));
  opacity: 0; transition: opacity .45s;
}
.gallery-item__cap {
  position: absolute; left: 1.1rem; bottom: 1rem; z-index: 2; text-align: left;
  font-size: .78rem; letter-spacing: .04em; color: var(--on-photo);
  opacity: 0; transform: translateY(8px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item:hover::after { opacity: 1; }
.gallery-item:hover .gallery-item__cap { opacity: 1; transform: translateY(0); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--veil-media); backdrop-filter: blur(10px);
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
  padding: clamp(1rem, 4vw, 3rem);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(1180px, 94vw); max-height: 84vh; width: auto; object-fit: contain;
  border-radius: var(--radius); box-shadow: 0 40px 90px -40px rgb(var(--shadow-rgb));
  transform: scale(.96); transition: transform .45s var(--ease);
}
.lightbox.is-open img { transform: scale(1); }
.lightbox__cap {
  margin-top: 1.1rem; text-align: center;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.lightbox__close, .lightbox__nav {
  position: absolute; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgb(var(--on-photo-rgb) / .09); border: 1px solid rgb(var(--on-photo-rgb) / .2);
  color: var(--on-photo); cursor: pointer; transition: background-color .3s, transform .3s var(--ease);
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--brass); color: var(--ink); transform: scale(1.08); }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__nav--prev { left: clamp(.5rem, 2.5vw, 2rem); }
.lightbox__nav--next { right: clamp(.5rem, 2.5vw, 2rem); }
.lightbox__nav svg, .lightbox__close svg { width: 16px; height: 16px; }
@media (max-width: 620px) { .lightbox__nav { display: none; } }

/* ---------- 15. Reserve CTA ---------- */
.reserve { position: relative; overflow: hidden; isolation: isolate; }
.reserve__bg { position: absolute; inset: 0; z-index: -2; }
.reserve__bg img { width: 100%; height: 100%; object-fit: cover; }
.reserve::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(var(--scrim-rgb) / .93), rgb(var(--scrim-rgb) / .86));
}
.reserve__inner { text-align: center; display: grid; justify-items: center; gap: 1.5rem; }
.reserve__inner > p { color: var(--muted); max-width: 46ch; margin: 0; }
.reserve__actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }
.reserve__address {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .82rem; letter-spacing: .06em; color: var(--muted); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color .3s, border-color .3s;
}
.reserve__address:hover { color: var(--brass-bright); border-color: var(--brass-bright); }

/* ---------- 16. Page header (interior) ---------- */
.page-header {
  position: relative; isolation: isolate; overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 8vw, 7rem));
  padding-bottom: clamp(3rem, 7vw, 6rem);
}
.page-header__bg { position: absolute; inset: 0; z-index: -2; }
.page-header__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(var(--scrim-rgb) / .9) 0%, rgb(var(--scrim-rgb) / .78) 55%, rgb(var(--scrim-rgb) / .96) 100%);
}
.page-header__inner { max-width: 44rem; }
.page-header h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.4rem);
  line-height: 1.02; letter-spacing: -.02em; color: var(--on-photo); margin-bottom: 1.1rem;
}
.page-header h1 em { font-style: italic; font-weight: 400; color: var(--brass-bright); }
.page-header p { color: rgb(var(--on-photo-rgb) / .78); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); max-width: 36rem; }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-bottom: 1.4rem; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgb(var(--on-photo-rgb) / .5);
}
.breadcrumb a { text-decoration: none; color: var(--brass-bright); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb li { display: flex; align-items: center; gap: .5rem; }
.breadcrumb li + li::before { content: "/"; opacity: .45; }

/* ---------- 17. Steps (order / booking) ---------- */
.steps {
  display: grid; gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  counter-reset: step;
}
.step {
  position: relative; padding: 2rem 1.75rem;
  background: var(--ink-soft); border: 1px solid var(--line-light);
  border-radius: var(--radius);
  transition: transform .45s var(--ease), border-color .45s;
}
.step:hover { transform: translateY(-4px); border-color: rgb(var(--brass-rgb) / .5); }
.step__num {
  display: grid; place-items: center; width: 46px; height: 46px;
  border: 1px solid var(--brass); border-radius: 50%; margin-bottom: 1.3rem;
  font-family: var(--font-display); font-size: 1.32rem; color: var(--brass-bright);
}
.step h3 {
  font-family: var(--font-display); font-size: 1.4rem; font-weight: 500;
  color: var(--cream); margin-bottom: .5rem;
}
.step p { font-size: .92rem; color: var(--muted); margin: 0; }

/* CTA panel */
.cta-panel {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-deep) 100%);
  border: 1px solid var(--line-light);
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--radius);
  position: relative; overflow: hidden;
}
.cta-panel::before {
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--brass-rgb) / .18), transparent 68%);
  pointer-events: none;
}
@media (max-width: 860px) { .cta-panel { grid-template-columns: 1fr; } }
.cta-panel__actions { display: grid; gap: .8rem; }

/* ---------- 18. Contact ---------- */
.contact-grid {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.contact-card {
  display: flex; flex-direction: column; gap: .85rem;
  padding: clamp(1.75rem, 3vw, 2.4rem);
  background: var(--ink-soft); border: 1px solid var(--line-light);
  border-radius: var(--radius); text-decoration: none;
  transition: transform .45s var(--ease), border-color .45s, background-color .45s;
}
a.contact-card:hover {
  transform: translateY(-4px); border-color: rgb(var(--brass-rgb) / .55);
  background: var(--indigo-deep);
}
.contact-card__icon {
  display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; background: rgb(var(--brass-rgb) / .14); color: var(--brass-bright);
  border: 1px solid rgb(var(--brass-rgb) / .32);
}
.contact-card__icon svg { width: 19px; height: 19px; }
.contact-card__label {
  font-size: .64rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass-bright);
}
.contact-card strong {
  font-family: var(--font-display); font-size: 1.32rem; font-weight: 500;
  color: var(--cream); line-height: 1.25; letter-spacing: .005em;
}
.contact-card span:not(.contact-card__label) { font-size: .88rem; color: var(--muted); }

.hours-table { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.hours-table th, .hours-table td {
  padding: .85rem 0; text-align: left; font-size: .93rem;
  border-bottom: 1px solid var(--line-light);
}
.hours-table th { font-weight: 500; color: var(--cream-text); }
.hours-table td { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: 0; }
.hours-table tr.is-today th { color: var(--brass-bright); font-weight: 600; }
.hours-table tr.is-today td { color: var(--brass-bright); }

.map-frame {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-light); background: var(--ink-soft);
  aspect-ratio: 16 / 9; min-height: 320px;
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.05); }
/* Keep the minimum map height from forcing a 16:9 width beyond a phone.
   That overflow also enlarges the viewport used by the fixed header. */
.map-frame { width: 100%; max-width: 100%; min-width: 0; }
.map-frame__gate { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

/* ---------- 19. Footer ---------- */
.site-footer { background: var(--surface-footer); padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.site-footer__top {
  display: grid; gap: clamp(2rem, 4vw, 3.5rem);
  /* Explicit tracks, not auto-fit: auto-fit was generating a phantom sixth
     column that ate space on the right at narrower widths. */
  grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 1080px) {
  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Brand across the top so the four info blocks form a tidy 2×2 with no
     orphaned cell. */
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .site-footer__top { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

.site-footer__brand { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.site-footer__brand p { font-family: var(--font-display); font-size: 1.28rem; color: var(--muted); max-width: 24ch; line-height: 1.4; }
.footer-label {
  font-size: .64rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 1.1rem;
}
.site-footer address, .site-footer__top p:not(.footer-label) { color: var(--muted); font-size: .93rem; line-height: 1.7; }
.footer-links { display: grid; gap: .7rem; }
.footer-links a {
  font-size: .93rem; color: var(--muted); text-decoration: none;
  transition: color .3s, padding-left .3s var(--ease);
}
.footer-links a:hover { color: var(--brass-bright); padding-left: .35rem; }

.footer-contact {
  display: flex; flex-direction: column; gap: .1rem;
  text-decoration: none; margin-bottom: 1.1rem;
  transition: transform .3s var(--ease);
}
.footer-contact:hover { transform: translateX(3px); }
.footer-contact span { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.footer-contact strong {
  font-family: var(--font-display); font-size: 1.28rem; font-weight: 500; color: var(--cream);
  transition: color .3s;
}
.footer-contact:hover strong { color: var(--brass-bright); }

/* Long restaurant addresses must stay inside their column in every typeface. */
.site-footer .footer-contact { min-width: 0; max-width: 100%; }
.site-footer .footer-contact strong { overflow-wrap: anywhere; }
@media (min-width: 941px) {
  .site-footer .footer-contact[href^="mailto:"] strong { font-size: 1.1rem; }
}
.site-footer .site-footer__bottom,
.site-footer .site-footer__bottom a,
.site-footer .footer-legal a { color: var(--muted); }
@media (max-width: 700px) {
  .site-footer .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; font-size: .8rem; }
}

.site-footer__bottom {
  border-top: 1px solid var(--line-light);
  padding-block: 1.6rem;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-size: .78rem; color: rgb(var(--cream-text-rgb) / .4);
}
.site-footer__bottom a { color: rgb(var(--cream-text-rgb) / .55); text-decoration: none; }
.site-footer__bottom a:hover { color: var(--brass-bright); }
.site-footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ---------- 20. Reveal animations ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* ---------- 21. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero__slide.is-active img { animation: none; transform: scale(1.02); }
  .hero__dot.is-active span { transform: scaleX(1); }
}

/* ---------- 22. Print ---------- */
@media print {
  .site-header, .hero__controls, .hero__scroll, .lightbox, .nav-scrim { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- 24. "Powered by Grub Direct" ---------- */
.footer-powered {
  display: inline-flex; align-items: center; gap: .7rem;
  text-decoration: none; opacity: .62;
  transition: opacity .35s var(--ease);
}
.footer-powered:hover { opacity: 1; }
.footer-powered span {
  font-size: .68rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgb(var(--cream-text-rgb) / .55);
  white-space: nowrap;
}
.footer-powered img {
  width: auto; height: 26px;   /* the source is 300×114, so this keeps it crisp */
  display: block;
}
@media (max-width: 860px) {
  /* space-between strands these apart once they wrap; stack them instead. */
  .site-footer__bottom {
    flex-direction: column; align-items: flex-start;
    justify-content: flex-start; gap: 1.35rem;
  }
  .footer-powered { order: 0; }
}

/* The primary menu's CTA item carries .button; in the footer's link column that
   reads as a stray gold slab, so render it as a plain link there. */
.footer-links .button {
  background: none; border: 0; padding: 0;
  color: var(--brass-bright);
  font-size: .93rem; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  justify-content: flex-start;
}
.footer-links .button::after { display: none; }
.footer-links .button:hover {
  transform: none; box-shadow: none; padding-left: .35rem; color: var(--brass-bright);
}

/* ---------- 25. Long-form / legal content ---------- */
/* The base .prose rules only styled paragraphs, which is fine for the marketing
   sections but leaves headings and lists unstyled on a policy page. */
.prose h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.6rem, 1.35rem + 1vw, 2.15rem);
  line-height: 1.15; color: var(--cream);
  margin: 2.75rem 0 .9rem;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.2rem, 1.1rem + .45vw, 1.45rem);
  color: var(--brass-bright);
  margin: 2rem 0 .6rem;
}
.prose ul:not(.tick-list),
.prose ol {
  margin: 0 0 1.15em; padding-left: 1.4rem;
  color: var(--muted); max-width: 62ch;
}
.prose ul:not(.tick-list) { list-style: disc; }
.prose ol { list-style: decimal; }
.prose ul:not(.tick-list) li,
.prose ol li { margin-bottom: .5rem; padding-left: .25rem; }
.prose ul:not(.tick-list) li::marker,
.prose ol li::marker { color: var(--brass); }
.prose a {
  color: var(--brass-bright);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgb(var(--brass-bright-rgb) / .45);
  transition: text-decoration-color .3s;
}
.prose a:hover { text-decoration-color: var(--brass-bright); }
.prose strong { color: var(--cream); font-weight: 600; }
.prose hr {
  border: 0; height: 1px; background: var(--line-light); margin: 2.5rem 0;
}
.prose .legal-updated {
  font-size: .82rem; letter-spacing: .04em;
  color: rgb(var(--cream-text-rgb) / .45);
  padding-bottom: 1.5rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--line-light);
}

/* ---------- 26. Footer legal links ---------- */
.footer-legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  margin-top: .45rem;
}
.footer-legal a {
  font-size: .78rem; color: rgb(var(--cream-text-rgb) / .5);
  text-decoration: none; transition: color .3s;
}
.footer-legal a:hover { color: var(--brass-bright); }
.footer-legal span { color: rgb(var(--cream-text-rgb) / .22); font-size: .7rem; }
.site-footer__bottom > div:first-child { display: flex; flex-direction: column; }

/* ---------- 27. Footer opening hours ---------- */
.footer-hours { display: grid; gap: .3rem; }
/* Day and time sit on one line: with a row per weekday, the stacked version
   made this column roughly twice the height of its neighbours. */
.footer-hours li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; font-size: .86rem; line-height: 1.5;
  max-width: 16rem;
}
.footer-hours li span { color: var(--muted); }
.footer-hours li strong {
  font-weight: 500; color: var(--cream-text);
  font-variant-numeric: tabular-nums;
}
/* Split shifts wrap between intervals, never halfway through a time range. */
.rik-hours-interval { display: inline-block; white-space: nowrap; }
.footer-hours li strong .rik-hours-interval { color: inherit; }
.footer-hours li strong:has(.rik-hours-interval) { text-align: right; }
/* Today is highlighted by the same script that drives the contact page table. */
.footer-hours li.is-today span,
.footer-hours li.is-today strong { color: var(--brass-bright); }
.footer-hours li.is-today strong { font-weight: 600; }
.footer-hours__note {
  margin-top: .85rem; font-size: .8rem;
  color: rgb(var(--cream-text-rgb) / .45);
}

/* ---------- 28. Hero offer banner ---------- */
.hero__offer {
  position: relative;
  /* Tag and call-to-action share a top row; the headline then gets the full
     width beneath, instead of being squeezed into the middle of a flex row. */
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "tag cta"
    "body body";
  justify-content: space-between;
  align-items: center;
  gap: .9rem 1.4rem;
  margin: -0.25rem 0 clamp(2.25rem, 5vw, 3.5rem);
  padding: 1.15rem 1.5rem;
  max-width: 47rem;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  border-radius: 5px;
  border: 1px solid rgb(var(--accent-on-photo-rgb) / .5);
  background:
    linear-gradient(102deg, rgb(var(--warm-on-photo-rgb) / .26) 0%, rgb(var(--accent-deep-on-photo-rgb) / .13) 52%, rgb(var(--accent-deep-on-photo-rgb) / .05) 100%),
    rgb(var(--scrim-rgb) / .55);
  backdrop-filter: blur(10px) saturate(130%);
  box-shadow: 0 16px 40px -30px rgb(var(--warm-on-photo-rgb) / .45);
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.hero__offer:hover {
  border-color: var(--brass-bright);
  transform: translateY(-3px);
  box-shadow: 0 24px 56px -24px rgb(var(--warm-on-photo-rgb) / .95);
}

/* The banner previously carried a sheen that swept across every few seconds.
   Removed: with the hero already crossfading, a second repeating animation made
   the whole area feel busy. A static highlight gives the same lift. */
.hero__offer::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, rgb(var(--on-photo-rgb) / .07), transparent 62%);
}

/* Gold hairline down the leading edge */
.hero__offer::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--saffron), var(--brass-bright));
}

.hero__offer-tag {
  grid-area: tag; justify-self: start; flex: none; display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .75rem;
  background: var(--saffron); color: var(--on-accent-warm);
  font-size: .61rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 4px 14px -6px rgb(var(--warm-on-photo-rgb) / .9);
}
.hero__offer-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--on-accent-warm); opacity: .8;
}

.hero__offer-body { grid-area: body; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.hero__offer-body strong {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.85rem);
  font-weight: 500; color: var(--on-photo); line-height: 1.12;
  letter-spacing: -.008em;
}
.hero__offer-text { font-size: .89rem; color: rgb(var(--on-photo-rgb) / .8); line-height: 1.5; }
.hero__offer-terms {
  font-size: .7rem; color: rgb(var(--on-photo-rgb) / .45); line-height: 1.4;
  margin-top: .1rem;
}

/* No button: the whole banner is the link, so this is just a quiet affordance. */
.hero__offer-arrow {
  grid-area: cta; justify-self: end; align-self: center;
  font-size: 1.1rem; line-height: 1; color: var(--brass-bright); opacity: .8;
  transition: transform .35s var(--ease), opacity .35s;
}
.hero__offer:hover .hero__offer-arrow { transform: translateX(4px); opacity: 1; }

@media (max-width: 620px) {
  .hero__offer {
    grid-template-columns: 1fr;
    grid-template-areas: "tag" "body";
    justify-content: stretch;
    padding: 1.05rem 1.15rem; gap: .8rem;
  }
  .hero__offer-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__offer:hover { transform: none; }
  .hero__offer::after { animation: none; opacity: 0; }
  .hero__offer-tag::before { animation: none; }
}/* =============================================================
   29. THEMES

   Colour themes, each bundling a palette AND a font pairing — colour
   alone is not enough, or two client sites still read as the same template.

   Because :root derives --muted, --line-light, --header-bar and the rest
   FROM the channel triplets, a theme only has to set the triplets and its
   two fonts. Everything else recomputes. That is what makes a theme ~20
   lines instead of the forty override rules Sandstone originally needed.

   Light themes additionally set --scheme: light, which switches on the
   structural corrections in section 29z. They do not repeat them.

   Every pair below is checked by tools/contrast.py against WCAG AA. The
   eyebrows are small caps, so accents are held to the 4.5:1 normal-text
   threshold rather than the 3:1 large-text one.
   ============================================================= */

/* ---------- 29a. Fonts for the theme pairings ----------
   Variable fonts, latin subset, weight ranges rather than static weights.
   @font-face only downloads a family something actually references, so the
   inactive themes cost a visitor nothing. */
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/playfair-var.woff2") format("woff2"); }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../fonts/playfair-italic-var.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/bodoni-var.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../fonts/bodoni-italic-var.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/lora-var.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400 600; font-display: swap; src: url("../fonts/lora-italic-var.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../fonts/fraunces-var.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("../fonts/fraunces-italic-var.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/newsreader-var.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 300 600; font-display: swap; src: url("../fonts/newsreader-italic-var.woff2") format("woff2"); }
@font-face { font-family: "Crimson Pro"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/crimson-var.woff2") format("woff2"); }
@font-face { font-family: "Crimson Pro"; font-style: italic; font-weight: 300 600; font-display: swap; src: url("../fonts/crimson-italic-var.woff2") format("woff2"); }
@font-face { font-family: "Syne"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/syne-var.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/jost-var.woff2") format("woff2"); }
@font-face { font-family: "Karla"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/karla-var.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/dmsans-var.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/manrope-var.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/worksans-var.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/spacegrotesk-var.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/sourcesans-var.woff2") format("woff2"); }

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/archivo-var.woff2") format("woff2"); }
@font-face { font-family: "Petrona"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/petrona-var.woff2") format("woff2"); }
@font-face { font-family: "Petrona"; font-style: italic; font-weight: 300 600; font-display: swap; src: url("../fonts/petrona-italic-var.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/outfit-var.woff2") format("woff2"); }

/* Shared fallback stacks, so a theme's two lines stay readable. */
:root {
  --stack-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --stack-serif: "Iowan Old Style", Georgia, serif;
}

/* ---------- 1. INK — dark navy and brass (the original) ----------
   Declared on :root as well, so a page rendering without a data-theme
   attribute still gets a complete set of tokens. */
:root,
[data-theme="ink"] {
  --scheme: dark;
  --font-display: "Cormorant Garamond", var(--stack-serif);
  --font-body:    "Inter", var(--stack-sans);
}

/* ---------- 2. SANDSTONE — light honey ashlar (Eskmills) ----------
   Not invented: sampled from the client's photograph of the building by
   isolating the warm stone pixels by hue and lightness. The brass is
   #7D5A12 and not the more obvious lighter value, which made only 3.87:1
   on the deeper band — fine for large text, a fail for the eyebrows. */
[data-theme="sandstone"] {
  --scheme: light;
  --ink-rgb:           245 239 227;
  --ink-soft-rgb:      239 231 215;
  --indigo-rgb:        230 219 198;
  --indigo-deep-rgb:   237 228 211;
  --slate-rgb:         250 246 238;
  --brass-rgb:         125 90 18;
  --brass-bright-rgb:  107 77 14;
  --saffron-rgb:       168 96 22;    /* darkened from 196 112 26: the cream
                                        button label was 3.50:1, an AA fail */
  --saffron-soft-rgb:  217 139 51;
  --cream-rgb:         42 33 24;
  --cream-2-rgb:       58 48 38;
  --cream-text-rgb:    68 58 44;
  --ink-on-light-rgb:  68 58 44;
  --on-accent-rgb:      255 248 234;
  --on-accent-warm-rgb: 255 248 234;
  --surface-raised:    rgb(255 255 255);
  --surface-cream:     rgb(255 253 248);
  --surface-footer:    rgb(var(--indigo-rgb));
  --muted:             rgb(var(--cream-text-rgb) / .78);
  --muted-dark:        rgb(var(--ink-on-light-rgb) / .78);
  --line-light:        rgb(var(--cream-text-rgb) / .18);
  --line-dark:         rgb(var(--ink-on-light-rgb) / .18);
  --header-bar:        rgb(var(--slate-rgb) / .95);
  --header-shadow:     0 1px 0 var(--line-light), 0 18px 40px -30px rgb(var(--cream-text-rgb) / .35);
  --veil-nav:          rgb(var(--cream-text-rgb) / .45);
  --font-display: "Cormorant Garamond", var(--stack-serif);
  --font-body:    "Inter", var(--stack-sans);
}

/* ---------- 3. CLARET — wine cellar, gold and warm cream ---------- */
[data-theme="claret"] {
  --scheme: dark;
  --ink-rgb:           26 11 16;
  --ink-soft-rgb:      36 16 22;
  --indigo-rgb:        58 22 32;
  --indigo-deep-rgb:   42 15 23;
  --slate-rgb:         46 18 25;
  --brass-rgb:         201 162 39;
  --brass-bright-rgb:  232 200 106;
  --saffron-rgb:       212 85 60;
  --saffron-soft-rgb:  232 115 90;
  --cream-rgb:         247 239 230;
  --cream-2-rgb:       239 227 214;
  --cream-text-rgb:    234 223 210;
  --on-accent-rgb:      26 11 16;
  --on-accent-warm-rgb: 26 11 16;
  --surface-footer-rgb: 18 7 11;
  --font-display: "Playfair Display", var(--stack-serif);
  --font-body:    "Source Sans 3", var(--stack-sans);
}

/* ---------- 4. CHARCOAL & COPPER — grill house, iron and flame ---------- */
[data-theme="charcoal"] {
  --scheme: dark;
  --ink-rgb:           18 18 18;
  --ink-soft-rgb:      26 26 26;
  --indigo-rgb:        36 36 36;
  --indigo-deep-rgb:   28 28 28;
  --slate-rgb:         32 32 32;
  --brass-rgb:         196 124 66;
  --brass-bright-rgb:  224 151 90;
  --saffron-rgb:       200 106 46;
  --saffron-soft-rgb:  221 139 78;
  --cream-rgb:         245 242 237;
  --cream-2-rgb:       232 228 221;
  --cream-text-rgb:    222 217 209;
  --on-accent-rgb:      18 18 18;
  --on-accent-warm-rgb: 18 18 18;
  --surface-footer-rgb: 10 10 10;
  --font-display: "Bodoni Moda", var(--stack-serif);
  --font-body:    "Jost", var(--stack-sans);
}

/* ---------- 5. FOREST & GOLD — country dining, deep green ---------- */
[data-theme="forest"] {
  --scheme: dark;
  --ink-rgb:           12 26 20;
  --ink-soft-rgb:      18 36 28;
  --indigo-rgb:        26 51 40;
  --indigo-deep-rgb:   16 36 27;
  --slate-rgb:         22 44 34;
  --brass-rgb:         201 162 39;
  --brass-bright-rgb:  228 199 102;
  --saffron-rgb:       217 142 43;
  --saffron-soft-rgb:  233 169 79;
  --cream-rgb:         244 241 228;
  --cream-2-rgb:       231 227 210;
  --cream-text-rgb:    223 218 202;
  --on-accent-rgb:      12 26 20;
  --on-accent-warm-rgb: 12 26 20;
  --surface-footer-rgb: 8 18 14;
  --font-display: "Lora", var(--stack-serif);
  --font-body:    "Karla", var(--stack-sans);
}

/* ---------- 6. SAFFRON MARKET — light, warm spice, street food ---------- */
[data-theme="saffron"] {
  --scheme: light;
  --ink-rgb:           253 246 236;
  --ink-soft-rgb:      247 237 222;
  --indigo-rgb:        240 226 204;
  --indigo-deep-rgb:   245 233 216;
  --slate-rgb:         255 251 244;
  --brass-rgb:         154 91 14;
  --brass-bright-rgb:  126 74 10;
  --saffron-rgb:       178 69 22;
  --saffron-soft-rgb:  205 96 42;
  --cream-rgb:         43 27 14;
  --cream-2-rgb:       61 42 24;
  --cream-text-rgb:    74 56 38;
  --ink-on-light-rgb:  74 56 38;
  --on-accent-rgb:      255 248 234;
  --on-accent-warm-rgb: 255 248 234;
  --surface-raised:    rgb(255 255 255);
  --surface-cream:     rgb(255 252 246);
  --surface-footer:    rgb(var(--indigo-rgb));
  --muted:             rgb(var(--cream-text-rgb) / .78);
  --muted-dark:        rgb(var(--ink-on-light-rgb) / .78);
  --line-light:        rgb(var(--cream-text-rgb) / .18);
  --line-dark:         rgb(var(--ink-on-light-rgb) / .18);
  --header-bar:        rgb(var(--slate-rgb) / .95);
  --header-shadow:     0 1px 0 var(--line-light), 0 18px 40px -30px rgb(var(--cream-text-rgb) / .35);
  --veil-nav:          rgb(var(--cream-text-rgb) / .45);
  --font-display: "Fraunces", var(--stack-serif);
  --font-body:    "DM Sans", var(--stack-sans);
}

/* ---------- 7. MIDNIGHT ROSE — late dining, plum and rose ---------- */
[data-theme="rose"] {
  --scheme: dark;
  --ink-rgb:           22 16 31;
  --ink-soft-rgb:      30 23 41;
  --indigo-rgb:        44 32 56;
  --indigo-deep-rgb:   32 24 48;
  --slate-rgb:         38 28 51;
  --brass-rgb:         217 143 168;
  --brass-bright-rgb:  235 178 196;
  --saffron-rgb:       199 123 142;
  --saffron-soft-rgb:  221 154 171;
  --cream-rgb:         246 240 244;
  --cream-2-rgb:       233 224 232;
  --cream-text-rgb:    224 214 222;
  --on-accent-rgb:      22 16 31;
  --on-accent-warm-rgb: 22 16 31;
  --surface-footer-rgb: 15 11 22;
  --font-display: "Newsreader", var(--stack-serif);
  --font-body:    "Manrope", var(--stack-sans);
}

/* ---------- 8. TERRACOTTA — light, clay and warm shade ---------- */
[data-theme="terracotta"] {
  --scheme: light;
  --ink-rgb:           250 241 233;
  --ink-soft-rgb:      243 230 218;
  --indigo-rgb:        235 216 199;
  --indigo-deep-rgb:   240 224 209;
  --slate-rgb:         255 249 243;
  --brass-rgb:         141 66 27;
  --brass-bright-rgb:  114 52 20;
  --saffron-rgb:       166 71 32;
  --saffron-soft-rgb:  196 95 53;
  --cream-rgb:         51 32 15;
  --cream-2-rgb:       74 50 32;
  --cream-text-rgb:    84 61 42;
  --ink-on-light-rgb:  84 61 42;
  --on-accent-rgb:      255 246 238;
  --on-accent-warm-rgb: 255 246 238;
  --surface-raised:    rgb(255 255 255);
  --surface-cream:     rgb(255 250 245);
  --surface-footer:    rgb(var(--indigo-rgb));
  --muted:             rgb(var(--cream-text-rgb) / .80);  /* .78 was 4.34:1 on --indigo */
  --muted-dark:        rgb(var(--ink-on-light-rgb) / .78);
  --line-light:        rgb(var(--cream-text-rgb) / .18);
  --line-dark:         rgb(var(--ink-on-light-rgb) / .18);
  --header-bar:        rgb(var(--slate-rgb) / .95);
  --header-shadow:     0 1px 0 var(--line-light), 0 18px 40px -30px rgb(var(--cream-text-rgb) / .35);
  --veil-nav:          rgb(var(--cream-text-rgb) / .45);
  --font-display: "Crimson Pro", var(--stack-serif);
  --font-body:    "Work Sans", var(--stack-sans);
}

/* ---------- 9. HARBOUR — deep teal and warm sand, coastal ---------- */
[data-theme="harbour"] {
  --scheme: dark;
  --ink-rgb:            8 25 28;
  --ink-soft-rgb:      14 35 39;
  --indigo-rgb:        20 49 56;
  --indigo-deep-rgb:   13 38 43;
  --slate-rgb:         18 44 49;
  --brass-rgb:         217 164 65;
  --brass-bright-rgb:  239 196 112;
  --saffron-rgb:       224 122 60;
  --saffron-soft-rgb:  240 151 92;
  --cream-rgb:         242 244 241;
  --cream-2-rgb:       227 231 227;
  --cream-text-rgb:    218 224 221;
  --on-accent-rgb:       8 25 28;
  --on-accent-warm-rgb:  8 25 28;
  --surface-footer-rgb:  5 18 20;
  --font-display: "Syne", var(--stack-sans);
  --font-body:    "Space Grotesk", var(--stack-sans);
}

/* ---------- 10. NOIR — black, bone white, one red ---------- */
[data-theme="noir"] {
  --scheme: dark;
  --ink-rgb:           10 10 10;
  --ink-soft-rgb:      20 20 20;
  --indigo-rgb:        28 28 28;
  --indigo-deep-rgb:   18 18 18;
  --slate-rgb:         24 24 24;
  --brass-rgb:         217 58 43;
  --brass-bright-rgb:  242 104 90;
  --saffron-rgb:       217 58 43;
  --saffron-soft-rgb:  232 87 74;
  --cream-rgb:         255 255 255;
  --cream-2-rgb:       240 240 240;
  --cream-text-rgb:    230 230 230;
  --on-accent-rgb:      255 255 255;
  --on-accent-warm-rgb: 255 255 255;
  --surface-footer-rgb:  0 0 0;
  --font-display: "Bodoni Moda", var(--stack-serif);
  --font-body:    "Inter", var(--stack-sans);
}

/* ---------- 11. ROASTERY — espresso, crema, industrial ----------
   A coffee house rather than a restaurant: darker and more utilitarian, with
   the accent taken from crema rather than gold. */
[data-theme="roastery"] {
  --scheme: dark;
  --ink-rgb:           26 21 18;
  --ink-soft-rgb:      36 29 24;
  --indigo-rgb:        51 41 31;
  --indigo-deep-rgb:   38 30 23;
  --slate-rgb:         44 35 27;
  --brass-rgb:         200 154 91;
  --brass-bright-rgb:  227 188 133;
  --saffron-rgb:       196 112 58;
  --saffron-soft-rgb:  217 143 94;
  --cream-rgb:         245 239 230;
  --cream-2-rgb:       233 225 213;
  --cream-text-rgb:    224 215 201;
  --on-accent-rgb:      26 21 18;
  --on-accent-warm-rgb: 26 21 18;
  --surface-footer-rgb: 17 13 11;
  --font-display: "Archivo", var(--stack-sans);
  --font-body:    "Jost", var(--stack-sans);
}

/* ---------- 12. BAKEHOUSE — wheat, flour, warm oven ----------
   The lightest of the light themes. A bakery or patisserie: soft grounds, a
   deep crust brown for text, and nothing sharp. */
[data-theme="bakehouse"] {
  --scheme: light;
  --ink-rgb:           251 246 238;
  --ink-soft-rgb:      244 236 224;
  --indigo-rgb:        234 221 202;
  --indigo-deep-rgb:   241 230 214;
  --slate-rgb:         255 252 247;
  --brass-rgb:         138 90 32;
  --brass-bright-rgb:  111 71 24;
  --saffron-rgb:       160 84 30;
  --saffron-soft-rgb:  190 113 56;
  --cream-rgb:         51 38 26;
  --cream-2-rgb:       74 56 38;
  --cream-text-rgb:    85 67 47;
  --ink-on-light-rgb:  85 67 47;
  --on-accent-rgb:      255 250 242;
  --on-accent-warm-rgb: 255 250 242;
  --surface-raised:    rgb(255 255 255);
  --surface-cream:     rgb(255 253 249);
  --surface-footer:    rgb(var(--indigo-rgb));
  --muted:             rgb(var(--cream-text-rgb) / .84);  /* .80 was 4.38:1 on --indigo */
  --muted-dark:        rgb(var(--ink-on-light-rgb) / .80);
  --line-light:        rgb(var(--cream-text-rgb) / .18);
  --line-dark:         rgb(var(--ink-on-light-rgb) / .18);
  --header-bar:        rgb(var(--slate-rgb) / .95);
  --header-shadow:     0 1px 0 var(--line-light), 0 18px 40px -30px rgb(var(--cream-text-rgb) / .35);
  --veil-nav:          rgb(var(--cream-text-rgb) / .45);
  --font-display: "Petrona", var(--stack-serif);
  --font-body:    "Karla", var(--stack-sans);
}

/* ---------- 13. GREENHOUSE — sage, glasshouse, brunch ----------
   The only theme whose accent is not warm. A plant-filled brunch room: cool
   pale grounds with a deep leaf green doing the work the brass does
   elsewhere. Saffron stays warm so the ordering button still reads as one. */
[data-theme="greenhouse"] {
  --scheme: light;
  --ink-rgb:           244 247 241;
  --ink-soft-rgb:      234 240 229;
  --indigo-rgb:        220 230 213;
  --indigo-deep-rgb:   229 237 223;
  --slate-rgb:         251 253 249;
  --brass-rgb:          79 107 58;
  --brass-bright-rgb:   62 90 44;
  --saffron-rgb:       150 88 34;
  --saffron-soft-rgb:  178 114 58;
  --cream-rgb:          31 42 26;
  --cream-2-rgb:        51 64 43;
  --cream-text-rgb:     61 74 52;
  --ink-on-light-rgb:   61 74 52;
  --on-accent-rgb:      248 252 245;
  --on-accent-warm-rgb: 248 252 245;
  --surface-raised:    rgb(255 255 255);
  --surface-cream:     rgb(252 254 250);
  --surface-footer:    rgb(var(--indigo-rgb));
  --muted:             rgb(var(--cream-text-rgb) / .80);
  --muted-dark:        rgb(var(--ink-on-light-rgb) / .80);
  --line-light:        rgb(var(--cream-text-rgb) / .18);
  --line-dark:         rgb(var(--ink-on-light-rgb) / .18);
  --header-bar:        rgb(var(--slate-rgb) / .95);
  --header-shadow:     0 1px 0 var(--line-light), 0 18px 40px -30px rgb(var(--cream-text-rgb) / .35);
  --veil-nav:          rgb(var(--cream-text-rgb) / .45);
  --font-display: "Outfit", var(--stack-sans);
  --font-body:    "Manrope", var(--stack-sans);
}

[data-theme="tandoor"] {
  --scheme: dark;
  --ink-rgb:         26 18 14;
  --ink-soft-rgb:    36 26 20;
  --indigo-rgb:      46 33 25;
  --indigo-deep-rgb: 32 23 18;
  --slate-rgb:       40 29 22;
  --brass-rgb:       230 126 34;
  --brass-bright-rgb:245 158 76;
  --saffron-rgb:     224 96 24;
  --saffron-soft-rgb:240 130 60;
  --cream-rgb:       255 248 240;
  --cream-2-rgb:     240 230 218;
  --cream-text-rgb:  232 219 205;
  --on-accent-rgb:      26 18 14;
  --on-accent-warm-rgb: 26 18 14;
  --surface-footer-rgb:  18 12 9;
  --font-display: "Archivo", var(--stack-sans);
  --font-body:    "Inter", var(--stack-sans);
}

[data-theme="himalaya"] {
  --scheme: light;
  --ink-rgb:         240 244 248;
  --ink-soft-rgb:    230 236 243;
  --indigo-rgb:      214 225 236;
  --indigo-deep-rgb: 225 233 242;
  --slate-rgb:       249 251 253;
  --brass-rgb:       38 72 106;
  --brass-bright-rgb:28 58 88;
  --saffron-rgb:     168 52 42;
  --saffron-soft-rgb:190 76 64;
  --cream-rgb:       20 32 44;
  --cream-2-rgb:     38 52 66;
  --cream-text-rgb:  50 64 78;
  --ink-on-light-rgb:   50 64 78;
  --on-accent-rgb:      248 251 253;
  --on-accent-warm-rgb: 255 250 248;
  --surface-raised:    rgb(255 255 255);
  --surface-cream:     rgb(249 251 253);
  --surface-footer:    rgb(var(--indigo-rgb));
  --muted:             rgb(var(--cream-text-rgb) / .80);
  --muted-dark:        rgb(var(--ink-on-light-rgb) / .80);
  --line-light:        rgb(var(--cream-text-rgb) / .18);
  --line-dark:         rgb(var(--ink-on-light-rgb) / .18);
  --header-bar:        rgb(var(--slate-rgb) / .95);
  --header-shadow:     0 1px 0 var(--line-light), 0 18px 40px -30px rgb(var(--cream-text-rgb) / .35);
  --veil-nav:          rgb(var(--cream-text-rgb) / .45);
  --font-display: "Jost", var(--stack-sans);
  --font-body:    "Source Sans 3", var(--stack-sans);
}

[data-theme="everest"] {
  --scheme: dark;
  --ink-rgb:         26 28 38;
  --ink-soft-rgb:    34 37 48;
  --indigo-rgb:      44 48 62;
  --indigo-deep-rgb: 30 33 44;
  --slate-rgb:       38 41 53;
  --brass-rgb:       198 126 78;
  --brass-bright-rgb:220 152 104;
  --saffron-rgb:     200 118 64;
  --saffron-soft-rgb:218 144 92;
  --cream-rgb:       246 242 235;
  --cream-2-rgb:     230 224 214;
  --cream-text-rgb:  216 209 197;
  --on-accent-rgb:      26 28 38;
  --on-accent-warm-rgb: 26 28 38;
  --surface-footer-rgb:  20 22 30;
  --font-display: "Newsreader", var(--stack-serif);
  --font-body:    "Work Sans", var(--stack-sans);
}

[data-theme="bananaleaf"] {
  --scheme: light;
  --ink-rgb:         250 250 240;
  --ink-soft-rgb:    243 244 230;
  --indigo-rgb:      228 233 210;
  --indigo-deep-rgb: 237 240 222;
  --slate-rgb:       253 253 246;
  --brass-rgb:       68 100 36;
  --brass-bright-rgb:52 80 26;
  --saffron-rgb:     158 100 22;
  --saffron-soft-rgb:182 126 48;
  --cream-rgb:       28 36 20;
  --cream-2-rgb:     46 56 36;
  --cream-text-rgb:  56 66 44;
  --ink-on-light-rgb:   56 66 44;
  --on-accent-rgb:      250 252 244;
  --on-accent-warm-rgb: 255 250 242;
  --surface-raised:    rgb(255 255 255);
  --surface-cream:     rgb(253 253 246);
  --surface-footer:    rgb(var(--indigo-rgb));
  --muted:             rgb(var(--cream-text-rgb) / .80);
  --muted-dark:        rgb(var(--ink-on-light-rgb) / .80);
  --line-light:        rgb(var(--cream-text-rgb) / .18);
  --line-dark:         rgb(var(--ink-on-light-rgb) / .18);
  --header-bar:        rgb(var(--slate-rgb) / .95);
  --header-shadow:     0 1px 0 var(--line-light), 0 18px 40px -30px rgb(var(--cream-text-rgb) / .35);
  --veil-nav:          rgb(var(--cream-text-rgb) / .45);
  --font-display: "Fraunces", var(--stack-serif);
  --font-body:    "Karla", var(--stack-sans);
}

[data-theme="chippy"] {
  --scheme: light;
  --ink-rgb:         248 246 240;
  --ink-soft-rgb:    240 237 229;
  --indigo-rgb:      225 221 211;
  --indigo-deep-rgb: 234 231 222;
  --slate-rgb:       252 251 247;
  --brass-rgb:       24 52 94;
  --brass-bright-rgb:16 40 76;
  --saffron-rgb:     182 38 38;
  --saffron-soft-rgb:204 66 62;
  --cream-rgb:       20 24 32;
  --cream-2-rgb:     38 43 52;
  --cream-text-rgb:  50 56 66;
  --ink-on-light-rgb:   50 56 66;
  --on-accent-rgb:      250 250 246;
  --on-accent-warm-rgb: 255 248 246;
  --surface-raised:    rgb(255 255 255);
  --surface-cream:     rgb(252 251 247);
  --surface-footer:    rgb(var(--indigo-rgb));
  --muted:             rgb(var(--cream-text-rgb) / .80);
  --muted-dark:        rgb(var(--ink-on-light-rgb) / .80);
  --line-light:        rgb(var(--cream-text-rgb) / .18);
  --line-dark:         rgb(var(--ink-on-light-rgb) / .18);
  --header-bar:        rgb(var(--slate-rgb) / .95);
  --header-shadow:     0 1px 0 var(--line-light), 0 18px 40px -30px rgb(var(--cream-text-rgb) / .35);
  --veil-nav:          rgb(var(--cream-text-rgb) / .45);
  --font-display: "Syne", var(--stack-sans);
  --font-body:    "DM Sans", var(--stack-sans);
}

[data-theme="quayside"] {
  --scheme: light;
  --ink-rgb:         242 246 246;
  --ink-soft-rgb:    232 238 238;
  --indigo-rgb:      214 224 224;
  --indigo-deep-rgb: 224 232 232;
  --slate-rgb:       250 252 252;
  --brass-rgb:       32 84 96;
  --brass-bright-rgb:22 66 78;
  --saffron-rgb:     168 98 36;
  --saffron-soft-rgb:190 124 66;
  --cream-rgb:       18 32 36;
  --cream-2-rgb:     36 52 56;
  --cream-text-rgb:  48 64 68;
  --ink-on-light-rgb:   48 64 68;
  --on-accent-rgb:      248 252 252;
  --on-accent-warm-rgb: 255 250 246;
  --surface-raised:    rgb(255 255 255);
  --surface-cream:     rgb(250 252 252);
  --surface-footer:    rgb(var(--indigo-rgb));
  --muted:             rgb(var(--cream-text-rgb) / .80);
  --muted-dark:        rgb(var(--ink-on-light-rgb) / .80);
  --line-light:        rgb(var(--cream-text-rgb) / .18);
  --line-dark:         rgb(var(--ink-on-light-rgb) / .18);
  --header-bar:        rgb(var(--slate-rgb) / .95);
  --header-shadow:     0 1px 0 var(--line-light), 0 18px 40px -30px rgb(var(--cream-text-rgb) / .35);
  --veil-nav:          rgb(var(--cream-text-rgb) / .45);
  --font-display: "Petrona", var(--stack-serif);
  --font-body:    "Jost", var(--stack-sans);
}

[data-theme="highstreet"] {
  --scheme: light;
  --ink-rgb:         249 248 245;
  --ink-soft-rgb:    241 240 236;
  --indigo-rgb:      227 227 223;
  --indigo-deep-rgb: 235 235 231;
  --slate-rgb:       253 253 251;
  --brass-rgb:       56 78 98;
  --brass-bright-rgb:42 62 82;
  --saffron-rgb:     166 90 36;
  --saffron-soft-rgb:190 116 64;
  --cream-rgb:       30 34 38;
  --cream-2-rgb:     50 54 60;
  --cream-text-rgb:  60 64 70;
  --ink-on-light-rgb:   60 64 70;
  --on-accent-rgb:      250 251 252;
  --on-accent-warm-rgb: 255 249 245;
  --surface-raised:    rgb(255 255 255);
  --surface-cream:     rgb(253 253 251);
  --surface-footer:    rgb(var(--indigo-rgb));
  --muted:             rgb(var(--cream-text-rgb) / .80);
  --muted-dark:        rgb(var(--ink-on-light-rgb) / .80);
  --line-light:        rgb(var(--cream-text-rgb) / .18);
  --line-dark:         rgb(var(--ink-on-light-rgb) / .18);
  --header-bar:        rgb(var(--slate-rgb) / .95);
  --header-shadow:     0 1px 0 var(--line-light), 0 18px 40px -30px rgb(var(--cream-text-rgb) / .35);
  --veil-nav:          rgb(var(--cream-text-rgb) / .45);
  --font-display: "Outfit", var(--stack-sans);
  --font-body:    "Source Sans 3", var(--stack-sans);
}

[data-theme="kraft"] {
  --scheme: light;
  --ink-rgb:         244 238 228;
  --ink-soft-rgb:    236 228 214;
  --indigo-rgb:      221 209 191;
  --indigo-deep-rgb: 231 221 205;
  --slate-rgb:       250 246 238;
  --brass-rgb:       114 78 20;
  --brass-bright-rgb:92 62 14;
  --saffron-rgb:     148 96 18;
  --saffron-soft-rgb:180 130 56;
  --cream-rgb:       42 32 20;
  --cream-2-rgb:     60 48 32;
  --cream-text-rgb:  72 58 40;
  --ink-on-light-rgb:   72 58 40;
  --on-accent-rgb:      250 246 238;
  --on-accent-warm-rgb: 255 248 238;
  --surface-raised:    rgb(255 255 255);
  --surface-cream:     rgb(250 246 238);
  --surface-footer:    rgb(var(--indigo-rgb));
  --muted:             rgb(var(--cream-text-rgb) / .80);
  --muted-dark:        rgb(var(--ink-on-light-rgb) / .80);
  --line-light:        rgb(var(--cream-text-rgb) / .18);
  --line-dark:         rgb(var(--ink-on-light-rgb) / .18);
  --header-bar:        rgb(var(--slate-rgb) / .95);
  --header-shadow:     0 1px 0 var(--line-light), 0 18px 40px -30px rgb(var(--cream-text-rgb) / .35);
  --veil-nav:          rgb(var(--cream-text-rgb) / .45);
  --font-display: "Space Grotesk", var(--stack-sans);
  --font-body:    "Work Sans", var(--stack-sans);
}

[data-theme="sakura"] {
  --scheme: light;
  --ink-rgb:         250 249 246;
  --ink-soft-rgb:    243 242 238;
  --indigo-rgb:      231 229 223;
  --indigo-deep-rgb: 239 237 231;
  --slate-rgb:       253 253 251;
  --brass-rgb:       48 48 48;
  --brass-bright-rgb:26 26 26;
  --saffron-rgb:     186 56 36;
  --saffron-soft-rgb:206 86 64;
  --cream-rgb:       18 18 18;
  --cream-2-rgb:     40 40 40;
  --cream-text-rgb:  54 54 54;
  --ink-on-light-rgb:   54 54 54;
  --on-accent-rgb:      250 250 248;
  --on-accent-warm-rgb: 255 248 246;
  --surface-raised:    rgb(255 255 255);
  --surface-cream:     rgb(253 253 251);
  --surface-footer:    rgb(var(--indigo-rgb));
  --muted:             rgb(var(--cream-text-rgb) / .80);
  --muted-dark:        rgb(var(--ink-on-light-rgb) / .80);
  --line-light:        rgb(var(--cream-text-rgb) / .18);
  --line-dark:         rgb(var(--ink-on-light-rgb) / .18);
  --header-bar:        rgb(var(--slate-rgb) / .95);
  --header-shadow:     0 1px 0 var(--line-light), 0 18px 40px -30px rgb(var(--cream-text-rgb) / .35);
  --veil-nav:          rgb(var(--cream-text-rgb) / .45);
  --font-display: "Cormorant Garamond", var(--stack-serif);
  --font-body:    "Jost", var(--stack-sans);
}

[data-theme="mono"] {
  --scheme: dark;
  --ink-rgb:         12 12 12;
  --ink-soft-rgb:    22 22 22;
  --indigo-rgb:      32 32 32;
  --indigo-deep-rgb: 20 20 20;
  --slate-rgb:       26 26 26;
  --brass-rgb:       235 235 235;
  --brass-bright-rgb:255 255 255;
  --saffron-rgb:     255 206 0;
  --saffron-soft-rgb:255 222 64;
  --cream-rgb:       255 255 255;
  --cream-2-rgb:     235 235 235;
  --cream-text-rgb:  214 214 214;
  --on-accent-rgb:      12 12 12;
  --on-accent-warm-rgb: 12 12 12;
  --surface-footer-rgb:  0 0 0;
  --font-display: "Bodoni Moda", var(--stack-serif);
  --font-body:    "Space Grotesk", var(--stack-sans);
}

/* ---------- 24. JAIPUR PALACE — rose plaster and aubergine ----------
   Dusty limewash, madder red and a deep aubergine ink. Formal enough for a
   dining room, but lighter and more celebratory than the existing wine themes. */
[data-theme="jaipur"] {
  --scheme: light;
  --ink-rgb:         248 239 232;
  --ink-soft-rgb:    239 226 218;
  --indigo-rgb:      224 208 218;
  --indigo-deep-rgb: 235 220 228;
  --slate-rgb:       253 248 244;
  --brass-rgb:       108 44 56;
  --brass-bright-rgb:80 29 42;
  --saffron-rgb:     137 59 27;
  --saffron-soft-rgb:176 91 54;
  --cream-rgb:       41 25 48;
  --cream-2-rgb:     62 40 66;
  --cream-text-rgb:  72 50 70;
  --ink-on-light-rgb:   72 50 70;
  --on-accent-rgb:      255 248 242;
  --on-accent-warm-rgb: 255 248 242;
  --surface-raised:    rgb(255 255 255);
  --surface-cream:     rgb(255 251 247);
  --surface-footer:    rgb(var(--indigo-rgb));
  --muted:             rgb(var(--cream-text-rgb) / .84);
  --muted-dark:        rgb(var(--ink-on-light-rgb) / .82);
  --line-light:        rgb(var(--cream-text-rgb) / .18);
  --line-dark:         rgb(var(--ink-on-light-rgb) / .18);
  --header-bar:        rgb(var(--slate-rgb) / .95);
  --header-shadow:     0 1px 0 var(--line-light), 0 18px 40px -30px rgb(var(--cream-text-rgb) / .35);
  --veil-nav:          rgb(var(--cream-text-rgb) / .45);
  --font-display: "Playfair Display", var(--stack-serif);
  --font-body:    "Source Sans 3", var(--stack-sans);
}

/* ---------- 25. KATHMANDU COURTYARD — brick and marigold ----------
   A warm, evening Nepali palette taken from old brick, carved timber and the
   marigold tones used around a dining-room entrance. */
[data-theme="kathmandu"] {
  --scheme: dark;
  --ink-rgb:         29 16 16;
  --ink-soft-rgb:    42 22 20;
  --indigo-rgb:      58 31 28;
  --indigo-deep-rgb: 37 20 19;
  --slate-rgb:       49 27 24;
  --brass-rgb:       211 156 78;
  --brass-bright-rgb:239 193 118;
  --saffron-rgb:     224 112 86;
  --saffron-soft-rgb:239 142 110;
  --cream-rgb:       250 241 230;
  --cream-2-rgb:     239 226 212;
  --cream-text-rgb:  229 216 202;
  --on-accent-rgb:      29 16 16;
  --on-accent-warm-rgb: 255 248 240;
  --surface-footer-rgb:  19 10 10;
  --font-display: "Crimson Pro", var(--stack-serif);
  --font-body:    "Work Sans", var(--stack-sans);
}

/* ---------- 26. MONSOON — peacock and turmeric ----------
   Saturated without becoming nightclub-dark: peacock grounds, old brass and
   turmeric accents for contemporary Indian dining with strong photography. */
[data-theme="monsoon"] {
  --scheme: dark;
  --ink-rgb:         8 27 29;
  --ink-soft-rgb:    12 38 40;
  --indigo-rgb:      16 57 58;
  --indigo-deep-rgb: 10 43 45;
  --slate-rgb:       19 48 49;
  --brass-rgb:       213 166 78;
  --brass-bright-rgb:239 199 117;
  --saffron-rgb:     208 104 40;
  --saffron-soft-rgb:232 136 72;
  --cream-rgb:       248 243 226;
  --cream-2-rgb:     236 230 211;
  --cream-text-rgb:  225 222 205;
  --on-accent-rgb:      8 27 29;
  --on-accent-warm-rgb: 8 27 29;
  --surface-footer-rgb:  5 18 19;
  --font-display: "Lora", var(--stack-serif);
  --font-body:    "Karla", var(--stack-sans);
}

/* ---------- 27. MOMO HOUSE — chilli and parchment ----------
   Friendly rather than novelty: warm menu paper, chilli red and dark tea.
   The sans pairing keeps a fast counter-service page crisp on small screens. */
[data-theme="momo-house"] {
  --scheme: light;
  --ink-rgb:         250 244 230;
  --ink-soft-rgb:    244 234 211;
  --indigo-rgb:      227 215 190;
  --indigo-deep-rgb: 238 226 201;
  --slate-rgb:       255 250 239;
  --brass-rgb:       143 38 33;
  --brass-bright-rgb:111 27 25;
  --saffron-rgb:     126 66 17;
  --saffron-soft-rgb:166 101 38;
  --cream-rgb:       34 35 29;
  --cream-2-rgb:     54 50 39;
  --cream-text-rgb:  69 57 41;
  --ink-on-light-rgb:   69 57 41;
  --on-accent-rgb:      255 249 239;
  --on-accent-warm-rgb: 255 249 239;
  --surface-raised:    rgb(255 255 255);
  --surface-cream:     rgb(255 252 245);
  --surface-footer:    rgb(var(--indigo-rgb));
  --muted:             rgb(var(--cream-text-rgb) / .84);
  --muted-dark:        rgb(var(--ink-on-light-rgb) / .82);
  --line-light:        rgb(var(--cream-text-rgb) / .18);
  --line-dark:         rgb(var(--ink-on-light-rgb) / .18);
  --header-bar:        rgb(var(--slate-rgb) / .95);
  --header-shadow:     0 1px 0 var(--line-light), 0 18px 40px -30px rgb(var(--cream-text-rgb) / .35);
  --veil-nav:          rgb(var(--cream-text-rgb) / .45);
  --font-display: "Syne", var(--stack-sans);
  --font-body:    "DM Sans", var(--stack-sans);
}

/* ---------- 28. MALABAR COAST — coconut and palm ----------
   Coconut flesh, banana fibre and a deep palm green. Restrained enough for a
   polished dining room while still reading unmistakably South Indian. */
[data-theme="malabar"] {
  --scheme: light;
  --ink-rgb:         244 247 232;
  --ink-soft-rgb:    234 240 218;
  --indigo-rgb:      216 228 201;
  --indigo-deep-rgb: 225 235 209;
  --slate-rgb:       250 252 243;
  --brass-rgb:       45 89 51;
  --brass-bright-rgb:32 70 38;
  --saffron-rgb:     142 68 20;
  --saffron-soft-rgb:178 103 48;
  --cream-rgb:       25 42 27;
  --cream-2-rgb:     41 61 43;
  --cream-text-rgb:  52 73 54;
  --ink-on-light-rgb:   52 73 54;
  --on-accent-rgb:      248 252 242;
  --on-accent-warm-rgb: 255 249 240;
  --surface-raised:    rgb(255 255 255);
  --surface-cream:     rgb(252 254 247);
  --surface-footer:    rgb(var(--indigo-rgb));
  --muted:             rgb(var(--cream-text-rgb) / .84);
  --muted-dark:        rgb(var(--ink-on-light-rgb) / .82);
  --line-light:        rgb(var(--cream-text-rgb) / .18);
  --line-dark:         rgb(var(--ink-on-light-rgb) / .18);
  --header-bar:        rgb(var(--slate-rgb) / .95);
  --header-shadow:     0 1px 0 var(--line-light), 0 18px 40px -30px rgb(var(--cream-text-rgb) / .35);
  --veil-nav:          rgb(var(--cream-text-rgb) / .45);
  --font-display: "Petrona", var(--stack-serif);
  --font-body:    "Jost", var(--stack-sans);
}

/* ---------- 29. THALI HOUSE — turmeric and aubergine ----------
   A bright daytime palette whose aubergine accent keeps the colour grown-up.
   It is energetic at counter-service scale without turning into fast-food UI. */
[data-theme="thali"] {
  --scheme: light;
  --ink-rgb:         252 246 222;
  --ink-soft-rgb:    246 235 195;
  --indigo-rgb:      232 217 169;
  --indigo-deep-rgb: 241 227 185;
  --slate-rgb:       255 251 235;
  --brass-rgb:       108 55 119;
  --brass-bright-rgb:83 37 94;
  --saffron-rgb:     135 64 23;
  --saffron-soft-rgb:176 99 52;
  --cream-rgb:       45 27 48;
  --cream-2-rgb:     64 43 67;
  --cream-text-rgb:  78 55 75;
  --ink-on-light-rgb:   78 55 75;
  --on-accent-rgb:      255 250 238;
  --on-accent-warm-rgb: 255 250 238;
  --surface-raised:    rgb(255 255 255);
  --surface-cream:     rgb(255 253 243);
  --surface-footer:    rgb(var(--indigo-rgb));
  --muted:             rgb(var(--cream-text-rgb) / .84);
  --muted-dark:        rgb(var(--ink-on-light-rgb) / .82);
  --line-light:        rgb(var(--cream-text-rgb) / .18);
  --line-dark:         rgb(var(--ink-on-light-rgb) / .18);
  --header-bar:        rgb(var(--slate-rgb) / .95);
  --header-shadow:     0 1px 0 var(--line-light), 0 18px 40px -30px rgb(var(--cream-text-rgb) / .35);
  --veil-nav:          rgb(var(--cream-text-rgb) / .45);
  --font-display: "Fraunces", var(--stack-serif);
  --font-body:    "Manrope", var(--stack-sans);
}

/* ---------- 30. SHERPA HEARTH — timber and ember ----------
   Dark timber, warm wool and an ember accent. Intimate and grounded for a
   Himalayan dining room, deliberately distinct from Everest's cool indigo. */
[data-theme="sherpa"] {
  --scheme: dark;
  --ink-rgb:         25 20 18;
  --ink-soft-rgb:    38 30 26;
  --indigo-rgb:      54 42 35;
  --indigo-deep-rgb: 33 26 22;
  --slate-rgb:       47 37 31;
  --brass-rgb:       203 145 75;
  --brass-bright-rgb:231 181 112;
  --saffron-rgb:     219 118 80;
  --saffron-soft-rgb:235 151 111;
  --cream-rgb:       246 239 230;
  --cream-2-rgb:     230 220 208;
  --cream-text-rgb:  221 211 199;
  --on-accent-rgb:      25 20 18;
  --on-accent-warm-rgb: 255 248 240;
  --surface-footer-rgb:  16 12 11;
  --font-display: "Newsreader", var(--stack-serif);
  --font-body:    "Inter", var(--stack-sans);
}

/* ---------- 31. DOCKSIDE FRYER — navy and chip-shop gold ----------
   Inky marine blue and a clean golden accent. Familiar enough for fish and
   chips, but restrained and typographic rather than themed like a souvenir. */
[data-theme="dockside"] {
  --scheme: dark;
  --ink-rgb:         11 27 44;
  --ink-soft-rgb:    15 38 58;
  --indigo-rgb:      20 50 74;
  --indigo-deep-rgb: 13 34 54;
  --slate-rgb:       25 48 69;
  --brass-rgb:       240 185 76;
  --brass-bright-rgb:255 211 119;
  --saffron-rgb:     214 93 42;
  --saffron-soft-rgb:238 127 72;
  --cream-rgb:       246 248 250;
  --cream-2-rgb:     231 235 239;
  --cream-text-rgb:  220 226 232;
  --on-accent-rgb:      11 27 44;
  --on-accent-warm-rgb: 11 27 44;
  --surface-footer-rgb:  7 18 30;
  --font-display: "Archivo", var(--stack-sans);
  --font-body:    "Inter", var(--stack-sans);
}

/* ---------- 32. SALT HOUSE — oyster and seaweed ----------
   Oyster shell grounds and a deep seaweed accent for a seafood bistro. It is
   coastal without leaning on nautical stripes or novelty blues. */
[data-theme="salt-house"] {
  --scheme: light;
  --ink-rgb:         241 244 239;
  --ink-soft-rgb:    231 237 231;
  --indigo-rgb:      210 222 214;
  --indigo-deep-rgb: 221 230 223;
  --slate-rgb:       249 251 248;
  --brass-rgb:       49 89 77;
  --brass-bright-rgb:35 70 59;
  --saffron-rgb:     142 67 36;
  --saffron-soft-rgb:178 102 67;
  --cream-rgb:       24 41 36;
  --cream-2-rgb:     42 60 54;
  --cream-text-rgb:  53 68 63;
  --ink-on-light-rgb:   53 68 63;
  --on-accent-rgb:      248 252 249;
  --on-accent-warm-rgb: 255 249 245;
  --surface-raised:    rgb(255 255 255);
  --surface-cream:     rgb(252 254 252);
  --surface-footer:    rgb(var(--indigo-rgb));
  --muted:             rgb(var(--cream-text-rgb) / .84);
  --muted-dark:        rgb(var(--ink-on-light-rgb) / .82);
  --line-light:        rgb(var(--cream-text-rgb) / .18);
  --line-dark:         rgb(var(--ink-on-light-rgb) / .18);
  --header-bar:        rgb(var(--slate-rgb) / .95);
  --header-shadow:     0 1px 0 var(--line-light), 0 18px 40px -30px rgb(var(--cream-text-rgb) / .35);
  --veil-nav:          rgb(var(--cream-text-rgb) / .45);
  --font-display: "Cormorant Garamond", var(--stack-serif);
  --font-body:    "Jost", var(--stack-sans);
}

/* ---------- 33. BISTRO ROUGE — oxblood and butter ----------
   A neighbourhood bistro palette: oxblood grounds, butter-coloured type and
   a cognac accent. Classic rather than ornate, and warm after dark. */
[data-theme="bistro-rouge"] {
  --scheme: dark;
  --ink-rgb:         33 14 18;
  --ink-soft-rgb:    45 19 24;
  --indigo-rgb:      62 27 33;
  --indigo-deep-rgb: 40 17 22;
  --slate-rgb:       52 25 31;
  --brass-rgb:       214 163 94;
  --brass-bright-rgb:239 199 139;
  --saffron-rgb:     218 112 95;
  --saffron-soft-rgb:235 146 126;
  --cream-rgb:       250 241 226;
  --cream-2-rgb:     237 225 207;
  --cream-text-rgb:  226 214 197;
  --on-accent-rgb:      33 14 18;
  --on-accent-warm-rgb: 255 248 240;
  --surface-footer-rgb:  21 8 11;
  --font-display: "Bodoni Moda", var(--stack-serif);
  --font-body:    "Work Sans", var(--stack-sans);
}



/* ---------- 29z. Scheme: light ----------
   Everything a light theme needs beyond its colours. Nothing here names a
   theme: it applies to every light theme purely because that theme declares itself
   light. This layer is why a new light theme costs twenty lines and not
   forty override rules.

   The guiding rule: anything sitting ON a photograph keeps its light text in
   every scheme. Only flat surfaces flip. */

/* --- Surfaces that stay light-on-dark because they sit on photos --- */
/* .display has no colour of its own, so on a light theme it would inherit
   the dark body text straight onto the closing banner's photograph. */
[data-scheme="light"] .reserve__inner .display { color: var(--on-photo); }

/* A light theme darkens its accent for flat surfaces; over a photograph
   that accent disappears, so these revert to the photographic accent. */
[data-scheme="light"] .hero .eyebrow,
[data-scheme="light"] .page-header .eyebrow,
[data-scheme="light"] .reserve .eyebrow,
[data-scheme="light"] .hero__details span,
[data-scheme="light"] .hero h1 em,
[data-scheme="light"] .page-header h1 em,
[data-scheme="light"] .reserve__inner .display em { color: var(--accent-on-photo); }

[data-scheme="light"] .reserve__inner > p,
[data-scheme="light"] .reserve__address,
[data-scheme="light"] .page-header p { color: rgb(var(--on-photo-rgb) / .82); }

/* Outline buttons over photography keep their light treatment */
[data-scheme="light"] .hero .button--outline,
[data-scheme="light"] .page-header .button--outline,
[data-scheme="light"] .reserve .button--outline {
  --btn-fg: var(--on-photo);
  border-color: rgb(var(--on-photo-rgb) / .45);
  background: rgb(var(--on-photo-rgb) / .08);
}
[data-scheme="light"] .hero .button--outline:hover,
[data-scheme="light"] .page-header .button--outline:hover,
[data-scheme="light"] .reserve .button--outline:hover {
  background: rgb(var(--on-photo-rgb) / .18); border-color: var(--on-photo);
}

/* --- Header ---
   Transparent over the hero: stays light, because it is over the photograph.
   Condensed or on an interior page: a pale bar with ink text. The bar colour
   and its shadow come from --header-bar / --header-shadow in the theme, so
   only the text needs saying here. */
[data-scheme="light"] .site-header:not(.is-stuck):not(.site-header--solid) .brand__name { color: var(--on-photo); }
[data-scheme="light"] .site-header:not(.is-stuck):not(.site-header--solid) .site-nav a:not(.button) { color: rgb(var(--on-photo-rgb) / .92); }
[data-scheme="light"] .site-header:not(.is-stuck):not(.site-header--solid) .menu-toggle { color: var(--on-photo); }

/* The interior header carries the same lift as the condensed one here; on a
   dark theme it has only the hairline. */
[data-scheme="light"] .site-header--solid { box-shadow: var(--header-shadow); }

[data-scheme="light"] .site-header.is-stuck .brand__name,
[data-scheme="light"] .site-header--solid .brand__name { color: var(--cream); }
[data-scheme="light"] .site-header.is-stuck .site-nav a:not(.button),
[data-scheme="light"] .site-header--solid .site-nav a:not(.button) { color: var(--cream-text); }

@media (max-width: 940px) {
  [data-scheme="light"] .site-nav { background: var(--slate); }
  [data-scheme="light"] .site-nav a:not(.button) { color: var(--cream-text) !important; }
}

/* --- Flat surfaces --- */
[data-scheme="light"] .menu-card { background: var(--slate); }
[data-scheme="light"] .menu-card:hover { background: var(--surface-raised); }
[data-scheme="light"] .facts > div { background: var(--slate); }
[data-scheme="light"] .step,
[data-scheme="light"] .contact-card { background: var(--slate); }
[data-scheme="light"] a.contact-card:hover,
[data-scheme="light"] .step:hover {
  background: var(--surface-raised); border-color: rgb(var(--brass-rgb) / .45);
}
[data-scheme="light"] .pedigree__badge { background: var(--indigo); }
[data-scheme="light"] .pedigree__badge strong { color: var(--brass); }
/* The map is dimmed to sit down into a dark page; on a light one it does not
   need holding back. */
[data-scheme="light"] .map-frame iframe { filter: none; }

/* --- Footer ---
   The bottom bar is quieter than the body copy in both schemes, but a light
   ground needs a touch more weight to read at the same strength. */
[data-scheme="light"] .site-footer__bottom { color: rgb(var(--cream-text-rgb) / .62); }
[data-scheme="light"] .site-footer__bottom a { color: rgb(var(--cream-text-rgb) / .75); }
[data-scheme="light"] .footer-legal a { color: rgb(var(--cream-text-rgb) / .68); }
[data-scheme="light"] .footer-powered span { color: rgb(var(--cream-text-rgb) / .62); }
/* The supplied Grub Direct artwork has cream lettering for dark themes; on
   stone the original dark-lettered version is the legible one. */
[data-scheme="light"] .footer-powered img { content: url("../img/grubdirect-logo-light.webp"); }

/* =============================================================
   30. HERO LAYOUTS

   Ten ways to open the page. The copy, buttons, offer banner and detail
   strip are the same markup in all ten (template-parts/hero/parts/) — only
   the frame around them changes, which is what lets a client switch
   template without losing content.

   Not one of these contains a colour: every value below comes from a token,
   so every hero works with every theme without being looked at.
   ============================================================= */

/* ---------- 30a. Video background ----------
   Sits in the same stacking context as the slider's photographs, with the
   first hero image as its poster so there is something on screen before any
   video arrives. */
.hero__video {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Fades up once the file has enough data; until then the poster shows. */
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.hero__video.is-playing { opacity: 1; }

/* A background video is a large download for a phone on mobile data, and
   pure decoration. Below this width the poster image stands in. */
@media (max-width: 780px) {
  .hero__video { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* ---------- 30b. Centred ----------
   One still photograph, everything symmetrical over it. */
.hero--centred { align-items: center; text-align: center; }
.hero--centred .hero__content {
  max-width: 46rem; margin-inline: auto;
}
.hero--centred .eyebrow { justify-content: center; }
.hero--centred .hero__intro { margin-inline: auto; }
.hero--centred .hero__actions { justify-content: center; }
.hero--centred .hero__details { justify-content: center; }
.hero--centred .hero__offer { margin-inline: auto; }

/* ---------- 30c. Compact banner ----------
   Around 60vh, so the menu and the dishes start above the fold. The choice
   for a takeaway, where the page exists to get someone ordering. */
.hero--compact {
  min-height: min(62svh, 620px);
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.hero--compact h1 { font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem); }
.hero--compact .hero__intro {
  font-size: clamp(.98rem, .94rem + .2vw, 1.08rem);
  margin-bottom: 1.6rem; max-width: 30rem;
}

/* ---------- 30d. Split panel ----------
   Copy on a solid panel with the photograph beside it. Nothing sits on the
   image, which makes this the safe layout for weak or busy photography —
   the headline cannot fight a picture it is not on. */
.hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: min(92svh, 900px);
  padding: 0;
  background: var(--ink);
}
.hero--split .hero__panel {
  display: flex; align-items: center;
  background: var(--indigo-deep);
  padding: calc(var(--header-h) + clamp(2.5rem, 5vw, 4.5rem)) clamp(1.5rem, 5vw, 4.5rem) clamp(2.5rem, 5vw, 4.5rem);
  position: relative;
}
/* A hairline of the accent down the join, so the two halves read as one
   composition rather than two boxes. */
.hero--split .hero__panel::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--brass), transparent);
}
.hero--split .hero__content { max-width: 34rem; }
.hero--split .hero__media { position: relative; overflow: hidden; }
.hero--split .hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* On a light theme the panel is pale, so the copy on it must be the theme's
   ink rather than the light-on-photo treatment the other heroes use. */
.hero--split h1,
.hero--split .hero__details strong { color: var(--cream); }
.hero--split .hero__intro { color: var(--muted); }
.hero--split .hero__details { border-top-color: var(--line-light); }
.hero--split .hero__details small { color: var(--muted); }

@media (max-width: 980px) {
  .hero--split { grid-template-columns: 1fr; min-height: 0; }
  .hero--split .hero__media { min-height: 46vh; order: -1; }
  .hero--split .hero__panel { padding-top: clamp(2.5rem, 6vw, 4rem); }
  .hero--split .hero__panel::after { display: none; }
}

/* Keep the first action within easy reach on a phone, with a substantial photo. */
@media (max-width: 700px) {
  .hero--split.hero--flat .hero__media { min-height: clamp(180px, 30svh, 260px); }
  .hero--split.hero--flat .hero__panel { padding-top: 1.75rem; }
}

/* ---------- 30e. Editorial ----------
   Headline on flat colour above a full-width image band. Reads as a
   magazine cover rather than a hotel website, and like the split layout it
   puts no text over photography. */
.hero--editorial {
  display: block; min-height: 0; padding: 0;
  background: var(--ink);
}
.hero--editorial .hero__band {
  background: var(--indigo-deep);
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 6rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.hero--editorial .hero__content { max-width: 56rem; }
.hero--editorial h1 {
  font-size: clamp(2.6rem, 1.4rem + 5.6vw, 6.2rem);
  margin-bottom: 1.1rem;
}
.hero--editorial h1 em { display: block; }
.hero--editorial .hero__intro { max-width: 40rem; color: var(--muted); }
.hero--editorial h1 { color: var(--cream); }
.hero--editorial .hero__media {
  position: relative; overflow: hidden;
  height: clamp(280px, 46vh, 560px);
}
.hero--editorial .hero__media img {
  width: 100%; height: 100%; object-fit: cover;
}
.hero--editorial .hero__strip {
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--ink);
}
.hero--editorial .hero__details {
  border-top: 0; padding-top: 0;
}
.hero--editorial .hero__details strong { color: var(--cream); }
.hero--editorial .hero__details small { color: var(--muted); }

/* ---------- 30g. Order-first ----------
   For takeaways. No photograph, tight copy, an oversized ordering button and
   the opening hours promoted into a bar rather than tucked under the fold.
   Short on purpose: the menu should start almost immediately. */
.hero--order {
  min-height: 0;
  padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 3.25rem));
  padding-bottom: clamp(2rem, 4vw, 3rem);
  background: var(--ink);
  display: block;
}
.hero--order .hero__inner { position: static; }
.hero--order .hero__content {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  max-width: none;
}
/* The copy occupies the first column; everything from the buttons down is
   pulled into the second so the ordering call sits beside the headline. */
.hero--order .eyebrow,
.hero--order h1,
.hero--order .hero__intro { grid-column: 1; }
.hero--order .hero__actions,
.hero--order .hero__offer,
.hero--order .hero__details { grid-column: 2; }
.hero--order .hero__actions { grid-row: 1; margin: 0; align-self: end; }
.hero--order .hero__offer   { grid-row: 2; margin: 0; }
.hero--order .hero__details { grid-row: 3; align-self: start; }

.hero--order h1 {
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
  color: var(--on-photo);
  margin-bottom: .75rem;
}
.hero--order .hero__intro {
  color: rgb(var(--on-photo-rgb) / .84);
  max-width: 34rem;
  margin-bottom: 0;
}
/* Content spans the full width here, so the veil is even rather than
   corner-weighted. */
.hero--order .hero__scrim {
  background:
    linear-gradient(180deg, rgb(var(--scrim-rgb) / .82) 0%, rgb(var(--scrim-rgb) / .6) 55%, rgb(var(--scrim-rgb) / .85) 100%);
}
.hero--order .hero__actions { display: grid; gap: .6rem; }
.hero--order .hero__actions .button {
  width: 100%;
  padding-block: 1.15rem;
  font-size: .9rem;
}
/* Hours and address as a bordered bar — a takeaway visitor's first question
   is whether you are open, not what the room looks like. */
.hero--order .hero__details {
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  gap: 1.25rem;
  background: var(--ink-soft);
}
.hero--order .hero__details strong { color: var(--cream); font-size: 1.05rem; }
.hero--order .hero__details span   { color: var(--brass-bright); }
.hero--order .hero__details small  { color: var(--muted); }

@media (max-width: 900px) {
  .hero--order .hero__content { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero--order .eyebrow, .hero--order h1, .hero--order .hero__intro,
  .hero--order .hero__actions, .hero--order .hero__offer,
  .hero--order .hero__details { grid-column: 1; grid-row: auto; }
  .hero--order .hero__actions .button { padding-block: 1rem; }
}

/* ---------- 30h. Poster ----------
   No photograph at all: flat colour and type. Two hairlines frame the block
   so the emptiness reads as deliberate rather than unfinished. */
.hero--poster {
  min-height: min(96svh, 880px);
  display: flex; flex-direction: column; justify-content: center;
  padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 3rem));
  padding-bottom: clamp(2rem, 5vw, 3rem);
  background: var(--ink);
  text-align: center;
}
.hero--poster .hero__rule {
  height: 1px; margin-inline: var(--gutter);
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
  opacity: .55;
}
.hero--poster .hero__inner { flex: 1; display: flex; align-items: center; }
.hero--poster .hero__content { max-width: 46rem; margin-inline: auto; }
.hero--poster .eyebrow { justify-content: center; }
.hero--poster h1 {
  font-size: clamp(2.6rem, 1.2rem + 6.5vw, 6rem);
  line-height: .96;
  color: var(--on-photo);
  margin-bottom: 1.25rem;
}
.hero--poster .hero__intro {
  color: rgb(var(--on-photo-rgb) / .84);
  margin-inline: auto;
  max-width: 34rem;
}
/* Centred type needs an even veil, not the corner-weighted scrim the
   bottom-left slider uses. */
.hero--poster .hero__scrim {
  background:
    linear-gradient(180deg, rgb(var(--scrim-rgb) / .72) 0%, rgb(var(--scrim-rgb) / .55) 50%, rgb(var(--scrim-rgb) / .78) 100%);
}
.hero--poster .hero__actions { justify-content: center; }
.hero--poster .hero__offer { margin-inline: auto; }
.hero--poster .hero__details {
  justify-content: center;
  border-top-color: var(--line-light);
  text-align: left;
}
.hero--poster .hero__details strong { color: var(--on-photo); }
.hero--poster .hero__details span   { color: var(--accent-on-photo); }
.hero--poster .hero__details small  { color: rgb(var(--on-photo-rgb) / .6); }
.hero--poster .hero__details { border-top-color: rgb(var(--on-photo-rgb) / .16); }

@media (max-width: 700px) {
  .hero--poster { min-height: 0; }
  .hero--poster .hero__details { justify-content: flex-start; }
}

/* ---------- 30i. Stacked ----------
   Photograph across the top, copy on flat ground beneath. Nothing is ever
   laid over the image, so a badly lit or busy picture cannot hurt the
   headline. The most forgiving layout of the ten. */
.hero--stack {
  min-height: 0;
  padding: 0;
  display: block;
  background: var(--ink);
}
.hero--stack .hero__media {
  position: relative;
  margin-top: var(--header-h);
  aspect-ratio: 21 / 8;
  overflow: hidden;
  background: var(--ink-soft);
}
.hero--stack .hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.hero--stack .hero__inner {
  padding-top: clamp(2.25rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.25rem, 5vw, 3.5rem);
}
.hero--stack .hero__content { max-width: 44rem; }
.hero--stack h1 {
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem);
  color: var(--cream);
}
.hero--stack .hero__intro { color: var(--muted); }
.hero--stack .hero__details { border-top-color: var(--line-light); }
.hero--stack .hero__details strong { color: var(--cream); }
.hero--stack .hero__details span   { color: var(--brass-bright); }
.hero--stack .hero__details small  { color: var(--muted); }

@media (max-width: 820px) {
  /* A 21:8 letterbox is far too shallow on a phone. */
  .hero--stack .hero__media { aspect-ratio: 4 / 3; }
}

/* ---------- 30j. Overlapping card ----------
   The magazine cover arrangement: an image band with an opaque card breaking
   over its lower edge. They overlap, but the text is on the card, never on
   the picture. */
.hero--overlap {
  min-height: 0;
  padding: 0 0 clamp(2.5rem, 5vw, 4rem);
  display: block;
  background: var(--ink);
}
.hero--overlap .hero__media {
  position: relative;
  margin-top: var(--header-h);
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: var(--ink-soft);
}
.hero--overlap .hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
@media (min-width: 821px) {
  .hero--overlap.hero--flat .hero__media { max-height: min(50svh, 34rem); }
}
.hero--overlap .hero__inner { position: relative; }
.hero--overlap .hero__card {
  position: relative;
  margin-top: clamp(-6rem, -8vw, -3rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--indigo-deep);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  box-shadow: 0 32px 70px -40px rgb(var(--shadow-rgb) / .85);
  max-width: 46rem;
}
.hero--overlap .hero__content { max-width: none; }
.hero--overlap h1 {
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
  color: var(--cream);
}
.hero--overlap .hero__intro { color: var(--muted); }
.hero--overlap .hero__details { border-top-color: var(--line-light); }
.hero--overlap .hero__details strong { color: var(--cream); }
.hero--overlap .hero__details span   { color: var(--brass-bright); }
.hero--overlap .hero__details small  { color: var(--muted); }

@media (max-width: 820px) {
  .hero--overlap .hero__media { aspect-ratio: 4 / 3; }
  /* Less overlap on a phone, or the card eats the whole picture. */
  .hero--overlap .hero__card { margin-top: -2rem; }
}

/* =============================================================
   31. FOOTER LAYOUTS
   All five carry the same blocks from template-parts/footer/parts/.
   ============================================================= */

/* ---------- 31a. Centred stack ---------- */
.site-footer--centred .site-footer__stack {
  display: grid; justify-items: center; text-align: center;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.site-footer--centred .site-footer__brand { align-items: center; }
.site-footer--centred .site-footer__brand p { max-width: 34ch; }
.footer-links--inline {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .75rem clamp(1.25rem, 3vw, 2.25rem);
}
.footer-links--inline a { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.site-footer--centred .site-footer__pair {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: left; width: 100%; max-width: 46rem;
  padding-top: clamp(1rem, 2vw, 1.5rem);
  border-top: 1px solid var(--line-light);
}
.site-footer--centred .footer-hours li { max-width: none; }
.site-footer--centred .site-footer__bottom { justify-content: center; text-align: center; }
@media (max-width: 620px) {
  .site-footer--centred .site-footer__pair { grid-template-columns: 1fr; }
}

/* ---------- 31b. Call-to-action band ----------
   A full-width prompt above a slim bar. The most direct footer. */
.footer-cta {
  background: linear-gradient(135deg, var(--indigo) 0%, var(--indigo-deep) 100%);
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.footer-cta__inner {
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
  align-items: center;
}
.footer-cta__copy .display { margin-bottom: 0; color: var(--cream); }
.footer-cta__actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: flex-end; }
.footer-cta .button--outline { border-color: var(--line-light); }
.footer-cta .button--outline:hover { background: var(--surface-raised); color: var(--cream); border-color: var(--brass-bright); }
@media (max-width: 860px) {
  .footer-cta__inner { grid-template-columns: 1fr; }
  .footer-cta__actions { justify-content: flex-start; }
}
.site-footer--cta .site-footer__slim {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-block: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 860px) {
  .site-footer--cta .site-footer__slim { grid-template-columns: 1fr; }
}

/* =============================================================
   32. OFFER BANNER STYLES

   Five treatments for the banner beneath the hero's buttons. Set per offer
   or site-wide, so a Valentine's offer can look different from a lunch
   deal. Every style renders the same fields.

   The banner can sit on photography, so its accents
   come from the scheme-invariant on-photo tokens: a light theme's darkened
   brass would disappear against the scrim.
   ============================================================= */

/* ---------- Ribbon — solid accent bar, highest contrast ---------- */
.hero__offer--ribbon {
  background: var(--saffron);
  border: 0;
  border-radius: 2px;
  box-shadow: 0 18px 40px -28px rgb(var(--shadow-rgb) / .9);
}
.hero__offer--ribbon::after { display: none; }
.hero__offer--ribbon::before { background: rgb(var(--on-accent-warm-rgb) / .35); }
.hero__offer--ribbon .hero__offer-body strong,
.hero__offer--ribbon .hero__offer-text,
.hero__offer--ribbon .hero__offer-arrow { color: var(--on-accent-warm); }
.hero__offer--ribbon .hero__offer-terms { color: rgb(var(--on-accent-warm-rgb) / .72); }
.hero__offer--ribbon .hero__offer-tag {
  background: rgb(var(--on-accent-warm-rgb) / .16);
  color: var(--on-accent-warm);
  box-shadow: none;
}
.hero__offer--ribbon .hero__offer-tag::before { background: var(--on-accent-warm); }

/* ---------- Ticket — notched edges, like a voucher ----------
   The notches are two radial gradients punched out of the background at the
   vertical centre of each end. */
.hero__offer--ticket {
  border-style: dashed;
  border-radius: 4px;
  background:
    radial-gradient(circle at left  center, transparent 9px, rgb(var(--scrim-rgb) / .72) 9px),
    radial-gradient(circle at right center, transparent 9px, rgb(var(--scrim-rgb) / .72) 9px);
  background-size: 51% 100%, 51% 100%;
  background-position: left center, right center;
  background-repeat: no-repeat;
}
.hero__offer--ticket::before { display: none; }
.hero__offer--ticket .hero__offer-tag { border-radius: 3px; }

/* ---------- Outline — quiet, hairline only ---------- */
.hero__offer--outline {
  background: rgb(var(--scrim-rgb) / .38);
  border: 1px solid rgb(var(--accent-on-photo-rgb) / .55);
  box-shadow: none;
  border-radius: 2px;
}
.hero__offer--outline::after,
.hero__offer--outline::before { display: none; }
.hero__offer--outline .hero__offer-tag {
  background: none;
  border: 1px solid rgb(var(--accent-on-photo-rgb) / .6);
  color: var(--accent-on-photo);
  box-shadow: none;
}
.hero__offer--outline .hero__offer-tag::before { background: var(--accent-on-photo); }

/* ---------- Stamp — bold, angled tag ----------
   The tag lifts out of the corner at an angle, which reads as a sticker on
   a menu board rather than a notification. */
.hero__offer--stamp {
  border-radius: 2px;
  padding-top: 1.4rem;
  overflow: visible;
}
.hero__offer--stamp .hero__offer-tag {
  position: absolute; top: -.7rem; left: 1.1rem;
  transform: rotate(-3deg);
  border-radius: 2px;
  padding: .4rem .9rem;
  box-shadow: 0 8px 18px -8px rgb(var(--shadow-rgb) / .8);
}
.hero__offer--stamp .hero__offer-body { grid-area: body; }
@media (prefers-reduced-motion: no-preference) {
  .hero__offer--stamp:hover .hero__offer-tag { transform: rotate(-3deg) translateY(-2px); }
}

/* ---------- 30f. Heroes whose copy sits on a panel, not a photograph ----------
   The light-scheme layer forces hero accents to --accent-on-photo, because in
   some heroes the copy sits on a dark scrim over a photograph and a
   light theme's darkened accent would vanish against it.

   The split and editorial heroes are the exception: their copy sits on a flat
   panel that flips with the scheme. There the forced photographic accent is
   the thing that vanishes — bright gold on pale stone measured 1.39:1. These
   put the accents back to the theme's own, which measure 6.1–7.4:1.

   Marked with a class rather than :not([data-hero=...]) so a seventh hero
   opts in by adding hero--flat, instead of by being remembered here. */
[data-scheme="light"] .hero--flat .eyebrow,
[data-scheme="light"] .hero--flat h1 em,
[data-scheme="light"] .hero--flat .hero__details span {
  color: var(--brass-bright);
}
[data-scheme="light"] .hero--flat h1,
[data-scheme="light"] .hero--flat .hero__details strong {
  color: var(--cream);
}
[data-scheme="light"] .hero--flat .hero__intro,
[data-scheme="light"] .hero--flat .hero__details small {
  color: var(--muted);
}

/* The outline button gets a white-on-photograph treatment from the scheme
   layer for the same reason, and it is just as invisible on a pale panel. */
[data-scheme="light"] .hero--flat .button--outline {
  --btn-fg: var(--cream);
  border-color: rgb(var(--ink-on-light-rgb) / .28);
  background: rgb(var(--ink-on-light-rgb) / .04);
}
[data-scheme="light"] .hero--flat .button--outline:hover {
  background: rgb(var(--ink-on-light-rgb) / .08);
  border-color: var(--brass-bright);
}

/* ---------- 31d. Minimal bar ----------
   Brand on the left, the essentials in a row beside it, navigation on a thin
   rule beneath. Compact without hiding anything. */
.site-footer--minimal { padding-top: clamp(2.25rem, 4vw, 3.25rem); }
.site-footer--minimal .site-footer__row {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 2.1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.site-footer--minimal .site-footer__essentials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.site-footer--minimal .site-footer__nav-row {
  padding-block: 1rem;
  border-top: 1px solid var(--line-light);
}
.site-footer--minimal .footer-links {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
}
.site-footer--minimal .footer-links a:hover { padding-left: 0; }

@media (max-width: 860px) {
  .site-footer--minimal .site-footer__row { grid-template-columns: 1fr; }
  .site-footer--minimal .site-footer__essentials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .site-footer--minimal .site-footer__essentials { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---------- 31e. Map-led ----------
   For collection-led businesses. The map runs the width of the viewport with
   the details on a panel over it — on a phone the panel drops below the map
   rather than covering it, because a map you cannot see is no use. */
.site-footer--map { padding-top: 0; }
.site-footer--map .site-footer__map {
  position: relative;
  min-height: clamp(380px, 46vw, 520px);
  display: grid;
  align-items: center;
  background: var(--ink-soft);
}
.site-footer--map .site-footer__map iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  filter: grayscale(.4) contrast(1.05);
}
.site-footer--map .site-footer__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 26rem);
  margin-inline: 0;
  margin-left: max(var(--gutter), calc(50% - (var(--shell-wide) / 2) + var(--gutter)));
  display: grid;
  gap: 1.35rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface-footer);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -40px rgb(var(--shadow-rgb) / .8);
}
.site-footer--map .site-footer__nav-row {
  padding-block: 1.15rem;
  border-top: 1px solid var(--line-light);
}
.site-footer--map .footer-links {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
}
.site-footer--map .footer-links a:hover { padding-left: 0; }

@media (max-width: 780px) {
  /* Panel below the map rather than over it — a covered map is useless. */
  .site-footer--map .site-footer__map {
    display: block;
    min-height: 0;
  }
  .site-footer--map .site-footer__map iframe {
    position: relative;
    height: 320px;
  }
  .site-footer--map .site-footer__panel {
    width: auto;
    margin: 0;
    border-radius: 0;
    border-inline: 0;
    box-shadow: none;
  }
}

/* ---------- 31f. Compact phone footers ----------
   Keep the same editable information and reading order. Remove compounded
   desktop spacing rather than hiding useful details behind accordions. */
@media (max-width: 620px) {
  .site-footer { padding-top: 2rem; }
  .site-footer--cta, .site-footer--map { padding-top: 0; }
  .site-footer .footer-label { margin-bottom: .5rem; }
  .site-footer .site-footer__brand { gap: .65rem; }
  .site-footer .site-footer__top,
  .site-footer--centred .site-footer__stack,
  .site-footer--minimal .site-footer__row { gap: 1.5rem; padding-bottom: 1.5rem; }
  .site-footer--centred .site-footer__pair { gap: 1.25rem; padding-top: 1.25rem; }
  .site-footer--minimal .site-footer__essentials { gap: 1.25rem; }
  .site-footer--map .site-footer__panel { gap: 1.25rem; padding: 1.5rem var(--gutter); }

  .footer-cta { padding-block: 2rem; }
  .footer-cta__inner { gap: 1.25rem; }
  .footer-cta__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .footer-cta__actions .button { min-width: 0; min-height: 44px; padding: .85rem .6rem; font-size: .75rem; letter-spacing: .06em; text-align: center; }
  .site-footer--cta .site-footer__slim { gap: 1.25rem; padding-block: 1.5rem; }

  .site-footer .footer-contact { gap: .05rem; margin-bottom: .65rem; min-height: 44px; justify-content: center; }
  .site-footer .footer-contact:last-child { margin-bottom: 0; }
  .site-footer .footer-contact strong { font-size: 1.1rem; line-height: 1.5; }
  .site-footer .footer-hours { max-width: 25rem; }
  .site-footer .footer-hours li { max-width: none; }
  .site-footer .footer-hours__note { margin-top: .6rem; }
  .site-footer .footer-links { gap: .15rem 1rem; }
  .site-footer .footer-links a,
  .site-footer .site-footer__bottom a,
  .site-footer .text-link { display: inline-flex; align-items: center; min-height: 44px; }

  .site-footer .site-footer__bottom { padding-block: 1rem; gap: .5rem; }
  .site-footer .site-footer__bottom nav { gap: .1rem 1rem; }
  .site-footer .footer-legal { margin-top: .25rem; }
  .site-footer--centred .site-footer__bottom { align-items: center; }
  .site-footer--centred .site-footer__bottom nav { justify-content: center; }
}
@media (max-width: 540px) {
  .site-footer--columns .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 31g. Shared restaurant footer ----------
   One content hierarchy in every design. All colours and typography remain
   theme-driven; no empty introduction/contact column reserves space. */
.site-footer--unified { padding-top: 0; border-top: 1px solid var(--line-light); }
.site-footer--unified .site-footer__main {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 2rem clamp(2rem, 5vw, 5rem); padding-block: clamp(2rem, 4vw, 3.5rem);
}
.site-footer--unified .site-footer__main[data-footer-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer--unified .site-footer__main[data-footer-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-footer--unified .site-footer__main[data-footer-columns="4"] { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 1.1fr) minmax(0, .7fr); column-gap: clamp(1.5rem, 3vw, 3rem); }
.site-footer--unified .site-footer__main > div { min-width: 0; }
.site-footer--unified .site-footer__name { margin: 0 0 .75rem; color: var(--cream); font-family: var(--font-display); font-size: 1.6rem; line-height: 1.25; overflow-wrap: anywhere; }
.site-footer--unified .site-footer__restaurant-logo { display: block; width: auto; height: auto; max-width: min(180px, 100%); max-height: 120px; margin: 0 0 1rem; object-fit: contain; object-position: left center; }
.site-footer--unified .site-footer__description { color: var(--muted); font-size: 1rem; line-height: 1.75; max-width: 38ch; white-space: normal; overflow-wrap: anywhere; }
.site-footer--unified .footer-label { font-family: var(--font-body); font-size: .8rem; line-height: 1.5; letter-spacing: .12em; margin: 0 0 .75rem; }
.site-footer--unified .footer-links { display: grid; gap: 0; align-content: start; }
.site-footer--unified .footer-links a,
.site-footer--unified .footer-contact,
.site-footer--unified .footer-address a {
  display: flex; align-items: center; justify-content: flex-start; flex-direction: row;
  min-height: 44px; min-width: 0; margin: 0; padding-block: .35rem;
  color: var(--muted); font-family: var(--font-body); font-size: .95rem; font-weight: 400; line-height: 1.55;
  text-decoration: none; overflow-wrap: anywhere;
}
.site-footer--unified .footer-links a { justify-self: start; max-width: 100%; }
.site-footer--unified .footer-contact { display: block; }
.site-footer--unified .footer-address { margin: .25rem 0 0; max-width: 32ch; font-style: normal; }
.site-footer--unified .footer-address a { display: block; }
.site-footer--unified .footer-hours { max-width: 25rem; gap: .3rem; }
.site-footer--unified .footer-hours li { max-width: none; gap: .75rem; }
.site-footer--unified .footer-hours__note { color: var(--muted); margin-top: .75rem; font-size: .8rem; line-height: 1.6; }
.site-footer--unified .footer-socials { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; margin-top: .75rem; }
.site-footer--unified .footer-socials a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brass-bright); font-size: .9rem; text-decoration: none; overflow-wrap: anywhere; }
.site-footer--unified .footer-links a:hover,
.site-footer--unified .footer-contact:hover,
.site-footer--unified .footer-address a:hover,
.site-footer--unified .footer-socials a:hover { color: var(--brass-bright); text-decoration: underline; text-underline-offset: .25em; transform: none; padding-left: 0; }
.site-footer--unified .site-footer__bottom { padding-block: 1rem; gap: .75rem 2rem; flex-direction: row; align-items: center; color: var(--muted); }
.site-footer--unified .site-footer__bottom > div { min-width: 0; }
.site-footer--unified .footer-legal { gap: .15rem 1rem; margin-top: .15rem; }
.site-footer--unified .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; font-size: .8rem; }
.site-footer--unified .footer-powered { min-height: 44px; opacity: 1; flex-shrink: 0; }
.site-footer--unified .footer-powered span { color: var(--muted); font-size: .65rem; letter-spacing: .12em; }
@media (max-width: 1100px) {
  .site-footer--unified .site-footer__main[data-footer-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .site-footer--unified .site-footer__main[data-footer-columns="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer--unified .site-footer__main[data-footer-columns="3"] > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .site-footer--unified .site-footer__main,
  .site-footer--unified .site-footer__main[data-footer-columns] { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-block: 1.75rem 1.5rem; }
  .site-footer--unified .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1rem; }
  .site-footer--unified .footer-socials { margin-top: .5rem; }
  .site-footer--unified .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* =============================================================
   33. BODY ARRANGEMENT TREATMENTS

   Reordering sections is not enough. Seven bands in a different sequence,
   each rendered identically, still reads as the same website — which is
   exactly what the first pass produced.

   So an arrangement also sets how the sections are *drawn*: the width of
   the container, the vertical rhythm, how many columns the grids take, how
   headings are aligned, and the proportions of the images. Those are the
   things that actually make two pages look like different sites.

   All of it is layout only. Not one colour appears below, which is what
   keeps every arrangement working with every theme.

   [data-body] and :root both match <html> at the same specificity, so this
   block must stay after the token block to win. It is the last section in
   the file for that reason.
   ============================================================= */

/* ---------- 33a. Story-led — the original ----------
   No overrides. Contained shell, generous rhythm, left-aligned headings,
   grids that fit as many columns as the space allows. */


/* ---------- 33b. Menu-led — a takeaway, not a brochure ----------
   Tighter and busier. The menu is the point, so its cards get two wide
   columns with the numerals enlarged into a graphic element, the dish grid
   runs four across, and the vertical rhythm closes up so more fits on a
   screen. Headings centre, which reads as a menu board rather than an
   editorial spread. */
[data-body="menu-led"] {
  --shell:     1120px;
  --section-y: clamp(3rem, 5.5vw, 5.25rem);
}
[data-body="menu-led"] .section-heading {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
[data-body="menu-led"] .section-heading .eyebrow { justify-content: center; }
[data-body="menu-led"] .section-heading > p { max-width: 56ch; }
[data-body="menu-led"] .menu-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
[data-body="menu-led"] .menu-card {
  flex-direction: row;
  align-items: baseline;
  gap: 1.5rem;
}
[data-body="menu-led"] .menu-card__number {
  font-size: 3.4rem;
  line-height: .8;
  opacity: .28;
}
[data-body="menu-led"] .dish-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 208px), 1fr));
  gap: clamp(.7rem, 1.4vw, 1.1rem);
}
[data-body="menu-led"] .dish { aspect-ratio: 1 / 1; }
/* The story is demoted in this arrangement, so it stacks rather than
   claiming half the width. */
[data-body="menu-led"] .pedigree__grid { grid-template-columns: 1fr; }
[data-body="menu-led"] .pedigree__media .image-frame { aspect-ratio: 16 / 9; }
@media (max-width: 760px) {
  [data-body="menu-led"] .menu-cards { grid-template-columns: 1fr; }
}

/* ---------- 33c. Gallery-led — photography carries the page ----------
   The widest of the arrangements. Images run to the edge of the shell,
   the gallery strip drops to two big frames rather than four small ones,
   dishes go large, and the copy is deliberately narrowed so text never
   competes with the pictures. */
[data-body="gallery-led"] {
  --shell:     1400px;
  --section-y: clamp(4rem, 8vw, 7.5rem);
}
[data-body="gallery-led"] .section-heading {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
[data-body="gallery-led"] .section-heading .eyebrow { justify-content: center; }
[data-body="gallery-led"] .section-heading > p { max-width: 46ch; }
[data-body="gallery-led"] .gallery-strip {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: clamp(.75rem, 1.5vw, 1.25rem);
}
[data-body="gallery-led"] .gallery-strip .image-frame { aspect-ratio: 4 / 3; }
[data-body="gallery-led"] .dish-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}
[data-body="gallery-led"] .dish { aspect-ratio: 3 / 2; }
[data-body="gallery-led"] .prose p,
[data-body="gallery-led"] .pedigree__copy p { max-width: 52ch; }
[data-body="gallery-led"] .pedigree__media .image-frame { aspect-ratio: 1 / 1; }
[data-body="gallery-led"] .menu-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* ---------- 33d. Compact — one decisive scroll ----------
   Everything pulled in: a narrower shell, markedly tighter rhythm, a
   smaller display size, and denser grids. Four sections at this rhythm is
   roughly one screen of scrolling rather than four. */
[data-body="compact"] {
  --shell:     1040px;
  --section-y: clamp(2.25rem, 4vw, 3.75rem);
}
[data-body="compact"] .display {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.4rem);
  margin-bottom: 1rem;
}
[data-body="compact"] .display--sm {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
}
[data-body="compact"] .section-heading {
  grid-template-columns: 1fr;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
[data-body="compact"] .section-heading > p { max-width: 60ch; }
[data-body="compact"] .lead { font-size: clamp(1.05rem, .98rem + .4vw, 1.25rem); }
[data-body="compact"] .menu-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
[data-body="compact"] .menu-card { padding: clamp(1.1rem, 2vw, 1.6rem); gap: .75rem; }
[data-body="compact"] .menu-card__number { font-size: 1.7rem; }
[data-body="compact"] .dish-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: .75rem;
}
[data-body="compact"] .dish { aspect-ratio: 4 / 5; }
[data-body="compact"] .venue__media { min-height: 300px; }
[data-body="compact"] .venue__panel { padding: clamp(1.75rem, 4vw, 3rem); }

/* ---------- 33e. Alternating — a magazine spread ----------
   Every image/text section flips sides down the page, so the eye is pulled
   left, right, left rather than down a single column. The section headings
   are pushed off-axis for the same reason. This is the most editorial of
   the five and the one that needs good photography.

   The flip keys off the section's position inside #rik-body, so it keeps
   alternating correctly no matter which sections the preset includes. */
[data-body="alternating"] {
  --shell:     1280px;
  --section-y: clamp(4rem, 8vw, 7.5rem);
}
[data-body="alternating"] .section-heading {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: end;
}
[data-body="alternating"] #rik-body > section:nth-of-type(even) .feature-split__media { order: 2; }
[data-body="alternating"] #rik-body > section:nth-of-type(even) .pedigree__grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
}
[data-body="alternating"] #rik-body > section:nth-of-type(even) .pedigree__media { order: 2; }
[data-body="alternating"] #rik-body > section:nth-of-type(even) .pedigree__badge {
  right: auto; left: -1.25rem;
}
[data-body="alternating"] #rik-body > section:nth-of-type(even) .venue__media { order: 2; }
[data-body="alternating"] .menu-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
[data-body="alternating"] .dish-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
[data-body="alternating"] .dish { aspect-ratio: 5 / 6; }
[data-body="alternating"] .pedigree__media .image-frame { aspect-ratio: 3 / 4; }
[data-body="alternating"] .feature-split__media .image-frame { aspect-ratio: 4 / 3; }
/* The alternation only makes sense while the two halves sit side by side;
   stacked on a phone it would just move the image above the copy at random. */
@media (max-width: 900px) {
  [data-body="alternating"] #rik-body > section:nth-of-type(even) .feature-split__media,
  [data-body="alternating"] #rik-body > section:nth-of-type(even) .pedigree__media,
  [data-body="alternating"] #rik-body > section:nth-of-type(even) .venue__media { order: 0; }
  [data-body="alternating"] #rik-body > section:nth-of-type(even) .pedigree__grid {
    grid-template-columns: 1fr;
  }
  [data-body="alternating"] #rik-body > section:nth-of-type(even) .pedigree__badge {
    left: auto; right: -1.25rem;
  }
}

/* =============================================================
   34. MOTION

   The pacing here is deliberately slow and warm. A restaurant site is not a
   product dashboard: things should settle rather than snap, and nothing
   should be moving continuously in the corner of your eye while you read a
   menu. The hero already learned this lesson once — its Ken Burns zoom was
   toned from 9% over 9s to 3% over 18s because it read as restless behind
   the headline.

   Everything below is transform and opacity only, so it composites on the
   GPU and never triggers layout. Every effect is off under
   prefers-reduced-motion (see §21 and the guards at the end of each block).
   ============================================================= */

/* ---------- 34a. Reveal variants ----------
   The default reveal (§20) lifts and fades. These are for the cases where
   that reads as generic. */

/* Wipe: the image is uncovered from the bottom rather than sliding. Used on
   photography, where a slide looks like a slideshow and a wipe looks like a
   print being developed. */
[data-reveal="wipe"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="wipe"].is-revealed { clip-path: inset(0 0 0 0); }

/* Scale: a very slight settle, for cards that also carry a hover lift. */
[data-reveal="scale"] {
  opacity: 0; transform: scale(.97);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="scale"].is-revealed { opacity: 1; transform: none; }

/* Lines: display headings arrive a line at a time. The JS wraps each line in
   a .rik-line > span pair; the outer element clips, the inner one moves. */
.rik-line {
  display: block;
  overflow: hidden;
  /* Tight leading clips descenders without a little breathing room. */
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
.rik-line > span {
  display: block;
  transform: translateY(105%);
  transition: transform .95s var(--ease);
  transition-delay: calc(var(--line-index, 0) * 90ms + var(--reveal-delay, 0ms));
}
/* The line splitter recreates emphasis inside an already block-level line.
   Keep those recreated words inline or hero emphasis becomes one word per row. */
.hero h1 .rik-line em { display: inline; }
[data-reveal].is-revealed .rik-line > span,
.is-revealed .rik-line > span { transform: none; }

/* ---------- 34b. Parallax ----------
   A slow counter-drift on the photographs behind the closing banner and the
   page banners. The movement is small on purpose: enough to give the page
   depth as you scroll, not enough to notice as an effect. */
[data-parallax] { will-change: transform; }
[data-parallax] img { transform: translate3d(0, var(--parallax, 0px), 0) scale(1.12); }

/* ---------- 34c. Appetite ----------
   Hover behaviour on the things a hungry visitor actually points at. */

/* Dish cards: the photograph pushes in slightly and the copy lifts to meet
   it, so the card feels like it is opening rather than just scaling. */
.dish__body { transition: transform .55s var(--ease); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .dish:hover .dish__body { transform: translateY(-6px); }
  .dish:hover::before { opacity: .92; }
}

/* Menu cards already sweep an accent rule across the top on hover; this adds
   a matching shift on the numeral so the two read as one gesture. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .menu-card { transition: background-color .45s var(--ease), transform .45s var(--ease); }
  .menu-card:hover { transform: translateY(-3px); }
}

/* The gallery frames breathe very slightly on hover rather than zooming. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .gallery-strip .image-frame img { transition: transform 1.4s var(--ease); }
  .gallery-strip figure:hover .image-frame img { transform: scale(1.06); }
}

/* ---------- 34d. Counting numerals ----------
   The facts strip counts up when it comes into view. Tabular figures stop
   the width jittering as the digits change. */
.facts strong[data-count] { font-variant-numeric: tabular-nums; }

/* ---------- 34e. Reduced motion ----------
   §21 already flattens durations globally. These reset the specific
   properties whose *initial* state would otherwise leave content invisible
   or clipped — a reveal that never runs must not hide the page. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal="wipe"] { clip-path: none; }
  [data-reveal="scale"] { opacity: 1; transform: none; }
  .rik-line > span { transform: none; }
  [data-parallax] img { transform: none; }
}

/* =============================================================
   35. TAKEAWAY FURNITURE

   Two pieces of chrome that a takeaway needs and a brochure site does not:
   a running strip of the things people ring up to ask, and an ordering bar
   that stays within thumb reach on a phone.
   ============================================================= */

/* ---------- 35a. Ticker ----------
   The strip of standing information — delivery threshold, kitchen hours,
   collection time. It sits directly under the hero, which is where the eye
   lands after the headline.

   Duplicated content scrolls seamlessly: the JS clones the list so the
   animation can translate a full 50% and restart with no visible jump. */
.rik-ticker {
  position: relative;
  overflow: hidden;
  background: var(--brass);
  color: var(--on-accent);
  border-block: 1px solid var(--line-light);
}
.rik-ticker__track {
  display: flex;
  width: max-content;
  animation: rik-ticker 42s linear infinite;
}
.rik-ticker__list {
  display: flex; align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: .75rem;
  padding-inline: clamp(1rem, 2.5vw, 2rem);
  margin: 0;
  white-space: nowrap;
}
.rik-ticker__list li {
  display: flex; align-items: center; gap: .8rem;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
}
/* A lozenge between items rather than a bullet, which reads as a menu board. */
.rik-ticker__list li::after {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; opacity: .55;
}
@keyframes rik-ticker {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.rik-ticker:hover .rik-ticker__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .rik-ticker__track { animation: none; }
  .rik-ticker { overflow-x: auto; }
}

/* ---------- 35b. Sticky order bar ----------
   Phones only. Appears once the hero has scrolled away, so it never covers
   the headline, and sits above the safe area on a notched device. Hidden
   entirely when the navigation menu is open. */
.rik-orderbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 90;
  display: none;
  gap: .6rem;
  padding: .7rem clamp(.75rem, 3vw, 1.25rem);
  padding-bottom: calc(.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--header-bar);
  backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid var(--line-light);
  transform: translateY(105%);
  transition: transform .45s var(--ease);
}
.rik-orderbar.is-visible { transform: none; }
.rik-orderbar .button { flex: 1; padding-block: .85rem; font-size: .78rem; }
.rik-orderbar__call {
  flex: none; display: grid; place-items: center;
  width: 48px; border-radius: var(--radius);
  border: 1px solid var(--line-light);
  color: var(--cream-text);
  text-decoration: none;
}
.rik-orderbar__call svg { width: 18px; height: 18px; }

@media (max-width: 820px) {
  .rik-orderbar { display: flex; }
  /* Give the footer room so the bar never sits on top of the legal links. */
  body.has-orderbar .site-footer { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
  /* A hidden bar must not leave an empty strip below the footer. Browsers
     without :has retain the conservative clearance above. */
  body.has-orderbar:has(.rik-orderbar:not(.is-visible)) .site-footer { padding-bottom: 0; }
}
body.nav-open .rik-orderbar { transform: translateY(105%); }

/* ---------- 33f. Counter — a café menu board ----------
   Built for counter service rather than table service. The menu is the first
   thing and is drawn as a board: three ruled columns with the dividers left
   visible, headings centred above them. Photography is present but supporting,
   and the story is not on the page at all.

   The rhythm sits between compact and story-led — a café page is short, but
   it should not feel rushed the way a takeaway page deliberately does. */
[data-body="counter"] {
  --shell:     1180px;
  --section-y: clamp(3rem, 6vw, 5.5rem);
}
[data-body="counter"] .section-heading {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
[data-body="counter"] .section-heading .eyebrow { justify-content: center; }
[data-body="counter"] .section-heading > p { max-width: 52ch; }
[data-body="counter"] .menu-cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
/* The board reading: the number becomes a quiet index rather than a graphic,
   and each card keeps its rule so the columns read as a list. */
[data-body="counter"] .menu-card { padding-block: clamp(1.4rem, 2.6vw, 2rem); }
[data-body="counter"] .menu-card__number {
  font-size: 1.15rem; opacity: 1; letter-spacing: .08em;
}
[data-body="counter"] .dish-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
[data-body="counter"] .dish { aspect-ratio: 1 / 1; }
[data-body="counter"] .gallery-strip .image-frame { aspect-ratio: 1 / 1; }
[data-body="counter"] .venue { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
@media (max-width: 900px) {
  [data-body="counter"] .venue { grid-template-columns: 1fr; }
}

/* ---------- 33g. Index — a menu card, not a gallery ----------
   The dish grid stops being photographs and becomes a list: name, description
   and a small thumbnail on a rule. A takeaway customer is scanning for what
   they want, and a list is faster to scan than a grid of pictures. Menu cards
   run as full-width rows for the same reason. */
[data-body="index"] {
  --shell:     1060px;
  --section-y: clamp(2.75rem, 5vw, 4.75rem);
}
[data-body="index"] .section-heading {
  grid-template-columns: 1fr;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
[data-body="index"] .menu-cards { grid-template-columns: 1fr; }
[data-body="index"] .menu-card {
  flex-direction: row;
  align-items: baseline;
  gap: 1.25rem;
  padding-block: clamp(1rem, 2vw, 1.4rem);
}
[data-body="index"] .menu-card__number {
  font-size: 1.5rem;
  opacity: .5;
  min-width: 2.5rem;
}
/* The dish grid becomes a ruled list. */
[data-body="index"] .dish-grid {
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--line-light);
}
[data-body="index"] .dish {
  aspect-ratio: auto;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid var(--line-light);
  border-radius: 0;
  padding: .85rem 0;
}
[data-body="index"] .dish img {
  position: relative;
  width: 84px; height: 84px;
  border-radius: var(--radius);
}
[data-body="index"] .dish::before { display: none; }
[data-body="index"] .dish__body { padding: 0; }
[data-body="index"] .dish h3 { font-size: 1.2rem; margin-bottom: .15rem; color: var(--cream); }
[data-body="index"] .dish p  { color: var(--muted); font-size: .9rem; }
[data-body="index"] .dish__tag { color: var(--brass); margin-bottom: .2rem; }
[data-body="index"] .dish:hover img { transform: none; }

@media (max-width: 620px) {
  [data-body="index"] .dish { grid-template-columns: 62px minmax(0, 1fr); gap: .9rem; }
  [data-body="index"] .dish img { width: 62px; height: 62px; }
  [data-body="index"] .menu-card { flex-direction: column; gap: .5rem; }
}

/* ---------- 33h. Longform — for a restaurant with something to say ----------
   A narrow measure, air between sections, and the lead paragraph doing real
   work. The opposite of the takeaway arrangements: fewer things, larger, with
   room around them. */
[data-body="longform"] {
  --shell:     760px;
  --shell-wide: 1060px;
  --section-y: clamp(4.5rem, 9vw, 8rem);
}
[data-body="longform"] .section-heading {
  grid-template-columns: 1fr;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
[data-body="longform"] .lead { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem); }
[data-body="longform"] .prose p { max-width: 68ch; }
[data-body="longform"] .pedigree__grid,
[data-body="longform"] .feature-split__grid { grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3rem); }
[data-body="longform"] .pedigree__media .image-frame,
[data-body="longform"] .feature-split__media .image-frame { aspect-ratio: 3 / 2; }
[data-body="longform"] .menu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-body="longform"] .dish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-body="longform"] .gallery-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 700px) {
  [data-body="longform"] .menu-cards,
  [data-body="longform"] .dish-grid,
  [data-body="longform"] .gallery-strip { grid-template-columns: 1fr; }
}

/* ---------- 33i. Full bleed — photography to the edges ----------
   Images run the full width of the viewport with only the copy inset. The
   loudest arrangement, and the one that most rewards good photography. */
[data-body="fullbleed"] {
  --shell:      1180px;
  --shell-wide: 100%;
  --section-y:  clamp(3.5rem, 7vw, 6.5rem);
}
[data-body="fullbleed"] .gallery-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
}
[data-body="fullbleed"] .gallery-strip .image-frame { border-radius: 0; aspect-ratio: 1 / 1; }
[data-body="fullbleed"] .dish-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
}
[data-body="fullbleed"] .dish { border-radius: 0; aspect-ratio: 3 / 4; }
[data-body="fullbleed"] .menu-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
[data-body="fullbleed"] .section-heading {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
[data-body="fullbleed"] .section-heading .eyebrow { justify-content: center; }
[data-body="fullbleed"] .pedigree__media .image-frame,
[data-body="fullbleed"] .feature-split__media .image-frame { border-radius: 0; }

@media (max-width: 900px) {
  [data-body="fullbleed"] .gallery-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-body="fullbleed"] .dish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-body="fullbleed"] .menu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  [data-body="fullbleed"] .dish-grid,
  [data-body="fullbleed"] .menu-cards { grid-template-columns: 1fr; }
}

/* =============================================================
   36. VISUAL REVIEW FIXES

   The first fixes in this project made with eyes on rendered pages —
   full-page headless-Chrome captures of all 33 templates. Each block names
   the template where the defect was seen. Most had one of five root causes,
   which is why this is one section and not thirty-three.
   ============================================================= */

/* ---------- 36a. The header call-to-action was unreadable ----------
   Seen on: kraft, quayside, salt-house — and, it turns out, every template
   including the live site. `.site-nav a` (0,1,1) sets colour on every nav
   link and outranks `.button` (0,1,0), so the CTA's label has always been
   --cream-text on the accent instead of --btn-fg: ~1.9:1 on Ink, invisible
   dark-on-dark on the light themes. The contrast gate never saw it because
   it checks token pairs, not which token a selector actually wins. */
.site-nav a.button { color: var(--btn-fg, var(--on-accent)); }
.site-nav a.button:hover { color: var(--btn-fg, var(--on-accent)); }

/* ---------- 36b. Photograph styling bleeding onto flat heroes ----------
   Seen on: chippy, kraft, and every light template with a hero--flat hero.
   Two leftovers from the photographic heroes:

   1. `.hero h1` carries a text-shadow that reads as a dirty smudge when the
      headline sits on flat colour rather than a photo.
   2. The offer banner's ground is a dark scrim built to sit on photographs;
      composited over a pale panel it turns to mud, and its white text with
      it. On a flat surface the banner becomes a flat-surface card: raised
      ground, accent hairline, theme text. Tokens only, so it holds on the
      dark flat heroes too. */
.hero--flat h1 { text-shadow: none; }

.hero--flat .hero__offer {
  background:
    linear-gradient(102deg, rgb(var(--saffron-rgb) / .12) 0%, rgb(var(--brass-rgb) / .05) 60%),
    var(--surface-raised, var(--ink-soft));
  border-color: rgb(var(--brass-rgb) / .45);
  box-shadow: 0 14px 34px -26px rgb(var(--shadow-rgb) / .5);
  backdrop-filter: none;
}
.hero--flat .hero__offer::after { display: none; }
.hero--flat .hero__offer-body strong { color: var(--cream); }
.hero--flat .hero__offer-text { color: var(--muted); }
.hero--flat .hero__offer-terms { color: rgb(var(--cream-text-rgb) / .6); }
.hero--flat .hero__offer-arrow { color: var(--brass-bright); }
.hero--flat .hero__offer:hover { border-color: var(--brass); }
/* The ticket and outline variants also leaned on the scrim. */
.hero--flat .hero__offer--ticket {
  background: var(--surface-raised, var(--ink-soft));
}
.hero--flat .hero__offer--outline {
  background: none;
  border-color: rgb(var(--brass-rgb) / .5);
}
.hero--flat .hero__offer--outline .hero__offer-tag {
  border-color: rgb(var(--brass-rgb) / .55);
  color: var(--brass-bright);
}
.hero--flat .hero__offer--outline .hero__offer-tag::before { background: var(--brass-bright); }
/* Ribbon is solid saffron and already fine on any ground. */

/* ---------- 36c. The order hero read as scattered ----------
   Seen on: tandoor, dockside. Copy in column one and ordering blocks in
   column two shared implicit rows, so each half stretched to the other's
   heights and the headline floated in dead space. Explicit rows, top
   alignment, and the hours bar grounded full-width underneath. */
.hero--order .hero__content {
  align-items: start;
  grid-template-rows: auto auto auto;
}
.hero--order .hero__actions { grid-row: 1 / 3; align-self: start; }
.hero--order .hero__offer { grid-row: 3; align-self: start; }
.hero--order .hero__details {
  grid-column: 1 / -1;
  grid-row: 4;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  justify-content: space-between;
}
@media (max-width: 860px) {
  .hero--order .hero__content { grid-template-columns: 1fr; grid-template-rows: none; }
  .hero--order .eyebrow, .hero--order h1, .hero--order .hero__intro,
  .hero--order .hero__actions, .hero--order .hero__offer,
  .hero--order .hero__details { grid-column: 1; grid-row: auto; }
}

/* ---------- 36d. The index list looked like clutter ----------
   Seen on: tandoor, chippy, kraft. The concept is right — a takeaway
   customer scans a list faster than a gallery — but 84px thumbnails on
   full-width rows read as accidents. Two proper menu columns, bigger
   photographs, and room to breathe read as a menu card instead. */
[data-body="index"] .dish-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 3.5rem);
  row-gap: 0;
}
[data-body="index"] .dish {
  grid-template-columns: 108px minmax(0, 1fr);
  padding: 1.1rem 0;
}
[data-body="index"] .dish img {
  width: 108px; height: 108px;
  object-fit: cover;
}
@media (max-width: 860px) {
  [data-body="index"] .dish-grid { grid-template-columns: 1fr; }
}

/* The Setting: cover-cropping a portrait photograph into a tall panel
   produced a giant zoomed crop (the copper-mug effect). In the index
   arrangement the section stacks instead: a wide, shallow image above the
   copy, which no crop can make strange. */
[data-body="index"] .venue { grid-template-columns: 1fr; }
[data-body="index"] .venue__media {
  min-height: 0;
  aspect-ratio: 21 / 8;
}
[data-body="index"] .venue__panel { padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 5vw, 4.5rem); }

/* ---------- 36e. Menu-led drowned the food in text ----------
   Seen on: saffron, noir, thali, bananaleaf. Square tiles four across left
   the description sprawling over the middle of the photograph. Three
   balanced columns, and the tile shows tag and name only — the description
   belongs to the ordering site, and on a 1:1 tile it was sitting on the
   food. */
[data-body="menu-led"] .dish-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.8rem, 1.6vw, 1.2rem);
}
[data-body="menu-led"] .dish p { display: none; }
@media (max-width: 860px) {
  [data-body="menu-led"] .dish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 36f. Full bleed that never bled ----------
   Seen on: quayside, mono, monsoon. The gallery strip sat inside the shell,
   so the arrangement named "fullbleed" showed four small pictures in the
   middle of the page. Break the strip out to the viewport edges — this is
   the arrangement's whole identity. */
[data-body="fullbleed"] .gallery-strip {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* (A suspected flush-edge defect on the overlap card turned out to be the
   gallery-led arrangement's deliberately wide shell — no fix needed.) */

/* ---------- 36h. Second visual pass ----------
   Found by re-reviewing all 33 rendered templates after the first fixes. */

/* Full bleed, but actually. The strip carries .shell on the same element, so
   the first breakout was quietly clamped by the shell's max-width — the
   arrangement named "fullbleed" was rendering a centred strip. Seen on:
   quayside, mono, monsoon. */
[data-body="fullbleed"] .gallery-strip {
  max-width: none;
  padding-inline: 0;
}

/* The facts strip showed two empty grey cells: four facts into three columns
   leaves orphan tracks, and the container's hairline background shows
   through them like missing teeth. Longform's narrow shell is what forced
   three columns. Two-by-two is always full. Seen on: himalaya, kathmandu,
   bistro-rouge. */
[data-body="longform"] .facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Dense grids drowned the food in copy: on small tiles the description
   sprawled over the middle of the photograph. Tag and name are enough on a
   tile — the description belongs to the ordering site. Counter also goes to
   three columns so six dishes make two full rows instead of four-and-two.
   Seen on: momo-house, dockside, highstreet. */
[data-body="counter"] .dish p,
[data-body="compact"] .dish p { display: none; }
[data-body="counter"] .dish-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 860px) {
  [data-body="counter"] .dish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The Setting beside a tall copy column cover-cropped its portrait
   photograph into a giant close-up (the copper-mug effect). Counter pins
   the image to a sane ratio and lets the band's ground show instead. */
[data-body="counter"] .venue__media {
  min-height: 0;
  aspect-ratio: 4 / 3;
  align-self: center;
}

/* ---------- 36i. Final pass ---------- */

/* The scroll cue sits bottom-centre, which is exactly where the centred
   hero puts its address strip — "EH21 7PQ" and "SCROLL" were typing over
   each other. Seen on: sakura, jaipur, greenhouse, claret. */
.hero--centred .hero__scroll { display: none; }

/* Compact's dish tiles wrapped four-and-two. Three columns make two full
   rows of the six dishes. Seen on: charcoal, harbour. */
[data-body="compact"] .dish-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 860px) {
  [data-body="compact"] .dish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =============================================================
   37. GROUND RHYTHM PER ARRANGEMENT

   The last big source of sameness: every template striped its sections
   with the same bands in the same order, because the band classes are
   written into the section templates. Overriding the grounds per
   arrangement changes the entire colour rhythm of the page — an essay, a
   photo wall and a menu board should not share a stripe pattern.

   Grounds move between the theme's own surface tokens only (ink, ink-soft,
   indigo, indigo-deep, transparent). Never across the light/dark boundary:
   the cream band carries its own text-colour system, so CSS alone must not
   put a section onto it. Tokens only, as everywhere.
   ============================================================= */

/* ---------- Longform: one continuous ground, ruled like an essay ---------- */
[data-body="longform"] .section--indigo,
[data-body="longform"] .section--slate { background: transparent; }
[data-body="longform"] #rik-body > .section + .section::before {
  content: ""; position: absolute; inset-inline: var(--gutter); top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-light) 18%, var(--line-light) 82%, transparent);
}
[data-body="longform"] .venue { background: var(--indigo-deep); }

/* ---------- Fullbleed: no bands — the photography separates the page ---------- */
[data-body="fullbleed"] .section--indigo,
[data-body="fullbleed"] .section--slate { background: transparent; }

/* ---------- Index: flat menu paper, every section ruled ---------- */
[data-body="index"] .section--indigo,
[data-body="index"] .section--slate { background: transparent; }
[data-body="index"] #rik-body > .section + .section::before {
  content: ""; position: absolute; inset-inline: var(--gutter); top: 0; height: 1px;
  background: var(--line-light);
}

/* ---------- Gallery-led: bands off except the room ---------- */
[data-body="gallery-led"] .section--indigo,
[data-body="gallery-led"] .section--slate { background: transparent; }

/* ---------- Alternating: a hard stripe every other section ---------- */
/* Custom sections own their chosen panel/photograph background. */
[data-body="alternating"] #rik-body > section:nth-of-type(odd):not(.rik-home-section) {
  background: transparent;
}
[data-body="alternating"] #rik-body > section:nth-of-type(even):not(.reserve):not(.venue):not(.rik-home-section) {
  background: var(--indigo-deep);
}

/* ---------- Menu-led: the menu board pops on the deep band ---------- */
[data-body="menu-led"] .section--slate { background: var(--indigo-deep); }

/* ---------- Counter: soft alternation, café calm ---------- */
[data-body="counter"] .section--slate { background: transparent; }
[data-body="counter"] #rik-body > section:nth-of-type(even):not(.reserve):not(.venue):not(.rik-home-section) {
  background: var(--ink-soft);
}

/* =============================================================
   38. HEADING VOICE PER ARRANGEMENT
   Small, consistent moves that give each arrangement its own voice
   without touching the type scale globally.
   ============================================================= */

/* Longform speaks in oversized display type with room around it. */
[data-body="longform"] .section-heading .display {
  font-size: clamp(2.8rem, 1.8rem + 4vw, 5.2rem);
}
[data-body="longform"] .section-heading { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* Fullbleed: wide-tracked centred eyebrows over quiet headings. */
[data-body="fullbleed"] .eyebrow { letter-spacing: .34em; }

/* Index: headings sized like a menu's category titles, not posters. */
[data-body="index"] .section-heading .display {
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem);
}

/* Counter: the double rule of a printed menu board under each heading. */
[data-body="counter"] .section-heading .display {
  padding-bottom: .55em;
  background:
    linear-gradient(var(--brass), var(--brass)) bottom left / 64px 2px no-repeat,
    linear-gradient(var(--line-light), var(--line-light)) bottom 6px left 0 / 128px 1px no-repeat;
}
[data-body="counter"] .section-heading--center .display,
[data-body="counter"] .section-heading .display {
  background-position: bottom center, bottom 6px center;
}

/* =============================================================
   39. SHOWCASE HERO AND THE OFFERS BAND
   Modelled on the brightest of the reference sites: photography almost
   unveiled, and the offers as full-width panels under the hero.
   ============================================================= */

/* ---------- 39a. Showcase ----------
   No page-wide scrim: a soft pool of shade sits under the copy block
   bottom-left, and the photograph stays bright everywhere else. */
.hero--showcase .hero__scrim {
  background:
    radial-gradient(120% 90% at 12% 88%, rgb(var(--scrim-rgb) / .78) 0%, rgb(var(--scrim-rgb) / .38) 42%, rgb(var(--scrim-rgb) / 0) 68%),
    linear-gradient(180deg, rgb(var(--scrim-rgb) / .38) 0%, rgb(var(--scrim-rgb) / 0) 22%);
}
.hero--showcase h1 {
  text-shadow: 0 2px 26px rgb(var(--shadow-rgb) / .55);
}
.hero--showcase .hero__intro {
  text-shadow: 0 1px 14px rgb(var(--shadow-rgb) / .6);
}
/* The address chip: a blurred sliver of the photograph behind small caps. */
.hero__chip {
  display: inline-flex; flex-direction: column; gap: .2rem;
  margin-top: 1.6rem;
  padding: .7rem 1.05rem;
  border-radius: var(--radius);
  background: rgb(var(--scrim-rgb) / .45);
  backdrop-filter: blur(10px) saturate(130%);
  border: 1px solid rgb(var(--on-photo-rgb) / .14);
}
.hero__chip span {
  font-size: .6rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--accent-on-photo);
}
.hero__chip strong {
  font-size: .85rem; font-weight: 500; color: rgb(var(--on-photo-rgb) / .92);
  letter-spacing: .02em;
}

/* ---------- 39b. Offers band ----------
   Up to four live offers as alternating panels. The first, third… sit on
   the warm accent; the second, fourth… on the deep ground — the gold/green
   rhythm of the reference, spoken in whatever the theme's own colours are. */
.offers-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.offers-band__panel {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .55rem;
  padding: clamp(2.25rem, 4.5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
}
.offers-band__panel--accent {
  background: linear-gradient(160deg, var(--saffron-soft) 0%, var(--saffron) 100%);
}
.offers-band__panel--accent .offers-band__title,
.offers-band__panel--accent .offers-band__text { color: var(--on-accent-warm); }
.offers-band__panel--accent .offers-band__terms { color: rgb(var(--on-accent-warm-rgb) / .75); }
.offers-band__panel--accent .offers-band__tag {
  background: rgb(var(--on-accent-warm-rgb) / .16);
  color: var(--on-accent-warm);
}
.offers-band__panel--accent .offers-band__cta {
  --btn-bg: rgb(var(--on-accent-warm-rgb));
  --btn-fg: var(--saffron);
  border-color: transparent;
}
.offers-band__panel--deep {
  background: linear-gradient(160deg, var(--indigo) 0%, var(--indigo-deep) 100%);
}
.offers-band__panel--deep .offers-band__title { color: var(--cream); }
.offers-band__panel--deep .offers-band__text { color: var(--muted); }
.offers-band__panel--deep .offers-band__terms { color: rgb(var(--cream-text-rgb) / .55); }
.offers-band__panel--deep .offers-band__tag {
  background: rgb(var(--brass-rgb) / .18);
  color: var(--brass-bright);
}

.offers-band__tag {
  display: inline-block;
  padding: .32rem .8rem;
  border-radius: 999px;
  font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.offers-band__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.2rem);
  font-weight: 500; line-height: 1.12;
  margin: 0;
}
.offers-band__text {
  font-size: .92rem; line-height: 1.55; max-width: 46ch; margin: 0;
}
.offers-band__terms {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  margin: 0;
}
.offers-band__cta { margin-top: .8rem; }

/* ---------- 39c. Occasion looks for the offers band ----------
   Seasonal palettes, defined as tokens and deliberately theme-independent:
   Christmas is green and gold whatever the template, because for the length
   of a promotion the occasion outranks the brand. */
:root {
  --occ-christmas-rgb:       15 61 46;     /* fir green */
  --occ-christmas-deep-rgb:  9 41 31;
  --occ-christmas-gold-rgb:  217 164 65;
  --occ-newyear-rgb:         11 16 38;     /* midnight */
  --occ-newyear-deep-rgb:    6 9 24;
  --occ-newyear-gold-rgb:    230 190 100;
  --occ-valentines-rgb:      74 14 30;     /* claret */
  --occ-valentines-deep-rgb: 52 10 22;
  --occ-valentines-rose-rgb: 232 160 180;
  --occ-easter-rgb:          234 243 226;  /* spring green, a light panel */
  --occ-easter-ink-rgb:      46 74 38;
  --occ-easter-warm-rgb:     176 124 24;
  --occ-diwali-rgb:          42 16 64;     /* deep purple */
  --occ-diwali-deep-rgb:     28 10 44;
  --occ-diwali-marigold-rgb: 240 164 49;
  --panel-light-rgb:         255 253 248;  /* writing on dark custom panels */
  --panel-dark-rgb:          26 22 18;     /* writing on light custom panels */
}

.offers-band__panel--christmas {
  background: linear-gradient(160deg, rgb(var(--occ-christmas-rgb)) 0%, rgb(var(--occ-christmas-deep-rgb)) 100%);
}
.offers-band__panel--christmas .offers-band__title { color: rgb(var(--panel-light-rgb)); }
.offers-band__panel--christmas .offers-band__text { color: rgb(var(--panel-light-rgb) / .82); }
.offers-band__panel--christmas .offers-band__terms { color: rgb(var(--panel-light-rgb) / .55); }
.offers-band__panel--christmas .offers-band__tag {
  background: rgb(var(--occ-christmas-gold-rgb) / .2); color: rgb(var(--occ-christmas-gold-rgb));
}
.offers-band__panel--christmas .offers-band__cta {
  --btn-bg: rgb(var(--occ-christmas-gold-rgb)); --btn-fg: rgb(var(--occ-christmas-deep-rgb));
  border-color: transparent;
}

.offers-band__panel--new-year {
  background: linear-gradient(160deg, rgb(var(--occ-newyear-rgb)) 0%, rgb(var(--occ-newyear-deep-rgb)) 100%);
}
.offers-band__panel--new-year .offers-band__title { color: rgb(var(--panel-light-rgb)); }
.offers-band__panel--new-year .offers-band__text { color: rgb(var(--panel-light-rgb) / .82); }
.offers-band__panel--new-year .offers-band__terms { color: rgb(var(--panel-light-rgb) / .55); }
.offers-band__panel--new-year .offers-band__tag {
  background: rgb(var(--occ-newyear-gold-rgb) / .18); color: rgb(var(--occ-newyear-gold-rgb));
}
.offers-band__panel--new-year .offers-band__cta {
  --btn-bg: rgb(var(--occ-newyear-gold-rgb)); --btn-fg: rgb(var(--occ-newyear-deep-rgb));
  border-color: transparent;
}

.offers-band__panel--valentines {
  background: linear-gradient(160deg, rgb(var(--occ-valentines-rgb)) 0%, rgb(var(--occ-valentines-deep-rgb)) 100%);
}
.offers-band__panel--valentines .offers-band__title { color: rgb(var(--panel-light-rgb)); }
.offers-band__panel--valentines .offers-band__text { color: rgb(var(--panel-light-rgb) / .82); }
.offers-band__panel--valentines .offers-band__terms { color: rgb(var(--panel-light-rgb) / .55); }
.offers-band__panel--valentines .offers-band__tag {
  background: rgb(var(--occ-valentines-rose-rgb) / .2); color: rgb(var(--occ-valentines-rose-rgb));
}
.offers-band__panel--valentines .offers-band__cta {
  --btn-bg: rgb(var(--occ-valentines-rose-rgb)); --btn-fg: rgb(var(--occ-valentines-deep-rgb));
  border-color: transparent;
}

.offers-band__panel--easter {
  background: rgb(var(--occ-easter-rgb));
}
.offers-band__panel--easter .offers-band__title { color: rgb(var(--occ-easter-ink-rgb)); }
.offers-band__panel--easter .offers-band__text { color: rgb(var(--occ-easter-ink-rgb) / .8); }
.offers-band__panel--easter .offers-band__terms { color: rgb(var(--occ-easter-ink-rgb) / .55); }
.offers-band__panel--easter .offers-band__tag {
  background: rgb(var(--occ-easter-warm-rgb) / .16); color: rgb(var(--occ-easter-warm-rgb));
}
.offers-band__panel--easter .offers-band__cta {
  --btn-bg: rgb(var(--occ-easter-ink-rgb)); --btn-fg: rgb(var(--occ-easter-rgb));
  border-color: transparent;
}

.offers-band__panel--diwali {
  background: linear-gradient(160deg, rgb(var(--occ-diwali-rgb)) 0%, rgb(var(--occ-diwali-deep-rgb)) 100%);
}
.offers-band__panel--diwali .offers-band__title { color: rgb(var(--panel-light-rgb)); }
.offers-band__panel--diwali .offers-band__text { color: rgb(var(--panel-light-rgb) / .82); }
.offers-band__panel--diwali .offers-band__terms { color: rgb(var(--panel-light-rgb) / .55); }
.offers-band__panel--diwali .offers-band__tag {
  background: rgb(var(--occ-diwali-marigold-rgb) / .2); color: rgb(var(--occ-diwali-marigold-rgb));
}
.offers-band__panel--diwali .offers-band__cta {
  --btn-bg: rgb(var(--occ-diwali-marigold-rgb)); --btn-fg: rgb(var(--occ-diwali-deep-rgb));
  border-color: transparent;
}

/* A little festivity on the dark occasion panels: two quiet sparks. */
.offers-band__panel--christmas,
.offers-band__panel--new-year,
.offers-band__panel--diwali { position: relative; overflow: hidden; }
.offers-band__panel--christmas::before,
.offers-band__panel--new-year::before,
.offers-band__panel--diwali::before {
  content: "\2726"; position: absolute; top: 1.1rem; left: 1.4rem;
  font-size: .8rem; opacity: .5;
}
.offers-band__panel--christmas::after,
.offers-band__panel--new-year::after,
.offers-band__panel--diwali::after {
  content: "\2726"; position: absolute; bottom: 1.2rem; right: 1.6rem;
  font-size: .6rem; opacity: .35;
}
.offers-band__panel--christmas::before, .offers-band__panel--christmas::after { color: rgb(var(--occ-christmas-gold-rgb)); }
.offers-band__panel--new-year::before, .offers-band__panel--new-year::after { color: rgb(var(--occ-newyear-gold-rgb)); }
.offers-band__panel--diwali::before, .offers-band__panel--diwali::after { color: rgb(var(--occ-diwali-marigold-rgb)); }

/* Custom-colour panels: the background comes from the offer itself; the
   writing is simply light or dark, whichever the owner picked. */
.offers-band__panel--custom-light .offers-band__title { color: rgb(var(--panel-light-rgb)); }
.offers-band__panel--custom-light .offers-band__text { color: rgb(var(--panel-light-rgb) / .85); }
.offers-band__panel--custom-light .offers-band__terms { color: rgb(var(--panel-light-rgb) / .6); }
.offers-band__panel--custom-light .offers-band__tag {
  background: rgb(var(--panel-light-rgb) / .18); color: rgb(var(--panel-light-rgb));
}
.offers-band__panel--custom-light .offers-band__cta {
  --btn-bg: rgb(var(--panel-light-rgb)); --btn-fg: rgb(var(--panel-dark-rgb)); border-color: transparent;
}
.offers-band__panel--custom-dark .offers-band__title { color: rgb(var(--panel-dark-rgb)); }
.offers-band__panel--custom-dark .offers-band__text { color: rgb(var(--panel-dark-rgb) / .82); }
.offers-band__panel--custom-dark .offers-band__terms { color: rgb(var(--panel-dark-rgb) / .6); }
.offers-band__panel--custom-dark .offers-band__tag {
  background: rgb(var(--panel-dark-rgb) / .14); color: rgb(var(--panel-dark-rgb));
}
.offers-band__panel--custom-dark .offers-band__cta {
  --btn-bg: rgb(var(--panel-dark-rgb)); --btn-fg: rgb(var(--panel-light-rgb)); border-color: transparent;
}

/* ---------- Editable homepage banners ----------
   Both placements share typography, responsive media and real button links. */
.rik-banner {
  --banner-ink: var(--cream);
  --banner-button-bg: var(--brass);
  --banner-button-fg: var(--on-accent);
  position: relative; isolation: isolate; min-width: 0;
  color: var(--banner-ink); overflow-wrap: anywhere;
}
.rik-banner.hero__offer {
  display: flex; flex-direction: column; align-items: center; gap: .8rem;
  --banner-ink: var(--on-photo);
}
.hero--flat .rik-banner.hero__offer { --banner-ink: var(--cream); }
.rik-banner.hero__offer--ribbon,
.rik-banner.offers-band__panel--accent {
  --banner-ink: var(--on-accent-warm);
  --banner-button-bg: rgb(var(--on-accent-warm-rgb));
  --banner-button-fg: var(--saffron);
}
.rik-banner.offers-band__panel--christmas,
.rik-banner.offers-band__panel--new-year,
.rik-banner.offers-band__panel--valentines,
.rik-banner.offers-band__panel--diwali,
.rik-banner.offers-band__panel--custom-light {
  --banner-ink: rgb(var(--panel-light-rgb));
  --banner-button-bg: rgb(var(--panel-light-rgb));
  --banner-button-fg: rgb(var(--panel-dark-rgb));
}
.rik-banner.offers-band__panel--easter,
.rik-banner.offers-band__panel--custom-dark {
  --banner-ink: rgb(var(--panel-dark-rgb));
  --banner-button-bg: rgb(var(--panel-dark-rgb));
  --banner-button-fg: rgb(var(--panel-light-rgb));
}
.rik-banner.offers-band__panel--custom-light {
  --banner-ink: var(--on-photo); --banner-button-bg: var(--on-photo); --banner-button-fg: rgb(var(--shadow-rgb));
}
.rik-banner.offers-band__panel--custom-dark {
  --banner-ink: rgb(var(--shadow-rgb)); --banner-button-bg: rgb(var(--shadow-rgb)); --banner-button-fg: var(--on-photo);
}
.rik-banner.offers-band__panel--custom-light .rik-banner__tag,
.rik-banner.offers-band__panel--custom-dark .rik-banner__tag { color: var(--banner-ink); background: transparent; border: 1px solid currentColor; }
.rik-banner .rik-banner__body,
.rik-banner .rik-banner__tag,
.rik-banner .rik-banner__actions { position: relative; z-index: 1; min-width: 0; max-width: 100%; }
.rik-banner .rik-banner__body { display: flex; flex-direction: column; gap: .65rem; align-items: inherit; }
.rik-banner .rik-banner__title {
  margin: 0; color: var(--banner-ink); font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.2rem); line-height: 1.16; font-weight: 500;
}
.rik-banner.hero__offer .rik-banner__title { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.85rem); }
.rik-banner .rik-banner__text,
.rik-banner .rik-banner__terms { color: var(--banner-ink); }
.rik-banner .rik-banner__text { width: 100%; max-width: 52ch; }
.rik-banner .rik-banner__text > * { margin: 0; }
.rik-banner .rik-banner__text > * + * { margin-top: .65em; }
.rik-banner .rik-banner__text ul, .rik-banner .rik-banner__text ol { padding-inline-start: 1.4em; text-align: start; }
.rik-banner .rik-banner__text ul { list-style: disc; }
.rik-banner .rik-banner__text ol { list-style: decimal; }
.rik-banner .rik-banner__text a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.rik-banner .rik-banner__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; padding-top: .35rem; }
.rik-banner .rik-banner__button {
  --btn-bg: var(--banner-button-bg); --btn-fg: var(--banner-button-fg);
  min-height: 44px; min-width: 44px; max-width: 100%; white-space: normal;
  text-align: center; line-height: 1.45; margin: 0; border-color: transparent;
}
.rik-banner .rik-banner__button--secondary {
  --btn-bg: transparent; --btn-fg: var(--banner-ink); border-color: currentColor;
}
.rik-banner a:focus-visible { outline: 2px solid var(--banner-ink); outline-offset: 4px; }
.rik-banner[data-banner-align="left"] { align-items: flex-start; text-align: left; }
.rik-banner[data-banner-align="center"] { align-items: center; text-align: center; }
.rik-banner[data-banner-align="right"] { align-items: flex-end; text-align: right; }
.rik-banner[data-banner-align="left"] .rik-banner__actions { justify-content: flex-start; }
.rik-banner[data-banner-align="right"] .rik-banner__actions { justify-content: flex-end; }
.rik-banner[data-banner-spacing="compact"] { padding: 1.25rem; }
.rik-banner[data-banner-spacing="spacious"] { padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3.5rem); }
.rik-banner .rik-banner__media {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  overflow: hidden; pointer-events: none;
}
.rik-banner__media picture, .rik-banner__media img { display: block; width: 100%; height: 100%; }
.rik-banner__media img { object-fit: cover; object-position: var(--banner-focus, center); }
.rik-banner__media::after { content: ""; position: absolute; inset: 0; background: rgb(var(--scrim-rgb) / var(--banner-shade, .7)); }
.rik-banner.rik-banner--photo {
  --banner-ink: var(--on-photo);
  --banner-button-bg: var(--on-photo);
  --banner-button-fg: rgb(var(--scrim-rgb));
}
.hero--flat .rik-banner.rik-banner--photo { --banner-ink: var(--on-photo); }
.rik-banner.rik-banner--photo .rik-banner__tag { color: var(--on-photo); background: rgb(var(--scrim-rgb) / .7); border-color: rgb(var(--on-photo-rgb) / .5); }
.rik-banner.rik-banner--photo .rik-banner__tag::before { background: var(--on-photo); }
/* Banner collections read as individual editorial cards, not a joined strip.
   The shell and gutters also keep a lone card away from the edge of the page. */
.offers-band[data-banner-columns] {
  width: min(100%, 1280px); margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2.5rem) var(--gutter);
  gap: var(--banner-grid-gap); align-items: stretch;
}
.offers-band[data-banner-columns] > .rik-banner {
  min-height: 18rem; gap: 1rem; justify-content: center;
  border-radius: var(--radius);
  box-shadow: 0 12px 32px -24px rgb(var(--shadow-rgb) / .35);
}
.offers-band[data-banner-columns] > .rik-banner[data-banner-spacing="comfortable"] {
  padding: clamp(1.75rem, 3vw, 2.75rem) clamp(1.5rem, 2.5vw, 2.5rem);
}
.offers-band[data-banner-columns] > .rik-banner[data-banner-spacing="compact"] { min-height: 13rem; }
.offers-band[data-banner-columns] .rik-banner__title { text-wrap: balance; }
.offers-band[data-banner-columns] .rik-banner__actions { margin-top: auto; padding-top: 1rem; }
.offers-band[data-banner-columns="auto"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.offers-band[data-banner-columns="1"] { grid-template-columns: 1fr; }
.offers-band[data-banner-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.offers-band[data-banner-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.offers-band[data-banner-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* A final unpaired card retains the column width but sits on the centreline. */
@media (min-width: 701px) {
  .offers-band[data-banner-columns="auto"] > .rik-banner:last-child:nth-child(odd):not(:only-child),
  .offers-band[data-banner-columns="2"] > .rik-banner:last-child:nth-child(odd):not(:only-child) {
    grid-column: 1 / -1; width: calc((100% - var(--banner-grid-gap)) / 2); justify-self: center;
  }
}
/* With one banner there is no empty column: make a centred feature card.
   An explicit one-column choice still uses the whole content width. */
.offers-band[data-banner-columns]:not([data-banner-columns="1"]) > .rik-banner:only-child {
  grid-column: 1 / -1; width: min(100%, 48rem); justify-self: center;
}
@media (max-width: 1000px) {
  .offers-band[data-banner-columns="3"], .offers-band[data-banner-columns="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .offers-band[data-banner-columns="3"] > .rik-banner:last-child:nth-child(odd):not(:only-child),
  .offers-band[data-banner-columns="4"] > .rik-banner:last-child:nth-child(odd):not(:only-child) {
    grid-column: 1 / -1; width: calc((100% - var(--banner-grid-gap)) / 2); justify-self: center;
  }
}
@media (max-width: 700px) {
  .offers-band[data-banner-columns] { grid-template-columns: 1fr; }
  .offers-band[data-banner-columns] > .rik-banner:nth-child(n) {
    grid-column: auto; width: 100%; justify-self: stretch; min-height: 0;
  }
  .rik-banner__media img { object-position: var(--banner-mobile-focus, center); }
  .rik-banner .rik-banner__actions { width: 100%; }
  .rik-banner .rik-banner__button { flex: 1 1 12rem; }
}

/* On a phone the showcase copy spans the whole width, so the desktop's
   corner pool of shade leaves the right-hand words on bright plate. The
   veil evens out below tablet width. */
@media (max-width: 700px) {
  .hero--showcase .hero__scrim {
    background: linear-gradient(180deg,
      rgb(var(--scrim-rgb) / .45) 0%,
      rgb(var(--scrim-rgb) / .62) 45%,
      rgb(var(--scrim-rgb) / .8) 100%);
  }
}

/* ---------- 41. Reviews section + gated map ---------- */
.reviews-grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.review {
  margin: 0;
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  background: var(--ink-soft);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  display: flex; flex-direction: column; gap: .7rem;
}
.review__stars {
  color: var(--brass-bright);
  font-size: .85rem;
  letter-spacing: .2em;
}
.review blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem);
  line-height: 1.5;
  color: var(--cream);
}
.review figcaption {
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--muted);
}
[data-scheme="light"] .review { background: var(--slate); }
.reviews-cta { text-align: center; margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* The map waits for a click; until then this stands in its frame. */
.map-frame--consent {
  display: grid; place-items: center;
  background: var(--ink-soft);
}
.map-frame__gate {
  text-align: center;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: grid; justify-items: center; gap: .8rem;
}
.map-frame__address {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--cream);
}
.map-frame__note {
  margin: 0;
  font-size: .75rem;
  color: var(--muted);
}
.map-frame__note a { color: var(--brass-bright); }

/* Shared homepage FAQ: native disclosure controls, no visitor JavaScript. */
.home-faq__layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); }
.home-faq__heading .display { margin: 0; font-size: clamp(2rem, 3.8vw, 3.5rem); overflow-wrap: anywhere; }
.home-faq__intro { color: var(--muted); line-height: 1.7; white-space: pre-line; }
.home-faq__items { min-width: 0; border-top: 1px solid var(--line-light); }
.home-faq__item { border-bottom: 1px solid var(--line-light); }
.home-faq__item summary { min-height: 52px; padding: 1.1rem .3rem; cursor: pointer; font-weight: 600; line-height: 1.5; color: var(--cream); overflow-wrap: anywhere; }
.home-faq__item summary::marker { color: var(--brass-bright); }
.home-faq__item summary:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: 3px; }
.home-faq__answer { color: var(--muted); padding: 0 .3rem 1.4rem; line-height: 1.8; white-space: pre-line; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .home-faq__layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}