/* Menu, on the section kit (link ../section-kit/kit.css first). Type, colour, rules and corners are the look's; the
   dish name in the display face, the price in tabular figures on a dotted leader drawn in the look's rule colour. */
.mn { --_lead: var(--mn-leader, dotted); position: relative; }
.mn-head { display: grid; gap: 16px; margin-bottom: clamp(32px, 4vw, 56px); max-width: 52rem; }
.mn-intro { font-size: 18px; max-width: 46ch; }
.mn-index { position: sticky; top: var(--mn-top, 0px); z-index: 5; margin: 0 0 clamp(28px, 4vw, 48px); padding: 12px 0;
  background: color-mix(in srgb, var(--_g) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--_r); }
.mn-index .sk-chip { min-height: 40px; text-decoration: none; }
.mn-groups { display: grid; gap: clamp(48px, 6vw, 88px); }
.mn-group { scroll-margin-top: 96px; break-inside: avoid; }
.mn-gh { font-size: clamp(28px, 3vw, 44px); line-height: 1.05; padding-bottom: 14px; border-bottom: var(--sx-line, 1px) solid var(--_i); }
.mn-gnote { margin-top: 10px !important; color: var(--_mu); font-size: 15px; }
.mn-items { display: grid; column-gap: clamp(32px, 5vw, 80px); margin-top: 8px !important; }
.mn.is-long .mn-items { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.mn-item { display: grid; grid-template-columns: auto auto minmax(16px, 1fr) auto; align-items: baseline; align-content: start; column-gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--_r); break-inside: avoid; }
.mn-item::after { content: ""; grid-row: 1; grid-column: 3; align-self: end; margin-bottom: .4em; border-bottom: 2px var(--_lead) var(--_r); }
.mn-name { grid-row: 1; grid-column: 1; font: var(--_hw) clamp(19px, 1.6vw, 23px)/1.25 var(--_d); letter-spacing: var(--_ht); text-transform: var(--_hc); }
.mn-diet { grid-row: 1; grid-column: 2; display: inline-flex; gap: 4px; }
.mn-diet abbr, .mn-key abbr { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 5px; border: 1px solid color-mix(in srgb, var(--_i) 40%, transparent);
  border-radius: var(--_chip); font: 600 11px/1 var(--_mono); letter-spacing: .04em; text-decoration: none; cursor: help; }
.mn-price { grid-row: 1; grid-column: 4; font: 500 18px/1.2 var(--_t); white-space: nowrap; text-align: right; }
.mn-price .s-tag { vertical-align: .15em; }
.mn-desc { grid-row: 2; grid-column: 1 / -1; margin-top: 6px !important; color: var(--_mu); font-size: 16px; line-height: 1.5; max-width: 52ch; }
.mn-item:not(:has(.mn-diet)) { grid-template-columns: auto minmax(16px, 1fr) auto; }
.mn-item:not(:has(.mn-diet))::after { grid-column: 2; } .mn-item:not(:has(.mn-diet)) .mn-price { grid-column: 3; }
.mn-item:not(:has(.mn-price))::after { display: none; }
.mn-key { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.mn-key span { display: inline-flex; align-items: center; gap: 6px; }
.mn-printrow { margin-top: 24px !important; }
.mn.is-short .mn-groups { max-width: 760px; }
@media (max-width: 640px) {
  .mn-item { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .mn-item::after { display: none; }
  .mn-name { grid-column: 1; } .mn-price { grid-column: 2; } .mn-diet { grid-row: 2; grid-column: 1 / -1; } .mn-desc { grid-row: 3; }
  .mn-item:not(:has(.mn-diet)) { grid-template-columns: minmax(0, 1fr) auto; } .mn-item:not(:has(.mn-diet)) .mn-price { grid-column: 2; } .mn-item:not(:has(.mn-diet)) .mn-desc { grid-row: 2; }
}
@media print {
  .mn { color: #000 !important; background: #fff !important; font-size: 11pt; }
  .mn-index, .mn-printrow { display: none !important; }
  .mn-groups { display: block; columns: 2; column-gap: 28pt; }
  .mn-group { margin-bottom: 18pt; }
  .mn-gh { font-size: 16pt; border-color: #000; }
  .mn-item { padding: 6pt 0; border-color: #ccc; }
  .mn-desc, .mn-gnote, .mn-key { color: #333 !important; }
  .mn-name { font-size: 12pt; }
}