/* ===========================
   Focaccia Restaurant — bespoke design system
   Built for this client specifically (not the generic local-services template).
   Register: brand. Strategy: light neutral base + one committed dark-umber/gold
   band for the menu, mirroring the restaurant's own real Instagram menu-card look.
   =========================== */

:root {
  /* Neutral base — true light neutral, not a cream/sand tint */
  --bg: oklch(98% 0.002 90);
  --bg-alt: oklch(95.5% 0.004 85);
  --surface: oklch(100% 0 0);
  --ink: oklch(21% 0.02 60);
  --ink-muted: oklch(40% 0.018 60);
  --border: oklch(89% 0.006 80);

  /* Brand gold (from the client's real Instagram/menu branding, #B08D57) */
  --gold: oklch(66% 0.10 75);
  --gold-dark: oklch(46% 0.09 68);
  --gold-light: oklch(85% 0.05 78);
  --ink-on-gold: oklch(18% 0.02 60);

  /* Committed dark-umber band — mirrors the client's own dark/gold IG menu cards */
  --umber: oklch(19% 0.028 55);
  --umber-alt: oklch(24% 0.032 55);
  --cream: oklch(93% 0.025 80);
  --cream-muted: oklch(74% 0.04 75);

  /* Status colors — form validation feedback */
  --error-bg: oklch(92% 0.05 25);
  --error-ink: oklch(35% 0.1 25);
  --success-bg: oklch(92% 0.06 145);
  --success-ink: oklch(32% 0.1 145);

  --radius: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow: 0 24px 60px -28px oklch(20% 0.02 60 / 0.4);
  --shadow-sm: 0 8px 24px -12px oklch(20% 0.02 60 / 0.25);
  --container: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Figtree', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-chalk: 'Permanent Marker', cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { margin: 0 0 1em; color: var(--ink-muted); max-width: 62ch; }
p.lede { max-width: 52ch; }

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

.chalk {
  font-family: var(--font-chalk);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--gold-dark);
  display: inline-block;
  transform: rotate(-1.2deg);
}
section.dark .chalk { color: var(--gold-light); }

/* ===== Utility bar ===== */
.utility-bar {
  background: var(--umber);
  color: var(--cream-muted);
  font-size: 0.8125rem;
  padding: 8px 0;
}
.utility-bar .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.utility-bar a { color: var(--cream); }
.utility-bar a:hover { color: var(--gold-light); }
.utility-item { display: inline-flex; align-items: center; gap: 6px; }
.utility-item svg { width: 14px; height: 14px; flex: none; }
.utility-list { display: flex; gap: 20px; flex-wrap: wrap; }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklch, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; gap: 24px; }
.logo-mark { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; color: var(--ink); }
.logo-mark img { display: block; }
.logo-mark img.logo-full { height: 34px; width: auto; }
.logo-mark img.logo-icon { height: 30px; width: auto; flex: none; }
.main-nav { display: flex; align-items: center; gap: 32px; }
.main-nav a { font-size: 0.9375rem; font-weight: 600; color: var(--ink-muted); transition: color 0.2s var(--ease); }
.main-nav a:hover, .main-nav a.active { color: var(--ink); }
.header-actions { display: flex; align-items: center; gap: 16px; }
.lang-switch-group { display: flex; gap: 6px; font-size: 0.75rem; font-weight: 700; }
.lang-switch-group a { padding: 4px 8px; border-radius: var(--radius-pill); border: 1px solid var(--border); color: var(--ink-muted); }
.lang-switch-group a.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.nav-toggle { display: none; background: none; border: none; padding: 10px; cursor: pointer; }
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle svg line { transform-box: fill-box; transition: transform 0.3s var(--ease), opacity 0.2s var(--ease); }
.nav-toggle svg line:nth-child(1) { transform-origin: 50% 0%; }
.nav-toggle svg line:nth-child(3) { transform-origin: 50% 100%; }
.site-header.nav-open .nav-toggle svg line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header.nav-open .nav-toggle svg line:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle svg line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-panel { display: none; }

/* ===== Focus states ===== */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold-dark); outline-offset: 3px;
}
.btn:focus-visible, .whatsapp-float:focus-visible, .carousel-btn:focus-visible { outline-offset: 2px; }
section.dark a:focus-visible, section.dark button:focus-visible, section.dark summary:focus-visible,
.hero a:focus-visible, .hero button:focus-visible { outline-color: var(--gold-light); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 0.9375rem; white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.2s var(--ease);
  border: 1.5px solid transparent; cursor: pointer;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--gold); color: var(--ink-on-gold); box-shadow: var(--shadow-sm); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-outline { background: transparent; border-color: color-mix(in oklch, var(--ink) 40%, transparent); color: var(--ink); }
.btn-outline:hover { border-color: var(--ink); }
section.dark .btn-outline, .hero .btn-outline {
  border-color: color-mix(in oklch, var(--cream) 45%, transparent); color: var(--cream);
}
section.dark .btn-outline:hover, .hero .btn-outline:hover { border-color: var(--cream); background: color-mix(in oklch, var(--cream) 10%, transparent); }
.btn-ghost { background: none; padding: 8px 4px; color: var(--ink-muted); font-weight: 600; }
.btn-ghost:hover { color: var(--ink); }
.btn-lg { padding: 16px 32px; font-size: 1rem; }

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex; align-items: flex-end;
  color: var(--cream);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, oklch(12% 0.02 55 / 0.88) 0%, oklch(12% 0.02 55 / 0.55) 45%, oklch(12% 0.02 55 / 0.15) 75%),
              linear-gradient(0deg, oklch(10% 0.02 55 / 0.75) 0%, transparent 40%);
}
.hero-inner { position: relative; z-index: 1; padding-bottom: clamp(48px, 8vw, 96px); padding-top: 120px; }
.hero-content { max-width: 680px; }
.hero-logo-wrap { display: block; text-align: center; margin-bottom: 40px; }
.hero-logo {
  display: inline-block;
  filter:
    drop-shadow(0 0 14px oklch(97% 0.03 85 / 0.95))
    drop-shadow(0 0 34px oklch(97% 0.03 85 / 0.75))
    drop-shadow(0 0 72px oklch(97% 0.03 85 / 0.55));
}
.hero-logo-full { width: clamp(280px, 34vw, 520px); height: auto; }
.hero-logo-icon { height: 110px; width: auto; }
/* consistent icon + text wordmark lockup (all languages) */
.hero-wordmark { display: inline-flex; align-items: center; gap: clamp(12px, 1.8vw, 20px); }
.hero-wordmark-icon {
  height: clamp(62px, 9vw, 96px); width: auto; flex-shrink: 0;
  filter: drop-shadow(0 0 14px oklch(97% 0.03 85 / 0.9)) drop-shadow(0 0 34px oklch(97% 0.03 85 / 0.6));
}
.hero-wordmark-text {
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  font-size: clamp(2.7rem, 7vw, 4.8rem); letter-spacing: -0.02em; color: var(--cream);
  text-shadow: 0 0 18px oklch(97% 0.03 85 / 0.5), 0 0 46px oklch(97% 0.03 85 / 0.32);
}
[dir="rtl"] .hero-wordmark-text { font-family: var(--font-display-rtl, var(--font-display)); letter-spacing: 0; }
.hero-title {
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  color: var(--cream);
  margin-bottom: 0.3em;
}
.hero-title .chalk { font-size: 1.05em; }
.hero-sub { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--cream-muted); max-width: 46ch; margin-bottom: 2em; }
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 2.5em; }
.hero-facts { display: flex; gap: clamp(20px, 4vw, 48px); flex-wrap: wrap; }
.hero-fact { display: flex; align-items: center; gap: 10px; font-size: 0.9375rem; color: var(--cream); font-weight: 600; }
.hero-fact svg { width: 20px; height: 20px; color: var(--gold-light); flex: none; }
.hero-fact .stars { color: var(--gold-light); }

