/* ══════════════════════════════════════════════════════════════
   Levantine Resto — shared design system
   Brand: dark olive / sage / ivory / sand / burgundy
   Display: Georgia Pro (Georgia fallback)   Body: Avenir (Avenir Next / Segoe UI fallback)
   ══════════════════════════════════════════════════════════════ */

:root {
  --olive-dark: #353A20;
  --sage: #898867;
  --sage-line: #D9D3C0;
  --ivory: #F4EAE2;
  --sand: #E8D3BC;
  --burgundy: #68181B;
  --burgundy-hover: #7A1C20;
  --white: #FFFFFF;

  --font-display: 'Georgia Pro', Georgia, 'Times New Roman', serif;
  --font-body: 'Avenir', 'Avenir Next', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;

  --max-w: 1200px;
  --prose-w: 620px;

  --section-pad: 72px;
  --r-card: 16px;
  --r-pill: 999px;

  --ease: cubic-bezier(.23, 1, .32, 1);

  /* signature tile-band pattern, derived from the logo's star/diamond geometry */
  --tile-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='28' viewBox='0 0 80 28'%3E%3Cpath d='M12,10.60 L15.40,14 L12,17.40 L8.60,14 Z' fill='%23353A20'/%3E%3Cpath d='M32.00,14.00 Q48.00,17.60 64.00,14.00 Q48.00,10.40 32.00,14.00 Z' fill='%23353A20'/%3E%3C/svg%3E");
  --tile-fine-ivory: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='28' viewBox='0 0 80 28'%3E%3Cpath d='M12,10.60 L15.40,14 L12,17.40 L8.60,14 Z' fill='%23F4EAE2'/%3E%3Cpath d='M32.00,14.00 Q48.00,17.60 64.00,14.00 Q48.00,10.40 32.00,14.00 Z' fill='%23F4EAE2'/%3E%3C/svg%3E");
}

@media (min-width: 900px) {
  :root { --section-pad: 120px; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--olive-dark);
  line-height: 1.65;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--burgundy); }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--burgundy);
  outline-offset: 3px;
  border-radius: 4px;
}

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; }
@media (min-width: 640px) { .container { padding: 0 40px; } }

/* ─── TYPE ─── */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; color: var(--olive-dark); }

.h-hero {
  font-size: clamp(38px, 9vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.02em;
}
.h-section {
  font-size: clamp(30px, 6vw, 48px);
  line-height: 1.08;
}
.h-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(24px, 5vw, 40px);
  line-height: 1.3;
}
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
}
.lead { font-size: 17px; line-height: 1.65; }
@media (min-width: 640px) { .lead { font-size: 19px; } }
.text-sage { color: var(--sage); }

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 15px 28px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease);
  min-height: 44px;
}
.btn-primary { background: var(--burgundy); color: var(--white); }
.btn-primary:hover { background: var(--burgundy-hover); color: var(--white); }
.btn-outline { background: transparent; border-color: var(--olive-dark); color: var(--olive-dark); }
.btn-outline:hover { background: var(--olive-dark); color: var(--ivory); }
.btn-outline-light { background: transparent; border-color: rgba(244,234,226,0.5); color: var(--ivory); }
.btn-outline-light:hover { background: var(--ivory); color: var(--olive-dark); }
.btn-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--burgundy);
  padding: 4px 0;
}
.btn-link:hover { color: var(--olive-dark); }
.btn:active { transform: scale(0.98); }

/* ─── HEADER ─── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ivory);
  border-bottom: 1px solid var(--sage-line);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
  gap: 12px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
/* The mark is the real full-colour brand ornament (cream/sage/olive/burgundy),
   exported from the brand artwork in source/RESTO.pdf — it reads on both the
   ivory header and the dark hero photo, so unlike the wordmark and nav it
   doesn't recolour between the transparent and solid header states. */
.brand-mark { width: 40px; height: 40px; flex-shrink: 0; display: block; }
.brand-word { display: flex; flex-direction: column; line-height: 1.05; }
.brand-word .l1 {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--olive-dark);
}
.brand-word .l2 {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--sage);
}

.main-nav {
  display: none;
  align-items: center;
  gap: 28px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.main-nav a { color: var(--olive-dark); padding: 6px 0; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--burgundy); border-color: var(--burgundy); }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.lang-toggle {
  display: flex; background: var(--sand); border-radius: var(--r-pill); padding: 3px;
  flex-shrink: 0;
}
.lang-toggle button {
  border: none; background: transparent; font-size: 12px; font-weight: 700;
  padding: 7px 12px; border-radius: var(--r-pill); color: var(--olive-dark);
  min-height: 32px;
}
.lang-toggle button[aria-pressed="true"] { background: var(--burgundy); color: var(--white); }

.header-book { display: none; }

.nav-hamburger {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent; border: none;
  flex-shrink: 0;
}
.nav-hamburger svg { width: 22px; height: 22px; }

@media (min-width: 980px) {
  .main-nav { display: flex; }
  .header-book { display: inline-flex; }
  .nav-hamburger { display: none; }
}

/* ─── MOBILE NAV PANEL ─── */
.nav-panel {
  position: fixed; inset: 0;
  z-index: 200;
  visibility: hidden;
}
.nav-panel-backdrop {
  position: absolute; inset: 0;
  background: rgba(53,58,32,0.5);
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.nav-panel-sheet {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(340px, 86vw);
  background: var(--ivory);
  transform: translateX(100%);
  transition: transform 0.3s var(--ease);
  display: flex; flex-direction: column;
  padding: 20px;
  overflow-y: auto;
}
.nav-panel.open { visibility: visible; }
.nav-panel.open .nav-panel-backdrop { opacity: 1; }
.nav-panel.open .nav-panel-sheet { transform: translateX(0); }
.nav-panel-top { display: flex; justify-content: flex-end; margin-bottom: 24px; }
.nav-panel-close {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: none;
}
.nav-panel-close svg { width: 20px; height: 20px; }
.nav-panel-links { display: flex; flex-direction: column; }
.nav-panel-links a {
  font-family: var(--font-display);
  font-size: 24px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--sage-line);
  color: var(--olive-dark);
}
.nav-panel-links a[aria-current="page"] { color: var(--burgundy); }
.nav-panel-cta { margin-top: 24px; }
.nav-panel-cta .btn { width: 100%; }
.nav-panel-foot { margin-top: auto; padding-top: 24px; font-size: 13px; color: var(--sage); }
.nav-panel-foot a { display: block; padding: 6px 0; color: var(--sage); }
@media (min-width: 980px) { .nav-panel { display: none; } }

body.nav-open { overflow: hidden; }

/* ─── TILE BAND (divider) ─── */
.tile-band {
  height: 28px;
  background-image: var(--tile-fine);
  background-repeat: repeat-x;
  background-position: center;
  background-size: 80px 28px;
}
.tile-band-dark {
  background-image: var(--tile-fine-ivory);
}

