:root {
  /*
    Cafe Orelo brandkit — skill-pack hues remapped onto olive/charcoal.
    Primitives keep Orelo names. Semantic aliases match brandkit/design-tokens roles.
    Contrast (WCAG 2.2 AA): moss/forest/clay/ink/mute/success/error on linen;
    brass + citrus only on charcoal; terracotta is large-text / decorative on linen.

    Token            Hex        Role                              Skill source
    --charcoal       #141611    canvas dark, footer, stats rail   Orelo spine
    --linen          #e8e2d4    page canvas                       Orelo · cafe #E9E3DD / Starbucks cream
    --paper          #F9F7F5    raised card                       cafe Surface
    --ceramic        #edebe9    sunken / chip wash                Starbucks Ceramic
    --olive          #6b7a45    wordmark, rings                   Orelo spine
    --moss           #3d4a28    AA fill / primary action          Orelo (WCAG)
    --olive-deep     #2f3a1e    action hover                      Orelo
    --olive-on-dark  #c9d2a6    text on charcoal                  Orelo
    --forest         #2F5B4F    tags, dividers, chip text         warm-editorial
    --terracotta     #C0512F    accent 1: hover, selection        warm-editorial
    --brass          #cba258    accent 2: stats, ticket foil      Starbucks Gold
    --citrus         #D97706    zest on dark / warning icon       cafe Warning · colors amber-600
    --clay           #5D4432    secondary warmth, dietary chips   cafe Primary
    --ink            #1C1A17    body text                         warm-editorial Foreground
    --mute           #4f4b40    supporting text (AA)              Orelo
    --error          #991b1b    error text (AA)                   colors.json red-800
    --vermillion     #c82014    error icon / border               Starbucks Red
    --success        #166534    success text (AA)                 colors.json green-800
  */
  --charcoal: #141611;
  --linen: #e8e2d4;
  --paper: #F9F7F5;
  --ceramic: #edebe9;
  --olive: #6b7a45;
  --moss: #3d4a28;
  --olive-deep: #2f3a1e;
  --olive-on-dark: #c9d2a6;
  --forest: #2F5B4F;
  --terracotta: #C0512F;
  --brass: #cba258;
  --citrus: #D97706;
  --clay: #5D4432;
  --wood: #a67c52;
  --ink: #1C1A17;
  --mute: #4f4b40;
  --error: #991b1b;
  --vermillion: #c82014;
  --success: #166534;

  --color-surface-page: var(--linen);
  --color-surface-card: var(--paper);
  --color-surface-sunken: var(--ceramic);
  --color-surface-inverse: var(--charcoal);
  --color-text-primary: var(--ink);
  --color-text-secondary: var(--mute);
  --color-text-on-action: var(--linen);
  --color-text-on-dark: var(--linen);
  --color-action-primary: var(--moss);
  --color-action-primary-hover: var(--olive-deep);
  --color-accent: var(--terracotta);
  --color-accent-soft: var(--brass);
  --color-feedback-success: var(--success);
  --color-feedback-warning: var(--citrus);
  --color-text-error: var(--error);
  --color-border-default: color-mix(in srgb, var(--olive) 28%, transparent);
  --color-border-strong: var(--forest);
  --color-focus-ring: var(--moss);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-section: 4rem;
  --space-section-lg: 5.5rem;
  --space-gutter: 1.25rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --leading-tight: 1.1;
  --leading-normal: 1.65;

  --radius-input: 0.7rem;
  --radius-card: 1.25rem;
  --radius-panel: 1.5rem;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(20, 22, 17, 0.05);
  --shadow-raised: 0 8px 20px rgba(20, 22, 17, 0.08);

  --display: "Fraunces", "Times New Roman", serif;
  --sans: "Outfit", system-ui, sans-serif;
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-moderate: 300ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --logo-white-filter: brightness(0) invert(1);
  --target: 2.75rem;
  --dock-h: 0px;
  --header-h: 4.25rem;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 70%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--site-notice-h, 0px));
  touch-action: manipulation;
}

body.site-body {
  margin: 0;
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--moss);
  color: var(--linen);
  padding: 0.7rem 1rem;
  min-height: var(--target);
  display: inline-flex;
  align-items: center;
  z-index: 80;
  text-decoration: none;
  font-weight: 500;
}
.skip-link:focus,
.skip-link:focus-visible { top: 1rem; }

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

.eyebrow {
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--forest);
  margin: 0 0 var(--space-2);
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 560;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 0.75rem;
  overflow-wrap: break-word;
}

h1 { font-size: clamp(2.4rem, 7vw, 4.8rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: 1.35rem; }

.lede { color: color-mix(in srgb, var(--ink) 78%, var(--mute)); max-width: 38rem; }
[data-prose], .prose-block { max-width: 65ch; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target);
  min-width: var(--target);
  padding: 0.75rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}
.btn--olive { background: var(--color-action-primary); color: var(--color-text-on-action); }
.btn--ghost { border-color: var(--moss); color: var(--moss); background: transparent; }
.btn:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; }
.btn:disabled,
.btn[aria-busy="true"] { opacity: 0.62; cursor: wait; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.text-link {
  color: var(--moss);
  font-weight: 500;
  min-height: var(--target);
  display: inline-flex;
  align-items: center;
}

.surface-card {
  background: var(--color-surface-card);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--forest) 12%, var(--paper));
  color: var(--forest);
  border: 1px solid color-mix(in srgb, var(--forest) 22%, transparent);
}
.chip--clay {
  background: color-mix(in srgb, var(--clay) 10%, var(--paper));
  color: var(--clay);
  border-color: color-mix(in srgb, var(--clay) 22%, transparent);
}
.chip--selected {
  background: var(--moss);
  color: var(--linen);
  border-color: var(--moss);
}
h3.chip {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin: 0 0 var(--space-3);
}

@media (hover: hover) and (pointer: fine) {
  .btn--olive:hover:not(:disabled) { background: var(--color-action-primary-hover); }
  .btn--ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--moss) 10%, var(--linen)); }
  .text-link:hover { color: var(--terracotta); }
  .site-header__nav a:hover { color: var(--terracotta); }
  body[data-chrome="over-photo"] .site-header__nav a:hover { color: var(--brass); }
  .chip:hover { border-color: var(--terracotta); color: var(--clay); }
  .dish-card:hover,
  .paid-events__list li:hover,
  .quotes blockquote:hover {
    border-color: color-mix(in srgb, var(--terracotta) 45%, var(--olive));
    box-shadow: var(--shadow-raised);
  }
}

