.menu-hero {
  /* Was height:100vh — on a typical viewport that pushed the restaurant
     toggle buttons and Food/Wine/Cocktails tabs (both come right after
     this section in normal flow) below the fold. Figma (node 426:1476)
     sizes the hero to 750px at the 1728px reference width instead — a
     band, not a full screen — so they're visible without scrolling. */
  aspect-ratio: 390 / 700;
}

@media (min-width: 1024px) {
  .menu-hero {
    aspect-ratio: 1728 / 750;
  }
}

.menu-hero .media-banner__image {
  /* Source photo is a tall portrait (fork/food in focus near the top,
     blurred plate below). Bias the crop upward so the in-focus subject
     shows instead of the centered default landing on the blurry middle,
     while leaving a sliver of black headroom above it to match the design. */
  object-position: 50% 13%;
}

.menu-hero .media-banner__title {
  /* Narrower than the shared 50rem so "Classic Roots" wraps onto its own
     line at desktop widths, matching the design's two-line split. */
  max-width: 37.5rem;
}

.menu-tabs {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-section-x) 0;
}

.menu-tabs__tab {
  /* Each button carries its own --tab-color (set inline in menu.njk) so its
     unselected border/text always shows ITS location's color, regardless of
     which tab is currently active — the shared --color-theme on this
     wrapper is for the menu-content/panels below, not this row. */
  flex: 1;
  /* Tighter horizontal padding than --space-sm at mobile — "Haddington
     Road" was wrapping to 2 lines otherwise. Desktop restores the original
     padding below (plenty of room there). */
  padding: var(--space-sm) 0.625rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--tab-color);
  background: transparent;
  color: var(--tab-color);
  font-family: var(--font-display);
  font-weight: 300;
  /* Custom curve, not the shared --fs-section-title token: desktop matches
     that token's value exactly (~64px at the 1728px reference frame), but
     mobile needs to be much smaller (~17px) so both tabs fit side by side
     on one line each — --fs-section-title's own mobile floor (38px) was
     too big for that and forced them onto separate lines/wrapping. */
  font-size: clamp(1.0625rem, 0.2065rem + 3.513vw, 4rem);
  text-transform: uppercase;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.menu-tabs__tab:hover:not(.is-active) {
  background: color-mix(in srgb, var(--tab-color) 12%, transparent);
}

.menu-tabs__tab.is-active {
  background: var(--tab-color);
  color: var(--color-cream);
}

.menu-categories {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-section-x);
}

.menu-categories__tab {
  font-family: var(--font-display);
  font-weight: 300;
  /* Figma renders Food/Wine/Cocktails much larger than the shared eyebrow
     token (~51px at the 1728px reference frame) — sized to match. */
  font-size: clamp(1.75rem, 1.2rem + 2.8vw, 3.2rem);
  /* Was var(--color-olive) hardcoded — stayed olive under the Haddington
     Road tab since menu.js only re-themes .menu-panel/.menu-tabs/
     .menu-filters, not this row. --color-theme tracks the active location
     like those do (see menu.js). */
  color: var(--color-theme);
  padding-bottom: 0.35em;
  border-bottom: 2px solid transparent;
  transition: border-color 0.18s ease;
}

.menu-categories__tab:hover {
  border-bottom-color: var(--color-theme);
  opacity: 0.7;
}

.menu-categories__tab.is-active {
  border-bottom-color: var(--color-theme);
  opacity: 1;
}

.menu-filters {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-section-x);
  /* overflow-x:auto used to live here, on the whole row — but setting
     overflow-x on an element forces its overflow-y to clip too (a plain
     CSS rule, not a bug), which was cutting off the top of the
     "Download Menu" tooltip that pops up above .menu-download, a sibling
     of the scrollable pills rather than one of the pills itself. Moved
     onto .menu-filters__track below, which only wraps the pills that
     actually need to scroll. */
}

