/*
 * Bold Italic - оформление меню по брендбуку (JINJ Branding, 2025).
 *
 * Что взято из брендбука дословно:
 *   - четыре цвета и только они (стр. 16);
 *   - знак и монограмма - вектором из самого брендбука, а не набором
 *     похожим шрифтом (стр. 5-9);
 *   - Neulis Cursive на заголовки, Bainsley на текст (стр. 17-18);
 *   - фирменные паттерны как элементы оформления (стр. 19-21);
 *   - монограмма в главном изображении (стр. 24).
 *
 * Прошлая версия строилась на Бодони и противопоставлении прямого
 * курсиву. Идея была своя, но у ресторана есть собственный знак, и он
 * устроен наоборот: слово Bold набрано курсивным антиквенным, слово
 * Italic - прямым гротеском. Держать рядом два разных прочтения одной
 * шутки нельзя, поэтому вся типографика переехала на фирменную пару.
 */

/* ------------------------------------------------------------- шрифты */
/*
 * Bainsley - настоящий фирменный шрифт, лежит у нас (SIL OFL 1.1,
 * Paul James Miller, лицензия рядом в Bainsley-OFL.txt). Одним файлом
 * закрывает все три языка меню: латиница 343 глифа, кириллица 150,
 * армянский 91. Подрезан до нужных диапазонов - 690 КБ ужались до 302.
 *
 * Начертания объявлены все четыре, но браузер качает только те, которыми
 * что-то на странице действительно набрано: на меню это Regular и Bold,
 * курсивы подтянутся, если в описании встретится <em>.
 *
 * Neulis Cursive - платный (Adam Ladd, The Type Founders). Файла нет,
 * поэтому объявление не сработает и заголовки возьмёт Bainsley Bold. Это
 * не случайная замена: по брендбуку (стр. 18) армянские заголовки и так
 * набираются Bainsley. Появится файл - подхватится сам, править нечего.
 */