/* ─── SECTIONS ─── */
section { padding: var(--section-pad) 0; }
.section-tight { padding: calc(var(--section-pad) * 0.6) 0; }
.eyebrow + .h-section { margin-top: 14px; }

/* ─── FOOTER ─── */
.site-footer {
  background: var(--olive-dark);
  color: var(--ivory);
  padding: 64px 0 32px;
}
.footer-grid {
  display: grid;
  gap: 40px;
  margin-bottom: 48px;
}
@media (min-width: 720px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
}
.footer-brand .brand-word .l1 { color: var(--ivory); }
.footer-brand .brand-word .l2 { color: var(--sage); }
.footer-brand p { margin-top: 16px; color: var(--sage); max-width: 320px; font-size: 14px; }
.footer-col { display: flex; flex-direction: column; }
.footer-col h4 {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage);
  margin-bottom: 16px;
}
/* .footer-col is a flex column, so its <a>/<p> children are auto-"blockified"
   regardless of their own display value — safe even after display:revert. */
.footer-col a, .footer-col p { color: var(--ivory); padding: 6px 0; font-size: 14px; }
.footer-col a:hover { color: var(--sand); }
.footer-bottom {
  border-top: 1px solid rgba(244,234,226,0.15);
  padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  font-size: 13px; color: var(--sage);
}
.footer-bottom a { color: var(--sage); }
.footer-bottom a:hover { color: var(--ivory); }

/* ─── SCROLL REVEAL ─── */
.anim { opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.anim.vis { opacity: 1; transform: translateY(0); }
.anim.d1 { transition-delay: 0.06s; } .anim.d2 { transition-delay: 0.12s; }
.anim.d3 { transition-delay: 0.18s; } .anim.d4 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .anim { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ─── CARDS ─── */
.card {
  background: var(--sand);
  border: 1px solid var(--sage-line);
  border-radius: var(--r-card);
  overflow: hidden;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.card:hover { transform: translateY(-2px); border-color: var(--sage); }
.card-img { aspect-ratio: 4/3; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); }
.card:hover .card-img img { transform: scale(1.04); }
.card-body { padding: 18px 20px 22px; }
.card-body h3 { font-size: 22px; margin-bottom: 6px; }
.card-body p { color: var(--sage); font-size: 14px; }

.badge {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--sand); color: var(--olive-dark);
  padding: 5px 10px; border-radius: var(--r-pill);
}

/* ─── OLIVE BRANCH ORNAMENT ─── */
.ornament { display: flex; justify-content: center; margin: 0 auto; }

/* ─── TRANSPARENT-OVER-HERO HEADER (home page) ─── */
.site-header[data-transparent] {
  position: absolute; top: 0; left: 0; right: 0;
  background: transparent; border-bottom-color: transparent;
}
.site-header[data-transparent] .brand-word .l1,
.site-header[data-transparent] .main-nav a,
.site-header[data-transparent] .nav-hamburger svg { color: var(--ivory); }
.site-header[data-transparent] .nav-hamburger svg { stroke: var(--ivory); }
.site-header[data-transparent] .brand-word .l2 { color: var(--sand); }
/* The hero below already carries its own "Book a table" CTA while the header
   overlays it transparently — showing the header's copy of the same button
   at the same time reads as redundant. Fade it in only once the header goes
   solid (past the hero), same moment the wordmark/nav switch color. */
.site-header[data-transparent] .header-book { opacity: 0; pointer-events: none; }
.site-header[data-transparent].is-solid .header-book { opacity: 1; pointer-events: auto; transition: opacity 0.2s var(--ease); }
.site-header[data-transparent].is-solid {
  position: sticky;
  background: var(--ivory);
  border-bottom-color: var(--sage-line);
  transition: background 0.25s var(--ease);
}
.site-header[data-transparent].is-solid .brand-word .l1,
.site-header[data-transparent].is-solid .main-nav a { color: var(--olive-dark); }
.site-header[data-transparent].is-solid .nav-hamburger svg { stroke: var(--olive-dark); }
.site-header[data-transparent].is-solid .brand-word .l2 { color: var(--sage); }
@media (prefers-reduced-motion: no-preference) {
  .site-header[data-transparent] { transition: background 0.25s var(--ease); }
}

/* ─── HERO ─── */
.hero {
  position: relative;
  min-height: 620px;
  height: 88vh;
  max-height: 820px;
  display: flex;
  flex-direction: column;
  /* padding-top clears the transparent header; the copy is pushed to the
     bottom by margin-top:auto on .hero-content rather than align-items or
     justify-content, both of which overflow *upwards* (under the header)
     when the content is taller than the hero. An auto margin clamps to 0
     instead, so tall copy overflows downwards where it stays readable. */
  padding-top: 96px;
  overflow: hidden;
  background: var(--olive-dark);
}
@media (min-width: 900px) { .hero { height: 78vh; } }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1);
  animation: heroKenBurns 16s ease-out forwards;
}
@keyframes heroKenBurns { from { transform: scale(1); } to { transform: scale(1.08); } }
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(30,32,18,0.88) 0%, rgba(30,32,18,0.35) 45%, rgba(30,32,18,0.05) 70%);
}
.hero-content {
  position: relative; z-index: 2;
  margin-top: auto;
  padding: 0 20px 56px;
  width: 100%;
}
@media (min-width: 640px) { .hero-content { padding: 0 40px 72px; } }
.hero-content .eyebrow { color: var(--sand); }
.hero-content h1 { color: var(--ivory); margin-top: 14px; max-width: 16ch; }
.hero-content .hero-lead {
  color: var(--ivory);
  opacity: 0.92;
  max-width: 44ch;
  margin-top: 16px;
  font-size: 16px;
}
@media (min-width: 640px) { .hero-content .hero-lead { font-size: 18px; } }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero-cta-row .btn { margin-top: 0; }
/* Secondary hero links — the two rooms we want to sell, kept visually
   subordinate to "Book a table" / "View the menu" above them. */
.hero-cta-secondary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-top: 18px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sand);
}
.hero-cta-secondary a { color: var(--sand); border-bottom: 1px solid rgba(232,211,188,0.45); padding-bottom: 2px; }
.hero-cta-secondary a:hover { color: var(--white); border-bottom-color: var(--white); }
@media (prefers-reduced-motion: reduce) { .hero-media img { animation: none; } }

/* ─── INTRO STATEMENT ─── */
.intro-statement {
  max-width: var(--prose-w);
  margin: 0 auto;
  text-align: center;
}
.intro-statement .h-quote { margin-top: 6px; }
.intro-statement .lead { margin-top: 18px; color: var(--sage); }
.intro-statement .ornament { margin-top: 32px; }