/* ===== Generic section scaffolding ===== */
.section { padding: clamp(72px, 10vw, 128px) 0; }
.section.dark { background: var(--umber); color: var(--cream); }
.section.dark .section-title { color: var(--cream); }
.section.dark p { color: var(--cream-muted); }
.section.alt { background: var(--bg-alt); }
.section-head { max-width: 640px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-title { font-size: clamp(2rem, 3.4vw, 3rem); }
.section-head p { font-size: 1.0625rem; }

/* ===== Menu (old-school premium menu card) ===== */
.menu-ornament {
  display: flex; align-items: center; gap: 14px; margin: 4px 0 32px;
  color: color-mix(in oklch, var(--gold-light) 65%, transparent);
}
.menu-ornament::before, .menu-ornament::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
}
.menu-ornament span { font-size: 1.05rem; transform: rotate(45deg); display: inline-block; line-height: 1; }

.menu-card {
  position: relative;
  background:
    radial-gradient(ellipse 120% 90% at 28% 0%, color-mix(in oklch, white 35%, transparent), transparent 60%),
    repeating-linear-gradient(128deg, transparent 0 3px, color-mix(in oklch, black 4%, transparent) 3px 4px),
    var(--cream);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 56px) clamp(24px, 6vw, 64px);
  box-shadow: 0 56px 110px -44px oklch(4% 0.02 55 / 0.65), 0 1px 0 color-mix(in oklch, white 60%, transparent) inset;
  outline: 1px solid color-mix(in oklch, var(--gold-dark) 35%, transparent);
  outline-offset: -12px;
  transform: rotate(-0.35deg);
}
.menu-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(32px, 5vw, 64px);
}
.menu-columns > div { min-width: 0; }
.menu-category-label {
  font-family: var(--font-chalk); font-size: 1.5rem; color: var(--gold-dark); margin-bottom: 4px;
  transform: rotate(-1deg); display: inline-block;
  text-shadow: 0 1px 0 color-mix(in oklch, white 50%, transparent);
}
.menu-category-sub { font-size: 0.8125rem; color: var(--ink-muted); margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.menu-row { padding: 16px 0; border-bottom: 1px solid color-mix(in oklch, var(--ink) 12%, transparent); }
.menu-row-top { display: flex; align-items: baseline; gap: 10px; }
.menu-columns > div:first-child .menu-row:first-of-type { padding-top: 0; }
.menu-row:last-child { border-bottom: none; }
.menu-item-name { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--ink); min-width: 0; }
.menu-dots { flex: 1; min-width: 16px; align-self: flex-end; border-bottom: 2px dotted color-mix(in oklch, var(--ink) 28%, transparent); margin-bottom: 5px; }
.menu-item-desc { font-size: 0.875rem; color: var(--ink-muted); margin-top: 4px; max-width: 34ch; }
.menu-item-price {
  font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--gold-dark); white-space: nowrap;
  text-shadow: 0 1px 0 color-mix(in oklch, white 50%, transparent);
}
.menu-note { margin-top: 40px; padding-top: 28px; border-top: 1px solid color-mix(in oklch, var(--ink) 12%, transparent); font-size: 0.9375rem; color: var(--ink-muted); }
@media (max-width: 480px) {
  .menu-dots { display: none; }
  .menu-row-top { justify-content: space-between; flex-wrap: wrap; }
}

/* ===== Full menu page ===== */
.menu-page-hero { padding: clamp(48px, 8vw, 96px) 0 clamp(24px, 4vw, 40px); text-align: center; }
.menu-page-hero .chalk { font-size: clamp(1.4rem, 4vw, 2rem); color: var(--gold-dark); display: inline-block; transform: rotate(-1.2deg); margin-bottom: 4px; }
.menu-page-hero h1 { font-size: clamp(2.4rem, 7vw, 4rem); margin: 4px 0 14px; }
.menu-page-hero p { max-width: 56ch; margin: 0 auto; color: var(--ink-muted); }
.menu-page-hero .menu-page-meta { margin-top: 18px; display: inline-flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; font-size: 0.9rem; font-weight: 600; color: var(--gold-dark); }
.menu-group { margin-top: clamp(40px, 6vw, 64px); }
.menu-group:first-of-type { margin-top: 0; }
.menu-group > .menu-category-label { font-size: clamp(1.7rem, 4.5vw, 2.15rem); margin-bottom: 2px; }
.menu-group > .menu-category-sub { margin-bottom: 22px; }
.menu-items-grid { columns: 2; column-gap: clamp(36px, 5vw, 72px); }
.menu-items-grid .menu-row { break-inside: avoid; }
.menu-items-grid .menu-row:first-child { padding-top: 0; }
@media (max-width: 680px) { .menu-items-grid { columns: 1; } }