@font-face {
    font-family: 'Neulis Cursive';
    src: url('/assets/fonts/NeulisCursive-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Neulis Cursive';
    src: url('/assets/fonts/NeulisCursive-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bainsley';
    src: url('/assets/fonts/Bainsley-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bainsley';
    src: url('/assets/fonts/Bainsley-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Bainsley';
    src: url('/assets/fonts/Bainsley-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Bainsley';
    src: url('/assets/fonts/Bainsley-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

/* ------------------------------------------------------------- основа */
/*
 * Палитра брендбука, стр. 16. Четыре цвета, коды взяты как есть:
 *   Pearl Orange #a24517   RAL 2010   Pantone 7586 C
 *   Grey Olive   #37391c   RAL 6003   Pantone 7763 C
 *   Pearl Gold   #bd7e33   RAL 1034   Pantone 7557 C
 *   Light Ivory  #f4debe   RAL 1015   Pantone 7506 C
 *
 * Оттенки текста считаются от --ink, поэтому смена основного цвета из
 * админки тянет за собой всю шкалу и ничего не выпадает из гаммы.
 */
:root {
    /*
     * Light Ivory ушёл из фона в штрих.
     *
     * Как заливка на тридцать тысяч пикселей он оказался тяжёл: плотный
     * кремовый давит и съедает разницу между фоном и карточками. Фон
     * теперь тот же, что в админке - светлая бумага с точечной сеткой в
     * 4 пикселя, а сам Light Ivory работает косыми штрихами в трёх
     * местах: лента под шапкой, подложка под фото, край подвала. Так
     * фирменный цвет заметен, но не утомляет.
     */
    --ground: #faf4ea;   /* светлая бумага - фон страницы */
    --cream: #f4debe;   /* Light Ivory  - RAL 1015, теперь штрих */
    --ink: #37391c;   /* Grey Olive   - текст и тёмные плашки */
    --accent: #a24517;   /* Pearl Orange - знак, активное состояние */
    --gold: #bd7e33;   /* Pearl Gold   - паттерны, линейки, подписи */
    --paper: #fbf1df;   /* тинт айвори  - подложка под фото */

    --ink-dim: color-mix(in srgb, var(--ink) 78%, transparent);
    /* Мелкие подписи держим читаемыми: ниже 66% контраст на кремовом
       падает под норму 4.5:1, а это счётчики, часы работы и плейсхолдер. */
    --ink-faint: color-mix(in srgb, var(--ink) 66%, transparent);
    /*
     * Pearl Gold как текст на Light Ivory даёт 2.6:1 - под нормой втрое.
     * Цены читают в полутьме зала, поэтому для текста берём тот же
     * золотой, приглушённый оливой: 4.8:1 и тот же тон. Чистый --gold
     * остаётся на декоре, где контраст не нормируется.
     */
    --gold-ink: color-mix(in srgb, var(--gold) 50%, var(--ink));
    --dots: color-mix(in srgb, var(--gold) 55%, transparent);
    --hair: color-mix(in srgb, var(--ink) 20%, transparent);
    --raise: color-mix(in srgb, var(--ink) 6%, transparent);

    /* Заголовки - Neulis Cursive, текст - Bainsley (брендбук, стр. 18).
       Google Fonts больше не подключается: Bainsley лежит у нас и один
       закрывает три языка, а сторонний запрос на каждый показ меню - это
       чужой домен в критическом пути ради шрифта, который есть локально. */
    --display: 'Neulis Cursive', 'Bainsley', system-ui, sans-serif;
    --body: 'Bainsley', system-ui, sans-serif;

    --gap: clamp(1.1rem, 3.2vw, 2rem);
    --edge: clamp(1.1rem, 5vw, 4.5rem);
    --top-h: 3.9rem;
    --nav-h: 6.4rem;

    --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

/*
 * Атрибут hidden должен действительно скрывать.
 *
 * Браузер задаёт для него `display: none` в своей таблице стилей, а любое
 * авторское правило `display` эту таблицу перебивает - без всякого
 * !important, просто по происхождению. Поэтому всё, что скрыто атрибутом,
 * но имеет собственный display, показывалось всегда: кнопка «наверх»
 * висела над меню с первой секунды, заглушка «ничего не найдено» стояла
 * под каталогом, а окно знакомства выскакивало у гостя, который уже
 * представился.
 *
 * Единственное !important в файле, и оно здесь по делу: правило обязано
 * победить любой display, который мы напишем ниже, не заставляя помнить
 * про это в каждом блоке.
 */
[hidden] { display: none !important; }

/*
 * Переход к разделу мгновенный, а не плавный.
 *
 * Меню это 30 000 пикселей. Плавная прокрутка от «Блюд» до «Вина» летит
 * несколько секунд, и всё это время мимо проносится содержимое, которое
 * гость не просил. Мгновенный переход и честнее, и быстрее. Плавность
 * оставлена там, где расстояния короткие: лента разделов и кнопка наверх.
 */
html {
    /* Якорь не должен уезжать под липкую навигацию. */
    scroll-padding-top: calc(var(--top-h) + var(--nav-h) + .5rem);
    -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .nav__scroll { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    /*
     * Точечная сетка в 4 пикселя - та же, что в админке.
     *
     * Ровная заливка на большом экране читается как незагрузившийся фон.
     * Сетка даёт бумаге фактуру и связывает панель с сайтом: это одна
     * вещь, а не два разных проекта.
     *
     * Шаг тот же, что в панели, - 4 пикселя, а вот плотность точки была
     * вчетверо выше (16% против 3.5%). Из-за этого сетка читалась крупнее
     * и грубее панельной, хотя размер совпадал: глаз меряет узор по весу
     * точки, а не по расстоянию между ними. Теперь значения одинаковые.
     */
    background-color: var(--ground);
    background-image: radial-gradient(circle at 1px 1px,
        color-mix(in srgb, var(--accent) 3.5%, transparent) 1px, transparent 0);
    background-size: 4px 4px;
    background-attachment: fixed;
    color: var(--ink);
    font-family: var(--body);
    font-size: clamp(.94rem, .3vw + .88rem, 1rem);
    line-height: 1.62;
    font-feature-settings: 'kern' 1, 'liga' 1;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.skip {
    position: fixed;
    top: .6rem;
    left: .6rem;
    z-index: 100;
    padding: .6rem 1rem;
    background: var(--ink);
    color: var(--ground);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    transform: translateY(-160%);
    transition: transform .2s var(--ease);
}
.skip:focus { transform: none; }

/*
 * Выделение словом цвета бренда из редактора админки.
 *
 * Кнопка в панели оборачивает выделенный кусок в <span class="brand">, и
 * это единственный класс, который пропускает санитайзер. Без правила
 * здесь выделение сохранялось бы в данных и никак не показывалось на
 * сайте - редактор обещал бы то, чего не делает.
 */
.brand { color: var(--gold-ink); }
.foot .brand,
.on-dark .brand { color: var(--gold); }

/*
 * Шумового зерна здесь больше нет.
 *
 * Оно давало бумаге фактуру, пока фон был ровной заливкой. Теперь фактуру
 * держит точечная сетка на body, а две текстуры поверх друг друга давали
 * грязь вместо бумаги. Элемент .grain убран и из шаблонов.
 */

/* ------------------------------------------------------------- знак */
/*
 * Знак - вектор из брендбука, а не набор шрифтом.
 *
 * Логотип нарисован: у слова Bold курсивная антиква, у слова Italic
 * прямой гротеск, между ними выверенные пропорции (стр. 11). Повторить
 * это шрифтом нельзя - можно только приблизиться и промахнуться, а
 * брендбук на стр. 13 прямо запрещает менять масштабы внутри знака.
 * Поэтому здесь SVG, а цвет отдаётся через currentColor и класс.
 */
.logo {
    display: block;
    width: auto;
    height: 100%;
    overflow: visible;
}
.logo .logo__word { fill: currentColor; }
.logo .logo__tag { fill: var(--gold); }

/* Знак на тёмной оливе: слово айвори, подпись золотом. Оранжевый на
   оливе даёт 1.6:1 и на подписи в 11 пикселей нечитаем. */
.on-dark .logo .logo__word { fill: var(--ground); }
.on-dark .logo .logo__tag { fill: var(--gold); }

.mark {
    display: inline-flex;
    align-items: center;
    color: var(--accent);
}

/* ------------------------------------------------------------- шапка */
.top {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--top-h);
    background: color-mix(in srgb, var(--ground) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--hair);
}
.top__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 100%;
    padding-inline: var(--edge);
}
.top .mark { height: 1.6rem; }

.langs { display: flex; gap: .15rem; }
.langs__item {
    padding: .32rem .6rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--ink-dim);
    border: 1px solid transparent;
    border-radius: 999px;
    transition: color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.langs__item:hover { color: var(--ink); background: var(--raise); }
.langs__item.is-on {
    color: var(--ground);
    background: var(--accent);
    border-color: var(--accent);
}

/* ------------------------------------------------------------- герой */
.hero {
    position: relative;
    z-index: 2;
    padding: clamp(3rem, 10vh, 6.5rem) var(--edge) clamp(2.5rem, 7vh, 4rem);
    overflow: hidden;
}

/*
 * Монограмма как главное изображение - прямое указание брендбука
 * (стр. 24). Знак большой, приглушённый и уходит за край: он держит
 * разворот, но не спорит с самим логотипом, стоящим тут же.
 */
.hero__seal {
    position: absolute;
    top: 50%;
    right: calc(var(--edge) * -.45);
    translate: 0 -50%;
    width: clamp(19rem, 42vw, 34rem);
    color: var(--accent);
    opacity: .1;
    pointer-events: none;
    user-select: none;
}
.hero__seal svg { width: 100%; height: auto; }

.hero__title {
    position: relative;
    display: block;
    width: min(100%, 40rem);
    color: var(--accent);
}
.hero__title .logo { width: 100%; height: auto; }

.hero__lead {
    position: relative;
    max-width: 36ch;
    margin-top: clamp(1.6rem, 4vw, 2.4rem);
    font-size: clamp(1.02rem, .5vw + .92rem, 1.24rem);
    line-height: 1.5;
    color: var(--ink-dim);
    text-wrap: balance;
}

.hero__meta {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
    margin-top: clamp(1.4rem, 3vw, 2rem);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.hero__dot {
    width: 4px;
    height: 4px;
    background: var(--accent);
    border-radius: 50%;
}

/*
 * Фирменная лента диагональю - элемент оформления со стр. 20. Заодно
 * отбивает шапку от меню, чего раньше добивались пустотой.
 *
 * Размер тайла задан в пикселях, а не «в высоту ленты»: при auto 100%
 * полосы становятся тем тоньше, чем ниже лента, и на высоте в 14
 * пикселей рисунок вырождается в рябь.
 */
.band {
    position: relative;
    z-index: 2;
    height: 1.4rem;
    background: url('/assets/img/pat-diagonal.svg') repeat;
    background-size: 40px 40px;
    border-block: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Появление: один хорошо поставленный вход лучше десяти микроэффектов. */
.hero__title, .hero__lead, .hero__meta, .hero__seal {
    animation: rise .9s var(--ease) both;
}
.hero__seal { animation-delay: .05s; animation-name: fade; }
.hero__title { animation-delay: .1s; }
.hero__lead { animation-delay: .3s; }
.hero__meta { animation-delay: .42s; }

@keyframes rise {
    from { opacity: 0; transform: translateY(1.1rem); }
    to { opacity: 1; transform: none; }
}
@keyframes fade {
    from { opacity: 0; }
    to { opacity: .1; }
}

/* ------------------------------------------------------------- навигация */
.nav {
    position: sticky;
    top: var(--top-h);
    z-index: 30;
    background: color-mix(in srgb, var(--ground) 94%, transparent);
    backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--hair);
}

.nav__rail { position: relative; }
.nav__rail--groups {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-right: var(--edge);
    border-bottom: 1px solid var(--hair);
}

.nav__scroll {
    display: flex;
    align-items: center;
    gap: .15rem;
    padding: .5rem var(--edge);
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    /* Края растворяются - подсказка, что список едет дальше. */
    mask-image: linear-gradient(90deg, transparent, #000 1.6rem, #000 calc(100% - 1.6rem), transparent);
}
.nav__scroll::-webkit-scrollbar { display: none; }
.nav__rail--groups .nav__scroll { flex: 1; padding-right: .5rem; }

.chip {
    flex: none;
    display: inline-flex;
    align-items: baseline;
    gap: .45rem;
    padding: .42rem .95rem;
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .005em;
    color: var(--ink-dim);
    border: 1px solid transparent;
    border-radius: 999px;
    transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.chip__n {
    font-family: var(--body);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--ink-faint);
}
.chip:hover { color: var(--ink); background: var(--raise); }
.chip.is-on {
    color: var(--ground);
    background: var(--accent);
    border-color: var(--accent);
}
.chip.is-on .chip__n { color: color-mix(in srgb, var(--ground) 72%, transparent); }

.nav__parent {
    flex: none;
    padding: 0 .5rem 0 .9rem;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-ink);
    border-left: 1px solid var(--hair);
}
.nav__scroll > .nav__parent:first-child { border-left: 0; padding-left: 0; }

.tab {
    flex: none;
    padding: .3rem .62rem;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--ink-dim);
    border-bottom: 2px solid transparent;
    transition: color .18s var(--ease), border-color .18s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab.is-on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.nav__search {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: .35rem 0;
    padding: .42rem .9rem;
    font: inherit;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-dim);
    background: transparent;
    border: 1px solid var(--hair);
    border-radius: 999px;
    cursor: pointer;
    transition: color .18s var(--ease), border-color .18s var(--ease);
}
.nav__search:hover { color: var(--ink); border-color: var(--ink-faint); }
.nav__search svg { width: 15px; height: 15px; }
.nav__search[aria-expanded="true"] {
    color: var(--ground);
    background: var(--accent);
    border-color: var(--accent);
}

/* ------------------------------------------------------------- поиск */
.search { padding: .8rem var(--edge) 1rem; }
.search__box {
    position: relative;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .95rem;
    border: 1px solid var(--hair);
    border-radius: 999px;
    background: var(--paper);
}
.search__box:focus-within { border-color: var(--accent); }
.search__icon { width: 17px; height: 17px; flex: none; color: var(--ink-faint); }
.search__input {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 1rem;
    color: var(--ink);
    background: none;
    border: 0;
    outline: none;
}
.search__input::placeholder { color: var(--ink-faint); }
.search__input::-webkit-search-cancel-button { display: none; }
.search__clear {
    flex: none;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    color: var(--ink-dim);
    background: none;
    border: 0;
    cursor: pointer;
}
.search__clear svg { width: 15px; height: 15px; }
.search__clear:hover { color: var(--ink); }
.search__count {
    margin-top: .5rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* ------------------------------------------------------------- меню */
.menu {
    position: relative;
    z-index: 2;
    padding: 0 var(--edge) clamp(3rem, 8vh, 6rem);
}

.group { padding-top: clamp(2.6rem, 7vh, 5rem); }

.group__head {
    display: flex;
    align-items: center;
    gap: clamp(.9rem, 2vw, 1.4rem);
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--ink);
}
/*
 * Фирменная лента перед каждой группой.
 *
 * Групп пять, и на длинной странице они сливаются: одинаковые заголовки
 * подряд не дают понять, где кончились «Блюда» и начался «Бар». Брендбук
 * даёт девять паттернов как элементы оформления (стр. 19-21) - каждой
 * группе достаётся свой, и место в меню читается по цвету и рисунку
 * раньше, чем прочитан заголовок.
 *
 * Сначала это была узкая плашка слева от номера. Рисунок на двух с
 * половиной сантиметрах не читался - выходило цветное пятно неясного
 * назначения, приклеенное к заголовку. Лента во всю ширину показывает
 * сам узор и работает разделителем: так паттерны и применены в брендбуке
 * (стр. 25) - полосой на всю сторону, а не значком.
 */
.group__pat {
    height: clamp(1.9rem, 3.4vw, 2.5rem);
    margin-bottom: clamp(1.1rem, 2.4vw, 1.7rem);
    background: var(--pat, url('/assets/img/pat-harlequin.svg')) center repeat;
    /*
     * Тайл подгоняется по высоте ленты, а не задаётся в пикселях.
     *
     * При фиксированном размере в ленту попадала только верхушка рисунка:
     * ромбы высотой в 104 пикселя, обрезанные до четырнадцати, читались
     * как пила, а не как ромбы. Теперь в высоту ленты укладывается ровно
     * один ряд узора, каким бы он ни был - у девяти фирменных паттернов
     * пропорции разные.
     */
    background-size: auto 100%;
    border-block: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.group:nth-of-type(1) { --pat: url('/assets/img/pat-harlequin.svg'); }
.group:nth-of-type(2) { --pat: url('/assets/img/pat-stripes.svg'); }
.group:nth-of-type(3) { --pat: url('/assets/img/pat-bars.svg'); }
.group:nth-of-type(4) { --pat: url('/assets/img/pat-flower.svg'); }
.group:nth-of-type(5) { --pat: url('/assets/img/pat-harlequin-3.svg'); }
.group:nth-of-type(6) { --pat: url('/assets/img/pat-harlequin-2.svg'); }
.group:nth-of-type(7) { --pat: url('/assets/img/pat-diagonal-2.svg'); }

.group__num {
    font-family: var(--display);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .12em;
    color: var(--gold-ink);
    font-variant-numeric: tabular-nums;
}
.group__title {
    flex: 1;
    font-family: var(--display);
    font-size: clamp(1.9rem, 5.6vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--accent);
}
.group__count {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    white-space: nowrap;
}

/* --- заголовок раздела --- */
.sec { padding-top: clamp(2rem, 5vh, 3.2rem); }

.sec__head {
    display: flex;
    align-items: baseline;
    gap: .9rem;
    margin-bottom: 1.3rem;
}
.sec__parent {
    order: -1;
    flex: none;
    align-self: center;
    padding: .22rem .6rem;
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ground);
    background: var(--gold-ink);
    border-radius: 2px;
}
.sec__title {
    font-family: var(--display);
    font-size: clamp(1.3rem, 3vw, 1.95rem);
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.14;
    text-wrap: balance;
}
.sec__rule {
    flex: 1;
    height: 1px;
    min-width: 1.5rem;
    background: var(--hair);
}
.sec__count {
    flex: none;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}

/* --- карточки с фото --- */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: var(--gap);
}

.card { display: flex; flex-direction: column; }

/*
 * Рамка подстраивается под снимок, а не режет его.
 *
 * Часть блюд снята вертикально, и при жёстком 3:2 у них отрезало половину
 * тарелки. Пропорцию ставит скрипт из реальных размеров картинки, но
 * зажимает в границы от 3:4 до 3:2 - без этого одна случайная панорама
 * растянула бы всю строку сетки. До загрузки действует значение по
 * умолчанию, поэтому вёрстка не прыгает на пустом месте.
 */
/* Кремовый штрих под фото - первое из трёх мест, где остался Light Ivory.
   Пустая плашка до загрузки читается как дырка в сетке, штрих - как
   подложка. */
.card__frame {
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    background: var(--paper) url('/assets/img/pat-hatch-cream.svg') repeat;
    background-size: 16px 16px;
    aspect-ratio: var(--ar, 3 / 2);
}
.card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Фотографии сняты в разном свете; лёгкое приглушение сводит их к
       одной гамме, иначе сетка выглядит как случайная подборка. */
    filter: saturate(.92) contrast(1.03);
    transition: transform .5s var(--ease), filter .5s var(--ease);
}
.card:hover .card__img { transform: scale(1.035); filter: saturate(1) contrast(1.05); }

.card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: .8rem;
}
.card__name {
    font-family: var(--display);
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.24;
}
.card__name i { font-style: normal; font-weight: 400; color: var(--ink-dim); }
.card__text {
    margin-top: .3rem;
    font-size: .84rem;
    line-height: 1.5;
    color: var(--ink-dim);
}
.card__price {
    display: flex;
    align-items: baseline;
    gap: .7rem;
    /* Прижимаем цену к низу: в ряду карточек разной высоты цены иначе
       пляшут, и сравнить их взглядом не выходит. */
    margin-top: auto;
    padding-top: .7rem;
}

/* Цифры брендбук ведёт дисплейным шрифтом (стр. 17). */
.price {
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--gold-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.out {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
}

.card.is-out .card__frame { filter: grayscale(.75); opacity: .55; }
.card.is-out .price { color: var(--ink-faint); text-decoration: line-through; }

/* --- строчный список: бар и вино --- */
.list { display: grid; gap: .1rem; }

.row {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    padding: .55rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--ink) 11%, transparent);
}
.row__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
.row__name {
    font-family: var(--display);
    font-size: 1.04rem;
    font-weight: 500;
}
.row__name i {
    font-style: normal;
    font-weight: 400;
    font-size: .92em;
    color: var(--gold-ink);
}
.row__note {
    font-size: .78rem;
    color: var(--ink-dim);
}
/*
 * Точечная выноска между названием и ценой.
 *
 * Так набирают печатные меню и оглавления: глаз ведёт по точкам и не
 * теряет строку. На 231 позиции бара это разница между «читаемо» и
 * «невозможно». Точки золотые - декор, а не текст, поэтому чистый
 * Pearl Gold здесь на своём месте.
 */
.row__leader {
    flex: 1;
    min-width: 1rem;
    align-self: center;
    height: 1px;
    background-image: radial-gradient(circle, var(--dots) 1px, transparent 1px);
    background-size: 6px 2px;
    background-repeat: repeat-x;
    background-position: 0 center;
}
.row__price {
    flex: none;
    font-family: var(--display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--gold-ink);
    font-variant-numeric: tabular-nums;
}
.row.is-out { opacity: .5; }
.row.is-out .row__price { text-decoration: line-through; }

/* В строчных разделах позиции идут в две колонки, когда есть место. */
@media (min-width: 60rem) {
    .sec--list .list {
        grid-template-columns: 1fr 1fr;
        column-gap: clamp(2rem, 5vw, 4.5rem);
    }
}

/* --- пусто --- */
.noresults {
    display: grid;
    gap: .4rem;
    padding: clamp(3rem, 12vh, 6rem) 0;
    text-align: center;
}
.noresults strong {
    font-family: var(--display);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 600;
    color: var(--accent);
}
.noresults span { color: var(--ink-dim); font-size: .9rem; }

/*
 * Правила для <mark> здесь больше нет.
 *
 * Она стояла с самого начала, но подсветкой совпадений никто не занимался:
 * menu.js только прячет неподходящие позиции, а санитайзер вывода тег
 * <mark> вообще не пропускает. Стиль обещал то, чего в разметке не бывает.
 */

/* ------------------------------------------------------------- подвал */
/*
 * Подвал вывернут в оливу.
 *
 * Светлая страница длиной в тридцать тысяч пикселей нуждается в
 * отчётливом конце, иначе непонятно, кончилось меню или нет. Grey Olive
 * на Light Ivory - готовая пара из брендбука (стр. 9), а знак на ней
 * стоит в разрешённом варианте: слово айвори, подпись золотом.
 */
/* Кремовый штрих по верхнему краю подвала - третье место. Светлая
   страница в тридцать тысяч пикселей упирается в тёмный блок слишком
   резко; штриховая полоса делает переход, а не обрыв. */
.foot::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: .9rem;
    background: url('/assets/img/pat-hatch-dark.svg') repeat;
    background-size: 26px 26px;
}

.foot {
    position: relative;
    z-index: 2;
    margin-top: clamp(3rem, 9vh, 6rem);
    padding: clamp(3.2rem, 7vh, 5rem) var(--edge) clamp(2rem, 5vh, 3rem);
    background: var(--ink);
    color: var(--ground);
    overflow: hidden;
}
.foot__seal {
    position: absolute;
    right: calc(var(--edge) * -.25);
    bottom: -18%;
    width: clamp(11rem, 26vw, 20rem);
    color: var(--gold);
    opacity: .14;
    pointer-events: none;
}
.foot__seal svg { width: 100%; height: auto; }

.foot__inner { position: relative; }
.foot__mark { display: block; width: min(100%, 26rem); }
.foot__mark .logo { width: 100%; height: auto; }

.foot__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1.6rem;
    margin: clamp(2rem, 5vh, 3rem) 0 0;
}
.foot__cell dt {
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--gold) 78%, var(--ground));
}
.foot__cell dd {
    margin: .4rem 0 0;
    font-family: var(--display);
    font-size: 1.18rem;
    font-weight: 500;
}
.foot__link { border-bottom: 1px solid color-mix(in srgb, var(--ground) 35%, transparent); }
.foot__link:hover { color: var(--gold); border-bottom-color: var(--gold); }

