/* The menu page. Cream stock and red display type, following the printed menu. */

body.menu-page { background: var(--cream); color: var(--ink); }

.mhead {
  position: relative;
  padding: clamp(22px, 3vw, 36px) var(--gut) clamp(26px, 4vw, 44px);
  border-bottom: 2px solid var(--red);
}

.mhead__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

.mhead__back {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--terracotta); text-decoration: none;
}
.mhead__back:hover { color: var(--red); }
.mhead__back i { font-style: normal; transition: transform .3s var(--ease); display: inline-block; }
.mhead__back:hover i { transform: translateX(-4px); }

.mhead__mark { width: clamp(84px, 11vw, 124px); height: auto; }

.mhead h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(42px, 9vw, 108px);
  line-height: .86; letter-spacing: -.04em;
  color: var(--red);
  margin: clamp(22px, 3.5vw, 40px) 0 0;
}

.mhead p {
  margin: 14px 0 0; max-width: 46ch;
  font-size: clamp(14px, 1.5vw, 17px); font-weight: 300; color: var(--terracotta);
}

/* sticky section nav */

.mnav {
  position: sticky; top: 0; z-index: 20;
  background: var(--cream);
  border-bottom: 1px solid rgba(179, 90, 46, .3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.mnav::-webkit-scrollbar { display: none; }

.mnav ul {
  display: flex; gap: 4px; margin: 0;
  padding: 10px var(--gut); list-style: none; width: max-content; min-width: 100%;
}

.mnav a {
  display: block; white-space: nowrap;
  padding: 8px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--terracotta); text-decoration: none;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.mnav a:hover { background: rgba(233, 8, 26, .1); color: var(--red); }
.mnav a[aria-current="true"] { background: var(--red); color: var(--cream); }

/* sections */

.mwrap { width: min(1080px, 100% - var(--gut) * 2); margin-inline: auto; }

.msec { padding: clamp(46px, 6vw, 82px) 0 0; scroll-margin-top: 64px; }

.msec > h2 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(27px, 4vw, 46px); letter-spacing: -.03em; line-height: 1;
  color: var(--red); margin: 0 0 6px;
}

.msec__note {
  font-size: 13px; color: var(--terracotta); margin: 0 0 22px; font-weight: 300;
}

.msub {
  font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase;
  color: var(--terracotta); margin: 26px 0 10px;
}

.mitems { margin: 0; }

.mrow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 18px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid rgba(179, 90, 46, .22);
}

.mrow:first-child { border-top: 1px solid rgba(179, 90, 46, .22); }

.mrow dt { font-weight: 600; font-size: clamp(15px, 1.7vw, 18px); color: var(--ink); }

.mrow dd {
  grid-column: 1 / 2; margin: 0;
  font-size: 13.5px; font-weight: 300; line-height: 1.45; color: #6E492F;
}

.mrow .mprice {
  grid-column: 2; grid-row: 1;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(15px, 1.7vw, 19px); color: var(--red);
  font-variant-numeric: tabular-nums;
}

.mrow .mextra {
  grid-column: 1 / -1; margin: 5px 0 0;
  font-size: 12px; font-style: italic; color: var(--terracotta);
}

.veg {
  display: inline-block; margin-left: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  color: #4B7A3A; border: 1px solid #4B7A3A; border-radius: 3px;
  padding: 1px 4px; vertical-align: 1px;
}

/* two columns once there is room */
@media (min-width: 860px) {
  .mcols .mitems { columns: 2; column-gap: clamp(34px, 5vw, 72px); }
  .mcols .mrow { break-inside: avoid; }
  /* the first row in each column needs its own top rule */
  .mcols .mrow:first-child { border-top: none; }
}

/* foot */

.mfoot {
  margin-top: clamp(54px, 7vw, 92px);
  border-top: 2px solid var(--red);
  padding: clamp(28px, 4vw, 44px) 0 clamp(46px, 6vw, 76px);
  display: flex; flex-wrap: wrap; gap: 20px 30px;
  align-items: center; justify-content: space-between;
}

.mfoot p { margin: 0; font-size: 13px; color: var(--terracotta); max-width: 44ch; }
.mfoot .btn { --bg: var(--red); --fg: var(--cream); }
.mfoot .btn::before { background: var(--ink); }
.mfoot .btn:hover span { color: var(--cream); }

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