/* ─── MENU PREVIEW ─── */
.menu-preview-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin-bottom: 32px; flex-wrap: wrap;
}
.menu-scroll {
  display: flex; gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
  margin: 0 -20px; padding-left: 20px; padding-right: 20px;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 640px) { .menu-scroll { margin: 0 -40px; padding-left: 40px; padding-right: 40px; } }
.menu-scroll::-webkit-scrollbar { display: none; }
.menu-scroll { scrollbar-width: none; }
.menu-scroll .card { flex: 0 0 78vw; scroll-snap-align: start; }
@media (min-width: 640px) { .menu-scroll .card { flex-basis: 320px; } }
@media (min-width: 980px) {
  .menu-scroll { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 0; padding: 0; }
}
.menu-preview-foot {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 28px;
}

/* ─── ROOMS (walk-through bands) ─── */
.room-band { display: flex; flex-direction: column; }
@media (min-width: 860px) { .room-band { flex-direction: row; min-height: 480px; } }
.room-band.reverse { flex-direction: column; }
@media (min-width: 860px) { .room-band.reverse { flex-direction: row-reverse; } }
.room-media { flex: 1 1 50%; overflow: hidden; aspect-ratio: 4/3; }
.room-media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04);
  transition: transform 0.6s var(--ease);
}
/* Side-by-side layout: the band's height must come from its copy, never from
   the photo. With aspect-ratio:auto the image was the only thing giving
   .room-media a height, so `height:100%` on the img resolved against an
   indefinite parent and fell back to the file's intrinsic size — a portrait
   1000x1249 source at a 1000px-wide column rendered 1249px tall, making the
   second-floor and private-room bands roughly twice the height of the
   landscape first-floor one. Taking the image out of flow decouples the two:
   every band is now the same height whatever shape its photo happens to be,
   and object-fit crops to suit. */
@media (min-width: 860px) {
  .room-media { position: relative; aspect-ratio: auto; }
  .room-media img { position: absolute; inset: 0; }
}
.room-band.vis .room-media img { transform: scale(1); }
.room-copy {
  flex: 1 1 50%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px 20px;
  background: var(--ivory);
}
@media (min-width: 640px) { .room-copy { padding: 56px 40px; } }
@media (min-width: 860px) { .room-copy { padding: 56px 72px; max-width: 560px; } }
.room-copy .eyebrow { display: flex; align-items: center; gap: 10px; }
.room-copy h3 { font-size: clamp(26px, 4vw, 40px); margin-top: 12px; }
.room-copy p { margin-top: 14px; color: var(--sage); max-width: 48ch; }
.room-copy .badge { margin-top: 16px; }
.room-copy .btn-link { margin-top: 20px; align-self: flex-start; }
/* spaces.html uses <h2> in the room bands (the page's own headings), the
   homepage uses <h3> (subordinate to its section heading). Same look. */
.room-copy h2 { font-size: clamp(26px, 4vw, 40px); margin-top: 12px; }
.room-copy .btn { margin-top: 24px; align-self: flex-start; }
.room-facts { list-style: none; margin-top: 18px; max-width: 48ch; }
.room-facts li {
  position: relative;
  padding-left: 20px;
  margin-top: 8px;
  color: var(--sage);
  font-size: 14.5px;
}
.room-facts li::before {
  content: ''; position: absolute; left: 2px; top: 9px;
  width: 6px; height: 6px;
  background: var(--burgundy);
  transform: rotate(45deg);
}
.room-note { font-size: 13px; font-style: italic; margin-top: 18px; }

/* Per-photo crop control. object-fit:cover centres by default, which on a tall
   portrait source keeps only the middle ~43% of the frame — for the private
   room that meant the pendant and the screen were cut off, directly beside
   copy selling "a large screen for presentations". Biasing the focal point
   upward keeps the parts of the room the words are actually about. */
.room-media.crop-top img { object-position: center 35%; }

/* ─── SPACES PAGE ─── */
.spaces-jump {
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  margin-top: 28px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.spaces-jump a { color: var(--sage); border-bottom: 1px solid var(--sage-line); padding-bottom: 3px; }
.spaces-jump a:hover { color: var(--burgundy); border-bottom-color: var(--burgundy); }

.feast-panel {
  max-width: 900px; margin: 0 auto;
  background: var(--sand);
  border: 1px solid var(--sage-line);
  border-radius: var(--r-card);
  padding: 32px 24px;
}
@media (min-width: 720px) { .feast-panel { padding: 48px 56px; } }
.feast-panel .lead { margin-top: 16px; color: var(--olive-dark); max-width: 56ch; }
.feast-grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 32px; }
@media (min-width: 720px) { .feast-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
.feast-col h3 {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sage);
  padding-bottom: 10px; border-bottom: 1px solid var(--sage-line);
}
.feast-col .room-facts { margin-top: 14px; }
.feast-col .room-facts li { color: var(--olive-dark); }
.feast-facts { margin-top: 14px; }
.feast-facts dt {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sage);
  margin-top: 14px;
}
.feast-facts dd { font-family: var(--font-display); font-size: 18px; margin-top: 2px; }
.feast-facts dd.tbc { font-family: var(--font-body); font-size: 14px; font-style: italic; }
.feast-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px;
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--sage-line);
}

/* ─── WHAT'S HAPPENING (events & Levantine nights) ───
   Built on the existing .card family so an event card and a menu-preview card
   stay visually identical — an event is just a card with a date and a price.
   Hand-edited: see EDITING.md. */
.happening-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 32px;
}
@media (min-width: 620px) { .happening-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .happening-grid { grid-template-columns: repeat(3, 1fr); } }
.happening-card { display: flex; flex-direction: column; }
.happening-card .card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
.happening-date {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--burgundy);
  margin-bottom: 8px;
}
.happening-card h3 { font-size: 20px; }
.happening-card p { flex: 1 1 auto; }
.happening-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--sage-line);
}
.happening-price { font-family: var(--font-display); font-size: 17px; color: var(--olive-dark); }
.happening-empty { color: var(--sage); font-style: italic; margin-top: 24px; }

/* ─── DAILY DISH ("Today at Levantine") ───
   One dish, changed by hand. Lives at the top of the menu page and in a
   compact variant on the homepage. See EDITING.md. */
.daily-dish {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  background: var(--sand);
  border: 1px solid var(--sage-line);
  border-radius: var(--r-card);
  overflow: hidden;
  margin: 0 auto 56px;
  max-width: 900px;
}
@media (min-width: 720px) { .daily-dish { grid-template-columns: 5fr 6fr; } }
.daily-dish-media { overflow: hidden; aspect-ratio: 4/3; }
@media (min-width: 720px) { .daily-dish-media { aspect-ratio: auto; min-height: 260px; } }
.daily-dish-media img { width: 100%; height: 100%; object-fit: cover; }
.daily-dish-body { padding: 28px 24px; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 720px) { .daily-dish-body { padding: 36px 36px; } }
.daily-dish-body .eyebrow { color: var(--burgundy); }
.daily-dish-name {
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 32px);
  line-height: 1.15;
  margin: 10px 0 0;
}
.daily-dish-body p { color: var(--sage); margin-top: 12px; max-width: 46ch; }
.daily-dish-price { font-family: var(--font-display); font-size: 20px; margin-top: 16px; }
.daily-dish-note { font-size: 12.5px; color: var(--sage); margin-top: 14px; }