.foot__social { display: flex; gap: .5rem; }
.foot__icon {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    color: color-mix(in srgb, var(--ground) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--ground) 26%, transparent);
    border-radius: 50%;
    transition: color .18s var(--ease), border-color .18s var(--ease);
}
.foot__icon svg { width: 18px; height: 18px; }
.foot__icon:hover {
    color: var(--gold);
    border-color: var(--gold);
}

.foot__fine {
    margin-top: clamp(2rem, 5vh, 3rem);
    padding-top: 1.2rem;
    border-top: 1px solid color-mix(in srgb, var(--ground) 18%, transparent);
    font-size: .68rem;
    letter-spacing: .1em;
    color: color-mix(in srgb, var(--ground) 55%, transparent);
}

/* ------------------------------------------------------------- наверх */
.totop {
    position: fixed;
    right: clamp(1rem, 3vw, 2rem);
    bottom: clamp(1rem, 3vw, 2rem);
    z-index: 35;
    display: grid;
    place-items: center;
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    color: var(--ground);
    background: var(--accent);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--ink) 45%, transparent);
    animation: rise .3s var(--ease) both;
}
.totop svg { width: 19px; height: 19px; }
.totop:hover { background: var(--ink); }

/* ------------------------------------------------------------- узкий экран */
@media (max-width: 40rem) {
    :root { --nav-h: 5.9rem; }

    /* На телефоне печать уходит вверх и почти гаснет: на узкой колонке она
       ложилась ровно под знак и подводку и делала текст мутным. */
    .hero__seal {
        top: 0;
        right: -34%;
        translate: none;
        width: 15rem;
        opacity: .06;
    }
    @keyframes fade { from { opacity: 0; } to { opacity: .06; } }

    /* На телефоне поиска нет: узкая лента групп нужна целиком под сами
       группы, а кнопка отъедала у неё место. */
    .nav__search, .search { display: none; }

    .group__pat { min-height: 2.6rem; }

    .cards { grid-template-columns: 1fr 1fr; gap: .9rem; }
    .card__name { font-size: 1rem; }
    .card__text { display: none; }
    .price { font-size: .96rem; }

    .row { padding: .5rem 0; }
    .row__name { font-size: .98rem; }
}

