/* =============================================================================
   MASTER: food-rustico-static — concept preview by PXLNorth
   Parameterized from the operator-approved rusticokitchen.ca build (June 2026
   full-custom, runs/rusticokitchen.ca/redesign). Structure, spacing and type
   scale are the approved design; the colour and font slots below are filled per
   prospect by the tailor pass.

   COLOUR SLOTS — a dark ground, one hot accent.
   ---------------------------------------------------------------------------
   Every slot reads the fill-static palette (paletteMode `dark`, the Rustico-mood
   scale this build is named after). theme.json SHOULD pin the full `dark` object
   (see template.json and oracle/theme.rusticokitchen.ca.json); unpinned, the
   surfaces re-derive from the prospect's own brand hue, which is what makes the
   page re-hue rather than repaint.
     accent slots  : ONE hot colour from the prospect's real site scheme. It
                     carries the CTAs, eyebrows, rules and hover states. Never a
                     second accent, and never a logo colour used as a canvas.
     bg slots      : the dark ground and its two lifts (band, card).
     --color-surface: the ELEVATED surface (inputs, tab strip, row hover, rating
                     badges, footer social buttons, .btn-dark). It is a
                     master-specific slot, not a deriveDarkPalette key: pinned
                     via theme.json `dark.surface`, and falling back to the card
                     ground when a theme does not pin it.
     --hero-photo  : the hero photograph, set as an inline custom property on
                     .hero-bg in the MARKUP (imagerySlots.hero -> hero.photo.src).
                     `none` here is the honest fallback: no photograph, gradient
                     only, never a broken url().

   INK, BORDERS AND THE TWO STATUS HUES ARE NOT SLOTS, on purpose. The cream/text
   scale is this design's ink on a dark ground, not a prospect fact, so it is
   literal. NAMED LIMIT: --color-border / --color-border-hover are a 10% / 25%
   TERRACOTTA tint frozen at the approved value, so they do not follow a re-hued
   accent. PORT: color-mix(in srgb, var(--color-accent) 10%, transparent), which
   moves the approved page by <= 4/255 in one channel at 10% alpha — small, but a
   change to an approved render, so it waits for an operator look rather than
   riding along with masterization.

   TYPE — Cormorant Garamond display + DM Sans text, content-driven via
   template.json `fonts`. Every weight this file paints must be REQUESTED in
   fonts.googleHref in the same edit or blueprint-gate's faux-bold check fails.
   Never Fraunces (operator taste rule).
   ========================================================================== */

/* --- Reset & Base --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* The [hidden] attribute must beat any component's own display rule. In the UA
   stylesheet it is only display:none at UA specificity, so a container styled
   display:flex/grid stays ON SCREEN underneath its own confirmation panel.
   See templates/blueprints/_toolkit/snippets/honest-submit.md. */
[hidden] { display: none !important; }

:root {
  /* Dark ground + one hot accent, filled from the prospect's palette */
  --color-bg: #FBF7EE;
  --color-bg-warm: #F3ECDD;
  --color-bg-card: #FFFFFF;
  --color-surface: #F7F2E7;
  --color-accent: #33702A;
  --color-accent-light: #3E8733;
  --color-accent-dim: #285A21;
  /* The ink that goes ON an accent fill, chosen from the accent's own luminance by the fill
     (palette.onAccent). The June accent is a mid-dark terracotta and white sits on it happily,
     which is why every accent surface here hard-coded #fff; a prospect whose mark is light —
     aupotaufeu.ca's green, 2026-09-13 — then printed white on green at 1.9:1 and the gate failed
     the build on the active menu tab and every add button. */
  --color-on-accent: #FFFFFF;
  --color-cream: #f0ebe1;
  --color-cream-dim: #b8b0a2;
  --color-text: #dbd5c9;
  --color-text-dim: #8a857b;
  --color-olive: #6b7c4e;
  --color-olive-light: #8a9e66;
  --color-red: #a83232;
  --color-red-light: #c44040;
  --color-green: #4a7c3f;
  --color-overlay: rgba(43, 43, 43, 0.6);
  --color-border: rgba(192, 92, 60, 0.1);
  --color-border-hover: rgba(192, 92, 60, 0.25);

  /* Typography, a display face and a text face, per prospect (template.json fonts) */
  --font-display: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;

  /* Layout */
  --max-width: 1200px;
  --radius: 4px;
  --radius-lg: 8px;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--color-accent-light); }
button { cursor: pointer; font-family: var(--font-body); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* --- Typography --- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; }
h1 { font-size: clamp(3rem, 7vw, 5.5rem); font-weight: 600; }
/* h2 keeps the 600 declared on the line above: Cormorant Garamond at 400 across display size
   is the "font is weak and cheap" / "headings THICKER" failure (TASTE_LEDGER #44/#53/#66),
   which blueprint-gate's heading-ink check reads as a number (floor 500). The face is
   unchanged; only the ink is. */
h2 { font-size: clamp(2.25rem, 4.5vw, 3.5rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.85rem); font-weight: 500; }

.section-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section-label::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--color-accent);
}

/* Centered section labels */
.menu-header .section-label,
.order-header .section-label,
.testimonials .section-label,
#promotions .section-label,
#contact .section-label,
[style*="text-align:center"] .section-label,
[style*="text-align: center"] .section-label {
  justify-content: center;
}

/* Left-aligned labels */
.events-section .section-label,
.about-text .section-label {
  justify-content: flex-start;
}

.section-title {
  color: var(--color-cream);
  margin-bottom: var(--space-md);
}

.section-desc {
  color: var(--color-text-dim);
  font-size: 1.05rem;
  max-width: 600px;
  line-height: 1.7;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius);
  transition: all 0.25s ease;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.btn-primary:hover {
  background: var(--color-accent-light);
  color: var(--color-on-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(196, 92, 60, 0.25);
}

.btn-outline {
  background: rgba(12, 15, 18, 0.4);
  backdrop-filter: blur(4px);
  color: var(--color-cream);
  border: 1.5px solid var(--color-cream-dim);
}
.btn-outline:hover {
  border-color: var(--color-cream);
  background: rgba(240, 235, 225, 0.12);
  color: var(--color-cream);
  transform: translateY(-2px);
}

.btn-dark {
  background: var(--color-surface);
  color: var(--color-cream);
  border: 1px solid var(--color-border);
}
.btn-dark:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-light);
  transform: translateY(-2px);
}

/* --- Navigation --- */
/* Every in-page anchor lands BELOW the fixed nav, which is up to 114px tall at 390 with a real
   logo (TASTE_LEDGER #62; blueprint-gate anchor-scroll-margin, henryviiialehouse.com 2026-09-25). */
section[id] {
  scroll-margin-top: 7.5rem;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1.25rem 0;
  transition: all 0.3s ease;
  /* top scrim so the links/logo separate from the busy hero photo */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.22) 60%, transparent);
}

.nav.scrolled {
  background: rgba(12, 15, 18, 0.96);
  backdrop-filter: blur(16px);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.nav-logo img {
  height: 60px;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.55));
  width: auto;
  transition: height 0.3s;
}
/* The mark is inverted only when the fill says so (assets.logoInvert: a dark, unsaturated mark —
   the June wordmark). A blanket invert turned royalseafood.ca's red seal cyan (2026-09-12); a
   coloured mark is painted as itself or as its knockout. See fillStatic decideLogoOnDark. */
.nav-logo img.logo-invert { filter: invert(1); }
/* SIZED BY THE MARK'S OWN PROPORTIONS (assets.logoClass, fillStatic logoSizeClass). 60px suits the
   long wordmark this master was built around; a badge spends its height on a drawing and a seal
   on a caption, so both get more. Measured against the two headless proofs, 2026-09-12. */
.nav-logo img.logo-compact { height: 74px; }
.nav-logo img.logo-square { height: 84px; }
.nav.scrolled .nav-logo img.logo-compact { height: 52px; }
.nav.scrolled .nav-logo img.logo-square { height: 56px; }
.nav.scrolled .nav-logo img { height: 44px; }
/* TYPE WORDMARK FALLBACK (FOOD round 2 fix 2, the logo trust gate). When no verified mark exists
   (an unverified harvest the eyes-on check has not confirmed, or one it rejected: Henry VIII's
   header image was a beer sponsor's) the fill places no image and the name is set in the display
   face instead. Never a guessed mark. */