/* ─── DARK SPINE (pull-quote section) ─── */
.dark-spine {
  background-color: var(--olive-dark);
  background-image: var(--tile-fine-ivory);
  background-repeat: repeat;
  background-size: 120px 120px;
  background-blend-mode: normal;
  position: relative;
  color: var(--ivory);
  text-align: center;
}
.dark-spine::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(53,58,32,0.94);
}
.dark-spine > .container { position: relative; z-index: 1; }
.dark-spine .h-quote { max-width: 760px; margin: 0 auto; color: var(--ivory); }
.dark-spine .attribution { margin-top: 22px; }
.dark-spine .btn { margin-top: 32px; }

/* ─── GALLERY TEASER (masonry-ish) ─── */
.gallery-teaser-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px) { .gallery-teaser-grid { gap: 16px; } }
@media (min-width: 860px) {
  .gallery-teaser-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 10px; }
  .gt-span-2 { grid-column: span 2; grid-row: span 24; }
  .gt-span-1 { grid-row: span 24; }
  .gt-tall { grid-row: span 32; }
}
.gallery-teaser-grid a { display: block; overflow: hidden; border-radius: 4px; }
.gallery-teaser-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease); aspect-ratio: 4/3; }
@media (min-width: 860px) { .gallery-teaser-grid img { aspect-ratio: auto; } }
.gallery-teaser-grid a:hover img { transform: scale(1.03); }
.gallery-teaser-foot { text-align: center; margin-top: 32px; }

/* ─── LOCATION ─── */
.location-grid { display: grid; gap: 40px; }
@media (min-width: 860px) { .location-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.hours-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.hours-table td { padding: 9px 0; border-bottom: 1px solid var(--sage-line); font-size: 14px; }
.hours-table td:last-child { text-align: right; color: var(--sage); }
.location-map { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--sage-line); aspect-ratio: 4/3; }
@media (min-width: 860px) { .location-map { aspect-ratio: auto; height: 100%; min-height: 360px; } }
.location-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ─── CLICK-TO-LOAD MAP ───
   Fills whichever container it sits in (.location-map or .contact-map), so the
   page reserves exactly the same space whether or not the guest loads Google. */
.map-embed { width: 100%; height: 100%; display: block; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  padding: 28px 24px;
  text-align: center;
  background: var(--sand);
}
.map-placeholder-icon { width: 30px; height: 30px; color: var(--burgundy); }
.map-placeholder-addr { font-family: var(--font-display); font-size: 17px; color: var(--olive-dark); max-width: 26ch; }
.map-placeholder-btn { margin-top: 4px; }
.map-placeholder-note { font-size: 11.5px; line-height: 1.5; color: var(--sage); max-width: 34ch; }
.contact-row { padding: 16px 0; border-bottom: 1px solid var(--sage-line); }
.contact-row:first-child { padding-top: 0; }
.contact-row .eyebrow { margin-bottom: 6px; }
.contact-row a, .contact-row div { font-size: 16px; }

/* ─── MENU PAGE ─── */
.page-hero {
  padding: 48px 0 32px;
  text-align: center;
}
@media (min-width: 640px) { .page-hero { padding: 64px 0 40px; } }
.page-hero .eyebrow { justify-content: center; display: flex; }
.page-hero .lead { max-width: 560px; margin: 16px auto 0; color: var(--sage); }

.menu-tabs {
  display: flex; flex-wrap: wrap; gap: 4px 28px; justify-content: center;
  padding: 24px 0; margin-bottom: 8px;
  border-top: 1px solid var(--sage-line); border-bottom: 1px solid var(--sage-line);
}
.menu-tabs button {
  background: none; border: none; padding: 8px 2px;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--sage);
  border-bottom: 2px solid transparent;
  min-height: 44px;
}
.menu-tabs button[aria-selected="true"] { color: var(--burgundy); border-color: var(--burgundy); }

.menu-filters {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  padding: 20px 0 0;
}
.menu-filters .filter-label { font-size: 12px; color: var(--sage); align-self: center; margin-right: 4px; }
.menu-filters button {
  background: var(--ivory); border: 1px solid var(--sage-line); border-radius: var(--r-pill);
  padding: 8px 16px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--olive-dark); min-height: 40px;
}
.menu-filters button[aria-pressed="true"] { background: var(--olive-dark); border-color: var(--olive-dark); color: var(--ivory); }

.menu-category { max-width: var(--prose-w); margin: 0 auto; padding: 56px 0; }
.menu-category:first-of-type { padding-top: 40px; }
.menu-category-head { text-align: center; margin-bottom: 32px; }
.menu-category-head h2 { font-size: clamp(26px, 4vw, 36px); }
.menu-category-intro {
  font-family: var(--font-display); font-style: italic; color: var(--sage);
  margin-top: 12px; font-size: 16px; line-height: 1.6;
}
.dish-row { padding: 16px 0; }
.dish-row + .dish-row { border-top: 1px solid var(--sage-line); }
.dish-name {
  font-family: var(--font-display); font-size: 20px; color: var(--olive-dark);
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
}
.dish-name .sig::before { content: '✦ '; color: var(--burgundy); font-size: 13px; }
.dish-price { font-family: var(--font-display); font-size: 20px; color: var(--olive-dark); white-space: nowrap; }
.dish-desc { color: var(--sage); font-size: 15px; line-height: 1.6; margin-top: 6px; max-width: 62ch; }
.dish-row.filtered-out { display: none; }
.menu-empty-note { text-align: center; color: var(--sage); padding: 24px 0; display: none; }
.menu-empty-note.show { display: block; }

.menu-photo-break { aspect-ratio: 16/9; overflow: hidden; margin: 0; }
.menu-photo-break img { width: 100%; height: 100%; object-fit: cover; }

.menu-foot-notes {
  max-width: var(--prose-w); margin: 0 auto; padding-top: 32px;
  display: grid; gap: 28px;
}
@media (min-width: 640px) { .menu-foot-notes { grid-template-columns: 1fr 1fr; } }
.menu-foot-notes .note h4 { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sage); margin-bottom: 8px; }
.menu-foot-notes .note p { font-size: 14px; color: var(--olive-dark); }
.menu-banner {
  max-width: var(--prose-w); margin: 40px auto 0;
  background: var(--sand); border-left: 3px solid var(--burgundy);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  padding: 16px 20px; font-size: 14px;
}
.allergen-dialog-trigger { color: var(--burgundy); font-weight: 700; }