.site-measure,
.site-header__inner,
.site-footer__inner {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.site-chrome {
  position: sticky;
  top: 0;
  z-index: 40;
}
body[data-chrome="over-photo"] .site-chrome {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
}
#main-content, #reserve { scroll-margin-top: calc(5.25rem + var(--site-notice-h, 0px)); }
.site-header {
  position: relative;
  color: var(--ink);
  background: var(--linen);
  border-bottom: 1px solid color-mix(in srgb, var(--olive) 18%, transparent);
}
body[data-chrome="over-photo"] .site-header {
  color: var(--linen);
  background: linear-gradient(180deg, rgba(20, 22, 17, 0.62) 0%, rgba(20, 22, 17, 0.18) 100%);
  border-bottom-color: transparent;
}
body[data-chrome="over-photo"] .site-header[data-scrolled="true"] {
  background: color-mix(in srgb, var(--charcoal) 82%, transparent);
  backdrop-filter: blur(16px);
  border-bottom-color: color-mix(in srgb, var(--olive) 28%, transparent);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 4.25rem;
  padding-block: 0.55rem;
}
.site-notice {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 1.15rem;
  animation: site-notice-slide 0.42s ease;
}
.site-notice--under_development {
  background: var(--charcoal);
  color: var(--linen);
  border-bottom: 1px solid color-mix(in srgb, var(--olive) 70%, transparent);
}
.site-notice--closed_today {
  background: var(--moss);
  color: var(--linen);
  border-bottom: 1px solid color-mix(in srgb, var(--olive) 55%, transparent);
}
.site-notice__inner { min-width: 0; }
.site-notice__eyebrow {
  margin: 0 0 0.15rem;
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}
.site-notice__copy {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  max-width: 42rem;
}
.site-notice__dismiss {
  flex-shrink: 0;
  width: var(--target);
  height: var(--target);
  border: 0;
  background: transparent;
  color: var(--linen);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.site-notice__dismiss:focus-visible { outline: 2px solid var(--linen); outline-offset: 2px; }
body.has-site-notice { --site-notice-h: 4.25rem; }
@keyframes site-notice-slide {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

html.is-site-locked,
html.is-site-locked body.site-body {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}

.site-lock {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 1.5rem 1.25rem;
  overflow-y: auto;
  background:
    radial-gradient(
      ellipse 90% 55% at 50% 38%,
      color-mix(in srgb, var(--olive) 22%, transparent),
      transparent 68%
    ),
    var(--charcoal);
  color: var(--linen);
}

.site-lock:focus,
.site-lock:focus-visible {
  outline: none;
}

.site-lock__inner {
  width: min(100%, 26rem);
  text-align: center;
}

.site-lock__logo,
.site-lock__wordmark {
  display: block;
  height: 3.4rem;
  width: auto;
  max-width: min(14rem, 74vw);
  margin: 0 auto 1.35rem;
  object-fit: contain;
  filter: var(--logo-white-filter) drop-shadow(0 1px 0 rgba(0,0,0,0.28));
  opacity: 0.98;
}

.site-lock__eyebrow {
  margin: 0 0 0.85rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--olive-on-dark);
}

.site-lock__copy {
  margin: 0;
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 560;
  line-height: 1.35;
  color: var(--linen);
}

@media (min-width: 700px) {
  .site-lock__copy { font-size: 1.6rem; }
}

.site-header__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  min-height: var(--target);
}

.site-header__logo,
.site-footer__logo {
  display: block;
  width: auto;
  height: 2.65rem;
  max-width: min(10.5rem, 46vw);
  object-fit: contain;
}
body[data-chrome="over-photo"] .site-header__logo,
.site-footer__logo {
  filter: var(--logo-white-filter) drop-shadow(0 1px 0 rgba(0,0,0,0.32));
}

.site-header__nav { display: none; gap: 0.35rem; }
.site-header__nav a {
  text-decoration: none;
  font-size: 0.95rem;
  min-height: var(--target);
  padding: 0.45rem 0.7rem;
  display: inline-flex;
  align-items: center;
}
.site-header__nav a.is-active {
  color: var(--moss);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--terracotta);
}
body[data-chrome="over-photo"] .site-header__nav a {
  color: color-mix(in srgb, var(--linen) 88%, var(--olive));
}
body[data-chrome="over-photo"] .site-header__nav a.is-active {
  color: var(--linen);
  box-shadow: inset 0 -2px 0 var(--brass);
}
.site-header__end { display: flex; align-items: center; gap: 1rem; }

.nav-toggle {
  width: var(--target);
  height: var(--target);
  min-width: var(--target);
  min-height: var(--target);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--charcoal);
  display: grid;
  place-items: center;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
body[data-chrome="over-photo"] .nav-toggle { color: var(--linen); }
.nav-toggle svg { display: block; flex: none; }
.nav-toggle .nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