/* ===== Menu book (flip-through) ===== */
.menu-book-wrap { padding: clamp(28px, 5vw, 60px) 0 clamp(40px, 6vw, 72px); }
.menu-book-head { text-align: center; margin-bottom: clamp(22px, 4vw, 38px); }
.menu-book-head .chalk { color: var(--gold-light); font-size: clamp(1.2rem, 3.5vw, 1.65rem); display: inline-block; transform: rotate(-1.4deg); }
.menu-book-head h1 { color: var(--cream); font-size: clamp(2rem, 6vw, 3.1rem); margin-top: 2px; }
.menu-book-head p { color: var(--cream-muted); margin-top: 8px; font-size: 0.95rem; }

.menu-book-stage { perspective: 2800px; perspective-origin: 50% 42%; display: flex; justify-content: center; }
.menu-book { position: relative; width: min(90vw, 460px); height: min(74vh, 660px); transform-style: preserve-3d; transition: width 0.6s cubic-bezier(0.16, 0.84, 0.3, 1); }
.menu-book.is-open { width: min(94vw, 900px); }
/* stacked-paper edge under the book */
.menu-book::after {
  content: ""; position: absolute; z-index: 0; left: 6px; right: -6px; top: 8px; bottom: -6px;
  border-radius: 6px 16px 16px 6px;
  background: repeating-linear-gradient(90deg, color-mix(in oklch, var(--cream) 88%, black) 0 2px, var(--cream) 2px 5px);
  box-shadow: 0 40px 80px -34px oklch(3% 0.02 55 / 0.8);
}

.book-page { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(0.16, 0.84, 0.3, 1); will-change: transform; }
.book-page.flipped { transform: rotateY(-179deg); }

.face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 5px 15px 15px 5px; overflow: hidden;
  box-shadow: 0 26px 64px -30px oklch(4% 0.02 55 / 0.7);
}
.face.back { transform: rotateY(180deg); }
/* spine gradient on inner edge of each page */
.face::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, oklch(20% 0.02 55 / 0.16), transparent); }

.face-paper {
  background:
    radial-gradient(ellipse 130% 80% at 30% 0%, color-mix(in oklch, white 40%, transparent), transparent 62%),
    repeating-linear-gradient(128deg, transparent 0 3px, color-mix(in oklch, black 3.5%, transparent) 3px 4px),
    var(--cream);
}
.book-face-inner { position: absolute; inset: 0; padding: clamp(24px, 5vw, 38px) clamp(22px, 5vw, 34px) clamp(46px, 6vw, 56px); overflow-y: auto; }
.book-face-inner::-webkit-scrollbar { width: 0; }
.book-face-inner { scrollbar-width: none; }

/* two-page spread: open book shows a left + right page side by side */
.face.spread { display: flex; }
.spread-half { position: relative; flex: 1 1 50%; min-width: 0; overflow: hidden; }
.spread-half.paper {
  background:
    radial-gradient(ellipse 130% 80% at 30% 0%, color-mix(in oklch, white 40%, transparent), transparent 62%),
    repeating-linear-gradient(128deg, transparent 0 3px, color-mix(in oklch, black 3.5%, transparent) 3px 4px),
    var(--cream);
}
.spread-half + .spread-half { border-left: 1px solid color-mix(in oklch, black 10%, transparent); }
.face.spread::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 26px; margin-left: -13px; z-index: 5; pointer-events: none;
  background: linear-gradient(90deg, transparent, oklch(10% 0.02 55 / 0.18) 50%, transparent);
}
.spread-half.cover-mini {
  background: radial-gradient(ellipse 120% 70% at 50% 8%, color-mix(in oklch, var(--gold) 22%, transparent), transparent 60%), var(--umber);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 24px 20px; color: var(--cream); gap: 10px;
}
.spread-half.cover-mini img { width: clamp(48px, 28%, 68px); }
.spread-half.cover-mini .chalk { color: var(--gold-light); font-size: 1.05rem; }
.spread-half.cover-mini p { color: var(--cream-muted); font-size: 0.78rem; max-width: 22ch; margin: 0; }
.spread-half.cover-mini .btn { font-size: 0.82rem; padding: 9px 16px; }
@media (max-width: 640px) {
  .face.spread, [dir="rtl"] .face.spread { flex-direction: column; }
  .spread-half + .spread-half { border-left: 0; border-top: 1px solid color-mix(in oklch, black 10%, transparent); }
  .face.spread::after {
    left: 0; right: 0; top: 50%; bottom: auto; width: auto; height: 26px; margin-left: 0; margin-top: -13px;
    background: linear-gradient(180deg, transparent, oklch(10% 0.02 55 / 0.18) 50%, transparent);
  }
}

/* compact menu styling inside book pages */
.book-face-inner .menu-category-label { font-size: 1.45rem; margin-bottom: 2px; }
.book-face-inner .menu-category-sub { margin-bottom: 12px; font-size: 0.72rem; }
.book-face-inner .menu-group + .menu-group { margin-top: 22px; }
.book-face-inner .menu-row { padding: 8px 0; }
.book-face-inner .menu-item-name, .book-face-inner .menu-item-price { font-size: 0.97rem; }
.book-face-inner .menu-item-desc { font-size: 0.775rem; max-width: none; margin-top: 2px; line-height: 1.45; }
.book-face-inner .menu-dots { margin-bottom: 4px; }

/* page footer flourish */
.book-page-no { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark); font-weight: 600; z-index: 4; }

/* cover + back faces (umber) */
.face-cover { background:
    radial-gradient(ellipse 120% 70% at 50% 8%, color-mix(in oklch, var(--gold) 22%, transparent), transparent 60%),
    var(--umber);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 40px 30px; color: var(--cream); gap: 14px; }