/* ─── UTIL ─── */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
.skip-link {
  position: absolute; left: 12px; top: -60px;
  background: var(--burgundy); color: var(--white);
  padding: 10px 16px; border-radius: 8px; z-index: 300;
  transition: top 0.2s var(--ease);
  font-size: 13px; font-weight: 700;
}
.skip-link:focus { top: 12px; }

/* !important throughout: these toggles must win over any component rule
   (e.g. .footer-col a{display:block}) that also happens to set `display`. */
[data-i18n-en] { display: none !important; }
html[lang="en"] [data-i18n-en] { display: revert !important; }
html[lang="en"] [data-i18n-bg] { display: none !important; }
/* elements that need a non-default display value when shown */
html[lang="en"] [data-i18n-en].d-flex { display: flex !important; }
html[lang="en"] [data-i18n-en].d-inline { display: inline !important; }
html[lang="en"] [data-i18n-en].d-inline-flex { display: inline-flex !important; }
[data-i18n-bg].d-flex { display: flex !important; }
[data-i18n-bg].d-inline { display: inline !important; }
[data-i18n-bg].d-inline-flex { display: inline-flex !important; }

/* ═══════════════════ MENU PAGE ═══════════════════ */

/* NOTE: .page-hero's padding/text-align live in the earlier definition
   (line ~511) — this used to duplicate them with much larger values
   (156px/176px top padding, sized for a transparent-over-hero header
   like index.html's), which silently won since it loads later in the
   cascade. None of the six pages that use .page-hero actually have a
   transparent header, so that was pure dead space on all of them —
   removed rather than fixed in place, since the correct rule already
   exists above. */
.page-hero .h-hero { margin-top: 10px; }
.page-hero .lead { max-width: var(--prose-w); margin: 18px auto 0; color: var(--sage); }

/* switcher (menu tabs) */
.menu-tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 18px; margin-top: 36px;
}
.menu-tab {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: none; border: none; cursor: pointer;
  color: var(--sage); padding: 8px 2px; position: relative;
}
.menu-tab[aria-selected="true"] { color: var(--burgundy); }
.menu-tab[aria-selected="true"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--burgundy);
}
.menu-tab:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; border-radius: 4px; }

/* dietary filters */
.menu-filters {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px; margin-top: 28px;
}
.menu-filters .filter-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--sage); margin-right: 4px;
}
.filter-btn {
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  padding: 8px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--sage-line); background: transparent; color: var(--olive-dark);
  cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.filter-btn[aria-pressed="true"] { background: var(--burgundy); border-color: var(--burgundy); color: var(--white); }
.filter-btn:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }

/* category */
.menu-category { max-width: 760px; margin: 0 auto; padding: var(--section-pad) 0; }
.menu-category-head { text-align: center; margin-bottom: 40px; }
.menu-category-head h2 { font-size: clamp(26px, 4vw, 36px); }
.menu-category-head p { margin-top: 12px; color: var(--sage); font-style: italic; max-width: 56ch; margin-left: auto; margin-right: auto; }

.dish-row {
  display: flex; gap: 16px; justify-content: space-between; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--sage-line);
  transition: opacity 0.2s var(--ease), max-height 0.2s var(--ease);
}
.dish-row.filtered-out { display: none; }
.dish-row-main { flex: 1 1 auto; min-width: 0; }
.dish-row-name-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dish-row-name { font-family: var(--font-display); font-size: 19px; color: var(--olive-dark); }
.dish-sig {
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--burgundy); border: 1px solid var(--burgundy); border-radius: var(--r-pill);
  padding: 2px 8px; white-space: nowrap;
}
.dish-row-desc { margin-top: 6px; color: var(--sage); font-size: 14px; line-height: 1.6; }
.dish-row-desc .tags { color: var(--sage); opacity: 0.8; }
.dish-row-price {
  flex: 0 0 auto; font-family: var(--font-display); font-size: 17px; color: var(--olive-dark);
  white-space: nowrap;
}
/* A price the owners haven't set yet. Same .tbc placeholder convention used
   across the site, sized down so an unconfirmed price never out-shouts a real
   one in the same column. */
.dish-row-price.tbc { font-family: var(--font-body); font-size: 12px; font-style: italic; }
.happening-price.tbc { font-family: var(--font-body); font-size: 12.5px; font-style: italic; }
.happening-date.tbc { border-bottom: none; color: var(--sage); font-style: italic; text-transform: none; letter-spacing: 0.04em; }
.menu-empty-note {
  display: none; text-align: center; color: var(--sage); font-style: italic; padding: 24px 0;
}
.menu-empty-note.show { display: block; }

/* full-bleed photo break inside menu list */
.menu-photo-break {
  margin: var(--section-pad) calc(50% - 50vw);
  width: 100vw; max-width: 100vw;
  aspect-ratio: 16/8;
  overflow: hidden;
}
@media (min-width: 900px) { .menu-photo-break { aspect-ratio: 21/8; } }
.menu-photo-break img { width: 100%; height: 100%; object-fit: cover; }

/* prose (group feast) */
.menu-prose { max-width: var(--prose-w); margin: 0 auto; }
.menu-prose p { margin-top: 18px; color: var(--sage); }
.menu-prose p:first-child { margin-top: 0; }
.menu-prose .btn { margin-top: 28px; }

/* foot info blocks */
.menu-info-grid {
  display: grid; gap: 32px; margin-top: 8px;
  border-top: 1px solid var(--sage-line);
  padding-top: var(--section-pad);
}
@media (min-width: 760px) { .menu-info-grid { grid-template-columns: repeat(2, 1fr); } }
.menu-info-block h3 { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); margin-bottom: 10px; }
.menu-info-block p { font-size: 14px; color: var(--olive-dark); }
.menu-info-block .btn-link { margin-top: 12px; display: inline-block; }
.menu-price-note { font-size: 12px; color: var(--sage); font-style: italic; }
.menu-pdf-link { margin-top: 6px; display: inline-block; }

/* ═══════════════════ OUR STORY PAGE ═══════════════════ */

/* content still pending the family interview — flagged, not invented */
.tbc { color: var(--sage); border-bottom: 1px dashed var(--sage-line); }

.story-hero { position: relative; height: 46vh; min-height: 320px; max-height: 520px; overflow: hidden; background: var(--olive-dark); }
.story-hero img { width: 100%; height: 100%; object-fit: cover; }

.story-title { text-align: center; padding: 56px 0 8px; }
.story-title .h-hero { margin-top: 10px; max-width: 20ch; margin-left: auto; margin-right: auto; }
.story-title .tbc-note { margin-top: 16px; font-size: 12px; color: var(--sage); font-style: italic; }

