/* Menu page ("The board", menu option 2, picked 2026-10-27).
   The menu markup is written by tools/build-menu.mjs from content/menu.json; this file only styles it.
   Layout: title, intro and legend left with a photo right; a course bar that sticks to the top;
   each course = big name (with a photo when there is one) that stays put, dishes in two columns. */

.menu { padding: 0 var(--sc-gutter) clamp(4rem, 7vw, 7rem); }

/* Head */
.menu-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: 1fr auto auto; column-gap: clamp(2rem, 4vw, 5rem); padding-top: clamp(2rem, 6vh, 4rem); }
.menu-title { grid-column: 1; align-self: end; margin: 0; font-size: clamp(5rem, 11vw, 12rem); }
.menu-intro { grid-column: 1; margin: 1rem 0 0; max-width: 40ch; font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); }
.menu-head__photo { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
.menu-head__photo img { width: 100%; height: clamp(18rem, 52vh, 34rem); object-fit: cover; object-position: 50% 55%; }
.menu-tools { grid-column: 1; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; margin-top: 2rem; }
.menu-legend { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.menu-legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.menu-legend b { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--sc-ink); }
.allergen-toggle { height: 2.75rem; padding: 0 1rem; border: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background-color var(--sc-d-fast) var(--sc-ease-out); }
.allergen-toggle[aria-pressed="true"] { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .allergen-toggle[aria-pressed="false"]:hover { background: color-mix(in oklab, var(--sc-ink) 8%, transparent); } }

/* The course bar: sticks to the top, marks the course you're reading */
.menu-nav { position: sticky; top: 0; z-index: 5; margin: 3rem calc(var(--sc-gutter) * -1) 0; padding: 0 var(--sc-gutter); background: color-mix(in oklab, var(--sc-canvas) 92%, transparent); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--sc-hairline); }
.menu-nav ul { display: flex; gap: 2.25rem; height: 3.75rem; align-items: center; margin: 0; padding: 0; list-style: none; }
.menu-nav a { position: relative; display: flex; align-items: center; height: 3.75rem; padding-inline: 0.5rem; margin-inline: -0.5rem; text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; font-weight: 500; color: var(--sc-ink-soft); transition: color var(--sc-d-fast) var(--sc-ease-out); }
.menu-nav a:hover, .menu-nav a[aria-current] { color: var(--sc-ink); }
.menu-nav a[aria-current]::after { content: ""; position: absolute; left: 0.5rem; right: 0.5rem; bottom: 0; height: 2px; background: var(--sc-accent); }   /* each link fills the bar's height, so it's an easy tap */

/* Courses */
.course { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(0, 2.3fr); gap: clamp(2.5rem, 5vw, 6rem); padding-top: 4.5rem; scroll-margin-top: 0.5rem; }
.course__head { position: sticky; top: 6rem; align-self: start; }
.course__name { margin: 0; font-weight: 850; font-stretch: 62%; text-transform: uppercase; font-size: clamp(3rem, 4.6vw, 5rem); line-height: 0.88; }
.course__intro { margin: 0.5rem 0 0; max-width: 32ch; color: var(--sc-ink-soft); }
.course__photo { margin: 1.5rem 0 0; max-width: 16rem; }
.course__photo img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* Dishes */
.dishes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 3.5rem; align-content: start; margin: 0; padding: 0.6rem 0 0; list-style: none; }   /* start: rows keep their height next to a tall photo */
.dish__line { display: flex; align-items: baseline; gap: 0.6rem; }
.dish__name { margin: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; }
.dish__marks { display: inline-flex; gap: 0.3rem; align-self: center; }
.mark { display: inline-flex; align-items: center; height: 1.3rem; padding: 0 0.32rem; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--sc-ink-soft); }
.mark--hot { padding: 0 0.2rem; }
.chilli { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.dish__lead { flex: 1; min-width: 1.5rem; border-bottom: 1px dotted var(--sc-hairline-strong); transform: translateY(-0.3em); }
.dish__price { display: inline-flex; gap: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dish__price small { font-size: 0.78rem; font-weight: 500; color: var(--sc-ink-soft); }
.dish__desc { margin: 0.2rem 0 0; color: var(--sc-ink-soft); }
.dish__allergens { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--sc-ink-soft); }
.dish__allergens span { font-weight: 600; }
.hide-allergens .dish__allergens { display: none; }

/* After the last course: the small print and the one action */
.menu-foot { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(0, 2.3fr); column-gap: clamp(2.5rem, 5vw, 6rem); margin-top: 6rem; }
.menu-notes { grid-column: 2; display: grid; gap: 0.5rem; max-width: 62ch; margin: 0; padding: 0; list-style: none; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.menu-close { grid-column: 2; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.5rem; }
.menu-close p { margin: 0; color: var(--sc-ink-soft); }

/* ---- Tablet (1099px and narrower): each course's name sits above its dishes (beside it, the two
   dish columns got so narrow that prices stuck out at 1024px). The photo moves beside the name. ---- */
@media (max-width: 1099px) {
  .course { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .dishes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }   /* two columns only while each is 20rem or wider */
  .course__head { position: static; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 2rem; align-items: end; }
  .course__name, .course__intro { grid-column: 1; }
  .course__photo { grid-column: 2; grid-row: 1 / span 2; width: clamp(7rem, 16vw, 11rem); margin: 0; }
  .course__photo img { aspect-ratio: 1; }
  .menu-foot { grid-template-columns: 1fr; margin-top: 4rem; }
  .menu-notes, .menu-close { grid-column: 1; }
  /* The course bar scrolls sideways when the nine courses don't fit; menu.js keeps the course you're in visible */
  .menu-nav ul { gap: 1.6rem; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; padding-right: var(--sc-gutter); }
  .menu-nav ul::-webkit-scrollbar { display: none; }
  .menu-nav li { flex: none; }
}

/* ---- Phone (640px and narrower) ---- */
@media (max-width: 640px) {
  .menu-head { grid-template-columns: 1fr; grid-template-rows: auto; }
  .menu-title { font-size: clamp(4rem, 22vw, 6rem); }
  .menu-intro { font-size: 1.1rem; }
  .menu-head__photo { grid-column: 1; grid-row: auto; margin-top: 2rem; }
  .menu-head__photo img { height: 64vw; }
  .menu-tools { gap: 1rem 1.5rem; }
  .menu-legend { gap: 0.5rem 1.1rem; }

  .menu-nav { margin-top: 2.5rem; }

  .course { padding-top: 3.5rem; scroll-margin-top: 0; }
  .course__name { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .course__photo { width: 6.5rem; }
  .dishes { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
  .dish__line { flex-wrap: wrap; }                    /* at 320px (400% zoom) a wine's two prices drop under its name */
  .dish__name { font-size: 1.08rem; }
  .dish__price { gap: 0.6rem; margin-left: auto; }
  .menu-close .btn { width: 100%; }
}