.face-cover::after { content: ""; position: absolute; inset: 16px; border: 1px solid color-mix(in oklch, var(--gold) 42%, transparent); border-radius: 4px 12px 12px 4px; pointer-events: none; }
.face-cover img { width: clamp(140px, 40%, 200px); position: relative; z-index: 1; }
.face-cover .cover-word { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.32em; font-size: 1.1rem; color: var(--gold-light); text-indent: 0.32em; }
.face-cover .chalk { color: var(--gold-light); font-size: 1.5rem; transform: rotate(-2deg); }
.face-cover .cover-hint { position: absolute; bottom: 26px; left: 0; right: 0; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-muted); animation: coverHintPulse 2.4s ease-in-out infinite; }
@keyframes coverHintPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* book navigation controls */
.book-nav { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: clamp(22px, 4vw, 32px); }
.book-nav button {
  width: 52px; height: 52px; border-radius: 999px; border: 1px solid color-mix(in oklch, var(--gold) 45%, transparent);
  background: color-mix(in oklch, var(--gold) 12%, transparent); color: var(--cream); cursor: pointer;
  display: grid; place-items: center; transition: transform 0.2s, background 0.2s, opacity 0.2s;
}
.book-nav button:hover:not(:disabled) { background: var(--gold); color: var(--ink-on-gold); transform: translateY(-2px); }
.book-nav button:disabled { opacity: 0.3; cursor: default; }
.book-nav button svg { width: 22px; height: 22px; }
.book-progress { min-width: 128px; text-align: center; color: var(--cream); font-weight: 600; font-size: 0.9rem; }
.book-progress small { display: block; color: var(--gold-light); font-size: 0.74rem; letter-spacing: 0.06em; margin-top: 2px; font-weight: 500; }

/* invisible click zones for turning */
.book-tap { position: absolute; top: 0; bottom: 0; width: 44%; z-index: 6; cursor: pointer; background: transparent; border: 0; padding: 0; }
.book-tap.prev { left: 0; }
.book-tap.next { right: 0; width: 56%; }

@media (prefers-reduced-motion: reduce) {
  .book-page { transition: transform 0.001s; }
  .face-cover .cover-hint { animation: none; }
}

/* RTL book: spine on the right, pages turn to the right */
[dir="rtl"] .book-page { transform-origin: right center; }
[dir="rtl"] .book-page.flipped { transform: rotateY(179deg); }
[dir="rtl"] .face { border-radius: 15px 5px 5px 15px; }
[dir="rtl"] .face::before { left: auto; right: 0; background: linear-gradient(270deg, oklch(20% 0.02 55 / 0.16), transparent); }
[dir="rtl"] .face-cover::after { border-radius: 12px 4px 4px 12px; }
[dir="rtl"] .menu-book::after { left: -6px; right: 6px; border-radius: 15px 5px 5px 15px; }

/* ===== Events / private hosting ===== */
.events-tagline { font-size: 1.65rem; margin-top: 6px; transform: rotate(-1deg); display: inline-block; }
.events-columns { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 80px); }
.events-col { flex: 1 1 320px; }
.events-title { font-family: var(--font-display); font-weight: 700; font-size: 1.3125rem; color: var(--gold-light); margin-bottom: 12px; }
.events-col p { max-width: 46ch; }
.events-cta {
  margin-top: clamp(40px, 6vw, 64px); padding-top: 28px;
  border-top: 1px solid color-mix(in oklch, var(--cream) 16%, transparent);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.events-cta p { margin: 0; color: var(--cream-muted); }

/* ===== Story / collage ===== */
.story-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.story-grid.reverse { grid-template-columns: 1fr 1.1fr; }
.story-grid.reverse .story-collage { order: 2; }
.story-collage { position: relative; aspect-ratio: 1 / 1; }
.story-collage img, .story-collage .img-main { position: absolute; border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; clip-path: inset(0 round var(--radius-lg)); }
.story-collage img.img-accent { object-fit: cover; }
.story-collage .img-main { width: 78%; height: 100%; top: 0; left: 0; z-index: 1; background: var(--bg-alt); isolation: isolate; }
.story-collage .img-accent { width: 42%; height: 46%; bottom: 0; right: 0; z-index: 2; border: 6px solid var(--bg); }
.story-collage .img-main video { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius-lg); clip-path: inset(0 round var(--radius-lg)); -webkit-clip-path: inset(0 round var(--radius-lg)); transform: translateZ(0); filter: brightness(1.001); }
.story-copy .differentiator { font-size: 1.125rem; color: var(--ink); font-weight: 600; }

/* ===== Reviews / social ===== */
.reviews-marquee {
  display: flex; flex-direction: column; gap: 20px;
  margin-bottom: clamp(48px, 6vw, 72px);
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.marquee-row { overflow: hidden; }
.marquee-track { display: flex; gap: 24px; width: max-content; animation: marquee-left 42s linear infinite; }
.marquee-row.reverse .marquee-track { animation-name: marquee-right; animation-duration: 36s; }
.marquee-row:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; transform: none !important; }
  .marquee-row { overflow-x: auto; }
}

.review-card {
  flex: none; width: min(380px, 82vw);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px; box-shadow: var(--shadow-sm);
}
.review-card .stars { display: block; color: var(--gold); font-size: 0.9375rem; letter-spacing: 0.1em; margin-bottom: 10px; }
.review-card p { font-size: 1.0625rem; color: var(--ink); font-style: italic; margin-bottom: 1em; }
.review-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.review-name { font-size: 0.875rem; font-weight: 700; color: var(--ink-muted); }
.google-badge { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.google-badge svg { width: 16px; height: 16px; flex: none; }

.social-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.social-strip a { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); }
.social-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.social-strip a:hover img { transform: scale(1.06); }
.social-strip a::after {
  content: ''; position: absolute; inset: 0; background: oklch(20% 0.02 60 / 0); transition: background 0.25s var(--ease);
}
.social-strip a:hover::after { background: oklch(20% 0.02 60 / 0.18); }
.social-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 28px; }

/* ===== Visit / hours / map ===== */
.visit-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 6vw, 64px); align-items: start; }
.hours-table { width: 100%; border-collapse: collapse; margin: 20px 0 28px; }
.hours-table td { padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 0.9375rem; }
.hours-table td:first-child { font-weight: 700; color: var(--ink); width: 40%; }
.hours-table td:last-child { color: var(--ink-muted); text-align: right; }
.hours-table tr.today td { color: var(--gold-dark); font-weight: 700; }
.visit-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.map-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4/3; }
.map-frame iframe { width: 100%; height: 100%; border: 0; }
/* self-contained map / directions card (no third-party iframe dependency) */
.map-card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; text-decoration: none; padding: 36px 28px; color: var(--cream);
  background:
    repeating-linear-gradient(58deg, transparent 0 27px, color-mix(in oklch, var(--gold) 6%, transparent) 27px 29px),
    repeating-linear-gradient(-32deg, transparent 0 40px, color-mix(in oklch, var(--gold) 5%, transparent) 40px 42px),
    radial-gradient(ellipse 85% 75% at 50% 44%, var(--umber-alt), var(--umber));
}
.map-card::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(122deg, transparent 45.5%, color-mix(in oklch, var(--gold) 24%, transparent) 45.5% 48.5%, transparent 48.5%),
    linear-gradient(200deg, transparent 62%, color-mix(in oklch, var(--gold) 16%, transparent) 62% 64%, transparent 64%); }