.mobile-nav {
  position: fixed;
  inset: calc(4.2rem + var(--site-notice-h, 0px)) 0 0;
  background: var(--linen);
  z-index: 35;
  padding: var(--space-6);
  display: grid;
  gap: var(--space-6);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav nav { display: grid; gap: 0.35rem; font-size: 1.4rem; font-family: var(--display); }
.mobile-nav nav a {
  text-decoration: none;
  min-height: var(--target);
  display: inline-flex;
  align-items: center;
}

.locale-switcher { display: flex; align-items: center; gap: 0.15rem; font-size: 0.8125rem; }
.locale-switcher a {
  text-decoration: none;
  opacity: 0.8;
  min-width: var(--target);
  min-height: var(--target);
  padding: 0.35rem 0.45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.locale-switcher a.is-active { opacity: 1; color: var(--moss); font-weight: 600; }
body[data-chrome="over-photo"] .locale-switcher a {
  color: color-mix(in srgb, var(--linen) 80%, var(--olive));
}
body[data-chrome="over-photo"] .locale-switcher a.is-active { color: var(--brass); }
body[data-chrome="over-photo"] .site-header__cta.btn--olive {
  background: transparent;
  border-color: color-mix(in srgb, var(--linen) 55%, transparent);
  color: var(--linen);
}

.page-builder { overflow: clip; }

.stream-block { padding: var(--space-section) var(--space-gutter); }
.stream-block--hero,
.stream-block--paid_events.stream-block--first { padding: 0; }
.stream-block--stats {
  padding-block: var(--space-8);
}

.hero {
  width: 100%;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding: 5.5rem 0 2.25rem;
  background:
    linear-gradient(180deg, rgba(20, 22, 17, 0.22) 0%, rgba(20, 22, 17, 0.08) 38%, rgba(20, 22, 17, 0.88) 100%),
    var(--hero-image, none) center/cover no-repeat,
    var(--charcoal);
  color: var(--linen);
  position: relative;
  overflow: hidden;
}
.hero .btn--ghost {
  border-color: color-mix(in srgb, var(--linen) 80%, transparent);
  color: var(--linen);
  background: rgba(20, 22, 17, 0.28);
}
.hero .btn--olive:focus-visible,
.hero .btn--ghost:focus-visible { outline-color: var(--linen); }
@media (hover: hover) and (pointer: fine) {
  .hero .btn--ghost:hover:not(:disabled) {
    background: color-mix(in srgb, var(--linen) 16%, transparent);
  }
}

.hero__rings {
  position: absolute;
  right: -8%;
  top: 16%;
  width: min(58vw, 22rem);
  height: min(58vw, 22rem);
  pointer-events: none;
}
.hero__ring {
  position: absolute;
  inset: 0;
  border: 2px solid color-mix(in srgb, var(--olive) 52%, transparent);
  border-radius: 50%;
}
.hero__ring:nth-child(2) {
  inset: 14%;
  border-color: color-mix(in srgb, var(--olive) 32%, transparent);
}

.hero__lockup {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}
.hero__title {
  font-size: clamp(2.85rem, 12vw, 6.75rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  max-width: 12ch;
  margin: 0 0 1rem;
}
.hero__chip {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  margin: 0 0 0.85rem;
  padding: 0.2rem 0.75rem;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--brass) 48%, transparent);
  background: color-mix(in srgb, var(--charcoal) 42%, transparent);
  color: var(--brass);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero__rule {
  display: block;
  width: 3.25rem;
  height: 1px;
  background: var(--brass);
  margin: 0 0 1rem;
}
.hero__sub {
  color: color-mix(in srgb, var(--linen) 82%, var(--olive));
  max-width: 32rem;
  margin: 0 0 0.85rem;
}
.hero__hours {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  margin: 0 0 0.35rem;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, var(--olive) 40%, transparent);
  color: var(--olive-on-dark);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.35rem; }

.stats {
  list-style: none;
  padding: var(--space-6) var(--space-4);
  margin: 0 auto;
  max-width: 72rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  text-align: center;
  background: var(--charcoal);
  color: var(--linen);
  border-radius: var(--radius-panel);
  border: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
}
.stats strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--brass);
}
.stats span { color: var(--olive-on-dark); font-size: 0.9rem; }

.menu-board, .story, .hours-map, .gallery, .quotes, .team, .offer, .instagram, .reserve, .faq, .prose-block, .image-block, .legal-page, .paid-events, .event-page, .occasions, .pet-policy {
  max-width: 72rem;
  margin: 0 auto;
}
.image-block img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--charcoal);
}
.menu-board { max-width: 56rem; }
.paid-events__list { max-width: 28rem; }

.menu-board__cat { margin-top: var(--space-8); }
.menu-board__cat:first-of-type { margin-top: var(--space-6); }
.menu-board__cat > p { color: var(--mute); max-width: 40rem; }
.menu-board__list { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: grid; gap: var(--space-3); }
.dish-card {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--paper);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.dish-card p { margin: 0.35rem 0 0; color: var(--mute); font-size: 0.95rem; }
.menu-board .price { font-family: var(--display); color: var(--moss); white-space: nowrap; }
.tags { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; margin-left: 0.35rem; vertical-align: middle; }
.tags em {
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clay);
  background: color-mix(in srgb, var(--clay) 10%, var(--paper));
  border: 1px solid color-mix(in srgb, var(--clay) 20%, transparent);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.5rem;
}

.story { display: grid; gap: var(--space-8); }
.story__frame {
  min-height: 16rem;
  aspect-ratio: 4 / 5;
  background:
    radial-gradient(circle at 50% 50%, transparent 38%, var(--olive) 39%, var(--olive) 42%, transparent 43%),
    var(--charcoal);
  border-radius: 1.5rem 4rem 1.5rem 4rem;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brass) 35%, transparent);
}
.story__frame img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.hours-map { display: grid; gap: var(--space-6); }
.hours-map a { min-height: var(--target); display: inline-flex; align-items: center; }
.hours-map__hours { font-family: var(--display); font-size: 1.4rem; color: var(--forest); }
.hours-map__frame,
.hours-map__placeholder {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--paper);
  border: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-card);
}
.hours-map__placeholder {
  background: repeating-linear-gradient(
    135deg,
    var(--charcoal),
    var(--charcoal) 12px,
    color-mix(in srgb, var(--olive) 22%, var(--charcoal)) 12px,
    color-mix(in srgb, var(--olive) 22%, var(--charcoal)) 24px
  );
}
.hours-map__embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.gallery__grid { display: grid; gap: 0.9rem; }
.gallery--masonry .gallery__grid { grid-template-columns: 1fr; }
.gallery--grid .gallery__grid { grid-template-columns: 1fr; }
.gallery figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 1.1rem;
  background: var(--charcoal);
}
.gallery figcaption {
  font-size: 0.9rem;
  color: var(--mute);
  margin-top: 0.55rem;
}

.quotes__rail { display: grid; gap: var(--space-5); }
.quotes blockquote {
  margin: 0;
  padding: var(--space-5);
  background: var(--paper);
  border: 1px solid var(--color-border-default);
  border-left: 3px solid var(--terracotta);
  border-radius: var(--radius-card);
  font-family: var(--display);
  font-size: 1.25rem;
  box-shadow: var(--shadow-card);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.quotes footer { font-family: var(--sans); font-size: 0.9rem; color: var(--mute); margin-top: 0.8rem; }

.team__grid { list-style: none; padding: 0; display: grid; gap: var(--space-5); }
.team__grid li {
  background: var(--paper);
  border-radius: var(--radius-card);
  padding: 0 0 var(--space-4);
  overflow: hidden;
  border: 1px solid var(--color-border-default);
}
.team__grid img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0;
  background: var(--charcoal);
}
.team__grid li > :not(img) { padding-inline: var(--space-4); }
.team__grid strong { display: block; font-family: var(--display); margin-top: var(--space-3); }
.team__grid span { color: var(--mute); }

.offer {
  background: var(--charcoal);
  color: var(--linen);
  padding: var(--space-10) var(--space-6);
  border-radius: 1.75rem;
  border: 1px solid color-mix(in srgb, var(--brass) 40%, transparent);
}
.offer .eyebrow { color: var(--brass); }
.offer .btn--ghost {
  border-color: var(--olive-on-dark);
  color: var(--olive-on-dark);
}
.offer :focus-visible { outline-color: var(--linen); }