.story-col { max-width: var(--prose-w); margin: 0 auto; padding: var(--section-pad) 0; }
.story-col h2 { font-size: clamp(22px, 3vw, 28px); margin-bottom: 14px; }
.story-col p { color: var(--olive-dark); }
.story-col + .story-col { padding-top: 0; }

.story-breath { aspect-ratio: 4/5; max-width: 560px; margin: 0 auto; overflow: hidden; border-radius: var(--r-card); }
@media (min-width: 640px) { .story-breath { aspect-ratio: 16/10; max-width: 760px; } }
.story-breath img { width: 100%; height: 100%; object-fit: cover; }

.story-quote { text-align: center; max-width: 720px; margin: 0 auto; padding: var(--section-pad) 0; }
.story-quote .ornament { margin-bottom: 8px; }
.story-quote blockquote { font-family: var(--font-display); font-style: italic; font-size: clamp(24px, 3.5vw, 34px); line-height: 1.4; color: var(--olive-dark); }
.story-quote .attribution { margin-top: 22px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--sage); }

.story-cta { text-align: center; padding: var(--section-pad) 0; }
.story-cta .eyebrow { justify-content: center; }
.story-cta h2 { font-size: clamp(28px, 4vw, 42px); margin-top: 10px; }
.story-cta .btn { margin-top: 28px; }

/* ═══════════════════ GALLERY PAGE ═══════════════════ */

.gallery-filters { display: flex; justify-content: center; gap: 10px; margin-top: 32px; flex-wrap: wrap; }

.gallery-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (min-width: 640px) { .gallery-grid { gap: 16px; } }
@media (min-width: 760px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gallery-item {
  display: block; width: 100%; padding: 0; border: none; background: none; cursor: pointer;
  border-radius: 6px; overflow: hidden; position: relative;
}
.gallery-item[data-span="2"] { grid-column: span 2; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease); }
.gallery-item:hover img { transform: scale(1.035); }
.gallery-item:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }
.gallery-item.ar-landscape { aspect-ratio: 3/2; }
.gallery-item.ar-square { aspect-ratio: 1/1; }
.gallery-item.ar-portrait { aspect-ratio: 4/5; }
.gallery-item.filtered-out { display: none; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20,21,12,0.94);
  visibility: hidden; opacity: 0;
  transition: opacity 0.2s var(--ease), visibility 0s linear 0.2s;
}
.lightbox.open { visibility: visible; opacity: 1; transition: opacity 0.2s var(--ease); }
.lightbox-fig { max-width: min(92vw, 1100px); max-height: 84vh; margin: 0 auto; text-align: center; }
.lightbox-fig img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 4px; }
.lightbox-caption { margin-top: 14px; color: var(--sand); font-size: 13px; max-width: 60ch; margin-left: auto; margin-right: auto; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; background: rgba(244,234,226,0.1); border: 1px solid rgba(244,234,226,0.35);
  color: var(--ivory); border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover { background: rgba(244,234,226,0.2); }
.lightbox-close { top: 20px; right: 20px; width: 44px; height: 44px; }
.lightbox-close svg { width: 18px; height: 18px; }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox-prev svg, .lightbox-next svg { width: 20px; height: 20px; }
@media (min-width: 760px) { .lightbox-prev { left: 28px; } .lightbox-next { right: 28px; } }

/* ═══════════════════ CONTACT PAGE ═══════════════════ */

.contact-grid { display: grid; gap: 56px; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; align-items: start; } }

.contact-block { margin-bottom: 36px; }
.contact-block:last-child { margin-bottom: 0; }
.contact-block h3 { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); margin-bottom: 12px; }
.contact-block .value { font-size: 17px; }
.contact-block .value + .value { margin-top: 4px; }

.getting-here-list dt { font-size: 13px; font-weight: 700; color: var(--olive-dark); margin-top: 14px; }
.getting-here-list dt:first-child { margin-top: 0; }
.getting-here-list dd { font-size: 14px; color: var(--sage); margin-top: 2px; }

.social-row { display: flex; gap: 12px; }
.social-row a {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--sage-line); border-radius: var(--r-pill); padding: 8px 16px;
  color: var(--olive-dark);
}
.social-row a:hover { border-color: var(--olive-dark); }

.contact-map { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--sage-line); aspect-ratio: 4/3; margin-top: 8px; }
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.contact-map-link { margin-top: 10px; display: inline-block; }

/* form */
.contact-form-panel { background: var(--white); border: 1px solid var(--sage-line); border-radius: var(--r-card); padding: 28px 22px; }
@media (min-width: 640px) { .contact-form-panel { padding: 40px; } }
.contact-form-panel .eyebrow { margin-bottom: 8px; }
.contact-form-panel h2 { font-size: clamp(22px, 3vw, 28px); margin-bottom: 6px; }
.form-note { font-size: 13px; color: var(--sage); margin-bottom: 24px; }

.field { margin-bottom: 20px; }
.field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--olive-dark); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--olive-dark);
  background: var(--ivory); border: 1.5px solid var(--sage-line); border-radius: 10px;
  padding: 13px 15px; transition: border-color 0.15s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--burgundy);
}
.field textarea { resize: vertical; min-height: 120px; }
.field-error { font-size: 12px; color: var(--burgundy); margin-top: 6px; display: none; }
.field.has-error input, .field.has-error textarea { border-color: var(--burgundy); }
.field.has-error .field-error { display: block; }

.form-submit-row { margin-top: 4px; }
.form-privacy { font-size: 12px; color: var(--sage); margin-top: 16px; }
.form-privacy a { color: var(--sage); text-decoration: underline; }

.form-status {
  display: none; margin-top: 18px; padding: 14px 16px; border-radius: 8px;
  background: var(--ivory); border: 1px solid var(--sage-line); font-size: 14px;
}
.form-status.show { display: block; }

.contact-direct-cta { text-align: center; padding: var(--section-pad) 0; }
.contact-direct-cta h2 { font-size: clamp(24px, 3.5vw, 34px); margin: 10px 0 24px; }

/* ═══════════════════ BOOKING PAGE ═══════════════════ */

.booking-panel {
  max-width: 680px; margin: 0 auto; background: var(--white);
  border: 1px solid var(--sage-line); border-radius: 20px;
  padding: 8px 20px 28px;
  box-shadow: 0 18px 50px -28px rgba(53, 58, 32, 0.30);
}
@media (min-width: 640px) { .booking-panel { padding: 12px 44px 44px; } }

/* honest intro line at the top of the panel */
.booking-summary-note {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 13.5px; line-height: 1.55; color: var(--olive-dark);
  padding: 20px 0 4px; margin-bottom: 8px;
}
.booking-summary-note::before {
  content: ''; flex: none; width: 6px; align-self: stretch;
  border-radius: 999px; background: var(--sand);
}