.map-pin { position: relative; z-index: 1; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%;
  background: var(--gold); color: var(--ink-on-gold);
  box-shadow: 0 0 0 8px color-mix(in oklch, var(--gold) 20%, transparent), var(--shadow); }
.map-pin svg { width: 28px; height: 28px; }
.map-card strong { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--cream); }
.map-card .map-sub { position: relative; z-index: 1; color: var(--cream-muted); font-size: 0.95rem; }
.map-card .map-open { position: relative; z-index: 1; margin-top: 6px; display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; color: var(--gold-light); border: 1px solid color-mix(in oklch, var(--gold) 45%, transparent);
  padding: 9px 20px; border-radius: 999px; transition: background 0.2s, color 0.2s, transform 0.2s; }
.map-card .map-open svg { width: 16px; height: 16px; }
.map-card:hover .map-open { background: var(--gold); color: var(--ink-on-gold); transform: translateY(-2px); }

/* ===== FAQ ===== */
.faq-list { max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 0; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus { flex: none; width: 22px; height: 22px; position: relative; }
.faq-item summary .plus::before, .faq-item summary .plus::after { content: ''; position: absolute; background: var(--ink); transition: transform 0.3s var(--ease); }
.faq-item summary .plus::before { top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; }
.faq-item summary .plus::after { left: 50%; top: 0; height: 100%; width: 2px; margin-left: -1px; }
.faq-item[open] summary .plus::after { transform: rotate(90deg) scaleY(0); }
.faq-item p { padding-bottom: 22px; margin: 0; }

/* ===== Footer ===== */
.site-footer { background: var(--umber); color: var(--cream-muted); padding: 64px 0 28px; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; margin-bottom: 48px; }
.footer-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--cream); margin-bottom: 12px; }
.footer-logo img { height: 28px; width: auto; flex: none; display: block; }
.footer-col h4 { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cream); margin-bottom: 16px; }
.footer-col a, .footer-col p { display: block; font-size: 0.9375rem; margin-bottom: 10px; color: var(--cream-muted); }
.footer-col a:hover { color: var(--gold-light); }
.footer-bottom { border-top: 1px solid color-mix(in oklch, var(--cream) 12%, transparent); padding-top: 24px; font-size: 0.8125rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* ===== WhatsApp float ===== */
.whatsapp-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 50;
  width: 58px; height: 58px; border-radius: 50%; background: #25D366;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow);
  transition: transform 0.25s var(--ease), bottom 0.25s var(--ease);
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 28px; height: 28px; color: #fff; }

/* ===== Sticky mobile CTA bar ===== */
.sticky-cta-bar { display: none; }

/* ===== Gallery page ===== */
.gallery-hero { padding: 160px 0 48px; background: var(--umber); color: var(--cream); text-align: center; }
.gallery-hero h1 { color: var(--cream); }
.gallery-category { margin-bottom: 56px; }
.gallery-category h3 { margin-bottom: 16px; }
.carousel-wrap { position: relative; }
.carousel-track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.gallery-item { flex: none; width: 280px; scroll-snap-align: start; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.carousel-btn {
  position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 2;
}
.carousel-btn[data-dir="-1"] { left: -10px; }
.carousel-btn[data-dir="1"] { right: -10px; }
.carousel-btn:disabled { opacity: 0.3; cursor: default; }

/* ===== Reveal ===== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .main-nav { display: none; }
  .header-actions .lang-switch-group { display: none; }
  .header-actions .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header.nav-open .mobile-panel {
    display: flex; flex-direction: column; gap: 4px; padding: 8px 24px 24px;
    background: var(--bg); border-top: 1px solid var(--border);
  }
  .mobile-panel a { padding: 12px 0; font-weight: 600; border-bottom: 1px solid var(--border); }
  .story-grid, .story-grid.reverse { grid-template-columns: 1fr; }
  .story-grid.reverse .story-collage { order: 0; }
  .visit-grid { grid-template-columns: 1fr; }
  .social-strip { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .utility-bar .utility-list { gap: 12px; }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .sticky-cta-bar {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in oklch, var(--bg) 94%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
  }
  .sticky-cta-bar .btn { flex: 1; }
  .whatsapp-float { bottom: calc(78px + env(safe-area-inset-bottom)); }
}

@media (max-width: 560px) {
  .hero { min-height: 100vh; }
  .hero-cta-row .btn { flex: 1 1 auto; }
}

/* ===== RTL (Arabic / Hebrew) ===== */
html[lang="ar"] { --font-body-rtl: 'Cairo', var(--font-body); --font-display-rtl: 'Markazi Text', var(--font-display); }
html[lang="he"] { --font-body-rtl: 'Heebo', var(--font-body); --font-display-rtl: 'Frank Ruhl Libre', var(--font-display); }
[dir="rtl"] body { font-family: var(--font-body-rtl, var(--font-body)); }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .logo-mark, [dir="rtl"] .footer-logo,
[dir="rtl"] .menu-item-name, [dir="rtl"] .faq-item summary {
  font-family: var(--font-display-rtl, var(--font-display));
}
[dir="rtl"] .chalk, [dir="rtl"] .menu-category-label {
  font-family: var(--font-display-rtl, var(--font-display));
  font-style: italic;
  transform: rotate(0);
}
[dir="rtl"] .lang-switch-group { direction: ltr; }
[dir="rtl"] .hero-media::after {
  background: linear-gradient(-90deg, oklch(12% 0.02 55 / 0.88) 0%, oklch(12% 0.02 55 / 0.55) 45%, oklch(12% 0.02 55 / 0.15) 75%),
              linear-gradient(0deg, oklch(10% 0.02 55 / 0.75) 0%, transparent 40%);
}
[dir="rtl"] .story-collage .img-main { left: auto; right: 0; }
[dir="rtl"] .story-collage .img-accent { right: auto; left: 0; }
[dir="rtl"] .story-lead-media .img-main { left: auto; right: 0; }
[dir="rtl"] .story-lead-media .img-accent { right: auto; left: 0; }

/* ===========================
   Hero: clean centered composition
   Was left-weighted (bunched on one side) with a crooked (rotated) chalk kicker.
   Now centered both axes, everything aligned, chalk straightened.
   (Selectors are .hero-scoped so they win over the earlier editorial rules
   that appear later in this file.)
   =========================== */
.hero { align-items: center; }
.hero .hero-inner { padding-top: clamp(84px, 11vh, 132px); padding-bottom: clamp(60px, 8vh, 104px); }
.hero .hero-content { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.hero .hero-logo-wrap { text-align: center; margin-bottom: clamp(16px, 2.2vw, 26px); }
.hero .hero-kicker { text-align: center; max-width: none; margin-left: auto; margin-right: auto; margin-bottom: 6px; }
.hero .hero-kicker .chalk { transform: none; }
.hero .hero-title { max-width: none; margin-left: auto; margin-right: auto; }
.hero .hero-sub { max-width: 52ch; margin-left: auto; margin-right: auto; }
.hero .hero-cta-row { justify-content: center; }
.hero .hero-facts { justify-content: center; align-items: center; }
[dir="rtl"] .carousel-btn[data-dir="-1"] { left: auto; right: -10px; }
[dir="rtl"] .carousel-btn[data-dir="1"] { right: auto; left: -10px; }
[dir="rtl"] .carousel-btn svg { transform: scaleX(-1); }
[dir="rtl"] .hours-table td:last-child { text-align: left; }

/* ===========================
   Premium atmosphere & motion pass
   Applies site-wide via the shared stylesheet: film-grain texture, cinematic
   hero entrance, magnetic/glowing CTAs, and a book that feels alive.
   =========================== */

/* Film-grain texture — a tactile "printed ledger" layer over the whole site */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (max-width: 560px) { body::before { display: none; } }

/* Custom scrollbar — a small premium tell */
html { scrollbar-color: var(--gold-dark) transparent; }
body::-webkit-scrollbar { width: 11px; }
body::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb { background: color-mix(in oklch, var(--gold-dark) 55%, transparent); border-radius: 999px; border: 3px solid var(--bg); }
body::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); }

/* Hero: cinematic first-load choreography (not scroll-triggered — brand permission) */
.hero-media img, .hero-media video { animation: heroKenBurns 22s ease-in-out infinite alternate; transform-origin: 50% 35%; }
@keyframes heroKenBurns { from { transform: scale(1); } to { transform: scale(1.09); } }

.hero-content > * { opacity: 0; animation: heroRise 1s cubic-bezier(0.16, 0.84, 0.3, 1) forwards; }
.hero-content > .hero-logo-wrap { animation-delay: 0.15s; }
.hero-content > .hero-title { animation-delay: 0.32s; }
.hero-content > .hero-sub { animation-delay: 0.48s; }
.hero-content > .hero-cta-row { animation-delay: 0.62s; }
.hero-content > .hero-facts { animation-delay: 0.76s; }
@keyframes heroRise { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }

/* Hero scroll cue */
.hero::after {
  content: '';
  position: absolute; z-index: 2; left: 50%; bottom: clamp(18px, 3vw, 32px);
  width: 26px; height: 42px; margin-left: -13px;
  border: 2px solid color-mix(in oklch, var(--cream) 55%, transparent);
  border-radius: 999px;
  opacity: 0; animation: heroCueIn 1s ease forwards; animation-delay: 1.1s;
}
.hero::before {
  content: '';
  position: absolute; z-index: 2; left: 50%; bottom: calc(clamp(18px, 3vw, 32px) + 8px);
  width: 4px; height: 8px; margin-left: -2px;
  background: var(--cream-muted); border-radius: 999px;
  opacity: 0; animation: heroCueDot 2.2s ease-in-out infinite; animation-delay: 1.3s;
}
@keyframes heroCueIn { to { opacity: 1; } }
@keyframes heroCueDot { 0% { opacity: 0; transform: translateY(0); } 25% { opacity: 1; } 65% { opacity: 0; transform: translateY(16px); } 100% { opacity: 0; transform: translateY(16px); } }
body.scrolled .hero::after, body.scrolled .hero::before { animation: heroCueOut 0.4s ease forwards; }
@keyframes heroCueOut { to { opacity: 0; } }

/* Buttons: magnetic glow on the primary CTA */
.btn-primary { position: relative; overflow: visible; }
.btn-primary:hover, .btn-primary:focus-visible {
  box-shadow: var(--shadow), 0 0 0 1px color-mix(in oklch, var(--gold) 30%, transparent), 0 0 34px -6px color-mix(in oklch, var(--gold) 70%, transparent);
}
.btn-primary, .btn-outline { will-change: transform; }

/* Menu book: idle invitation to open + tactile depth */
.menu-book:not(.is-open) .face-cover { animation: bookBreathe 5s ease-in-out infinite; }
@keyframes bookBreathe {
  0%, 100% { box-shadow: 0 26px 64px -30px oklch(4% 0.02 55 / 0.7); }
  50% { box-shadow: 0 34px 78px -28px oklch(4% 0.02 55 / 0.82), 0 0 44px -18px color-mix(in oklch, var(--gold) 45%, transparent); }
}
.menu-book { transition: width 0.6s cubic-bezier(0.16, 0.84, 0.3, 1), transform 0.4s var(--ease); }

/* Story collage: parallax-ready (JS sets --parallax-y) */
.story-collage .img-main, .story-collage .img-accent { transform: translateY(var(--parallax-y, 0px)); will-change: transform; }
.story-collage .img-accent { transition: transform 0.05s linear; }

@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
  .hero-media img, .hero-media video { animation: none; }
  .hero-content > * { opacity: 1; animation: none; transform: none; filter: none; }
  .hero::after, .hero::before { display: none; }
  .menu-book:not(.is-open) .face-cover { animation: none; }
  .story-collage .img-main, .story-collage .img-accent { transform: none; }
}

