/* Native vertical scrolling supplies the distance for the horizontal menu. */
#menu { overflow: visible; }
#menu .dish-rail { scrollbar-width: none; }
#menu .dish-rail::-webkit-scrollbar { display: none; }
/* Edge to edge: no width cap and no side padding, so nothing frames the carta. */
#menu.menu-pinned { max-width: none; padding: 24px 0; height: var(--menu-runway); box-sizing: content-box; animation: none; opacity: 1; transform: none; }
#menu.menu-pinned .section-heading, #menu.menu-pinned .menu-tools { padding-inline: clamp(20px, 2.5vw, 48px); }
/* The pinned panel fills the screen, so the next section never shares it with the dishes. */
#menu.menu-pinned .menu-sticky { position: sticky; top: var(--menu-top); height: var(--menu-panel); display: flex; flex-direction: column; }
/* The dishes stretch into the panel instead of floating in it: no dead space above or below. */
#menu.menu-pinned .dish-rail { flex: 1 1 auto; min-height: 0; align-items: center; }
/* The dish keeps its shape on any screen: width follows the height the panel leaves it. */
#menu.menu-pinned .dish-card { flex: 0 0 clamp(270px, calc(var(--menu-rail, 480px) * 0.72), 46vw); aspect-ratio: 1 / 1.6; height: auto; max-height: 100%; display: flex; flex-direction: column; }
#menu.menu-pinned .dish-img { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
#menu.menu-pinned .dish-info { flex: 0 0 auto; }
#menu.menu-pinned .section-heading { margin-bottom: 16px; }
#menu.menu-pinned .section-heading h2 { font-size: clamp(32px, 4vw, 56px); }
#menu.menu-pinned .section-heading .eyebrow { margin: 0; }
#menu.menu-pinned .section-heading > p { margin-top: 8px; }
#menu.menu-pinned .menu-tools { margin-bottom: 16px; }
/* Pinned: only the vertical gesture drives the rail, so a stray swipe cannot desync it. */
#menu.menu-pinned .dish-rail { overflow-x: hidden; scroll-behavior: auto; scroll-snap-type: none; padding-bottom: 8px; overscroll-behavior-x: none; }
#menu.menu-pinned #siteError:empty { margin: 0; }
/* No pin (reduced motion, short viewport, or JS not ready): a plain wrapped grid, never a hidden rail. */
#menu:not(.menu-pinned) .dish-rail { flex-wrap: wrap; overflow: visible; }
#menu:not(.menu-pinned) .dish-card { flex: 1 1 255px; max-width: 360px; }

/* One flat surface: no section band, no card frames, no grey placeholder blocks. */
#menu.menu-section { background: var(--ink); }
#menu .dish-card { background: transparent; border: 0; }
#menu .dish-img { background: var(--ink); }
#menu .dish-card:hover h3 { color: var(--gold); }
#menu.menu-pinned .dish-info { padding: 16px 0 0; }
/* The placeholder scales with its card so a photoless dish still reads as one. */
#menu.menu-pinned .photo-pending img { width: min(42%, 170px); margin-bottom: 14px; }
@media (max-width: 760px) { #menu.menu-pinned .dish-card { flex-basis: min(76vw, 340px); } }