/* ============================================================
   WMC House — menu page
   Two columns of sections on desktop, one on mobile, with the
   leader-dot rule doing the work. Long menus stay scannable
   because the dish is the only thing set in the display face.
   ============================================================ */

/* === Frame === */
.mn { columns: 2; column-gap: clamp(2rem, 6vw, 6rem); margin-top: var(--s-5); }
.mn__sec { break-inside: avoid; margin-bottom: var(--s-5); }

/* === Section === */
.mn__title { font-size: var(--h3-size); padding-bottom: .8rem; margin-bottom: var(--s-2); border-bottom: 1px solid var(--ink); }

/* === Item === */
.mn__item { padding: .85rem 0; border-bottom: 1px solid var(--rule); }
.mn__row { display: flex; gap: .75rem; align-items: baseline; }
.mn__dish { font-family: var(--h4-family); font-size: var(--h4-size); font-weight: var(--h4-weight); font-stretch: var(--h4-wdth); line-height: 1.3; letter-spacing: 0; }
.mn__dot { flex: 1 1 auto; height: 1px; background: var(--rule); transform: translateY(-3px); }
.mn__price { flex: 0 0 auto; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.mn__desc { margin-top: .35rem; max-width: 46ch; color: var(--ink-soft); }

/* === Dietaries === */
.mn__diet { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.mn__diet li { padding: .2rem .5rem; border: 1px solid var(--rule); color: var(--ink-soft); }

/* === Foot === */
.mn__foot { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); }

/* === Breakpoint === */
@media (max-width: 820px) { .mn { columns: 1; } }

/* === Editor-only hint === */
.mn__hint { margin-top: var(--s-3); padding: 1rem 1.25rem; border-left: 2px solid var(--accent); background: var(--ground-alt); font-size: var(--small-size); }
.mn__hint code { font-family: ui-monospace, Menlo, monospace; }

/* === Dish photo ===
   The exception, not the rule. Capped at a share of the dishes and scattered
   at random, so the page still reads as a menu rather than a delivery app.
   Sits below the description: the dish is read, then seen. */
.mn__shot { margin: var(--s-2) 0 0; max-width: 420px; }
.mn__shot img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; background: var(--ground-alt); }

@media (max-width: 600px) {
	.mn__shot { max-width: 100%; }
}

/* === Wine detail ===
   Vintage, vineyard and origin sit under the name where a dish would have its
   description. Wines arrive with an empty description, so without this the
   whole list renders as bare names. */
.mn__meta { color: var(--ink-soft); margin-top: .25rem; font-variant-numeric: tabular-nums; }

/* A glass-and-bottle price is two facts in one cell, so it must not wrap
   mid-pair on a phone. */
.mn__price { white-space: nowrap; font-variant-numeric: tabular-nums; }

@media (max-width: 520px) {
	.mn__price { white-space: normal; }
}