.occasions { max-width: 72rem; margin: 0 auto; }
.occasions__stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-panel);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--charcoal) 55%, transparent), var(--charcoal) 62%),
    var(--hall-image, var(--charcoal));
  background-size: cover;
  background-position: center;
  color: var(--linen);
  border: 1px solid color-mix(in srgb, var(--brass) 40%, transparent);
  min-height: 28rem;
}
.occasions__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
}
.occasions__copy {
  position: relative;
  z-index: 1;
  padding: var(--space-8) var(--space-6);
  display: grid;
  gap: var(--space-4);
  max-width: 40rem;
}
.occasions__copy .eyebrow { color: var(--brass); }
.occasions__copy h2 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 7vw, 3.6rem);
  line-height: 0.95;
  max-width: 12ch;
}
.occasions__copy .lede { color: var(--olive-on-dark); max-width: 34ch; }
.occasions__place {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}
.occasions__place li {
  padding: 0.85rem 0.7rem 0.95rem;
  background: color-mix(in srgb, var(--charcoal) 55%, transparent);
  border-top: 2px solid var(--brass);
  backdrop-filter: blur(8px);
}
.occasions__place strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.15rem, 3vw, 1.55rem);
  color: var(--brass);
}
.occasions__place span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--olive-on-dark);
}
.occasions__chips,
.occasions__food {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.occasions__chips li {
  padding: 0.55rem 0.8rem;
  border: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--charcoal) 40%, transparent);
}
.occasions__chips strong { display: block; font-size: 0.95rem; }
.occasions__chips span { display: block; font-size: 0.75rem; color: var(--olive-on-dark); }
.occasions__food-label {
  margin: 0.4rem 0 0;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--brass);
}
.occasions__food li {
  font-family: var(--display);
  font-size: 1.05rem;
  padding: 0.2rem 0.15rem;
  border-bottom: 1px solid color-mix(in srgb, var(--brass) 40%, transparent);
}
.occasions__footer { margin: 0; color: var(--olive-on-dark); font-size: 0.95rem; }
.occasions__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.occasions__cta .btn--ghost {
  border-color: var(--olive-on-dark);
  color: var(--olive-on-dark);
}

.pet-policy .eyebrow { color: var(--brass); }
.pet-policy h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.08;
  margin: 0.35rem 0 0.75rem;
}
.pet-policy .lede { color: var(--mute); max-width: 42ch; }
.pet-policy__rules {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.pet-policy__rules li {
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  background: var(--paper);
  box-shadow: var(--shadow-card);
}
.pet-policy__rules strong { display: block; font-size: 0.95rem; }
.pet-policy__rules span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.85rem;
  color: var(--mute);
}
.pet-policy__note { margin: 1rem 0 0; font-size: 0.9rem; color: var(--mute); }
.pet-policy__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.25rem; }

.stream-block--instagram { padding-block: 2.4rem; }
.instagram__handle {
  font-family: var(--display);
  font-size: clamp(1.7rem, 7vw, 3.4rem);
  text-decoration: none;
  color: var(--moss);
  display: inline-flex;
  min-height: var(--target);
  align-items: center;
}

.inquiry-form {
  display: grid;
  gap: 0.95rem;
  margin-top: 0;
}
.inquiry-form label { display: grid; gap: 0.4rem; font-size: 0.95rem; color: var(--ink); }
.inquiry-form .field-hint { font-size: 0.85rem; color: var(--mute); }
.inquiry-form input, .inquiry-form select, .inquiry-form textarea {
  font: inherit;
  font-size: 1rem;
  min-height: var(--target);
  padding: 0.8rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--charcoal) 28%, transparent);
  border-radius: var(--radius-input);
  background: var(--paper);
  appearance: none;
  color: var(--ink);
}
.inquiry-form input:focus-visible,
.inquiry-form select:focus-visible,
.inquiry-form textarea:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-color: var(--moss);
}
.inquiry-form input[aria-invalid="true"],
.inquiry-form select[aria-invalid="true"],
.inquiry-form textarea[aria-invalid="true"] {
  border-color: var(--vermillion);
  box-shadow: inset 0 0 0 1px var(--vermillion);
}
.inquiry-form select {
  background-image: linear-gradient(45deg, transparent 50%, var(--moss) 50%), linear-gradient(135deg, var(--moss) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2rem;
}
.inquiry-form button { min-height: var(--target); cursor: pointer; }
.inquiry-form__status {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.inquiry-form__status.is-ok { color: var(--success); }
.inquiry-form__status.is-error { color: var(--error); }

.reserve__ticket {
  margin-top: var(--space-6);
}

.faq details {
  border-bottom: 1px solid color-mix(in srgb, var(--forest) 22%, transparent);
  padding: 0.35rem 0;
}
.faq summary {
  cursor: pointer;
  font-weight: 500;
  min-height: var(--target);
  display: flex;
  align-items: center;
  padding-block: 0.45rem;
}
.faq summary:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }

.site-footer {
  background: var(--charcoal);
  color: var(--linen);
  padding: 0;
}
.site-footer__rule {
  height: 1px;
  background: color-mix(in srgb, var(--brass) 70%, transparent);
}
.site-footer__inner {
  padding-block: 2.5rem 1.35rem;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
.site-footer__col {
  display: grid;
  align-content: start;
  min-width: 0;
}
.site-footer__heading {
  margin: 0 0 1rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  min-height: 1rem;
  color: var(--brass);
}
.site-footer__heading--later { margin-top: 1.5rem; }
.site-footer__brand {
  display: inline-flex;
  align-items: center;
  margin: 0 0 0.85rem;
  text-decoration: none;
}
.site-footer__logo {
  height: 2.85rem;
  max-width: 11rem;
  margin: 0;
}
.site-footer__tag,
.site-footer__addr,
.site-footer__hours,
.site-footer__voice {
  margin: 0 0 0.75rem;
  color: color-mix(in srgb, var(--linen) 78%, var(--olive));
}
.site-footer__addr { color: color-mix(in srgb, var(--linen) 88%, transparent); }
.site-footer__voice {
  margin-top: 0.25rem;
  font-family: var(--display);
  font-style: italic;
  color: color-mix(in srgb, var(--linen) 70%, var(--olive));
}
.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
}
.site-footer__links a {
  min-width: var(--target);
  padding-inline: 0.15rem;
}
.site-footer a {
  color: var(--linen);
  display: inline-flex;
  min-height: var(--target);
  align-items: center;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover { color: var(--brass); }
}
.site-footer__bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--linen) 12%, transparent);
  text-align: center;
}
.site-footer__credit-text {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--linen) 62%, var(--olive));
}
.site-footer__credit-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.35rem 0.5rem;
  line-height: 0;
}
.site-footer__credit-logo {
  display: block;
  width: 140px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 0.6px rgba(0, 0, 0, 0.7));
}
.site-footer :focus-visible { outline-color: var(--linen); }

