.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--header-h);
  padding: 0 clamp(1rem, 3vw, 2.5rem);
  color: var(--color-charcoal);
  pointer-events: none;
}

.site-header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--header-h) + 22px);
  background: linear-gradient(to bottom, color-mix(in oklab, var(--color-parchment) 96%, transparent), color-mix(in oklab, var(--color-parchment) 0%, transparent));
  pointer-events: none;
}

.site-header a,
.site-header button {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.site-brand {
  justify-self: center;
  font-size: clamp(0.9rem, 1.3vw, 1.1rem);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-brand__logo {
  display: block;
  height: 60px;
  width: auto;
  /* The owner's gold lockup (2026-10-09), transparent background. Keep it
     >=48px tall or the ornamental letterforms blur. */
}

.header-left,
.header-right {
  font: 11px/1.2 var(--font-sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.header-left {
  /* above the header scrim (::before), like the links */
  position: relative;
  z-index: 1;
  color: color-mix(in oklab, var(--color-charcoal) 72%, transparent);
}

.header-right {
  justify-self: end;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.header-reserve {
  color: var(--color-burgundy);
}

.menu-toggle {
  display: inline-grid;
  place-items: center;
  min-width: 50px;
  min-height: 50px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  font: 11px/1 var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.menu-toggle::after {
  content: '';
  width: 50px;
  height: 50px;
  grid-area: 1 / 1;
  border: 1px solid color-mix(in oklab, var(--color-charcoal) 22%, transparent);
  border-radius: var(--radius-pill);
}

.menu-toggle span {
  grid-area: 1 / 1;
}

.overlay-menu {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  /* Near-solid charcoal scrim so the menu is readable over any page; it
     fades in with the existing opacity transition. (The ::before circle
     alone can't carry this: its blur(8px) scales x72 into a ~576px feather,
     leaving most of the viewport translucent.) */
  background: color-mix(in oklab, var(--color-mahogany-dark) 96%, transparent);
  backdrop-filter: blur(6px);
  overscroll-behavior: contain;
  transition:
    opacity var(--duration-medium) var(--ease-soft),
    visibility 0s linear var(--duration-medium);
}

.overlay-menu::before {
  content: '';
  position: absolute;
  top: 18px;
  right: 20px;
  width: 58px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: var(--color-mahogany-dark);
  filter: blur(8px);
  opacity: 0;
  transform: scale(0.4);
  transform-origin: top right;
  transition:
    opacity var(--duration-page) var(--ease-out-expo),
    transform var(--duration-page) var(--ease-out-expo);
}

.overlay-menu.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition-delay: 0s;
}

.overlay-menu.open::before {
  opacity: 1;
  transform: scale(72);
}

/* the scroller: the whole screen, so wheel and touch work anywhere, centring
   the menu and scrolling only when it is taller than the screen (320x568).
   "safe" keeps the top reachable instead of centring it off-screen. */
.overlay-scroll {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  place-items: safe center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: 1.5rem;
}

.overlay-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  gap: clamp(2rem, 7vw, 7rem);
  width: min(1000px, 88vw);
  color: var(--color-ivory);
}

/* sits exactly where the header's Menu toggle is (the overlay covers it) */
.overlay-close {
  position: fixed;
  top: calc((var(--header-h) - 50px) / 2);
  right: clamp(1rem, 3vw, 2.5rem);
  color: var(--color-ivory);
}

/* Each link's clickable box is exactly its word and its row. Jost sits low
   in a 0.96 line, so padding-bottom brings the descenders (y, g) inside the
   box, and overflow: hidden stops its tall text area reaching into the next
   link up (which used to win clicks on the bottom of the row above). The
   rows are touching boxes with no dead gaps. Font size also follows the
   viewport height so the whole list fits short laptop screens (1366x768). */
.overlay-nav a {
  display: block;
  width: fit-content;
  overflow: hidden;
  margin: 0;
  padding-bottom: 0.12em;
  font-size: clamp(2.5rem, min(7vw, 10.5vh), 6rem);
  line-height: 0.96;
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--duration-medium) var(--ease-soft),
    transform var(--duration-medium) var(--ease-soft);
}

/* the closing invitation: smaller, italic, set apart by a gold rule */
.overlay-nav a.overlay-nav__adventure {
  width: fit-content;
  margin-top: clamp(1rem, 2.4vw, 2rem);
  padding-top: clamp(0.75rem, 1.6vw, 1.25rem);
  border-top: 1px solid color-mix(in oklab, var(--color-brass) 55%, transparent);
  color: var(--color-brass);
  font-size: clamp(1.6rem, 3.4vw, 3rem);
  font-style: italic;
}

.overlay-menu.open .overlay-nav a,
.overlay-menu.open .overlay-utility a {
  opacity: 1;
  transform: none;
}

.overlay-utility a {
  display: block;
  /* ~44px tall tap target */
  padding: 0.95rem 0;
  font: 12px/1.2 var(--font-sans);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--duration-medium) var(--ease-soft),
    transform var(--duration-medium) var(--ease-soft);
}

.fixed-cta {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 1100;
  display: flex;
  justify-content: center;
  gap: 0;
  transform: translateX(-50%);
}

.fixed-cta a,
.btn-primary,
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0.9rem 1.25rem;
  font: 12px/1 var(--font-sans);
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.fixed-cta a {
  min-width: min(280px, 42vw);
  backdrop-filter: blur(12px);
}

.btn-primary,
.fixed-cta .btn-primary {
  border: 1px solid var(--color-burgundy);
  background: color-mix(in oklab, var(--color-burgundy) 92%, transparent);
  color: var(--color-ivory);
}

.btn-secondary,
.fixed-cta .btn-secondary {
  border: 1px solid var(--color-brass);
  background: color-mix(in oklab, var(--color-parchment) 80%, transparent);
  color: var(--color-charcoal);
}

.btn-secondary.on-light {
  color: var(--color-charcoal);
  background: transparent;
}

.mobile-cta {
  display: none;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin-top: 2rem;
}

.card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  padding: 1rem;
  border: 1px solid currentColor;
  background: color-mix(in oklab, currentColor 5%, transparent);
  font: 12px/1.2 var(--font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-conversion {
  background: var(--color-mahogany-dark);
  color: var(--color-ivory);
  padding: clamp(5rem, 9vw, 8rem) 6vw 7rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 3rem;
}

.footer-grid p {
  margin: 0.55rem 0;
}

@media (max-width: 980px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .header-left,
  .header-reserve {
    display: none;
  }

  .site-brand {
    justify-self: start;
    grid-column: 1 / 2;
  }

  .header-right {
    grid-column: 2 / 3;
  }

  .overlay-inner {
    grid-template-columns: 1fr;
  }

  .fixed-cta {
    display: none;
  }

  .mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1100;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--color-mahogany);
    color: var(--color-ivory);
  }

  .mobile-cta a {
    padding: 1rem 0.5rem;
    border-top: 1px solid color-mix(in oklab, var(--color-ivory) 12%, transparent);
    text-align: center;
    font: 12px/1 var(--font-sans);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

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

@media (max-width: 640px) {
  .site-brand {
    max-width: 200px;
    white-space: normal;
  }

  .site-brand__logo {
    height: 48px;
  }

  .header-right > a {
    display: none;
  }

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

/* Subpage Menu Tabs & Grid Layout */
.menu-hero {
  padding-bottom: 2rem;
}

.menu-page-tabs__wrapper {
  position: sticky;
  top: var(--header-h); /* Sticks right below the header */
  z-index: 1000;
  background: var(--color-parchment);
  border-bottom: 1px solid color-mix(in oklab, var(--color-charcoal) 12%, transparent);
  transition: top var(--duration-fast) var(--ease-soft);
}

.menu-page-tabs {
  display: flex;
  justify-content: center;
  gap: 2rem;
  max-width: 600px;
  margin: 0 auto;
  padding: 0.5rem 0;
}

.menu-page-tab {
  position: relative;
  background: none;
  border: none;
  /* ~44px tall tap target */
  min-height: 44px;
  padding: 0.95rem 1rem;
  color: color-mix(in oklab, var(--color-charcoal) 60%, transparent);
  font: 13px/1 var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-soft);
}

/* phones down to 320px: the three tabs fit on one line, and wrap rather than
   overflow when text is enlarged (WCAG 1.4.10) */
@media (max-width: 480px) {
  .menu-page-tabs {
    flex-wrap: wrap;
    gap: 0 0.25rem;
  }

  .menu-page-tab {
    padding-inline: 0.55rem;
    letter-spacing: 0.08em;
  }
}

.menu-page-tab::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-burgundy);
  transform: scaleX(0);
  transition: transform var(--duration-fast) var(--ease-soft);
}

.menu-page-tab:hover {
  color: var(--color-charcoal);
}

.menu-page-tab.is-active {
  color: var(--color-charcoal);
  font-weight: 700;
}

.menu-page-tab.is-active::after {
  transform: scaleX(1);
}

.menu-page-container {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: clamp(2rem, 7vw, 7rem);
  padding: clamp(3rem, 6vw, 6rem) clamp(1rem, 4.2vw, 4.8rem);
  background: var(--color-parchment);
}

.menu-page-content {
  display: flex;
  flex-direction: column;
}

/* inactive panels carry the hidden attribute (see buildMenuPage) */
.menu-panel[hidden] {
  display: none;
}

.menu-page-section {
  margin-bottom: 3.5rem;
}

.menu-page-section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.5vw, 2.0rem);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--color-burgundy);
  border-bottom: 1px solid color-mix(in oklab, var(--color-brass) 50%, transparent);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
  letter-spacing: 0.08em;
}

.menu-page-footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid color-mix(in oklab, var(--color-charcoal) 12%, transparent);
}

.menu-page-footer p {
  color: var(--color-muted);
  font-size: 0.95rem;
  font-style: italic;
}

.menu-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.5rem;
}

.menu-page-media {
  background: var(--color-mahogany-dark);
}

.menu-page-image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.05);
  transition:
    opacity var(--duration-medium) var(--ease-soft),
    transform var(--duration-medium) var(--ease-soft);
}

.menu-page-image.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.menu-page-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Responsiveness overrides for menu page */
@media (max-width: 1100px) {
  .menu-page-container {
    grid-template-columns: 1fr;
  }

  .menu-page-media {
    position: relative;
    height: min(60svh, 500px);
  }

  .menu-page-image {
    position: absolute;
  }
}

[id] {
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

/* menu sections also clear the sticky tab bar (~61px) under the header */
.menu-panel [id] {
  scroll-margin-top: calc(var(--header-h) + 4rem + 1rem);
}