.nav-logo { text-decoration: none; }
/* One line, at a weight the fonts link actually requests (600): blueprint-gate nav-wrap and
   faux-bold both caught the first version of this rule on henryviiialehouse.com. */
.nav-wordmark {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--color-text);
  white-space: nowrap;
}
@media (max-width: 420px) { .nav-wordmark { font-size: 1rem; } }
.footer-brand .footer-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--color-text);
  margin: 0 0 var(--space-sm);
}

/* gap 1.5rem, not 2.25rem: at 1440 the authored row + the reservation CTA + the Order Now
   dropdown need 967px of the 951px the bar has, so three labels wrapped to two and three
   lines (blueprint-gate nav-wrap, TASTE_LEDGER #27/#28). Spacing is the only thing that
   moves — every item still shows, at its own size, weight and tracking. Overridden back to
   1.5rem by the <=968px drawer below, so this is a desktop-only change. */
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
}

.nav-links a {
  color: rgba(240, 235, 225, 0.98);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  padding: 0.25rem 0;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width 0.3s;
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }
.nav-links a:hover { color: var(--color-cream); }

.nav-cta {
  /* 1rem of side padding rather than 1.25rem — the second half of the nav-wrap fix above. */
  padding: 0.55rem 1rem !important;
  background: var(--color-accent);
  color: var(--color-on-accent) !important;
  border-radius: var(--radius);
  font-weight: 700;
}
.nav-cta-outline {
  background: rgba(196, 92, 60, 0.12) !important;
  border: 1.5px solid var(--color-accent) !important;
  color: #fff !important;
  backdrop-filter: blur(4px);
}
.nav-cta-outline:hover {
  background: var(--color-accent) !important;
  color: var(--color-on-accent) !important;
}
.nav-cta::after { display: none !important; }
.nav-cta:hover {
  background: var(--color-accent-light);
  color: var(--color-on-accent) !important;
}

/* Order Now dropdown (pickup or a delivery service) */
.nav-order { position: relative; }
.nav-order-toggle {
  cursor: pointer;
  border: 0;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* Match the "Reserve" nav link's text: same size + weight (a <button> otherwise
     resets these via font:inherit). */
  font-size: 0.75rem;
  font-weight: 600;
}
.nav-order-toggle .caret { font-size: 0.7em; line-height: 1; transition: transform 0.2s; }
.nav-order.open .nav-order-toggle .caret { transform: rotate(180deg); }
.nav-order-menu {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  min-width: 190px;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 0.4rem;
  background: #1c1410;
  border: 1px solid rgba(240, 235, 225, 0.12);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  z-index: 60;
}
.nav-order.open .nav-order-menu { display: flex; }
.nav-order-menu a {
  padding: 0.6rem 0.85rem !important;
  border-radius: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(240, 235, 225, 0.9);
  white-space: nowrap;
}
.nav-order-menu a::after { display: none !important; }
.nav-order-menu a:hover { background: var(--color-accent); color: var(--color-on-accent); }

/* Mobile menu toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--color-cream);
  transition: all 0.3s;
}
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* --- Hero --- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  /* The masthead is fixed over the hero; on a short viewport (the operator's 1000x625 window,
     royalseafood.ca 2026-09-12) centring within 100vh slid the badge under the logo. Reserve the
     masthead's height at the top so the centred block can never start beneath it. */
  padding-top: 6.5rem;
}

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* The photograph is a real image (see components/hero.html); the scrim is the June
   page's gradient, unchanged, painted over it. */
.hero-bg .hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  /* Heavier under the text column (0-45%) than the June page's 0.88→0.55: a bright plate (the
     seafood platter on royalseafood.ca, 2026-09-12) left the sub-copy and nav reading faint to
     the vision QA even though the pixel contrast gate passed. The right half stays open. */
  background:
    linear-gradient(120deg, rgba(12,15,18,0.92) 0%, rgba(12,15,18,0.78) 38%, rgba(12,15,18,0.5) 62%, rgba(12,15,18,0.72) 100%),
    /* A second wash bound to the TEXT COLUMN only (the left ~46%), so a bright busy frame cannot
       reach the copy while the right half of the photograph stays open. */
    linear-gradient(to right, rgba(12,15,18,0.55) 0%, rgba(12,15,18,0.4) 30%, rgba(12,15,18,0) 46%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding: 0 var(--space-md) 0 clamp(var(--space-md), 8vw, 6rem);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.hero-badge::before {
  content: '';
  width: 40px;
  height: 1px;
  background: var(--color-accent);
}

.hero h1 {
  color: var(--color-cream);
  margin-bottom: var(--space-sm);
  letter-spacing: -0.02em;
}

.hero h1 em {
  font-style: italic;
  color: var(--color-accent-light);
  font-weight: 600;
}

.hero-sub {
  font-size: 1.1rem;
  /* Full cream over a photograph, not the dim body tone: the dim tone is for copy on a flat dark
     panel, and over a bright busy frame (subsplus.ca's red fabric, royalseafood.ca's lit platter)
     the vision QA read it as hard to read at both widths even with the scrim (2026-09-12). The
     dim tone stays everywhere else on the page. */
  color: var(--color-cream);
  margin-bottom: var(--space-lg);
  max-width: 480px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: nowrap;
}
.hero-actions .btn {
  padding: 0.85rem 1.75rem;
  white-space: nowrap;
}

/* --- Info Bar --- */
.info-bar {
  background: var(--color-bg-warm);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-sm) 0;
}

/* COLLAPSE-HIDDEN-TRACKS. The bar's three facts are three independent
   conditionals, so a prospect with no address line, no phone and no hours
   summary would otherwise get an empty 2rem stripe in the lighter band colour
   with a border above and below it. A band with nothing to say paints nothing.
   Measured on a minimal fill: with all three dropped the bar rendered, and this
   is the rule that collapses it. No effect on any page that has one of them. */
.info-bar:not(:has(.info-item)) { display: none; }

.info-bar-inner {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--color-cream-dim);
  font-size: 0.85rem;
}

.info-item svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* --- Sections --- */
section {
  padding: 3.75rem 0;
  position: relative;
}

/* --- Reservations --- */
.reservations-section {
  background: var(--color-bg-warm);
  border-bottom: 1px solid var(--color-border);
}

.reservations-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}
/* Lead the reserve section with the form (top on mobile, left on desktop). */
.reservations-grid .reservation-form { order: -1; }

.reservations-info .section-label { justify-content: flex-start; }

.reservations-info .section-desc {
  margin-bottom: var(--space-lg);
  font-size: 1.1rem;
}

.res-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.res-detail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--color-bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--color-border); /* full hairline, never an accent left-stripe (TASTE_LEDGER #21) */
}
/* The glyph sits one level deeper than its row, the way .event-type > .event-type-icon > svg
   already does on this same page. Layout-neutral (the span is a shrink-proof flex box the
   same size as the glyph it holds); it exists so the three detail rows are not three SIBLING
   svgs under one container, which is blueprint-gate's icon-grid slop signature. */
.res-detail-icon {
  display: flex;
  flex-shrink: 0;
}
.res-detail svg {
  width: 24px;
  height: 24px;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.res-detail strong {
  display: block;
  color: var(--color-cream);
  font-size: 0.95rem;
  margin-bottom: 0.15rem;
}
.res-detail span {
  color: var(--color-text-dim);
  font-size: 0.9rem;
  line-height: 1.5;
}

.reservation-form {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  scroll-margin-top: 6rem;
}

.reservation-form h3 {
  color: var(--color-cream);
  margin-bottom: var(--space-md);
  text-align: center;
  font-weight: 400;
}

/* Preview-honest confirmation panel: takes the form's place in the layout. */
.form-done { display: block; }
.form-done h3 { text-align: left; }
.form-done p {
  color: var(--color-text-dim);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}
.form-done a { color: var(--color-accent-light); }
.form-done .form-submit { display: inline-flex; margin-top: var(--space-sm); text-decoration: none; }

@media (max-width: 968px) {
  .reservations-grid { grid-template-columns: 1fr; }
}

/* --- About --- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: stretch;
  margin-top: var(--space-lg);
}

.about-img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}
.about-img::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  pointer-events: none;
}
.about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-text .section-label {
  justify-content: flex-start;
}

.about-text p {
  color: var(--color-text-dim);
  margin-bottom: var(--space-sm);
  font-size: 1rem;
  line-height: 1.75;
}

.about-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.about-feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--color-cream);
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0.85rem var(--space-sm);
  background: var(--color-bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--color-border); /* full hairline, never an accent left-stripe (TASTE_LEDGER #21) */
}