/* ===========================
   Editorial redesign v2 — homepage only
   "Focaccia as a food-and-place feature": magazine-cover hero, dish ribbon,
   editorial section kickers, lead-photo story spread, oversized pull-quote.
   Scoped to homepage-only sections; shared components untouched.
   =========================== */

/* --- Hero: magazine cover --- */
.hero-masthead { position: absolute; z-index: 2; top: 0; left: 0; right: 0; padding-top: clamp(14px, 2.4vw, 22px); }
.hero-masthead .container {
  display: flex; align-items: center; gap: 14px; padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in oklch, var(--cream) 24%, transparent);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
  color: color-mix(in oklch, var(--cream) 80%, transparent);
}
.hero-masthead .mh-brand { color: var(--cream); font-weight: 700; letter-spacing: 0.24em; }
.hero-masthead .mh-hours { color: var(--gold-light); }
.hero-masthead .mh-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); flex: none; }
.hero-masthead .mh-spacer { flex: 1; }

.hero-content { max-width: 720px; }
.hero-logo-wrap { text-align: left; margin-bottom: 20px; }
.hero-wordmark-icon { height: clamp(46px, 6vw, 66px); }
.hero-wordmark-text { font-size: clamp(1.9rem, 4.6vw, 3.1rem); }
.hero-kicker { margin: 0 0 4px; }
.hero-kicker .chalk { font-size: clamp(1.35rem, 3vw, 1.95rem); color: var(--gold-light); }
.hero-title { font-size: clamp(2.9rem, 6.6vw, 5.6rem); letter-spacing: -0.03em; margin-bottom: 0.32em; }
.hero-em { color: var(--gold-light); }
.hero-sub { max-width: 46ch; }