.mobile-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-auto-flow: column;
  background: var(--charcoal);
  color: var(--linen);
  z-index: 45;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid color-mix(in srgb, var(--brass) 40%, transparent);
}
.mobile-dock a {
  text-align: center;
  padding: 0.85rem 0.4rem;
  text-decoration: none;
  font-size: 0.875rem;
  min-height: var(--target);
  display: grid;
  place-items: center;
}
.mobile-dock :focus-visible { outline-color: var(--linen); }

.legal-page__head { max-width: 72rem; margin: 0 auto; padding: 2.5rem var(--space-gutter) 0; }
.legal-page__summary { max-width: 65ch; color: var(--mute); }

.event-page { padding-bottom: 4rem; }
.event-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  background: var(--charcoal);
  color: var(--linen);
  overflow: hidden;
}
.event-hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 22, 17, 0.28) 0%, rgba(20, 22, 17, 0.12) 36%, rgba(20, 22, 17, 0.88) 100%);
}
.event-hero__copy {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 5.5rem var(--space-gutter) 2.25rem;
}
.event-hero .script-line {
  font-family: var(--display);
  font-style: italic;
  color: color-mix(in srgb, var(--linen) 80%, var(--olive));
  margin: 0 0 1rem;
}
.event-facts { list-style: none; padding: 0; display: grid; gap: 0.75rem; margin: 1.25rem 0 0; }
.event-facts span { display: block; font-size: var(--text-sm); letter-spacing: 0.12em; text-transform: uppercase; color: var(--forest); }
.event-hero .event-facts span { color: var(--brass); }
.event-hero .event-facts strong { color: var(--linen); }

.workshop-feature {
  position: relative;
  min-height: 36rem;
  display: grid;
  color: var(--linen);
  background: var(--charcoal);
  overflow: hidden;
}
.workshop-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 22, 17, 0.18) 0%, rgba(20, 22, 17, 0.86) 100%);
  pointer-events: none;
}
.stream-block--first .workshop-feature { min-height: 100svh; }
.workshop-feature__media {
  position: absolute;
  inset: 0;
}
.workshop-feature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.workshop-feature__panel {
  position: relative;
  z-index: 1;
  align-self: end;
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding: 5.5rem var(--space-gutter) 2.25rem;
}
.workshop-feature__title {
  font-size: clamp(2.4rem, 9vw, 4.6rem);
  line-height: 0.95;
  max-width: 14ch;
  margin: 0 0 0.85rem;
}
.workshop-feature__title a { text-decoration: none; }
.workshop-feature__meta {
  margin: 0 0 0.5rem;
  color: color-mix(in srgb, var(--linen) 80%, var(--olive));
}
.workshop-feature__price {
  margin: 0 0 1.15rem;
  font-family: var(--display);
  font-size: 1.45rem;
  color: var(--brass);
}
.paid-events__more-heading { margin: 2.5rem 0 1rem; }
.event-split { max-width: 72rem; margin: 0 auto; padding: 2rem 1.25rem; display: grid; gap: 2rem; }
.event-includes { padding-left: 1.1rem; }
.ticket {
  background: var(--paper);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-panel);
  padding: var(--space-6);
  box-shadow: var(--shadow-card);
  position: relative;
}
.ticket::before {
  content: "";
  display: block;
  height: 3px;
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5);
  background: linear-gradient(90deg, var(--brass), var(--olive) 55%, var(--terracotta));
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
}
.ticket--soldout { background: color-mix(in srgb, var(--olive) 8%, var(--linen)); }
.ticket-brand { font-family: var(--display); font-size: 1.4rem; margin: 0 0 0.35rem; color: var(--clay); }
.ticket-id, .ticket-note { color: var(--mute); font-size: 0.9rem; }
.ticket .field { display: grid; gap: 0.35rem; margin: 0.9rem 0; font-size: 0.95rem; }
.ticket .field-input, .ticket input[type="text"], .ticket input[type="email"], .ticket input[type="tel"] {
  font: inherit; font-size: 1rem; min-height: var(--target); padding: 0.75rem 0.85rem; border-radius: var(--radius-input);
  border: 1px solid color-mix(in srgb, var(--charcoal) 28%, transparent);
  background: var(--linen);
}
.ticket .field-input:focus-visible,
.ticket input:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-color: var(--moss);
}
.ticket [aria-invalid="true"] { border-color: var(--vermillion); }
.ticket .seats label { display: flex; gap: 0.65rem; align-items: center; margin: 0.35rem 0; min-height: var(--target); padding: 0.55rem 0.75rem; border-radius: 0.6rem; border: 1px solid color-mix(in srgb, var(--charcoal) 12%, transparent); cursor: pointer; }
.ticket .seats input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  min-width: 1.15rem;
  min-height: 1.15rem;
  font-size: 1rem;
  accent-color: var(--moss);
  flex-shrink: 0;
}
.ticket .seats label:has(input:checked) {
  border-color: var(--terracotta);
  background: color-mix(in srgb, var(--terracotta) 10%, var(--paper));
  color: var(--clay);
}
.field-error, .form-alert { color: var(--error); font-size: 0.9rem; margin: 0.35rem 0 0; }
.btn-full { width: 100%; }
.paid-events__list { list-style: none; padding: 0; display: grid; gap: var(--space-5); }
.paid-events__list li {
  display: grid; gap: 0.35rem; padding: var(--space-5);
  background: var(--paper); border-radius: var(--radius-card);
  border: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-card);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}
.paid-events__list time { color: var(--forest); font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; }
.paid-events__list .price { color: var(--moss); font-family: var(--display); }
.status-stage { min-height: 70vh; display: grid; place-items: center; padding: 2rem var(--space-gutter); }
.status-card {
  max-width: 36rem;
  width: 100%;
  background: var(--paper);
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-panel);
  border: 1px solid var(--color-border-default);
  box-shadow: var(--shadow-card);
}
.status-badge { display: inline-block; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; }
.status-badge--paid { color: var(--success); }
.status-badge--pending { color: var(--clay); }
.mono { font-family: ui-monospace, monospace; }

[data-reveal] { opacity: 1; }