/* Same one-level-deeper nesting as .res-detail-icon above, for the same reason. */
.about-feature-icon {
  display: flex;
  flex-shrink: 0;
}
.about-feature svg {
  width: 22px;
  height: 22px;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* --- Menu Preview --- */
.menu-section {
  background: var(--color-bg-warm);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.menu-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}
.menu-header .section-desc {
  margin: 0 auto;
}

.menu-tabs {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 0.25rem;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.menu-tab {
  padding: 0.55rem 1.5rem;
  background: transparent;
  color: var(--color-text-dim);
  border: none;
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: all 0.25s;
}
.menu-tab:hover {
  color: var(--color-cream);
}
.menu-tab.active {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.menu-category { display: none; }
.menu-category.active { display: grid; }
/* An odd last row spans both columns instead of leaving the right one empty (FOOD round 2 fix 1,
   henryviiialehouse.com's three cocktails read "2 + 1 and an empty cell"). One column below 968px. */
.menu-grid > .menu-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

.menu-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem var(--space-md);
  background: var(--color-bg-card);
  border-radius: var(--radius);
  border-left: 2px solid transparent;
  transition: all 0.25s;
}
.menu-item:hover {
  border-left-color: var(--color-accent);
  background: var(--color-surface);
}

.menu-item-info { min-width: 0; }

.menu-item-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-cream);
  margin-bottom: 0.2rem;
}

.menu-item-desc {
  font-size: 0.82rem;
  color: var(--color-text-dim);
  line-height: 1.5;
}

.menu-item-tags {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.menu-tag {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem;
  border-radius: 2px;
  background: rgba(107, 124, 78, 0.15);
  color: var(--color-olive-light);
}
.menu-tag.spicy {
  background: rgba(196, 92, 60, 0.12);
  color: var(--color-accent-light);
}

.menu-item-price {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-accent);
  font-weight: 700;
  white-space: nowrap;
}

.menu-cta {
  text-align: center;
  margin-top: var(--space-lg);
}
.menu-note {
  color: var(--color-text-dim);
  font-size: 0.85rem;
  margin-bottom: var(--space-sm);
}

/* --- Full Menu Page --- */
.page-hero {
  padding: calc(3.25rem + var(--space-md)) 0 var(--space-md);
  text-align: center;
  background: var(--color-bg-warm);
  border-bottom: 1px solid var(--color-border);
}
.page-hero .section-label { justify-content: center; }

.full-menu-section {
  padding: var(--space-lg) 0;
}

.full-menu-category {
  margin-bottom: var(--space-xl);
}

.category-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
}

.category-header h3 {
  color: var(--color-accent);
  font-size: 1.6rem;
  font-weight: 600;
  white-space: nowrap;
}

.category-header .line {
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

/* --- Order Section --- */
.order-section {
  background: var(--color-bg);
  text-align: center;
}

.order-header { margin-bottom: var(--space-lg); }
.order-header .section-desc { margin: 0 auto; }

.order-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  max-width: var(--max-width);
  margin: 0 auto;
}
/* A FOUR-COLUMN GRID HOLDING ONE CARD IS THREE COLUMNS OF NOTHING (2026-09-13, aupotaufeu.ca: a
   pizzeria that takes orders by telephone only). The band keeps its shape for a business with a
   real spread of channels and fits itself to one, two or three when that is all there honestly is. */
.order-options:has(> :nth-child(1):last-child) { grid-template-columns: minmax(280px, 420px); justify-content: center; }
.order-options:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
.order-options:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }

.order-card {
  padding: var(--space-md) var(--space-sm);
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.order-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.3);
}

.order-card-icon {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.order-card-icon .brand-logo { height: 30px; width: auto; max-width: 170px; display: block; }
.order-card-icon svg { width: 30px; height: 30px; color: var(--color-accent); }

.order-card h3 {
  color: var(--color-cream);
  font-size: 1.1rem;
  font-weight: 500;
}
.order-card p {
  color: var(--color-text-dim);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* --- Private Events --- */
.events-section {
  background: var(--color-bg-warm);
  border-top: 1px solid var(--color-border);
}

.events-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
  margin-top: var(--space-lg);
}

.events-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: var(--space-md);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.events-photos img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: var(--radius);
}

.events-info h3 {
  color: var(--color-cream);
  margin-bottom: var(--space-sm);
}
.events-info p {
  color: var(--color-text-dim);
  margin-bottom: var(--space-md);
  font-size: 1rem;
  line-height: 1.75;
}

.event-types {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.event-type {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: 0.85rem var(--space-sm);
  background: var(--color-bg-card);
  border-radius: var(--radius);
  border: 1px solid var(--color-border); /* full hairline, never an accent left-stripe (TASTE_LEDGER #21) */
  transition: border-color 0.25s;
}
.event-type:hover {
  border-color: var(--color-accent);
}

.event-type-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: rgba(196, 92, 60, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.event-type-icon svg { width: 18px; height: 18px; color: var(--color-accent); }

.event-type h4 {
  color: var(--color-cream);
  font-size: 0.95rem;
  font-family: var(--font-body);
  font-weight: 600;
  margin-bottom: 0.1rem;
}
.event-type p {
  color: var(--color-text-dim);
  font-size: 0.82rem;
  margin: 0;
}

/* --- Booking Form --- */
.booking-form {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
}

.booking-form h3 {
  color: var(--color-cream);
  margin-bottom: var(--space-md);
  text-align: center;
  font-weight: 400;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.form-group {
  margin-bottom: var(--space-sm);
}

.form-group label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-cream-dim);
  margin-bottom: 0.35rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--color-surface);
  border: 1px solid rgba(196, 92, 60, 0.08);
  border-radius: var(--radius);
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: border-color 0.25s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.form-group textarea { resize: vertical; min-height: 90px; }

.form-group select { cursor: pointer; }
.form-group select option { background: var(--color-bg-card); }

.form-submit {
  width: 100%;
  margin-top: var(--space-xs);
}

/* --- Promotions --- */
.promos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.promo-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: all 0.25s;
}
.promo-card:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-hover);
}

.promo-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* Gallery (see components/gallery.html): the promotions cards without text, taller photographs. */
.gallery-section { padding: var(--space-xl) 0; background: var(--color-bg-warm); }
.gallery-card { margin: 0; }
.gallery-img { height: 240px; display: block; }
/* A GRID FITS WHAT IT HOLDS. Four photographs (the density floor, and the common own-pool count)
   sit in ONE row rather than 3 + a stranded fourth (royalseafood.ca, 2026-09-12); two sit as a
   centred pair rather than two thirds of a row with a hole in it (kwredginger.com, 2026-09-13 —
   a restaurant whose triage passed exactly two of its own photographs). Five and six keep three
   columns. The PROMOTIONS grid takes the same care but reads better 2x2, because its cards carry
   copy and four across at this container width sets them 16 words wide. */
/* EVERY COUNT FILLS ITS ROWS (FOOD round 2 fix 1, henryviiialehouse.com: five photographs in three
   columns left a hole beside the last two). The gallery is a 12-track grid: three across by
   default, and a short last row WIDENS to fill instead of stranding - one leftover tile is centred
   at a third, two leftovers take half each. Four, seven and eight go four across (7 = 4 + 3). */