.menu-download {
  /* Explicit fluid square matched to the pills' own rendered height
     (measured: ~38px mobile, ~57px at the 1728px reference frame) —
     aspect-ratio + flex align-items:stretch doesn't reliably resolve a
     flex item's main-axis (width) size from its stretched cross size, so
     it rendered as a thin sliver instead of a square. */
  flex-shrink: 0;
  width: clamp(2.4rem, 2.06rem + 1.39vw, 3.5625rem);
  height: clamp(2.4rem, 2.06rem + 1.39vw, 3.5625rem);
  border-radius: var(--radius-sm);
  background: var(--color-theme);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.18s ease;
}

.menu-download:hover {
  opacity: 0.8;
}

/* This button sits at the far left edge of the page, so the generic
   [data-tooltip] utility's centered bubble ran off-screen to the left.
   Left-align it to the trigger instead of centering, just here. */
.menu-download[data-tooltip]::after {
  left: 0;
  transform: translateY(4px);
}

.menu-download[data-tooltip]:hover::after,
.menu-download[data-tooltip]:focus-visible::after {
  transform: translateY(0);
}

.menu-download[data-tooltip]::before {
  left: 0.85em;
  transform: translateY(4px);
}

.menu-download[data-tooltip]:hover::before,
.menu-download[data-tooltip]:focus-visible::before {
  transform: translateY(0);
}

.menu-download img {
  width: 1rem;
  height: 1rem;
}

.menu-filters__track {
  display: flex;
  gap: var(--space-xs);
  /* min-width:0 lets this flex item shrink below its pills' natural total
     width — without it, overflow-x here would never actually engage. */
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.menu-filters__track::-webkit-scrollbar {
  display: none;
}

.menu-filters__pill {
  flex-shrink: 0;
  padding: 0.6em 1em;
  border-radius: var(--radius-sm);
  /* Was var(--color-olive) hardcoded — stayed olive under the Haddington
     Road tab like .menu-categories__tab did (see menu.js/menu.css), since
     only .is-active below tracked the active location. */
  border: 1px solid var(--color-theme);
  color: var(--color-theme);
  font-size: var(--fs-button);
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.menu-filters__pill:hover:not(:disabled):not(.is-active) {
  background: var(--color-theme);
  color: var(--color-cream);
}

.menu-filters__pill.is-active {
  background: var(--color-theme);
  border-color: var(--color-theme);
  color: var(--color-cream);
}

.menu-filters__pill:disabled {
  /* Figma shows disabled/"coming soon" pills at full-strength color, not
     dimmed — only the missing hover/active treatment marks them inactive. */
  cursor: not-allowed;
}

.menu-panel {
  padding: var(--space-md) var(--space-section-x) var(--space-xl);
}

.menu-panel[hidden],
.menu-content[hidden],
.menu-pages[hidden],
.menu-filters__track[hidden],
.menu-download[hidden] {
  display: none;
}

.menu-content {
  background: var(--color-theme);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.menu-section {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  /* Matches the text's own font-size so the illustration (sized in `em`
     below) scales in exact lockstep with it at every viewport width, not
     just at the 1728px reference point. */
  font-size: var(--fs-body);
}

.menu-section__character {
  /* Figma's mobile menu has no per-section illustrations at all (see
     .menu-content__mobile-mark below for the single mark it uses
     instead) — these only appear from the desktop breakpoint. */
  display: none;
}

.menu-section__group-label {
  /* Mobile hides this too, same as .menu-section__character — Figma's
     mobile menu doesn't show a "Small Plates" label at all. */
  display: none;
}

.menu-content__mobile-mark {
  display: block;
  width: clamp(4rem, 18vw, 6rem);
  height: auto;
  margin: var(--space-md) auto 0;
  mix-blend-mode: screen;
  opacity: 0.7;
  pointer-events: none;
}

.menu-section__title,
.menu-section .menu-list {
  position: relative;
  z-index: 1;
}

.menu-section__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-body);
  color: var(--color-cream);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.menu-list__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}

.menu-list__name {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  color: var(--color-cream);
  line-height: 1.35;
}

.menu-list__text {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}

.menu-list__meta,
.menu-list__description {
  font-size: 0.75em;
  color: var(--color-cream);
  opacity: 0.8;
  line-height: 1.4;
}

.menu-section__note {
  font-size: 0.8em;
  color: var(--color-cream);
  opacity: 0.85;
  line-height: 1.45;
  max-width: 60rem;
  position: relative;
  z-index: 1;
}

/* Mobile stand-in for the desktop gutter group label ("Small Plates",
   "By the Bottle"…) — the absolute label has no room at narrow widths. */
.menu-section__group-mobile {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-body);
  color: var(--color-cream);
  text-transform: uppercase;
  opacity: 0.7;
}

