/* =====================================================================
   MENU PAGE — /menu
   Reads the live menu from [Menu]al. Everything here sits on top of
   styles.css: same cream, same Nichrome headings, same Aeonik body.
   Mobile first, like the rest of the site.
   ===================================================================== */

.mn-body { background: var(--cream); }

/* The last dish clears the whole fade and then some, so the menu ends in open
   cream rather than trailing off underneath the Book a Table band. The fade
   itself is drawn site-wide in styles.css. */
.mn-main {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--edge) calc(var(--fade-h) + 72px);
}

/* The mark and nav are pinned site-wide, which works over an airy homepage.
   Over a dense list they sit on top of dish names and prices, so here they
   scroll away with the page instead. They come back pinned only once the
   window is wide enough to have a real empty margin to sit in. */
.mn-body .nav,
.mn-body .brand {
  position: absolute;
}
@media (min-width: 1301px) {
  .mn-body .nav,
  .mn-body .brand { position: fixed; }
}

/* ---- title ---- */
.mn-title {
  position: static;              /* the site's .display is sticky; here it is not */
  padding: clamp(96px, 22vh, 180px) 0 var(--s4);
}

/* ---- diet tabs ---- */
/* display:flex would otherwise beat the browser's own rule for [hidden], and
   the bar and its empty tabs would stay on screen. */
.mn-tabs[hidden], .mn-tab[hidden] { display: none; }
.mn-tabs {
  position: sticky;
  /* butts straight against the marquee, so no half-line of menu ever shows
     in a gap above the bar */
  top: var(--marquee-h);
  z-index: 20;
  display: flex;
  justify-content: center;
  gap: var(--s3);
  /* pulled out to the page edges so no dish reads through the bar */
  margin-inline: calc(var(--edge) * -1);
  padding: var(--s3) var(--edge);
  background: var(--cream);
}
/* The line under the bar earns its place only once the bar has stuck to the
   top and menu is passing beneath it. Sitting in the page it is just a stray
   rule, so it fades in. */