.gallery-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.gallery-grid > * { grid-column: span 4; }
.gallery-grid > :last-child:nth-child(3n+1) { grid-column: 5 / span 4; }
.gallery-grid > :nth-last-child(2):nth-child(3n+1),
.gallery-grid > :last-child:nth-child(3n+2) { grid-column: span 6; }
.gallery-grid:has(> :nth-child(4):last-child) > *,
.gallery-grid:has(> :nth-child(8):last-child) > *,
.gallery-grid:has(> :nth-child(7):last-child) > :nth-child(-n+4) { grid-column: span 3; }
.gallery-grid:has(> :nth-child(7):last-child) > :nth-child(n+5) { grid-column: span 4; }
.gallery-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: center; }
.gallery-grid:has(> :nth-child(1):last-child) { grid-template-columns: minmax(0, 560px); justify-content: center; }
.gallery-grid:has(> :nth-child(2):last-child) > *,
.gallery-grid:has(> :nth-child(1):last-child) > * { grid-column: auto; }
.promos-grid:not(.gallery-grid):has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.promos-grid:not(.gallery-grid):has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: center; }
.gallery-caption { padding: 0.6rem 0.9rem; font-size: 0.8rem; color: var(--color-text-dim); }

.promo-day {
  padding: 0.5rem var(--space-md);
  background: rgba(196, 92, 60, 0.06);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.promo-day .promo-discount {
  background: var(--color-accent);
  color: var(--color-on-accent);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
}

.promo-body {
  padding: var(--space-sm) var(--space-md) var(--space-md);
}
.promo-body h3 {
  color: var(--color-cream);
  font-size: 1.15rem;
  font-weight: 600;
  font-family: var(--font-body);
  margin-bottom: 0.35rem;
}
.promo-body p {
  color: var(--color-text-dim);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* --- Testimonials --- */
.testimonials {
  text-align: center;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
/* Same rule as the galleries and the order band: the number of real reviews decides the shape.
   Four quotes in a three-column grid strand the fourth (kwredginger.com, 2026-09-13); two sit as
   a centred pair. Three, five and six keep three columns. */
.testimonial-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.testimonial-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: center; }
.testimonial-grid:has(> :nth-child(1):last-child) { grid-template-columns: minmax(0, 560px); justify-content: center; }

.rating-badges {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  flex-wrap: wrap;
}
.rating-badge {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.8rem;
  color: var(--color-cream-dim);
}
.rating-score {
  font-weight: 700;
  color: var(--color-cream);
  font-size: 0.95rem;
}
.rating-stars {
  color: var(--color-accent);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.testimonial-card {
  padding: var(--space-md);
  padding-top: calc(var(--space-md) + 3px);
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-accent-dim);
  text-align: left;
  position: relative;
}

.testimonial-card::before {
  content: '\201C';
  font-family: var(--font-display);
  font-size: 4rem;
  color: rgba(196, 92, 60, 0.15);
  position: absolute;
  top: 0.5rem;
  left: 1rem;
  line-height: 1;
}

.testimonial-stars {
  color: var(--color-accent);
  font-size: 0.85rem;
  margin-bottom: var(--space-xs);
  letter-spacing: 0.1em;
}

.testimonial-card blockquote {
  color: var(--color-cream-dim);
  font-size: 0.9rem;
  line-height: 1.7;
  font-style: normal;
  font-family: var(--font-body);
  margin-bottom: var(--space-sm);
}

.testimonial-author {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-cream);
}

.testimonial-source {
  font-size: 0.72rem;
  color: var(--color-text-dim);
}

/* --- Footer --- */
.footer {
  background: var(--color-bg-warm);
  border-top: 1px solid var(--color-border);
  padding: var(--space-xl) 0 var(--space-md);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.footer-brand img {
  height: 45px;
  margin-bottom: var(--space-sm);
}
.footer-brand img.logo-invert { filter: invert(1); }
.footer-brand img.logo-compact { height: 56px; }
.footer-brand img.logo-square { height: 64px; }
/* A MARK DRAWN BY COLOUR KEEPS ITS COLOURS (FOOD round 3 fix 1, fillStatic footMark): its white
   knockout would be a blob, so the real mark stands on a light plate. The padding is inside the
   box, so the mark's own optical height is unchanged. */
.footer-brand img.logo-plate,
.nav-logo img.logo-plate {
  box-sizing: content-box;
  background: #f7f3ec;
  padding: 6px 10px;
  border-radius: 10px;
  filter: none;
}
.footer-brand p {
  color: var(--color-text-dim);
  font-size: 0.85rem;
  max-width: 280px;
  line-height: 1.65;
}

.footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: var(--space-sm);
}

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
}
.footer-social a:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.footer-social a svg {
  width: 16px;
  height: 16px;
  color: var(--color-cream);
}
.footer-social a:hover svg { color: #fff; }

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  /* cream-dim, not the accent: the accent is also the primary button's background under
     white text, so it must stay dark, and on the near-black footer it read 2.0:1 on the
     first proof and 2.8:1 as accent-light (text-contrast, floor 4.5). The June page's own
     accent computes ~3.9:1 here, so the design choice itself failed the gate. cream-dim is
     the master's own muted text colour (~9:1 on --color-bg) and keeps the small-caps label. */
  color: var(--color-cream-dim);
  margin-bottom: var(--space-sm);
}

.footer-credits { font-size: 0.75rem; color: var(--color-text-dim); margin: var(--space-md) 0 0; }
.footer-credits a { color: var(--color-text-dim); text-decoration: underline; }

.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 0.45rem; font-size: 0.85rem; color: var(--color-text-dim); }
.footer-col a {
  color: var(--color-text-dim);
  font-size: 0.85rem;
}
.footer-col a:hover { color: var(--color-cream); }
.footer-contact li { display: flex; align-items: flex-start; gap: 0.5rem; }
.footer-contact li svg { width: 15px; height: 15px; flex: none; margin-top: 0.18rem; color: var(--color-accent); }

.footer-hours {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.footer-hours-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--color-text-dim);
}
.footer-hours-row span:first-child { color: var(--color-cream); font-weight: 500; }

.footer-bottom {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--color-text-dim);
}

/* --- Cart Drawer --- */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: transparent; /* no page dim, drawer slides in over the page */
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}
.cart-overlay.open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 380px;
  max-width: 90vw;
  height: 100vh;
  background: var(--color-bg-card);
  border-left: 1px solid var(--color-border);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transition: right 0.3s ease;
}
.cart-drawer.open { right: 0; }

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.cart-header h3 {
  color: var(--color-cream);
  font-size: 1.2rem;
  font-weight: 400;
}

.cart-close {
  background: none;
  border: none;
  color: var(--color-text-dim);
  font-size: 1.4rem;
  padding: 0.25rem;
}
.cart-close:hover { color: var(--color-cream); }

.cart-items {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-sm) var(--space-md);
}

.cart-empty {
  text-align: center;
  color: var(--color-text-dim);
  padding: var(--space-lg) 0;
  font-size: 0.9rem;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.cart-item-info h4 {
  color: var(--color-cream);
  font-size: 0.9rem;
  font-family: var(--font-body);
  font-weight: 500;
}

.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.qty-btn {
  width: 26px;
  height: 26px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-cream);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qty-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }

.cart-item-price {
  color: var(--color-accent);
  font-weight: 600;
  font-size: 0.95rem;
}

.cart-footer {
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}
.cart-total span:first-child {
  color: var(--color-cream);
  font-weight: 600;
  font-size: 0.9rem;
}
.cart-total span:last-child {
  color: var(--color-accent);
  font-family: var(--font-body);          /* sans = decimals like .50 read cleanly */
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.cart-checkout { width: 100%; justify-content: center; }

/* Nav cart badge */
.nav-cart {
  position: relative;
  background: none;
  border: none;
  color: var(--color-cream);
  padding: 0.25rem;
}
.nav-cart svg { width: 20px; height: 20px; }
.nav-cart:hover { color: var(--color-accent); }

.cart-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  width: 16px;
  height: 16px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-badge:empty { display: none; }

/* Add to cart button on menu items — obvious "+ Add" pill */
.menu-item-add {
  height: 34px;
  padding: 0 0.9rem;
  gap: 0.3rem;
  border-radius: 999px;
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.92rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  align-self: center;
  transition: all 0.2s;
}
.menu-item-add::after { content: 'Add'; }
.menu-item-add:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* Order hint pill in the menu header */
.order-hint {
  margin-top: 0.85rem;
  display: inline-block;
  background: rgba(196, 92, 60, 0.12);
  border: 1px solid var(--color-border-hover);
  color: var(--color-cream);
  font-size: 0.92rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
}
.order-hint strong { color: var(--color-accent); }

/* Toast notification */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--color-accent);
  color: var(--color-on-accent);
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.85rem;
  z-index: 300;
  opacity: 0;
  transition: all 0.3s ease;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* --- Map --- */