@media (min-width: 900px) {
  .site-header__inner,
  .site-footer__inner,
  .hero__lockup,
  .site-measure { padding-inline: var(--space-8); }
  .site-header__logo { height: 3.15rem; max-width: 12rem; }
  .site-footer__logo { height: 3.15rem; max-width: 12rem; }
  .site-header__nav { display: flex; }
  .site-header .nav-toggle, .mobile-nav, .mobile-dock { display: none; }
  .stream-block { padding: var(--space-section-lg) var(--space-8); }
  .stream-block--hero,
  .stream-block--paid_events.stream-block--first { padding: 0; }
  .hero { padding: 6.5rem 0 3.5rem; align-items: end; }
  .hero__title { max-width: 14ch; }
  .hero__rings { width: 22rem; height: 22rem; right: 8%; top: 18%; }
  .occasions__copy { padding: var(--space-10) var(--space-8); max-width: 44rem; }
  .occasions__stage { min-height: 36rem; }
  .story, .hours-map { grid-template-columns: 1fr 1fr; align-items: center; }
  .story--image-right .story__copy { order: 1; }
  .gallery--grid .gallery__grid, .gallery--masonry .gallery__grid { grid-template-columns: repeat(3, 1fr); }
  .gallery figure img { aspect-ratio: 4 / 5; }
  .quotes__rail { grid-template-columns: repeat(3, 1fr); }
  .team__grid { grid-template-columns: repeat(3, 1fr); }
  .event-hero__copy { padding: 6.5rem var(--space-8) 3.25rem; }
  .event-split { grid-template-columns: 1.1fr 0.9fr; align-items: start; padding: 3rem 2rem; }
  .event-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .workshop-feature {
    grid-template-columns: 7fr 5fr;
    min-height: 38rem;
    background: var(--charcoal);
  }
  .workshop-feature::after { display: none; }
  .stream-block--first .workshop-feature { min-height: 100svh; }
  .workshop-feature__media { position: relative; min-height: 100%; }
  .workshop-feature__media img { position: absolute; inset: 0; }
  .workshop-feature__panel {
    align-self: stretch;
    display: grid;
    align-content: end;
    max-width: none;
    margin: 0;
    padding: 6rem 2.75rem 3rem;
    background: var(--charcoal);
  }
  .paid-events__list { grid-template-columns: repeat(2, 1fr); }
  .inquiry-form { grid-template-columns: 1fr 1fr; }
  .inquiry-form__full, .inquiry-form button, .inquiry-form__status { grid-column: 1 / -1; }
  .site-footer__inner { padding-block: 2.75rem 1.5rem; }
  .site-footer__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr); gap: 2.5rem 3rem; }
  .site-footer__bar { flex-direction: row; gap: 0.75rem; margin-top: 2rem; }
}

.qr-page {
  padding: 1.25rem 1.15rem 6.5rem;
  max-width: 28rem;
  margin: 0 auto;
}
.qr-page--cart, .qr-page--placed { padding-bottom: 2.5rem; }
.qr-page__intro h1 { font-size: clamp(2rem, 8vw, 3.1rem); }
.qr-chip {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.7rem;
  border-radius: 999px;
  background: var(--charcoal);
  color: var(--linen);
  font-family: var(--display);
  font-size: 1.35rem;
  vertical-align: middle;
}
.qr-cat { margin-top: 2rem; }
.qr-cat__desc { color: var(--mute); margin: 0 0 0.85rem; }
.qr-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.85rem; }
.qr-dish {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.75rem 0.85rem;
  padding: 0.85rem 0 1rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--olive) 40%, transparent);
}
.qr-dish__img {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: 0.4rem;
  background: color-mix(in srgb, var(--olive) 12%, var(--linen));
  grid-row: span 2;
}
.qr-dish__img--empty {
  display: block;
  background:
    radial-gradient(circle at 50% 50%, transparent 36%, var(--olive) 37%, var(--olive) 40%, transparent 41%),
    var(--charcoal);
}
.qr-dish__copy strong { display: block; font-family: var(--display); font-size: 1.15rem; }
.qr-dish__copy p { margin: 0.25rem 0 0; color: var(--mute); font-size: 0.92rem; }
.qr-dish .price { display: block; margin-top: 0.35rem; font-family: var(--display); color: var(--moss); }
.qr-stepper {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.15rem;
}
.qr-stepper__btn {
  width: 2.75rem;
  height: 2.75rem;
  min-width: 44px;
  min-height: 44px;
  border-radius: 999px;
  border: 1px solid var(--olive);
  background: transparent;
  color: var(--olive);
  font-size: 1.25rem;
  cursor: pointer;
}
.qr-stepper__btn:disabled { opacity: 0.35; cursor: default; }
.qr-stepper__btn:focus-visible { outline: 2px solid var(--moss); outline-offset: 2px; }
.qr-stepper__qty {
  min-width: 1.5rem;
  text-align: center;
  font-weight: 600;
}
.qr-bar {
  position: sticky;
  bottom: 0;
  z-index: 30;
  padding: 0.75rem 1.15rem max(0.85rem, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--linen) 88%, white);
  border-top: 1px solid color-mix(in srgb, var(--olive) 28%, transparent);
}
.qr-bar__btn {
  width: 100%;
  min-height: 44px;
}
.qr-cart { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.qr-cart__line {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: center;
  padding: 0.85rem 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--olive) 40%, transparent);
}
.qr-cart__line .price { color: var(--moss); font-family: var(--display); }
.qr-total { font-size: 1.15rem; }
.qr-tax { color: var(--mute); font-size: 0.88rem; }
.qr-confirm { display: grid; gap: 0.85rem; margin-top: 1.25rem; }
.qr-confirm label { display: grid; gap: 0.35rem; font-size: 0.88rem; }
.qr-confirm input, .qr-confirm textarea {
  font: inherit;
  font-size: 1rem;
  padding: 0.7rem 0.8rem;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--charcoal) 18%, transparent);
  border-radius: 0.6rem;
  background: #fff;
}
.qr-confirm__primary, .qr-confirm__secondary {
  min-height: 44px;
  width: 100%;
  cursor: pointer;
}
.qr-messages { color: var(--wood); padding-left: 1.1rem; }
body[data-page-kind="qr-order"] .site-header__nav,
body[data-page-kind="qr-order"] .nav-toggle,
body[data-page-kind="qr-order"] .mobile-nav,
body[data-page-kind="qr-order"] .mobile-dock,
body[data-page-kind="qr-order"] .site-footer,
body[data-page-kind="qr-order"] .locale-switcher {
  display: none;
}
body[data-page-kind="qr-order"] .site-header { justify-content: flex-start; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-notice { animation: none; }
  .site-lock { transition: none; }
  .btn,
  .dish-card,
  .quotes blockquote,
  .paid-events__list li {
    transition-property: color, background-color, border-color;
  }
}

