/* ── Страницы «Меню» и «Карта бара» (20.10) ──────────────────────
   Обычная прокрутка (не развороты): меню читают и ищут, а не листают.
   По исследованиям меню: цены без знака валюты (Cornell/CIA: −8% трат
   с символом), цена стоит сразу за названием тем же кеглем, без
   отточий и колонки цен справа; разделы короткие, с быстрой навигацией;
   фото — по одному на раздел, не на каждое блюдо; позиции «на компанию»
   выделены рамкой — это якорь и повод для общего заказа. */
html { scroll-snap-type: none !important; }
.mn-body { background: #fff; }
.mn-body .spread, .mn-body .sheet { all: unset; }
.mn { max-width: 1120px; margin: 0 auto; padding: 96px 48px 120px; color: #111; }
.mn-hero { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 40px; padding-bottom: 28px; border-bottom: 2px solid #111; }
.mn-kick { grid-column: 1 / -1; margin: 0; font: 700 12px/1 "HK Grotesk", sans-serif; letter-spacing: .2em; text-transform: uppercase; }
.mn-hero h1 { margin: 6px 0 0; font: 400 clamp(64px, 9vw, 128px)/.86 "Playfair Display", serif; letter-spacing: -.04em; }
.mn-hero h1 em { display: block; margin-top: 12px; font: italic 400 clamp(24px, 3vw, 38px)/1.1 "Playfair Display", serif; letter-spacing: -.01em; color: #A51C1F; }
.mn-lead { grid-column: 1; margin: 18px 0 0; max-width: 640px; font: 400 19px/1.45 "Spectral", serif; }
.mn-back { grid-column: 2; grid-row: 2 / span 2; align-self: start; font: 400 15px/1 "Spectral", serif; color: #6B171D; text-decoration: none; border-bottom: 1px solid #6B171D66; padding-bottom: 3px; white-space: nowrap; }
.mn-nav { position: sticky; top: 56px; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px 26px; padding: 14px 0; background: #FFFFFFF2; border-bottom: 1px solid #1112; }
.mn-nav a { font: 700 11.5px/1.6 "HK Grotesk", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6E625C; text-decoration: none; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.mn-nav a:hover, .mn-nav a.on { color: #A51C1F; border-color: #A51C1F; }
.mn-sec { padding-top: 64px; scroll-margin-top: 110px; }
.mn-sec > header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 22px; }
.mn-sec > header h2 { margin: 0; font: 400 44px/1 "Playfair Display", serif; letter-spacing: -.03em; }
.mn-sec > header p { margin: 0; flex-basis: 100%; font: italic 400 17px/1.4 "Spectral", serif; color: #3A3430; }
.mn-vol { font: 700 11px/1 "HK Grotesk", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #A51C1F; }
.mn-sec--ph, .mn-group { display: block; }
.mn-ph { margin: 0 0 28px; height: 360px; overflow: hidden; }
.mn-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 56px; }
.mn-i { padding: 12px 0; border-top: 1px solid #1111; break-inside: avoid; }
.mn-n { font: 400 20px/1.25 "Playfair Display", serif; }
.mn-p { margin-left: 12px; font: 400 17px/1 "Spectral", serif; font-variant-numeric: lining-nums; color: #3A3430; white-space: nowrap; }
.mn-d { display: block; margin-top: 4px; font: italic 400 15px/1.4 "Spectral", serif; color: #4A3F3A; }
.mn-mark { display: inline-block; margin: 8px 8px 0 0; font: 700 10px/1 "HK Grotesk", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #6B171D; }
.mn-mark--sig, .mn-mark--rare { color: #A51C1F; }
.mn-i--box { padding: 16px 18px; margin: 8px 0; border: 1px solid #A51C1F; outline: 1px solid #A51C1F; outline-offset: -5px; }
.mn-note { margin: 18px 0 0; font: italic 400 15px/1.4 "Spectral", serif; color: #6E625C; }
.mn-sub .mn-sec { padding-top: 26px; }
.mn-sub .mn-sec > header h2 { font-size: 28px; }
.mn-det details { border-top: 2px solid #111; }
.mn-det details:last-child { border-bottom: 2px solid #111; }
.mn-det summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; font: 400 26px/1 "Playfair Display", serif; }
.mn-det summary::-webkit-details-marker { display: none; }
.mn-det summary span { font: 700 11px/1 "HK Grotesk", sans-serif; letter-spacing: .14em; color: #6E625C; }
.mn-det summary span::after { content: " позиций  +"; }
.mn-det details[open] summary span::after { content: " позиций  −"; }
.mn-det details .mn-sec { padding: 0 0 22px; }
.mn-det details .mn-sec > header { display: none; }
.mn-foot { margin-top: 80px; padding-top: 24px; border-top: 2px solid #111; font: 400 15px/1.5 "Spectral", serif; color: #3A3430; }
.mn-foot p { margin: 0 0 6px; }
.mn-small { font-size: 13px; color: #6E625C; }
.mn-backbtn { display: inline-flex; margin-top: 26px; padding: 14px 26px; background: #6B171D; color: #F8F2E8; text-decoration: none; font: 400 16px/1 "Spectral", serif; }
@media (max-width: 760px) { .mn { padding: 72px 20px 80px; } .mn-hero { grid-template-columns: 1fr; } .mn-back { grid-column: 1; grid-row: auto; } .mn-list { grid-template-columns: 1fr; } .mn-ph { height: 240px; } .mn-nav { top: 0; } }
.mn-body .menu { background: #FFFFFFF2; }

/* ── 20.10 · порядок: раздел = две колонки, как разворот ─────────
   Слева (липко): название раздела, пояснение, одно фото 4:5.
   Справа: одна колонка блюд — название и цена на одной строке
   в узкой колонке (глаз идёт сверху вниз, не прыгает), описание
   под ним курсивом, тонкие линейки. Метки — над названием. */
.mn-body .menu { background: #FFF; border-bottom: 1px solid #1111; }
.mn { max-width: 1200px; padding-top: 104px; }
.mn-hero { grid-template-columns: 5fr 7fr; align-items: end; gap: 0 64px; padding-bottom: 36px; }
.mn-hero h1 { grid-column: 1; font-size: clamp(64px, 8vw, 116px); }
.mn-lead { grid-column: 2; grid-row: 2; align-self: end; margin: 0 0 10px; }
.mn-back { grid-column: 2; grid-row: 1; justify-self: end; }
.mn-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 28px; top: 56px; padding: 16px 0; }
.mn-nav a { white-space: nowrap; }
.mn-sec { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; padding: 72px 0 0; border: 0; }
.mn-sec + .mn-sec { margin-top: 0; }
.mn-side { position: sticky; top: 130px; align-self: start; }
.mn-side h2 { margin: 0; font: 400 52px/1 "Playfair Display", serif; letter-spacing: -.03em; }
.mn-side p { margin: 12px 0 0; font: italic 400 17px/1.45 "Spectral", serif; color: #3A3430; }
.mn-side .mn-vol { display: block; margin-top: 12px; }
.mn-side .mn-ph { margin: 24px 0 0; height: auto; aspect-ratio: 4 / 5; }
.mn-main { padding-top: 6px; }
.mn-list { display: block; max-width: 560px; }
.mn-i, .mn-i--box { padding: 16px 0; margin: 0; border: 0; outline: 0; border-top: 1px solid #1115; }
.mn-i:first-child { border-top: 2px solid #111; }
.mn-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.mn-n { font: 400 21px/1.25 "Playfair Display", serif; }
.mn-p { margin: 0; font: 400 19px/1 "Playfair Display", serif; font-variant-numeric: lining-nums; color: #111; }
.mn-d { margin-top: 5px; max-width: 440px; font-size: 15.5px; color: #4A3F3A; }
.mn-mark { display: block; margin: 0 0 6px; }
.mn-mark + .mn-mark { display: none; }
.mn-sub .mn-sec { display: block; padding: 0 0 34px; }
.mn-sub .mn-sec .mn-side { position: static; margin-bottom: 10px; }
.mn-sub .mn-sec .mn-side h2 { font-size: 26px; }
.mn-sub .mn-sec .mn-side .mn-vol { display: inline; margin-left: 10px; }
.mn-det details { max-width: 560px; border-top: 1px solid #1115; }
.mn-det details:first-child { border-top: 2px solid #111; }
.mn-det details:last-child { border-bottom: 1px solid #1115; }
.mn-det summary { font-size: 23px; padding: 18px 0; }
.mn-det details .mn-sec { display: block; padding: 0 0 18px; }
.mn-det details .mn-side { display: none; }
.mn-det details .mn-i:first-child { border-top: 1px solid #1115; }
.mn-foot { max-width: none; }
@media (max-width: 900px) { .mn-sec, .mn-hero { grid-template-columns: 1fr; gap: 20px; } .mn-side { position: static; } .mn-lead, .mn-back { grid-column: 1; grid-row: auto; justify-self: start; } }
.mn-kick { grid-column: 1; grid-row: 1; }
.mn-back { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
.mn-hero h1 { grid-column: 1; grid-row: 2; }
.mn-lead { grid-column: 2; grid-row: 2; align-self: end; margin: 0 0 6px; font-size: 20px; }
/* липкая навигация — плотная, на всю ширину, ничего не просвечивает */
.mn-nav { z-index: 20; background: #FFF; box-shadow: 0 0 0 100vmax #FFF; clip-path: inset(0 -100vmax); }
/* цена — сразу после названия, не столбиком у края (меню-инжиниринг: колонка цен провоцирует выбор по цене) */
.mn-row { display: block; }
.mn-p { display: inline; margin-left: 14px; font: 400 16px/1 "Spectral", serif; font-variant-numeric: lining-nums; color: #6E625C; }
/* телефон: шапка журнала фиксирована (48 px, mobile.css) — навигация разделов встаёт под неё */
@media (max-width: 1099px) { .mn { padding-top: 72px; } .mn-nav { top: 48px !important; } }
/* телефон: шапки нет (меню по кнопке) — навигация разделов липнет к самому верху */
@media (max-width: 1099px) { .mn { padding-top: 76px !important; } .mn-nav { top: 0 !important; padding-right: 64px !important; } }