#contact .section-label { justify-content: center; }

.map-container {
  width: 100%;
  height: 320px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Success Modal --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}
.modal-overlay.open { opacity: 1; visibility: visible; }

.modal {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  max-width: 420px;
  width: 90%;
  text-align: center;
  border: 1px solid var(--color-border);
  transform: scale(0.95);
  transition: transform 0.3s;
}
.modal-overlay.open .modal { transform: scale(1); }

.modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(74, 124, 63, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-sm);
}
.modal-icon svg { width: 28px; height: 28px; color: var(--color-green); }

.modal h3 {
  color: var(--color-cream);
  margin-bottom: var(--space-xs);
  font-weight: 400;
}
.modal p {
  color: var(--color-text-dim);
  margin-bottom: var(--space-md);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* --- Responsive --- */
@media (max-width: 968px) {
  .nav-toggle { display: flex; }

  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: var(--color-bg-card);
    flex-direction: column;
    padding: 5rem var(--space-lg) var(--space-lg);
    gap: 1.5rem;
    transition: right 0.3s ease;
    border-left: 1px solid var(--color-border);
  }
  .nav-links.open { right: 0; }

  .hero-scrim {
    background: linear-gradient(180deg, rgba(12,15,18,0.85) 0%, rgba(12,15,18,0.6) 40%, rgba(12,15,18,0.85) 100%);
  }

  .hero-content {
    padding: 0 var(--space-md);
    text-align: center;
  }
  .hero-badge { justify-content: center; }
  .hero-actions { justify-content: center; flex-wrap: wrap; }
  .hero-sub { margin-left: auto; margin-right: auto; }

  .about-grid,
  .events-grid { grid-template-columns: 1fr; }

  .menu-grid { grid-template-columns: 1fr; }

  .order-options { grid-template-columns: repeat(2, 1fr); }

  .promos-grid,
  .testimonial-grid { grid-template-columns: 1fr; }
  /* The count rules above out-rank a bare class, so at phone width they kept two 460px tracks
     (two review cards squeezed to 170px each at 390) and the gallery's 12 tracks. `:not(#_)`
     lifts these past every :has() rule. Reviews stack; photographs go two across, and an odd
     last photograph spans both columns so no column is ever empty (FOOD round 2 fix 1). */
  .testimonial-grid:not(#_), .promos-grid:not(.gallery-grid):not(#_) { grid-template-columns: 1fr; justify-content: stretch; }
  .gallery-grid:not(#_) { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
  .gallery-grid:not(#_) > * { grid-column: auto; }
  .gallery-grid:not(#_) > :last-child:nth-child(odd) { grid-column: 1 / -1; }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
  }
}

@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .info-bar-inner { flex-direction: column; align-items: center; gap: var(--space-xs); }
  .hero-actions { flex-direction: column; align-items: center; }
  .order-options { grid-template-columns: 1fr; }
}

/* --- Back to Top --- */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(196, 92, 60, 0.3);
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--color-accent-light);
  transform: translateY(-2px);
}
.back-to-top svg { width: 20px; height: 20px; }

/* --- Animations --- */
/* Progressive enhancement: visible by default; hidden initial state only
   once JS tags <html class="js-anim"> (JS also carries a failsafe reveal),
   so screenshots/bots/no-JS never see blank sections. */