/* Owner photography: the illuminated wave wall is the visual signature. */
.brand-wordmark { display: inline-flex; flex-direction: column; font-family: var(--font-display, 'Fraunces', serif); font-size: 2.4rem; line-height: 0.95; letter-spacing: -0.045em; color: inherit; }
.brand-wordmark small { font-family: 'Outfit', sans-serif; font-size: 0.65rem; line-height: 1.4; letter-spacing: 0.14em; }
.hero { isolation: isolate; background: var(--charcoal); }
.hero__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20,22,17,.3), rgba(20,22,17,.18) 28%, rgba(20,22,17,.9)); }
.site-body:not([data-page-kind="home"]) .hero { min-height: 34rem; }
.site-body .hero.hero--text { min-height: 0; padding-top: calc(var(--header-h) + 3rem); padding-bottom: 3rem; }
.hero--text .hero__title { font-size: clamp(2.75rem, 7vw, 5rem); }
.hero--text .hero__hours { display: none; }
.gallery--cafe .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.gallery--cafe figure { margin: 0; }
.gallery--cafe figure img { aspect-ratio: 4 / 3; border-radius: .5rem; }
.gallery--cafe figure:first-child { grid-column: 1 / -1; }
.gallery--cafe figure:first-child img { aspect-ratio: 16 / 9; }
.gallery--cafe figcaption { max-width: 60ch; margin-top: .75rem; }
@media (max-width: 767px) {
  .site-body:not([data-page-kind="home"]) .hero { min-height: 30rem; }
  .site-body .hero.hero--text { min-height: 0; padding-top: calc(var(--header-h) + 2rem); }
  .gallery--cafe .gallery__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .gallery--cafe figure:first-child img { aspect-ratio: 4 / 3; }
  .hero__image { object-position: 60% center; }
}

.qr-list .qr-dish--text { grid-template-columns: minmax(0, 1fr); }
.qr-dish--text .qr-stepper { grid-column: 1; }