/* Совсем узкие: две колонки карточек становятся тесными. */
@media (max-width: 23rem) {
    .cards { grid-template-columns: 1fr; }
    .card__text { display: block; }
}

@media print {
    .top, .nav, .totop, .hero__seal, .foot__seal, .band { display: none; }
    .foot::before { display: none; }
    body { background-image: none; }
    body { background: #fff; color: #000; }
    .price, .row__price, .group__title { color: #000; }
    .group__pat { display: none; }
}

/* ------------------------------------------------- просмотр фотографии */
/*
 * Рамка карточки стала кнопкой - сбрасываем всё, что браузер даёт кнопке
 * по умолчанию, и возвращаем указатель «можно нажать».
 */
button.card__frame {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
    cursor: zoom-in;
}

.viewer {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
}
.viewer__veil {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--ink) 92%, transparent);
    animation: fadein .18s var(--ease);
    /* Подложка светлеет по мере протягивания - видно, что снимок вот-вот
       закроется, и жест можно отменить, вернув палец. */
    transition: opacity .2s var(--ease);
}

/*
 * Рамка снимка прокручивается. Второй шаг увеличения - это обычная
 * прокрутка внутри неё, а не своя арифметика с трансформациями: пальцем
 * такое ведёт себя предсказуемо и не спорит с системным масштабом.
 */