.hero-facts { gap: 0; row-gap: 10px; align-items: center; }
.hero-fact { position: relative; padding: 0 clamp(16px, 2.2vw, 26px); }
.hero-fact:first-child { padding-left: 0; }
.hero-fact + .hero-fact::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 20px; background: color-mix(in oklch, var(--cream) 32%, transparent);
}
@media (max-width: 560px) {
  .hero-facts { gap: 6px 16px; }
  .hero-fact { padding: 0; }
  .hero-fact + .hero-fact::before { display: none; }
}
@media (max-width: 620px) {
  .hero-masthead .container { font-size: 0.66rem; gap: 8px; letter-spacing: 0.1em; }
  .hero-masthead .mh-item:nth-child(3) { display: none; }
}

/* --- Dish ribbon (lead-in to the menu) --- */
.ribbon {
  background: var(--umber); overflow: hidden; padding: 13px 0;
  border-top: 1px solid color-mix(in oklch, var(--gold) 32%, transparent);
  border-bottom: 1px solid color-mix(in oklch, var(--gold) 32%, transparent);
}
.ribbon-track {
  display: flex; align-items: center; width: max-content;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  letter-spacing: 0.01em; color: var(--cream); white-space: nowrap;
  animation: ribbonScroll 80s linear infinite;
}
/* Four identical sets: translateX(-50%) swaps the first two for the last two,
   so the loop is seamless. Each half stays wider than the viewport, so the
   track never runs out and shows blank space before looping. */
.ribbon-set { display: flex; align-items: center; gap: 26px; padding-inline-end: 26px; flex: none; }
.ribbon-track span { flex: none; }
.ribbon-sep { color: var(--gold); }
@keyframes ribbonScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ribbon-track { animation: none; } }

/* --- Menu head editorial framing --- */
.menu-book-head .section-title { color: var(--cream); font-size: clamp(2.1rem, 6vw, 3.2rem); margin-top: 4px; }
.menu-book-meta {
  display: inline-block; margin-top: 12px; font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 600; color: color-mix(in oklch, var(--gold-light) 88%, transparent);
}
.menu-book-foot { text-align: center; margin-top: clamp(26px, 4vw, 40px); }

/* --- Section kickers (chalk as the named brand kicker system) --- */
.section-head .chalk { font-size: clamp(1.25rem, 2.6vw, 1.7rem); display: inline-block; margin-bottom: 2px; }
.events-tagline {
  font-family: var(--font-body); font-style: italic; font-weight: 500;
  font-size: clamp(1.15rem, 2vw, 1.45rem); color: var(--cream-muted);
  margin-top: 8px; transform: none; display: block;
}

/* --- Story: editorial lead-photo spread (keeps the overlapping-polaroid motif) --- */
/* Hairline divider so the light menu zone and the light story don't blend together */
.story-section { overflow: hidden; border-top: 1px solid color-mix(in oklch, var(--ink) 12%, transparent); }
.story-lead { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 6vw, 78px); align-items: center; }
.story-lead-media { position: relative; aspect-ratio: 1 / 1; }
.story-lead-media .img-main {
  position: absolute; top: 0; left: 0; width: 80%; height: 100%; z-index: 1;
  border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-alt);
  box-shadow: var(--shadow); isolation: isolate; clip-path: inset(0 round var(--radius-lg));
}
.story-lead-media .img-main video {
  width: 100%; height: 100%; object-fit: contain; display: block;
  border-radius: var(--radius-lg); clip-path: inset(0 round var(--radius-lg));
  -webkit-clip-path: inset(0 round var(--radius-lg)); transform: translateZ(0);
}
.story-lead-media .img-accent {
  position: absolute; right: 0; bottom: 0; width: 46%; margin: 0; z-index: 2;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  border: 6px solid var(--bg); transform: translateY(var(--parallax-y, 0px));
  will-change: transform; transition: transform 0.05s linear;
}
.story-lead-media .img-accent img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.story-lead-media .img-accent figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 12px 8px;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--cream);
  background: linear-gradient(0deg, oklch(15% 0.02 55 / 0.78), transparent);
}
.story-copy .chalk { font-size: clamp(1.3rem, 3vw, 1.8rem); display: inline-block; margin-bottom: 2px; }
.story-copy .section-title { font-size: clamp(2rem, 4.2vw, 3.4rem); margin-bottom: 0.36em; }
.story-copy .lede { font-size: 1.2rem; color: var(--ink); font-weight: 600; max-width: 40ch; }
.story-cols { margin: 18px 0 24px; }
.story-cols p { max-width: 54ch; }
.story-meta { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 0.95rem; color: var(--ink-muted); }
.story-meta .stars { color: var(--gold-dark); letter-spacing: 0.08em; }
.story-meta strong { color: var(--ink); }
@media (max-width: 860px) {
  .story-lead { grid-template-columns: 1fr; gap: 28px; }
  .story-lead-media { max-width: 520px; margin: 0 auto; width: 100%; }
}