/* Celebrate calendar: illustrated cards with real booking details in HTML. */
.celebrate-teaser { max-width: 72rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); border-block: 1px solid var(--color-border-default); background: color-mix(in srgb, var(--olive) 9%, var(--linen)); }
.celebrate-teaser h2 { margin: 0 0 .6rem; font-size: clamp(1.8rem, 3.5vw, 3rem); }
.celebrate-teaser p { max-width: 48ch; }
.celebrate-teaser .btn { flex-shrink: 0; gap: 1rem; }
.event-calendar { scroll-margin-top: 7rem; }
.event-calendar__heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.event-calendar__heading h2 { margin: 0 0 .7rem; font-size: clamp(2rem, 4vw, 3.4rem); }
.event-calendar__heading .lede { max-width: 52ch; margin-bottom: 0; }
.event-calendar__note { flex: 0 0 15rem; color: var(--mute); font-size: .85rem; line-height: 1.5; }
.event-calendar__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.event-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border: 1px solid var(--color-border-default); border-radius: 1rem; }
.event-card__image { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ceramic); }
.event-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.event-card__body { padding: 1.4rem; display: flex; flex: 1; flex-direction: column; align-items: start; }
.event-card__date { color: var(--forest); font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.event-card h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.15; margin: .8rem 0; }
.event-card h3 a { color: inherit; text-decoration: none; }
.event-card h3 a:hover { text-decoration: underline; text-underline-offset: .2em; }
.event-card__meta { color: var(--mute); font-size: .95rem; line-height: 1.6; margin: 0 0 1.4rem; }
.event-card__footer { width: 100%; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--color-border-default); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.event-card__price { margin: 0; font-family: var(--display); color: var(--moss); font-size: 1.3rem; white-space: nowrap; }
.event-card__price span { display: block; font-family: var(--sans); font-size: .75rem; color: var(--mute); }
.event-card__footer .btn { padding: .7rem .85rem; font-size: .85rem; }
@media (max-width: 1000px) { .event-calendar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .event-calendar__grid { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .event-calendar__heading, .celebrate-teaser { flex-direction: column; align-items: start; gap: 1rem; }
  .event-calendar__note { flex-basis: auto; margin: 0; max-width: 38ch; }
  .event-card__body { padding: 1.25rem; }
}

/* Menu: one anchored category rail, naturally scrolling dishes. */
.menu-explorer { max-width: 78rem; margin: 0 auto; }
.menu-explorer__intro { margin-bottom: 2rem; }
.menu-explorer__intro h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin: 0 0 .6rem; }
.menu-explorer__layout { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.menu-sidebar { position: sticky; top: calc(var(--header-h, 80px) + 1.2rem); max-height: calc(100dvh - var(--header-h, 80px) - 2.5rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 1rem 1rem 0; }
.menu-sidebar summary { cursor: default; list-style: none; font-family: var(--display); color: var(--forest); font-size: 1.5rem; margin-bottom: 1rem; }
.menu-sidebar summary::-webkit-details-marker { display: none; }
.menu-sidebar summary > span { display: none; }
.menu-sidebar__label { display: block; margin: 0 0 .55rem; color: var(--mute); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.menu-categories a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 36px; padding: .42rem .7rem; margin-block: .1rem; border-left: 2px solid transparent; border-radius: 0 .4rem .4rem 0; color: var(--mute); text-decoration: none; font-size: .95rem; }
.menu-categories a:hover { background: color-mix(in srgb, var(--olive) 9%, transparent); }
.menu-categories a[aria-current] { color: var(--forest); border-color: var(--forest); background: color-mix(in srgb, var(--olive) 13%, var(--linen)); font-weight: 600; }
.menu-categories a[aria-disabled="true"] { opacity: .48; }
.menu-category-count, .menu-filter__count { font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--mute); }
.menu-filters { margin-top: 1.5rem; border-top: 1px solid var(--color-border-default); padding-top: 1.25rem; }
.menu-filters input[type="search"] { width: 100%; min-height: 44px; border: 1px solid var(--color-border-default); background: var(--paper); border-radius: .4rem; padding: .65rem; font: inherit; font-size: .9rem; margin-bottom: 1.25rem; }
.menu-filters fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.menu-filter { display: flex; align-items: center; gap: .6rem; min-height: 44px; cursor: pointer; font-size: .9rem; }
.menu-filter input { width: 16px; height: 16px; accent-color: var(--forest); flex-shrink: 0; }
.menu-filter__count { margin-left: auto; }
.diet-icon { width: 19px; height: 19px; flex-shrink: 0; color: var(--forest); }
.diet-icon--non_veg { color: #98422d; }
.menu-filters__hint { font-size: .75rem; line-height: 1.45; color: var(--mute); margin: .7rem 0 .2rem; }
.menu-reset { background: none; border: none; padding: .55rem 0; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; color: var(--forest); font: inherit; font-size: .85rem; cursor: pointer; }
.menu-results { min-width: 0; }
.menu-results__status { margin: 0 0 1.3rem; color: var(--mute); font-size: .85rem; }
.menu-section { scroll-margin-top: calc(var(--header-h, 80px) + 2rem); margin-bottom: 3.5rem; }
.menu-section__heading { border-bottom: 2px solid var(--forest); padding-bottom: 1rem; margin-bottom: .25rem; }
.menu-section__heading h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); color: var(--forest); margin: 0; }
.menu-section__heading p { color: var(--mute); margin: .45rem 0 0; }
.menu-dishes { list-style: none; margin: 0; padding: 0; }
.menu-dish { display: flex; justify-content: space-between; gap: 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--color-border-default); }
.menu-dish__copy { min-width: 0; }
.menu-dish h3 { font-family: var(--sans); font-size: 1.14rem; font-weight: 600; line-height: 1.4; margin: 0; }
.menu-dish p { margin: .45rem 0 0; font-size: .95rem; line-height: 1.6; max-width: 58ch; color: var(--mute); }
.menu-dish__price { font-family: var(--display); color: var(--forest); font-size: 1.2rem; white-space: nowrap; }
.menu-dish__tags { display: flex; flex-wrap: wrap; gap: .5rem 1rem; list-style: none; padding: 0; margin: .75rem 0 0; }
.menu-dish__tags li { display: inline-flex; align-items: center; gap: .3rem; color: var(--mute); font-size: .72rem; }
.menu-dish__tags .diet-icon { width: 15px; height: 15px; }
.menu-empty { padding: 2rem 0; }
.menu-empty h2 { font-size: 1.8rem; }
.menu-explorer [hidden] { display: none !important; }
@media (max-width: 760px) {
  .menu-explorer__layout { display: block; }
  .menu-sidebar { z-index: 25; top: var(--header-h, 70px); max-height: calc(100dvh - var(--header-h, 70px) - var(--dock-h, 70px) - 1rem); margin: 0 0 1.5rem; padding: 0; border: 1px solid var(--color-border-default); background: var(--linen); border-radius: .6rem; box-shadow: 0 3px 10px #0000000c; }
  .menu-sidebar summary { padding: .9rem 1rem; margin: 0; display: flex; align-items: center; justify-content: space-between; font-family: var(--sans); font-size: 1rem; font-weight: 600; min-height: 52px; cursor: pointer; }
  .menu-sidebar summary > span { display: inline; }
  .menu-sidebar[open] summary { border-bottom: 1px solid var(--color-border-default); }
  .menu-sidebar__inside { padding: 1rem; }
  .menu-categories a { min-height: 44px; }
  .menu-dish { gap: 1rem; padding: 1.25rem 0; }
  .menu-section { scroll-margin-top: calc(var(--header-h, 70px) + 5rem); }
  .menu-dish h3 { font-size: 1rem; }
  .menu-dish p { font-size: .9rem; }
  .menu-dish__price { font-size: 1.1rem; }
}
.menu-filters { margin: 0 0 1.2rem; border-top: 0; border-bottom: 1px solid var(--color-border-default); padding: 0 0 .6rem; }
.menu-filters input[type="search"] { margin-bottom: 1rem; }
.menu-filters fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.menu-filters legend { margin-bottom: .65rem; }
.menu-filter { position: relative; gap: .35rem; padding: .5rem; border: 1px solid var(--color-border-default); border-radius: .45rem; font-size: .75rem; line-height: 1.25; background: var(--paper); }
.menu-filter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.menu-filter:has(input:checked) { background: var(--forest); border-color: var(--forest); color: var(--linen); }
.menu-filter:has(input:checked) .diet-icon, .menu-filter:has(input:checked) .menu-filter__count { color: inherit; }
.menu-filter:has(input:focus-visible) { outline: 2px solid var(--forest); outline-offset: 3px; }
.menu-filter .diet-icon { width: 17px; height: 17px; }
.menu-filter__count { font-size: .65rem; }
.menu-filter:has(input:checked)::after { content: '✓'; position: absolute; top: -.35rem; right: -.2rem; background: var(--forest); border-radius: 50%; width: .8rem; height: .8rem; text-align: center; font-size: .6rem; }
.menu-sidebar { top: calc(var(--menu-header-bottom, var(--header-h, 80px)) + 1rem); max-height: calc(100dvh - var(--menu-header-bottom, var(--header-h, 80px)) - 2rem); }
.site-header__cta { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1100px) {
  .site-header__nav { display: none; }
  .site-header .nav-toggle { display: inline-flex; }
  .mobile-nav:not([hidden]) { display: block; }
}
@media (max-width: 760px) {
  .menu-sidebar { top: var(--menu-header-bottom, var(--header-h, 70px)); max-height: calc(100dvh - var(--menu-header-bottom, var(--header-h, 70px)) - var(--dock-h, 70px) - 1rem); }
}

/* A separate WhatsApp chooser keeps the mobile dock focused on reservations. */
.whatsapp-widget {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: max(10vh, calc(var(--dock-h, 0px) + 1rem));
  bottom: max(10dvh, calc(var(--dock-h, 0px) + 1rem));
  z-index: 44;
}
.whatsapp-widget__toggle {
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  list-style: none;
  cursor: pointer;
  background: #25d366;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgb(0 0 0 / 20%);
}
.whatsapp-widget__toggle::-webkit-details-marker { display: none; }
.whatsapp-widget__toggle img { display: block; width: 2.1rem; height: 2.1rem; object-fit: contain; }
.whatsapp-widget__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.75rem);
  width: min(21rem, calc(100vw - 2rem));
  max-height: calc(80dvh - 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.15rem;
  color: var(--charcoal);
  background: var(--linen);
  border: 1px solid var(--moss);
  border-radius: 1rem;
  box-shadow: 0 8px 32px rgb(0 0 0 / 20%);
}
.whatsapp-widget__heading { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.whatsapp-widget__heading strong { font-size: 1.15rem; }
.whatsapp-widget__close { width: 2.75rem; height: 2.75rem; padding: 0; border: 0; background: transparent; color: inherit; font-size: 1.6rem; cursor: pointer; }
.whatsapp-widget__panel p { margin: 0.25rem 0 0.85rem; font-size: 0.9rem; }
.whatsapp-widget__messages { display: grid; gap: 0.5rem; }
.whatsapp-widget__messages a { display: block; padding: 0.75rem; min-height: 2.75rem; border: 1px solid var(--moss); border-radius: 0.5rem; color: var(--charcoal); text-decoration: none; line-height: 1.4; }
.whatsapp-widget__messages a:hover { background: var(--moss); color: var(--linen); }
.whatsapp-widget :focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
body.nav-open .whatsapp-widget,
body.is-site-locked .whatsapp-widget,
body[data-page-kind="qr-order"] .whatsapp-widget { display: none; }

/* Keep menu controls within the viewport after the desktop header scrolls away. */
.menu-sidebar { align-self: start; }
@media (min-width: 761px) {
  .menu-section__heading {
    position: sticky;
    top: var(--menu-header-bottom, 0px);
    z-index: 5;
    padding-top: 1rem;
    background: var(--color-surface-page);
  }
}