html.js-anim .fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
html.js-anim .fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Non-impersonation disclosure (required on every preview) + conversion CTA */
.preview-badge {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 2000;
  display: inline-flex;
  align-items: stretch;
  background: rgba(12, 16, 24, 0.85);
  font-size: 0.72rem;
  line-height: 1;
  border-radius: 999px;
  overflow: hidden;
  opacity: 0.92;
}
.preview-badge:hover, .preview-badge:focus-within { opacity: 1; }
.preview-badge a {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  text-decoration: none;
  white-space: nowrap;
}
.preview-badge a:focus-visible {
  outline: 2px solid var(--color-accent-light);
  outline-offset: -2px;
}
.preview-badge-info, .preview-badge-info:hover { color: #fff; }
.preview-badge-cta {
  background: var(--color-accent);
  color: var(--color-cream);
  font-weight: 600;
}
.preview-badge-cta:hover { background: var(--color-accent-light); color: var(--color-cream); }

/* =============================================================================
   FOOD round 4 (2026-09-25): STRUCTURE. Round 3's strict reader called this page
   "one dark band repeated". Each band declares the constructions it can take
   (data-band); fill-static writes the one it took (data-band-as) and a tone
   that alternates down the page (data-tone), so no two adjacent bands are built
   alike (gate band-rhythm). The story is the page's one PAPER band; the gallery
   a mosaic led by their best frame (gate photo-lead); the map sits beside the
   facts a visitor came for.
   ============================================================================= */
[data-band][data-tone="a"]:not(.hero) { background: var(--color-bg); }
[data-band][data-tone="b"]:not(.hero) { background: var(--color-bg-warm); }
.menu-section[data-band], .testimonials[data-band] { border-top: 0; border-bottom: 0; }

/* THE STORY ON PAPER: dark ink on their cream. The accent keeps its non-text jobs (the label's
   rule, the icons); every word on the band is ink, so no accent has to clear contrast on cream. */
.story-band:not(#_) { background: var(--color-cream); }
.story-band .section-label { color: #4a3d31; }
.story-band .section-title { color: #1d1915; }
.story-band .about-text p { color: #3a322b; }
.story-band .story-menu-line { color: #3a322b; }
.story-band .about-feature { background: #fffdf8; color: #1d1915; border-color: rgba(29, 25, 21, 0.14); }
.story-band .about-img::after { border-color: rgba(29, 25, 21, 0.12); }
.story-band[data-band-as="bleed"] { padding: 0; }
.story-band[data-band-as="bleed"] > .container { max-width: none; padding: 0; }
.story-band[data-band-as="bleed"] .about-grid { margin-top: 0; gap: 0; }
.story-band[data-band-as="bleed"] .about-img { border-radius: 0; min-height: 520px; }
.story-band[data-band-as="bleed"] .about-img::after { display: none; }
.story-band[data-band-as="bleed"] .about-text {
  align-self: center;
  padding: var(--space-xl) max(1.5rem, calc((100vw - var(--max-width)) / 2 + 1.5rem)) var(--space-xl) var(--space-xl);
}
@media (max-width: 968px) {
  .story-band[data-band-as="bleed"] .about-img { min-height: 0; max-height: 440px; }
  .story-band[data-band-as="bleed"] .about-text { padding: var(--space-lg) var(--space-md); }
}

/* THE STRIP: the photo hierarchy's lead is the first tile, set large; the rest support it. Phone:
   the lead full width, supports in pairs, a lone support spans its row. Wide: six tracks, the lead
   four tracks by two rows, every count fills its rows. */
.gallery-head { text-align: center; margin-bottom: var(--space-lg); }
.gallery-head .section-label { justify-content: center; }
.strip {
  --strip-gap: 0.75rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--strip-gap);
  width: min(100% - 3rem, var(--max-width) - 3rem);
  margin-inline: auto;
}
.strip > .tile { margin: 0; min-width: 0; overflow: hidden; border-radius: var(--radius); }
.strip > .tile img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.strip > .tile:first-child { grid-column: 1 / -1; }
.strip > .tile:first-child img { aspect-ratio: 4 / 3; }
.strip > .tile:nth-child(even):last-child { grid-column: 1 / -1; }
.strip > .tile:nth-child(even):last-child img { aspect-ratio: 16 / 9; }
.strip > .tile:only-child img { aspect-ratio: 16 / 10; }
@media (min-width: 900px) {
  .strip { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 14vw, 230px); }
  .strip > .tile, .strip > .tile:nth-child(even):last-child { grid-column: span 2; }
  .strip > .tile img, .strip > .tile:first-child img, .strip > .tile:nth-child(even):last-child img { aspect-ratio: auto; }
  .strip > .tile:first-child { grid-column: span 4; grid-row: span 2; }
  .strip > .tile:nth-child(2):last-child { grid-row: span 2; }
  /* four: the lead three rows tall, the three supports stacked beside it (a one-row strip under
     the lead cut a people photograph at the eyes on henryviiialehouse.com) */
  .strip:has(> .tile:nth-child(4):last-child) > .tile:first-child { grid-row: span 3; }
  .strip > .tile:nth-child(4):nth-last-child(2), .strip > .tile:nth-child(5):last-child { grid-column: span 3; }
  .strip > .tile:only-child { grid-column: 1 / -1; grid-row: span 2; }
}
[data-band-as="bleed"] > .strip { width: 100%; --strip-gap: 4px; }
[data-band-as="bleed"] > .strip > .tile { border-radius: 0; }
.gallery-section[data-band-as="bleed"] { padding-bottom: 0; }

/* A TYPE BAND LEADS WITH ONE VOICE: the first guest's words as a display quotation across the band,
   the rest as cards in a row that fits their count. Their words verbatim; only the size changes. */
.testimonial-grid > .testimonial-card:first-child:not(:only-child) {
  grid-column: 1 / -1;
  background: transparent; border: 0; text-align: center;
  padding: 0 var(--space-md) var(--space-md);
}
.testimonial-grid > .testimonial-card:first-child:not(:only-child)::before { display: none; }
.testimonial-grid > .testimonial-card:first-child:not(:only-child) blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 2rem);
  line-height: 1.35;
  color: var(--color-cream);
  max-width: 40ch;
  margin: 0 auto var(--space-sm);
}
@media (min-width: 969px) {
  .testimonial-grid:not(#_) { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
  .testimonial-grid:has(> :nth-child(4):last-child):not(#_),
  .testimonial-grid:has(> :nth-child(7):last-child):not(#_) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .testimonial-grid:has(> :nth-child(2):last-child):not(#_) { grid-template-columns: minmax(0, 620px); justify-content: center; }
}

/* FIND US: the facts beside the map. */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-lg); align-items: stretch; }
#contact .contact-info .section-label { justify-content: flex-start; }
.contact-line { display: flex; gap: 1rem; margin: 0; padding: 0.85rem 0; border-bottom: 1px solid rgba(240, 235, 225, 0.12); color: var(--color-text); }
.contact-key { flex: 0 0 5.5rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-cream-dim); padding-top: 0.2rem; }
.contact-line a { color: var(--color-cream); }
.contact-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--space-md); }
.contact-band .map-container { height: 100%; min-height: 360px; }
@media (max-width: 968px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-band .map-container { min-height: 300px; }
  .contact-actions .btn { padding: 0.9rem 1.4rem; }
}

/* Shared by both modes: the quiet text link that sits beside a filled action, and the row that
   holds the pair on ONE line (operator taste, 2026-10-06). Paints nothing on a page that has none. */
.card-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.4rem 1rem; min-width: 0; }
.link-quiet { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; white-space: nowrap; }
.btn svg, .nav-cta svg, .nav-phone svg, .nav-quick svg { width: 18px; height: 18px; flex: none; }
.nav-quick, .nav-phone { display: none; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.band-wallpaper { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.band-wallpaper img { width: 100%; height: 100%; object-fit: cover; }

/* =============================================================================
   FRESH MODE (2026-10-06, loobapbap.ca; operator taste list of the same day).
   OPT-IN: this whole block is emitted only when theme.json pins `dark.fresh`.
   The approved dark Rustico page never receives a byte of it. Same structure,
   same components, a LIGHT ground: for a counter-service kitchen whose own mark
   is drawn in bright colours on white, where the dark slate read as heavy.
     ground   : palette.bg (a warm tint) and palette.bgWarm (one step deeper),
                pinned light by the theme; cards are white with a thin edge and
                a soft shadow.
     ink      : palette.ink, the charcoal of their own mark. The cream/text
                tokens are re-pointed here, so every rule above that says
                "cream" paints ink. The three places that must STAY light (copy
                over the phone hero photograph, the footer) say so explicitly.
     accent   : one colour of theirs, deep enough for white text (the theme pins
                it and its on-accent ink). palette.sun is their second logo
                colour, used only on dark grounds and as a small highlight.
     type     : no italic anywhere (the tailored display face may not have one;
                blueprint-gate faux-bold), headings at 700.
   ============================================================================= */
:root {
  --color-cream: #2B2B2B;
  --color-cream-dim: #55514a;
  --color-text: #3b3833;
  --color-text-dim: #5d584f;
  --color-border: rgba(43, 43, 43, 0.12);
  --color-border-hover: rgba(43, 43, 43, 0.3);
  --color-sun: #F9C762;
  --color-star: #f2a900;
  --shadow-card: 0 1px 2px rgba(43, 43, 43, 0.05), 0 10px 26px rgba(43, 43, 43, 0.07);
  --radius: 10px;
  --radius-lg: 16px;
  --nav-h: 88px;
  --trust-half: 46px;
}
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.5rem, 5vw, 4.1rem); font-weight: 800; line-height: 1.05; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
h3 { font-size: 1.3rem; font-weight: 700; }
section[id] { scroll-margin-top: 5.75rem; }
.section-label { font-size: 0.78rem; letter-spacing: 0.16em; }

/* Buttons: title case as authored, a real tap height, an icon beside the words. */
.btn {
  justify-content: center;
  min-height: 48px;
  padding: 0.7rem 1.25rem;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 999px;
  white-space: nowrap;
}
.btn-primary:hover { box-shadow: 0 8px 20px rgba(43, 43, 43, 0.16); }
.btn-outline { background: #fff; backdrop-filter: none; color: var(--color-cream); border: 1.5px solid rgba(43, 43, 43, 0.3); }
.btn-outline:hover { background: #fff; border-color: var(--color-cream); color: var(--color-cream); }
.link-quiet, .link-quiet:hover { color: var(--color-cream); }
.link-quiet:hover { text-decoration-thickness: 2px; }

/* Masthead: a solid white bar, the first thing on the page, one height in every state. */
.nav, .nav.scrolled {
  background: #fff;
  backdrop-filter: none;
  padding: 0;
  border-bottom: 1px solid var(--color-border);
}
.nav.scrolled { box-shadow: 0 6px 18px rgba(43, 43, 43, 0.07); }
.nav-inner { min-height: var(--nav-h); }
.nav-logo { display: flex; align-items: center; }
.nav-logo img, .nav.scrolled .nav-logo img,
.nav-logo img.logo-compact, .nav.scrolled .nav-logo img.logo-compact,
.nav-logo img.logo-square, .nav.scrolled .nav-logo img.logo-square { height: 72px; width: auto; filter: none; }
.nav-wordmark { color: var(--color-cream); }
.nav-links a { color: var(--color-cream); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.nav-links a.nav-cta { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0.5rem 1.1rem !important; border-radius: 999px; }
.nav-links a.nav-phone { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; font-weight: 700; white-space: nowrap; }
.nav-links a.nav-phone svg { color: var(--color-accent); }
.nav-links a.nav-phone::after { display: none; }
.nav-toggle { width: 44px; height: 44px; align-items: center; justify-content: center; }
.nav-toggle span { background: var(--color-cream); }

/* Hero. The copy sits on the page's own light ground in ink, never over the photograph, and their
   photograph is shown whole and unscrimmed: in the right half on a wide screen, as a band across
   the top on a phone (so the dish is the first thing on the first screen and the headline under it
   is plain dark type). A portrait frame of a dish is shown as it was taken, not as a slice of it. */
.hero { min-height: min(84svh, 640px); padding-top: var(--nav-h); background: var(--color-bg); }
.hero-bg { top: var(--nav-h); }
.hero-scrim { display: none; }
.hero-content { padding-bottom: calc(var(--trust-half) + 2rem); padding-top: 2rem; }
.hero h1 { color: var(--color-cream); }
.hero h1 em { font-style: normal; font-weight: 800; color: var(--color-accent); }
.hero-badge { font-size: 0.8rem; letter-spacing: 0.16em; }
.hero-sub { font-size: 1.12rem; line-height: 1.6; margin-bottom: 1.75rem; color: var(--color-text); }
.hero-actions .btn { padding: 0.7rem 1.4rem; }
@media (min-width: 969px) {
  .nav-inner > div:last-child { display: none !important; }
  .hero h1 { font-size: clamp(2.5rem, 3.7vw, 3.3rem); }
  .hero-bg { left: 50%; }
  .hero-content {
    width: 50%;
    max-width: none;
    padding-left: max(var(--space-md), calc((100vw - var(--max-width)) / 2 + var(--space-md)));
    padding-right: 2.5rem;
  }
}
@media (max-width: 968px) {
  :root { --nav-h: 68px; --trust-half: 92px; }
  .nav-logo img, .nav.scrolled .nav-logo img,
  .nav-logo img.logo-compact, .nav.scrolled .nav-logo img.logo-compact,
  .nav-logo img.logo-square, .nav.scrolled .nav-logo img.logo-square { height: 54px; }
  .nav-links { background: #fff; padding-top: 5.5rem; align-items: flex-start; gap: 0.5rem; box-shadow: -12px 0 32px rgba(43, 43, 43, 0.12); }
  .nav-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.1rem; }
  .nav-links a::after { display: none; }
  .story-band .about-img { max-height: none; }
  .story-band .about-img img { aspect-ratio: 4 / 3; height: auto; }
  .nav-quick { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 1rem; border-radius: 999px; background: var(--color-accent); color: var(--color-on-accent); font-weight: 700; font-size: 0.98rem; white-space: nowrap; }
  .nav-quick:hover { color: var(--color-on-accent); }
  :root { --hero-photo-h: clamp(240px, 36svh, 320px); }
  .hero { min-height: 0; display: block; }
  .hero-bg { bottom: auto; height: var(--hero-photo-h); }
  .hero-content { width: 100%; max-width: none; padding-top: calc(var(--hero-photo-h) + 1.5rem); }
  .hero h1 { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  .hero-sub { margin-bottom: 1.25rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
}

/* Trust bar: a white card half over the foot of the hero. */
.trust { position: relative; z-index: 3; padding: 0; margin-top: calc(-1 * var(--trust-half)); background: transparent; }
.trust-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.1rem 0.5rem;
}
.trust-list li { display: grid; gap: 0.2rem; align-content: center; justify-items: center; text-align: center; padding: 0.2rem 1rem; border-left: 1px solid var(--color-border); }
.trust-list li:first-child { border-left: 0; }
.trust-list strong { font-family: var(--font-display); font-size: 1.08rem; font-weight: 700; line-height: 1.25; color: var(--color-cream); }
.trust-list span { font-size: 0.92rem; line-height: 1.35; color: var(--color-text-dim); }
.trust-stars, .rev-rating-stars {
  display: block;
  width: 6.5rem;
  height: 1.3rem;
  background: linear-gradient(90deg, var(--color-star) var(--rate, 100%), #d8d2c4 var(--rate, 100%));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") 0 50% / 1.3rem 1.3rem repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") 0 50% / 1.3rem 1.3rem repeat-x;
}
@media (max-width: 968px) {
  .trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0.9rem; padding: 1rem 0.25rem; }
  .trust-list li { padding-inline: 0.5rem; }
  .trust-list li:nth-child(odd) { border-left: 0; }
  .trust-list strong { font-size: 1rem; }
  .trust-list span { font-size: 0.88rem; }
}

/* Feature cards: photograph, name, one line, then the action pair pinned to the foot so a row of
   cards starts and ends on the same lines. */
/* The fill wraps a photograph in <picture> for its webp source; the wrapper must not become the
   box the image is sized against (the picture-wrapper hero gap, three previews). */
.feature-card picture, .about-img picture, .band-wallpaper picture { display: contents; }
.features-section[data-band] { background: var(--color-bg); }
.features-head, .visit-head { text-align: center; margin-bottom: var(--space-md); }
.features-head .section-label, .visit-head .section-label { justify-content: center; }
.features-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.features-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 460px)); justify-content: center; }
.feature-card, .visit-card, .rev-card, .menu-item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.feature-card { display: flex; flex-direction: column; overflow: hidden; }
.feature-img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.feature-body { display: flex; flex-direction: column; flex: 1; padding: 1.15rem 1.15rem 1rem; }
.feature-body h3 { color: var(--color-cream); margin-bottom: 0.3rem; }
.feature-body p { color: var(--color-text-dim); font-size: 1rem; line-height: 1.55; }
.feature-body .card-actions { margin-top: auto; padding-top: 1rem; gap: 0.4rem 0.8rem; }
.feature-body .card-actions .btn { padding-inline: 1rem; }
@media (max-width: 968px) {
  .features-grid, .features-grid:not(#_) { grid-template-columns: minmax(0, 1fr); }
}

/* Menu: white rows on the tinted ground, tabs a thumb can hit. */
.menu-section[data-band] { background: var(--color-bg-warm); }
.menu-header { margin-bottom: var(--space-md); }
.menu-tabs { background: #fff; border: 1px solid var(--color-border); border-radius: 999px; padding: 0.3rem; gap: 0.2rem; margin-bottom: var(--space-md); }
.menu-tab { min-height: 44px; padding: 0.5rem 1.15rem; border-radius: 999px; font-size: 0.98rem; letter-spacing: 0; color: var(--color-text); }
.menu-grid { gap: 0.7rem; }
.menu-item { grid-template-columns: 1fr auto; padding: 0.85rem 1.1rem; border-radius: 12px; border-left: 1px solid var(--color-border); box-shadow: 0 1px 2px rgba(43, 43, 43, 0.05); min-height: 60px; }
.menu-item:hover { border-left-color: var(--color-border); background: #fff; }
.menu-item-name { font-size: 1.05rem; font-weight: 700; margin-bottom: 0; letter-spacing: -0.005em; }
.menu-item-desc { font-size: 0.92rem; margin-top: 0.15rem; }
.menu-item-price { font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.menu-cta { margin-top: var(--space-md); }
.menu-note { font-size: 0.95rem; max-width: 46ch; margin-inline: auto; }
.menu-cta .card-actions { justify-content: center; }
@media (max-width: 640px) {
  .menu-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: var(--radius-lg); }
  .menu-tab { padding-inline: 0.5rem; }
}

/* Story: the white band between two tints. */
.story-band:not(#_) { background: #fff; }
.story-band .section-label { color: var(--color-accent); }
.story-band .section-title { color: var(--color-cream); }
.story-band .about-text p { color: var(--color-text); font-size: 1.05rem; line-height: 1.65; }
.story-band .about-grid { margin-top: 0; align-items: center; }
.story-band .about-img { max-height: 520px; align-self: stretch; }
.story-band[data-band-as="bleed"] .about-img { max-height: none; }
.story-actions { margin-top: var(--space-sm); }

/* Reviews: one card each, the Google mark beside the rating and on every card. */
.reviews-g[data-band] { background: var(--color-bg); }
.rev-rating { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 auto; color: var(--color-text); }
.g-mark { flex: none; display: block; }
.rev-rating-score { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--color-cream); }
.rev-rating-src { font-weight: 600; }
.rev-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: var(--space-md); align-items: stretch; text-align: left; }
.rev-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 480px)); justify-content: center; }
.rev-grid:has(> :only-child) { grid-template-columns: minmax(0, 560px); justify-content: center; }
.rev-card { display: grid; grid-template-rows: 1fr auto; gap: 1rem; margin: 0; padding: 1.25rem; }
.rev-card p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--color-cream); white-space: pre-line; }
.rev-card footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 0.75rem; align-items: center; }
.rev-stars { grid-column: 1; display: flex; gap: 0.1rem; }
.rev-stars .star {
  width: 1.05rem;
  height: 1.05rem;
  background: var(--color-star);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.4l-5.8 3.1 1.1-6.5L2.6 9.4l6.5-.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rev-stars .star-off { background: #d8d2c4; }
.rev-g { grid-column: 2; grid-row: 1 / span 2; display: inline-grid; place-items: center; }
.rev-card cite { grid-column: 1; font-style: normal; font-weight: 700; font-size: 1rem; color: var(--color-cream); }
.rev-card time { grid-column: 1; font-size: 0.8rem; color: var(--color-text-dim); }
.rev-more { margin-top: var(--space-md); }
.rev-more-btn { list-style: none; cursor: pointer; }
.rev-more-btn::-webkit-details-marker { display: none; }
.rev-more-hide, .rev-more[open] .rev-more-show { display: none; }
.rev-more[open] .rev-more-hide { display: inline; }
@media (max-width: 968px) {
  .rev-grid, .rev-grid:not(#_) { grid-template-columns: minmax(0, 1fr); }
  .rev-more-btn { display: flex; width: 100%; }
}

/* Visit: the faded photograph wallpaper under the band's tint, white cards over it. */
.visit-fresh[data-band] { background: var(--color-bg-warm); overflow: hidden; }
.visit-fresh .band-wallpaper img { opacity: var(--wallpaper-opacity, 0.14); filter: saturate(0.85); }
.visit-fresh > .container { position: relative; z-index: 1; }
.visit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.visit-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.visit-card { display: flex; flex-direction: column; overflow: hidden; }
.visit-card .map-container { height: auto; min-height: 210px; border: 0; border-radius: 0; flex: 1 1 210px; }
.visit-card-map .visit-body { flex: none; }
.visit-body { display: flex; flex-direction: column; flex: 1; gap: 0.9rem; padding: 1.2rem; min-width: 0; }
.visit-card, .catering-form, .form-group input, .form-group textarea { min-width: 0; }
.visit-fresh .card-actions { gap: 0.4rem 0.8rem; }
/* The wallpaper never paints past its own pixels (blueprint-gate photo-resolution): on a phone the
   band is far taller than the photograph, so it covers the head of the band and fades out. */
@media (min-width: 969px) {
  /* A wallpaper whose one side carries something that is not theirs (a neighbour's sign) fades
     that side out to the band's tint (visit.wallpaper.fade = "right" | "left"). */
  .visit-fresh .band-wallpaper-fade-right { -webkit-mask-image: linear-gradient(90deg, #000 58%, transparent 72%); mask-image: linear-gradient(90deg, #000 58%, transparent 72%); }
  .visit-fresh .band-wallpaper-fade-left { -webkit-mask-image: linear-gradient(270deg, #000 58%, transparent 72%); mask-image: linear-gradient(270deg, #000 58%, transparent 72%); }
}
@media (max-width: 968px) {
  /* Phone: the photograph at its own proportions across the head of the band (lifted by
     --wall-shift when the tailor needs its subject behind the heading), fading into the tint. */
  .visit-fresh .band-wallpaper { top: var(--wall-shift, 0px); bottom: auto; height: auto; aspect-ratio: 3 / 4; -webkit-mask-image: linear-gradient(#000 55%, transparent 92%); mask-image: linear-gradient(#000 55%, transparent 92%); }
  .visit-fresh .band-wallpaper-fade-right { -webkit-mask-image: linear-gradient(#000 55%, transparent 92%), linear-gradient(90deg, #000 52%, transparent 70%); mask-image: linear-gradient(#000 55%, transparent 92%), linear-gradient(90deg, #000 52%, transparent 70%); -webkit-mask-composite: source-in; mask-composite: intersect; }
  .visit-fresh .band-wallpaper-fade-left { -webkit-mask-image: linear-gradient(#000 55%, transparent 92%), linear-gradient(270deg, #000 52%, transparent 70%); mask-image: linear-gradient(#000 55%, transparent 92%), linear-gradient(270deg, #000 52%, transparent 70%); -webkit-mask-composite: source-in; mask-composite: intersect; }
  .visit-fresh .visit-head { margin-bottom: 2.5rem; }
  .catering-form .form-row:not(#_) { grid-template-columns: minmax(0, 1fr); }
}
.visit-body h3 { color: var(--color-cream); }
.visit-body > .card-actions, .catering-form > .card-actions { margin-top: auto; padding-top: 0.25rem; }
.visit-rows { list-style: none; display: grid; gap: 0.35rem; }
.visit-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: center; min-height: 44px; }
.visit-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--color-bg-warm); color: var(--color-accent); }
.visit-ico svg { width: 18px; height: 18px; }
.visit-text { color: var(--color-cream); font-weight: 600; font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
a.visit-text { display: flex; align-items: center; min-height: 44px; }
a.visit-text:hover { color: var(--color-accent); }
.hours-list { list-style: none; display: grid; gap: 0.1rem; }
.hours-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0.6rem; border-radius: 8px; font-size: 1rem; color: var(--color-text); }
.hours-list li span:last-child { font-variant-numeric: tabular-nums; text-align: right; }
.hours-list li.is-today { font-weight: 700; color: var(--color-cream); background: var(--color-bg-warm); }
.hours-note { font-size: 0.92rem; color: var(--color-text-dim); line-height: 1.5; }
.catering-form { display: flex; flex-direction: column; flex: 1; }
.catering-form h3 { margin-bottom: 0.3rem; }
.catering-lede { color: var(--color-text-dim); font-size: 0.95rem; line-height: 1.5; margin-bottom: 0.9rem; }
.catering-form .form-row { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.catering-form .form-group { margin-bottom: 0.7rem; }
.form-group label { font-size: 0.9rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-cream); }
.form-group input, .form-group select, .form-group textarea { min-height: 46px; background: #fff; border: 1px solid rgba(43, 43, 43, 0.32); color: var(--color-cream); font-size: 1rem; }
.form-group textarea { min-height: 84px; }
.form-done p { color: var(--color-text); font-size: 1rem; }
.form-done a { color: var(--color-accent); font-weight: 600; }
@media (max-width: 1100px) {
  .visit-grid, .visit-grid:not(#_) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .visit-card-form { grid-column: 1 / -1; }
}
@media (max-width: 968px) {
  .visit-grid, .visit-grid:not(#_) { grid-template-columns: minmax(0, 1fr); }
}

/* Footer: compact, their mark on a light plate, each contact with its icon. */
.footer-fresh { background: #2B2B2B; border-top: 0; padding: 2.25rem 0 1.25rem; color: rgba(255, 255, 255, 0.9); }
.foot-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.5rem clamp(2rem, 5vw, 4rem); align-items: center; margin-bottom: 1.5rem; }
.foot-plate { display: inline-flex; background: #fff; border-radius: 14px; padding: 8px 14px; justify-self: start; }
.foot-logo { height: 64px; width: auto; }
.foot-contact, .foot-links { list-style: none; }
.foot-contact { display: grid; gap: 0.1rem; }
.foot-contact li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.6rem; min-height: 44px; }
.foot-contact a, .foot-contact li > span:last-child { color: #fff; font-weight: 600; font-size: 1rem; overflow-wrap: anywhere; }
.foot-contact a { display: flex; align-items: center; min-height: 44px; justify-self: start; }
.foot-ico { display: inline-grid; place-items: center; color: var(--color-sun); }
.foot-ico svg { width: 18px; height: 18px; }
.foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0 1.6rem; }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; font-weight: 600; }
.foot-contact a:hover, .foot-links a:hover { color: var(--color-sun); }
.footer-fresh .footer-bottom { border-top-color: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.8); font-size: 0.82rem; }
.footer-fresh .footer-credits, .footer-fresh .footer-credits a { color: rgba(255, 255, 255, 0.72); }
.footer-fresh .footer-wordmark { color: #fff; }
@media (max-width: 968px) {
  .foot-top { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .foot-sep { display: none; }
  .foot-line2 { display: block; }
  .footer-fresh { padding-bottom: 4.5rem; }
  .footer-fresh .footer-bottom { align-items: flex-start; text-align: left; }
}
.preview-badge-cta, .preview-badge-cta:hover { color: var(--color-on-accent); }