.viewer__stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: clamp(2.5rem, 7vh, 4rem) clamp(1rem, 5vw, 4.5rem);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /*
     * Пока снимок вписан в экран, все касания достаются нашим жестам:
     * протягивание вверх или вниз закрывает, вбок - листает. Иначе
     * браузер увёл бы палец в прокрутку страницы и в «потянуть, чтобы
     * обновить», а жест не сработал бы ни разу.
     */
    touch-action: none;
}
/* Увеличенный снимок возвращает касания родной прокрутке - двигать его
   внутри рамки надо именно ей. */
.viewer__stage.is-zoomed { touch-action: pan-x pan-y; }

.viewer__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 2px;
    cursor: zoom-in;
    animation: rise .22s var(--ease) both;
    /* Возврат на место, если протянули и передумали. Во время самого
       протягивания переход снимается скриптом - иначе снимок тянется за
       пальцем с задержкой. */
    transition: transform .2s var(--ease);
}
.viewer__img.is-zoomed {
    max-width: none;
    max-height: none;
    width: 200%;
    height: auto;
    cursor: zoom-out;
}

.viewer__cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: .9rem;
    padding: 1rem var(--edge) 1.2rem;
    text-align: center;
    color: var(--ground);
    /* Заливка снизу вверх: подпись читается и на светлом снимке. */
    background: linear-gradient(transparent, color-mix(in srgb, var(--ink) 85%, transparent) 55%);
    pointer-events: none;
}
.viewer__name {
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 600;
}
.viewer__price {
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.viewer__x,
.viewer__nav {
    position: absolute;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--ground);
    background: color-mix(in srgb, var(--ink) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--ground) 22%, transparent);
    border-radius: 50%;
    cursor: pointer;
    transition: background .16s var(--ease);
}
.viewer__x:hover,
.viewer__nav:hover { background: var(--accent); border-color: var(--accent); }

.viewer__x {
    top: clamp(.8rem, 2vw, 1.4rem);
    right: clamp(.8rem, 2vw, 1.4rem);
    width: 2.6rem;
    height: 2.6rem;
}
.viewer__x svg { width: 19px; height: 19px; }

.viewer__nav {
    top: 50%;
    translate: 0 -50%;
    width: 2.9rem;
    height: 2.9rem;
}
.viewer__nav svg { width: 20px; height: 20px; }
.viewer__nav--prev { left: clamp(.5rem, 2vw, 1.4rem); }
.viewer__nav--next { right: clamp(.5rem, 2vw, 1.4rem); }

body.viewer-open { overflow: hidden; }

@media (max-width: 40rem) {
    /* На телефоне стрелки уводим вниз, к большому пальцу: по краям экрана
       они попадают под системные жесты «назад». */
    .viewer__nav {
        top: auto;
        bottom: 4.6rem;
        translate: none;
    }
    .viewer__nav--prev { left: clamp(1rem, 8vw, 3rem); }
    .viewer__nav--next { right: clamp(1rem, 8vw, 3rem); }
    .viewer__stage { padding: 3.5rem .5rem 7rem; }
}

@media print { .viewer { display: none; } }