/* each step is a clean band separated by a hairline — no boxy fieldset borders */
.booking-section { border: 0; padding: 26px 0; border-top: 1px solid var(--sage-line); scroll-margin-top: 88px; }
.booking-section:first-of-type { padding-top: 18px; border-top: none; }
.time-block { scroll-margin-top: 88px; }
/* brief highlight when the flow auto-advances to a step */
@keyframes bkStepPulse { 0% { background: rgba(232, 211, 188, 0.45); } 100% { background: transparent; } }
@media (prefers-reduced-motion: no-preference) {
  .booking-section.bk-active { animation: bkStepPulse 1.1s var(--ease); border-radius: 12px; }
}
.booking-step { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.booking-step-num {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--olive-dark); color: var(--ivory);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
}
.booking-step-label { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--olive-dark); }
.booking-step-opt { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--sage); letter-spacing: 0.02em; }

/* guest count — even grid of rounded buttons */
.guest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (min-width: 480px) { .guest-grid { grid-template-columns: repeat(8, 1fr); } }
.guest-btn {
  min-height: 54px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 17px; font-weight: 600;
  border-radius: 12px; border: 1.5px solid var(--sage-line);
  background: var(--ivory); color: var(--olive-dark); cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.1s var(--ease);
}
.guest-btn:active { transform: scale(0.96); }
.guest-btn[aria-pressed="true"] { background: var(--burgundy); border-color: var(--burgundy); color: var(--white); }
.guest-btn:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }
.guest-btn-large {
  grid-column: 1 / -1; min-height: 50px; margin-top: 8px;
  font-size: 14px; font-weight: 600; gap: 8px;
}

.large-note, .advisory-note {
  font-size: 13px; line-height: 1.55; color: var(--sage); background: var(--ivory);
  border-radius: 10px; padding: 12px 14px; margin-top: 12px;
}
.advisory-note { border: 1px dashed var(--sage-line); }
.large-count-field { margin-top: 14px; display: none; max-width: 240px; }
.large-count-field.show { display: block; }
.large-count-field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--olive-dark); margin-bottom: 8px; }
.large-count-field input {
  width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--olive-dark);
  background: var(--ivory); border: 1.5px solid var(--sage-line); border-radius: 10px; padding: 13px 15px; min-height: 52px;
}
.large-count-field input:focus { outline: none; border-color: var(--burgundy); }

/* kill default fieldset margin/no extra spacing in datetime grid */
.booking-datetime .field { margin-bottom: 0; }

/* date + time */
.booking-datetime { display: grid; gap: 22px; }
.date-block label, .time-block .time-block-label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--olive-dark); margin-bottom: 8px;
}
input[type="date"].date-input {
  /* appearance:none + min-width:0 stop iOS from sizing the field to its content
     and overflowing the container — the field now honours width:100%. */
  -webkit-appearance: none; appearance: none;
  width: 100%; min-width: 0; box-sizing: border-box;
  font-family: var(--font-body); font-size: 16px; line-height: 1.2; color: var(--olive-dark);
  background-color: var(--ivory);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23898867' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  border: 1.5px solid var(--sage-line); border-radius: 10px;
  padding: 14px 46px 14px 16px; min-height: 52px;
  text-align: left; transition: border-color 0.15s var(--ease);
}
/* iOS centres the date value by default — pin it left to match every other field */
input[type="date"].date-input::-webkit-date-and-time-value { text-align: left; }
/* our own calendar icon is drawn via background-image; hide the native glyph */
input[type="date"].date-input::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
input[type="date"].date-input:focus { outline: none; border-color: var(--burgundy); }
.field.has-error input[type="date"].date-input { border-color: var(--burgundy); }

.time-group + .time-group { margin-top: 16px; }
.time-group-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sage); margin-bottom: 10px; }
.time-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (min-width: 480px) { .time-chips { grid-template-columns: repeat(5, 1fr); } }
.time-chip {
  min-height: 46px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  border-radius: 10px; border: 1.5px solid var(--sage-line);
  background: var(--ivory); color: var(--olive-dark); cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.1s var(--ease);
}
.time-chip:active { transform: scale(0.96); }
.time-chip[aria-pressed="true"] { background: var(--burgundy); border-color: var(--burgundy); color: var(--white); }
.time-chip:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }

/* seating cards */
.area-cards { display: grid; gap: 10px; }
@media (min-width: 560px) { .area-cards { grid-template-columns: 1fr 1fr; } }
.area-card {
  text-align: left; cursor: pointer; border: 1.5px solid var(--sage-line); border-radius: 12px;
  background: var(--ivory); padding: 15px 16px; transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.area-card[aria-pressed="true"] { border-color: var(--burgundy); background: var(--white); box-shadow: inset 0 0 0 1px var(--burgundy); }
.area-card:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }
.area-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.area-card-name { font-family: var(--font-display); font-size: 16px; color: var(--olive-dark); }
.area-card-tag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: var(--sage);
  border: 1px solid var(--sage-line); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.area-card-desc { font-size: 13px; line-height: 1.5; color: var(--sage); margin-top: 5px; }
.area-card.is-disabled { cursor: not-allowed; opacity: 0.55; }
.area-card.is-disabled .area-card-desc { color: var(--burgundy); }
.area-card-tag-recommend { background: var(--olive-dark); color: var(--ivory); border-color: var(--olive-dark); }

.booking-accessible-field { margin-top: 4px; margin-bottom: 20px; }

/* select styling within booking (occasion) */
.booking-section select {
  width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--olive-dark);
  background: var(--ivory); border: 1.5px solid var(--sage-line); border-radius: 10px;
  padding: 14px 16px; min-height: 52px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23898867' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.booking-section select:focus { outline: none; border-color: var(--burgundy); }

.checkbox-field { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.checkbox-field input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--burgundy); }
.checkbox-field label { font-size: 13px; line-height: 1.5; color: var(--sage); }

.form-submit-row .btn { width: 100%; justify-content: center; padding-top: 16px; padding-bottom: 16px; }
@media (min-width: 560px) { .form-submit-row .btn { width: auto; } }

.booking-info-grid { display: grid; gap: 32px; margin-top: 8px; }
@media (min-width: 760px) { .booking-info-grid { grid-template-columns: repeat(2, 1fr); } }

/* time slots the availability check reports as full — disabled + aria-label
   carry the real meaning, the strikethrough is only a supporting visual cue */
.time-chip:disabled {
  opacity: 0.4; cursor: not-allowed; text-decoration: line-through;
}
.time-chip:disabled:active { transform: none; }

/* advisory note goes from neutral to "call us" / "team will confirm" once
   date, time and guest count are all known (see updateAdvisory() in main.js) */
.advisory-note.advisory-call { border-style: solid; border-color: var(--burgundy); color: var(--burgundy); }
.advisory-note.advisory-pending { border-style: solid; border-color: var(--sand); }