.mn-tabs::after {
  content: "";
  position: absolute;
  left: var(--edge); right: var(--edge); top: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease);
  pointer-events: none;
}
.mn-tabs.is-stuck::after { opacity: 1; }
.mn-tab {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  padding: 6px 2px;
  opacity: 0.45;
  border-bottom: 1px solid transparent;
  transition: opacity var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.mn-tab:hover { opacity: 1; color: var(--accent); }
.mn-tab.is-on {
  opacity: 1;
  border-bottom-color: var(--ink);
}

/* ---- state lines ---- */
.mn-loading,
.mn-empty {
  text-align: center;
  opacity: 0.5;
  padding: var(--s6) 0;
}
.mn-note {
  text-align: center;
  opacity: 0.6;
  padding: var(--s2) 0 0;
}

/* ---- sections ---- */
/* clear air under the tab bar before the menu starts */
.mn-sections { padding-top: clamp(44px, 7vh, 84px); }
.mn-sec { padding-top: clamp(30px, 5vh, 52px); }
.mn-sections > .mn-sec:first-child { padding-top: 0; }
.mn-sec-title {
  font-family: "Nichrome", Arial, sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  padding-bottom: var(--s2);
}

/* ---- items ----
   Set tighter than the rest of the site: a menu is scanned, not read, so the
   lines want to sit close enough to read as one dish. */
.mn-item {
  padding: 11px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  line-height: 1.35;
}
.mn-item:first-of-type { border-top: 0; }

.mn-row {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
}
.mn-name {
  flex: 1 1 auto;
  min-width: 0;
}
.mn-price {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.mn-sub,
.mn-pieces {
  opacity: 0.55;
  font-size: 0.85em;
}
.mn-desc {
  opacity: 0.62;
  padding-top: 2px;
  max-width: 46ch;
}
.mn-serves,
.mn-addon {
  opacity: 0.42;
  font-size: 0.85em;
}
.mn-subprices {
  padding-top: 4px;
  opacity: 0.62;
}
.mn-subrow {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  font-size: 0.9em;
}

/* ---- glassware line art (drinks and hot beverages) ----
   Matched to the printed menu. There each glass draws at its own size against
   a 12pt dish name, so a stemmed sundae glass stands more than twice the
   height of a cup. Sizes below are the artwork's own measurements divided by
   that 12pt, set in em, so the whole set scales with the text and keeps the
   printed proportions exactly.

   The glass sits in the left margin of the dish and hangs down past the name
   into the description, again as on paper. */
.mn-item.has-glass {
  position: relative;
  padding-left: 1.725em;          /* 20.7pt indent from the artwork */
}
.mn-glass {
  position: absolute;
  left: 0;
  top: 0.95em;                    /* top edge sits just above the name */
  opacity: 0.8;
}
/* width × height, straight from each drawing's own box */
.mn-glass--cup      { width: 1.131em; height: 0.982em; }
.mn-glass--cylinder { width: 0.790em; height: 1.679em; }
.mn-glass--footed   { width: 0.956em; height: 2.187em; }
.mn-glass--short    { width: 0.949em; height: 1.062em; }
.mn-glass--stepped  { width: 1.050em; height: 1.623em; }
.mn-glass--tumbler  { width: 1.103em; height: 1.617em; }
.mn-secnote {
  padding-top: var(--s3);
  opacity: 0.55;
  font-size: 0.9em;
  display: flex;
  gap: var(--s2);
}

/* ---- badges ---- */
.mn-new {
  display: inline-block;
  background: var(--accent);
  color: var(--ink);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.7em;
  line-height: 1.3;
  vertical-align: middle;
  margin-left: 6px;
}

/* =====================================================================
   ACID MENU — set the way it is printed, not the way the food menu is.

   Every dish is one row across the panel: the name down the left in the
   pink, a pink rule, its description in a narrow column beside it, and the
   price against the right edge sitting on the description's last line.

   The columns are the printed panel's own measurements, as fractions of the
   ink it holds — 12.2 to 268.44, which is exactly what the page margins give
   us here. Name runs to the rule at 155, the description is the 88 wide
   column from 159.5, and the price is set against the right edge.

   One column at every width. The panel is a fixed shape and splitting it
   into two on a laptop would stop being the printed menu.
   ===================================================================== */
.mn-body--acid .mn-main { max-width: 620px; }
/* The food menu goes two up on a laptop. This one never does. */
.mn-body--acid .mn-sections { display: block; }

.mn-body--acid .mn-item {
  display: grid;
  grid-template-columns: 55.7% 34.3% 1fr;
  align-items: start;
  padding: 0;
  border-top: 0;
  margin-top: 14px;
}
.mn-body--acid .mn-sec > .mn-item:first-of-type { margin-top: 0; }

.mn-body--acid .mn-name {
  font-family: "Nichrome", Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  font-size: 1.3em;
  line-height: 1.05;
  letter-spacing: -0.01em;
  padding-right: var(--s2);
}

/* The rule runs the height of the description, a hair past it top and
   bottom, exactly as it is drawn on the panel. */
.mn-body--acid .mn-desc {
  border-left: 1px solid var(--accent);
  padding: 1px 0 1px 10px;
  margin: 0;
  max-width: none;
  font-size: 0.82em;
  line-height: 1.42;
  opacity: 0.82;
}

/* Bottom aligned so it lands on the last line of the description. */
.mn-body--acid .mn-price {
  align-self: end;
  text-align: right;
  font-size: 0.82em;
  line-height: 1.42;
  padding-bottom: 1px;
  color: var(--ink);
  opacity: 0.82;
}

/* Acid has no glassware and no sub-prices; if either ever arrives it should
   not quietly break the row. */
.mn-body--acid .mn-item.has-glass { padding-left: 0; }
.mn-body--acid .mn-glass { display: none; }

/* ---- tablet ---- */
@media (min-width: 769px) {
  .mn-sec-title { font-size: 34px; }
  .mn-tabs { gap: var(--s5); }
}

/* ---- web: two columns, sections never split across them ----
   Flowing columns rather than a grid. A grid puts each section in a fixed
   cell, so a short section like SOUP leaves a hole the height of the long
   one beside it. Flowing lets the next section start right where the last
   one ended, which is how the printed menu reads too. */
@media (min-width: 1025px) {
  .mn-main { max-width: 980px; }
  .mn-sections {
    display: flex;
    align-items: flex-start;
    gap: clamp(40px, 6vw, 88px);
  }
  .mn-col { flex: 1 1 0; min-width: 0; }
  /* nothing hangs off the top of either column */
  .mn-col > .mn-sec:first-child { padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mn-tab { transition: none; }
}