.menu-footnotes {
  font-size: 0.7rem;
  color: var(--color-cream);
  opacity: 0.75;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  border-top: 1px solid color-mix(in srgb, var(--color-cream) 30%, transparent);
  padding-top: var(--space-md);
}

.menu-footnotes__title {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.menu-footnotes__key {
  list-style: none;
  margin: 0 0 0.5em;
  padding: 0;
  columns: 2 14rem;
  column-gap: var(--space-md);
}

/* Cocktail lists are shown exactly as the client's PDF, page by page. */
.menu-pages {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}

.menu-pages__page {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.menu-list__allergens {
  font-size: 0.65em;
  opacity: 0.7;
}

.menu-list__price {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  color: var(--color-cream);
  flex-shrink: 0;
}

.menu-panel__pending {
  background: var(--color-theme);
  color: var(--color-cream);
  border-radius: var(--radius-md);
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  font-size: var(--fs-value);
}

@media (min-width: 1024px) {
  .menu-tabs__tab {
    padding: var(--space-sm);
  }

  .menu-content {
    padding: var(--space-xl) clamp(2rem, 1.5rem + 2.5vw, 6.25rem);
  }

  .menu-list__name {
    max-width: 60rem;
  }

  .menu-content__mobile-mark {
    display: none;
  }

  .menu-section__group-mobile {
    display: none;
  }

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

  .menu-footnotes {
    padding-left: clamp(4.2rem, -0.82rem + 20.6vw, 21.425rem);
  }

  /* Every section (not just the illustrated ones) is indented in the
     design, leaving a left gutter for the Land/Sea/Garden illustrations
     and the "Small Plates" group label to sit in without overlapping text.
     Measured from the Figma frame: content starts 342.8px in from the
     section's own left edge at the 1728px reference width. Desktop-only —
     mobile's menu has no illustrations/label to make room for. */
  .menu-section {
    padding-left: clamp(4.2rem, -0.82rem + 20.6vw, 21.425rem);
  }

  .menu-section__character {
    display: block;
    position: absolute;
    top: 50%;
    /* `em`, tied to the section's own font-size, so it tracks the text at
       every viewport width. */
    left: 1em;
    /* Fixed width (not height) so all three illustrations — which have
       different natural aspect ratios — line up consistently regardless
       of each image's own proportions. */
    width: 9em;
    height: auto;
    transform: translateY(-50%);
    mix-blend-mode: screen;
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
  }

  .menu-section__group-label {
    display: block;
    position: absolute;
    /* `em` (of its own font-size, --fs-body) rather than a fixed rem value,
       so it tracks the text size at any viewport width — same reasoning
       as .menu-section__character above. Measured ~71.8px in against a
       28px reference font-size at the 1728px reference width. */
    left: 2.564em;
    top: 0;
    /* Keep longer labels ("Cellar Collection", "Domaine D’Alussia") inside
       the gutter rather than running into the section content. */
    max-width: calc(clamp(4.2rem, -0.82rem + 20.6vw, 21.425rem) - 3.5em);
    margin-bottom: 0;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--fs-body);
    color: var(--color-cream);
    text-transform: uppercase;
  }
}