/* --- Reviews: oversized editorial pull-quote --- */
.pullquote { max-width: 900px; margin: 0 auto clamp(44px, 6vw, 76px); text-align: center; }
.pullquote::before {
  content: '\201C'; display: block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3.4rem, 9vw, 7rem); line-height: 0.5; color: color-mix(in oklch, var(--gold) 60%, transparent);
  margin-bottom: 0.08em;
}
.pullquote blockquote {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.45rem, 3.4vw, 2.5rem); line-height: 1.2; letter-spacing: -0.02em;
  color: var(--ink); text-wrap: balance;
}
.pullquote figcaption {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: center; font-size: 0.95rem; color: var(--ink-muted); font-weight: 600;
}
.pullquote figcaption .stars { color: var(--gold); letter-spacing: 0.1em; }
.pullquote figcaption .pq-name { color: var(--ink); }
.pullquote figcaption .google-badge { color: var(--ink-muted); }

/* Reviews carousel: one row, ~4 real Google reviews visible at a time, auto-scrolling.
   The set is cloned in JS so translateX(-50%) loops seamlessly (no blank gap). */
.reviews-carousel {
  overflow: hidden; margin-bottom: clamp(48px, 6vw, 72px);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
}
.carousel-track { display: flex; width: max-content; align-items: stretch; animation: reviewScroll 120s linear infinite; }
.carousel-set { display: flex; align-items: stretch; flex: none; }
.reviews-carousel:hover .carousel-track { animation-play-state: paused; }
.reviews-carousel .review-card {
  flex: none; width: 264px; margin-inline-end: 20px;
  display: flex; flex-direction: column;
}
.reviews-carousel .review-card p { font-size: 0.95rem; }
.reviews-carousel .review-footer { margin-top: auto; }
@keyframes reviewScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 560px) { .reviews-carousel .review-card { width: 80vw; } }
@media (prefers-reduced-motion: reduce) {
  .carousel-track { animation: none; }
  .reviews-carousel { overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ribbon-track { animation: none; }
  .story-lead-media .img-accent { transform: none; }
}

/* ===========================
   Editorial redesign v2.1 — feedback pass
   Humbler hero, distinct menu zone, book-page text-fit fix, events photo.
   =========================== */

/* Hero: humbler, guest-first (drop the boastful scale) */
.hero-title { font-size: clamp(2.1rem, 4.2vw, 3.4rem); letter-spacing: -0.02em; margin-bottom: 0.5em; max-width: 15ch; }
.hero-sub { max-width: 48ch; font-size: clamp(1.05rem, 1.35vw, 1.2rem); }

/* Menu: a light, warm "table" the book physically sits on — a distinctly bright
   zone, clearly not the dark background. The dark book cover pops on the light
   surface. Scoped to the homepage (.menu-light); standalone menu.html stays dark. */
.menu-light {
  background: radial-gradient(ellipse 74% 62% at 50% 42%, color-mix(in oklch, var(--gold) 14%, var(--bg-alt)), var(--bg-alt) 76%);
}
.menu-light .menu-book-head .chalk { color: var(--gold-dark); }
.menu-light .menu-book-head .section-title { color: var(--ink); }
.menu-light .menu-book-head p { color: var(--ink-muted); }
.menu-light .menu-book-meta { color: color-mix(in oklch, var(--gold-dark) 72%, var(--ink)); }
.menu-light .book-nav button {
  background: var(--surface); color: var(--gold-dark);
  border-color: color-mix(in oklch, var(--gold-dark) 40%, transparent); box-shadow: var(--shadow-sm);
}
.menu-light .book-nav button:hover:not(:disabled) { background: var(--gold); color: var(--ink-on-gold); border-color: var(--gold); }
.menu-light .book-progress { color: var(--ink); }
.menu-light .book-progress small { color: var(--gold-dark); }
/* lift the book off the light table with a warmer, deeper shadow */
.menu-light .face { box-shadow: 0 40px 82px -32px oklch(22% 0.03 55 / 0.62); }
.menu-light .menu-book::after { box-shadow: 0 48px 90px -40px oklch(20% 0.02 55 / 0.55); }

/* Book pages: stop menu text from scrolling under (and overlapping) the page label.
   Taller book (homepage only) so the longer pages actually fit, plus a cream fade
   behind the page label that masks any residual content. menu.html is untouched. */
.menu-light .menu-book { height: min(84vh, 792px); }
.book-face-inner { padding-bottom: clamp(50px, 6vw, 60px); }
.book-face-inner .menu-row { padding: 6px 0; }
.book-face-inner .menu-group + .menu-group { margin-top: 16px; }
.book-page-no {
  bottom: 0; padding: 22px 0 12px;
  background: linear-gradient(to top, var(--cream) 42%, color-mix(in oklch, var(--cream) 70%, transparent) 76%, transparent);
}

/* Events: photo (Focaccia's grill on-site at an event) + the two ways we host */
.events-feature { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.events-photo { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3; }
.events-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.events-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--cream);
  background: linear-gradient(0deg, oklch(12% 0.02 55 / 0.82), transparent);
}
.events-copy { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 34px); }
.events-copy .events-col { flex: none; }
@media (max-width: 860px) {
  .events-feature { grid-template-columns: 1fr; gap: 28px; }
  .events-photo { max-width: 560px; width: 100%; }
}

/* =========================================================================
   Mobile menu book — single-page swipe carousel.
   Desktop keeps the 3D double-page spread. On phones the flip layers are
   unwrapped (display:contents) so each menu panel becomes one full-width
   page you swipe through via native horizontal scroll-snap. The side-by-side
   spread was too cramped to read below ~768px.
   ========================================================================= */
@media (max-width: 768px) {
  .menu-book-stage { perspective: none; }

  .menu-book,
  .menu-book.is-open {
    width: min(94vw, 460px);
    transform: none !important;
    transform-style: flat;
    transition: none;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 6px 15px 15px 6px;
    box-shadow: 0 30px 60px -34px oklch(6% 0.02 55 / 0.5);
  }
  .menu-book::-webkit-scrollbar { display: none; }
  .menu-book::after { display: none; }
  .menu-book .face-cover { animation: none; }
  .face-cover .cover-hint { display: none; }

  /* unwrap the flip layers so each menu panel is its own slide */
  .book-page,
  .face.spread { display: contents; }
  .face.spread::after { display: none; }

  .face-cover,
  .spread-half {
    position: relative;
    inset: auto;
    flex: 0 0 100%;
    width: 100%;
    height: auto;
    align-self: stretch;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border: 0;
    border-radius: 5px 15px 15px 5px;
  }
  .spread-half + .spread-half { border: 0; }

  .book-face-inner {
    padding: clamp(22px, 6vw, 30px) clamp(20px, 6vw, 28px) clamp(30px, 8vw, 42px);
  }
}