/* submit button while the request is in flight */
.form-submit-row .btn.is-loading { opacity: 0.7; cursor: progress; }

/* outcome panel shown in #bk-status after a real submit */
.booking-outcome-title { font-family: var(--font-display); font-size: 19px; color: var(--olive-dark); margin-bottom: 6px; }
.booking-outcome-ref { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--burgundy); margin-bottom: 10px; }
.booking-outcome-summary { font-size: 13px; color: var(--sage); margin-bottom: 10px; }
.form-status.bk-status-call_direct .booking-outcome-title,
.form-status.bk-status-error .booking-outcome-title { color: var(--burgundy); }
.form-status.bk-status-call_direct .btn { margin-top: 8px; }

/* ─── BOOKING TYPES ───────────────────────────────────────────────────────
   Three flows through one form. main.js toggles [hidden] on anything with a
   data-bk-types attribute; this rule has to win against component rules that
   set display themselves (.large-count-field.show, .menu-empty-note.show),
   which is why it's !important and lives at the end of the file. */
[hidden] { display: none !important; }

.type-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 760px) { .type-cards { grid-template-columns: repeat(3, 1fr); } }
.type-card {
  display: flex; flex-direction: column; gap: 6px;
  text-align: left;
  padding: 18px 18px 20px;
  background: var(--white);
  border: 1px solid var(--sage-line);
  border-radius: var(--r-card);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.type-card:hover { border-color: var(--sage); }
.type-card[aria-pressed="true"] { border-color: var(--burgundy); box-shadow: inset 0 0 0 1px var(--burgundy); background: var(--ivory); }
.type-card:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }
.type-card-name { font-family: var(--font-display); font-size: 19px; line-height: 1.2; color: var(--olive-dark); }
.type-card-size {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--burgundy);
}
.type-card-desc { font-size: 13.5px; line-height: 1.5; color: var(--sage); }
.type-note {
  margin-top: 14px; padding: 10px 14px;
  background: var(--sand);
  border-radius: 10px;
  font-size: 13px; color: var(--olive-dark);
}

/* Guest counts the chosen type can't take. Disabled + faded, never removed —
   a count that vanishes reads as a rendering bug, one that's greyed out reads
   as an answer. */
.guest-btn.is-disabled, .guest-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.guest-btn.is-disabled:active, .guest-btn:disabled:active { transform: none; }

/* Standard booking + 9 or more: offer the events flow rather than dead-end. */
.guest-nudge {
  margin-top: 14px; padding: 16px 18px;
  background: var(--sand);
  border: 1px solid var(--sage-line);
  border-radius: var(--r-card);
}
.guest-nudge p { font-size: 14px; color: var(--olive-dark); margin-bottom: 12px; }
.guest-nudge .btn { margin-top: 0; }

/* Quick picks for events, where a 1–40 button grid would be absurd. */
.guest-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.guest-quick-btn {
  min-width: 56px; min-height: 44px;
  padding: 0 14px;
  font-family: var(--font-display); font-size: 16px;
  background: var(--white); color: var(--olive-dark);
  border: 1px solid var(--sage-line); border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.guest-quick-btn:hover { border-color: var(--sage); }
.guest-quick-btn.is-on { background: var(--burgundy); border-color: var(--burgundy); color: var(--white); }
.guest-quick-btn:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }
.guest-quick + .large-count-field { margin-top: 16px; }

.time-preference-note { margin-top: 14px; font-size: 12.5px; font-style: italic; color: var(--sage); }

/* An event's room is upstairs — say so when someone has asked for step-free
   seating, rather than letting them find out on the night. */
.accessible-note {
  margin: 10px 0 20px;
  padding: 10px 14px;
  background: var(--sand);
  border-radius: 10px;
  font-size: 13px; line-height: 1.55; color: var(--olive-dark);
}

.birthday-label { display: block; font-size: 13px; font-weight: 600; color: var(--olive-dark); margin-bottom: 8px; }
.birthday-selects { display: flex; gap: 10px; }
.birthday-selects select { flex: 1 1 0; min-width: 0; }
@media (min-width: 520px) { .birthday-selects { max-width: 340px; } }

/* The event-type step has no .field wrapper, so its error hangs off the
   section — same red-text convention as .field.has-error. */
.booking-section.has-error > .field-error { display: block; }

/* Two text links side by side under a page hero — .btn-link is inline-flex,
   so without a flex parent they butt straight up against each other. */
.hero-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 18px; }
.hero-links .btn-link { margin-top: 0; }

/* ─── COOKIE CONSENT ───
   Renders only when something has actually registered a purpose with
   consent.js — today nothing has, so none of this is on screen. Kept in the
   main stylesheet rather than loaded separately so the banner can never paint
   unstyled on first view. */
.consent-root {
  position: fixed; inset: auto 0 0 0;
  z-index: 300;
  padding: 16px;
  display: flex; justify-content: center;
}
.consent-panel {
  width: 100%; max-width: 560px;
  background: var(--ivory);
  border: 1px solid var(--sage-line);
  border-radius: var(--r-card);
  box-shadow: 0 8px 40px rgba(30, 32, 18, 0.22);
  padding: 20px 22px;
}
.consent-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sage);
}
.consent-body { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--olive-dark); }
.consent-body a { color: var(--burgundy); text-decoration: underline; }
.consent-rows { margin-top: 16px; border-top: 1px solid var(--sage-line); }
.consent-row { padding: 12px 0; border-bottom: 1px solid var(--sage-line); }
.consent-row-label {
  display: flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; color: var(--olive-dark);
  cursor: pointer;
}
.consent-row-label input[disabled] { cursor: not-allowed; opacity: 0.6; }
.consent-row-note { margin-top: 5px; padding-left: 24px; font-size: 12.5px; line-height: 1.5; color: var(--sage); }
/* Accept and reject share one row and one button size — a reject that is
   smaller or quieter than accept is not freely given consent. */
.consent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.consent-actions .btn { margin-top: 0; flex: 1 1 auto; min-width: 140px; }
/* Both choices carry the same weight; neither is styled as the expected one. */
.consent-choice { border-color: var(--olive-dark); color: var(--olive-dark); }
.consent-choice:hover { background: var(--olive-dark); color: var(--ivory); border-color: var(--olive-dark); }
.consent-link {
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sage); padding: 10px 4px;
}
.consent-link:hover { color: var(--burgundy); }
/* The hidden state lives on this wrapper, not on the <a>s themselves: the
   anchors carry data-i18n-bg/en, and html[lang="en"] [data-i18n-en] has higher
   specificity than [hidden] — so a hidden anchor still rendered in English.
   The wrapper has no i18n attribute, so [hidden] applies cleanly. The
   separator rides along with it, leaving no stray bullet. */
.footer-bottom .consent-footer::before { content: ' · '; }
@media (min-width: 560px) { .consent-actions .btn { flex: 0 1 auto; } }