:root {
    /* Паттерн в переменных: его использует и страница, и карточки с шапкой. */
    --pattern: url("../images/background.jpg");
    --pattern-size: 640px;
    /* Карточки полупрозрачные: собственного фона у них нет, сквозь них видно
       паттерн страницы. Приподнимает их над фоном тень, а не заливка. */
    --surface-edge: rgba(255, 255, 255, .5);
    /* Косой градиент вместо ровной заливки — стекло ловит свет сверху слева. */
    --surface-gloss: linear-gradient(
        160deg,
        rgba(255, 255, 255, .56) 0%,
        rgba(255, 255, 255, .30) 45%,
        rgba(255, 255, 255, .24) 100%
    );
    /* Для горизонтальной панели блик вертикальный: свет падает сверху. */
    --surface-gloss-bar: linear-gradient(
        180deg,
        rgba(255, 255, 255, .60) 0%,
        rgba(255, 255, 255, .40) 55%,
        rgba(255, 255, 255, .26) 100%
    );
    --shadow: 0 14px 34px rgba(0, 0, 0, .38);
    --rail: 60px;        /* свёрнутая левая панель */
    --rail-open: 232px;  /* она же при наведении */

    --bg: #c3d92a;
    --panel-2: rgba(255, 255, 255, .72);
    --text: #15180d;
    --muted: #4d5533;
    --accent: #6b4e00;
    --green: #2e7d32;
    --green-soft: #d8ecd9;
    --yellow: #7a6410;
    --red: #7a1f1f;
    --border: rgba(0, 0, 0, .22);
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    /* Бесшовный паттерн: тайлим и уменьшаем — исходник 2560px, иначе на экран
       попадёт пара мотивов. fixed — чтобы фон не ехал при прокрутке. */
    background: var(--pattern) repeat fixed;
    background-size: var(--pattern-size);
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.5;
    /* Место под левую панель: она fixed и иначе накрыла бы контент. */
    padding-left: var(--rail);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Баннер ---- */
.hero {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 210px; padding: 1.5rem 1rem;
    /* Постер вертикальный, а баннер — узкая полоса: cover масштабирует картинку
       по ширине, а сдвиг по вертикали выводит в кадр долину с горами и оставляет
       вшитые в постер надписи за пределами полосы. */
    background-image: url("../images/hero.jpg");
    background-size: cover;
    background-position: center 50%;
    border-bottom: 1px solid var(--surface-edge);
    box-shadow: var(--shadow);
    overflow: hidden;
}
/* Небо на закате местами светлое — без затемнения заголовок на нём теряется. */
.hero::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.35) 45%, rgba(0,0,0,.65));
}
.hero-tag {
    position: relative; margin: 0; text-align: center;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
    font-size: clamp(1.7rem, 5.8vw, 3.8rem);
    line-height: 1.05; letter-spacing: .03em; text-transform: uppercase;
    /* Красный как на постере. Тёмная обводка и тень нужны потому, что под
       надписью попадаются светлые участки — вода и небо. */
    color: #e2382a;
    -webkit-text-stroke: 1px rgba(45, 8, 4, .6);
    text-shadow: 0 3px 8px rgba(0, 0, 0, .7);
}

/* ---- Левая панель ---- */
/* Свёрнута в иконки, разворачивается наведением. Ширину меняет только сама
   панель, а контент отодвинут постоянным отступом body — поэтому при
   раскрытии страница не перекомпоновывается. */
.sprite { display: none; }
.ico {
    width: 22px; height: 22px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 20;
    width: var(--rail); overflow: hidden;
    background: var(--surface-gloss-bar);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    border-right: 1px solid var(--surface-edge);
    box-shadow: var(--shadow);
    transition: width .18s ease;
}
.sidebar:hover, .sidebar:focus-within { width: var(--rail-open); }
.sidebar nav { display: flex; flex-direction: column; padding: .7rem 0; }
.sidebar nav a {
    display: flex; align-items: center; gap: .85rem; white-space: nowrap;
    /* Отступ слева таков, что иконка встаёт по центру свёрнутой полосы. */
    padding: .72rem 0 .72rem 19px; color: var(--text);
}
.sidebar nav a:hover { background: rgba(255, 255, 255, .45); text-decoration: none; }
.sidebar nav a > span { opacity: 0; transition: opacity .14s ease; }
.sidebar:hover nav a > span, .sidebar:focus-within nav a > span { opacity: 1; }

/* Кнопка-якорь. Закреплённая панель не сворачивается по уходу курсора и
   переживает переход на другую страницу — состояние в localStorage. */
.pin {
    display: flex; align-items: center; gap: .85rem; width: 100%;
    padding: .72rem 0 .72rem 19px; white-space: nowrap; cursor: pointer;
    background: none; border: 0; border-bottom: 1px solid var(--surface-edge);
    border-radius: 0; color: var(--muted); font: inherit; text-align: left;
}
.pin:hover { background: rgba(255, 255, 255, .45); opacity: 1; }
.pin > span { opacity: 0; transition: opacity .14s ease; }
.sidebar:hover .pin > span, .sidebar:focus-within .pin > span { opacity: 1; }
.rail-pinned .pin { color: var(--accent); background: rgba(255, 255, 255, .35); }
.rail-pinned .sidebar { width: var(--rail-open); }
.rail-pinned .sidebar nav a > span, .rail-pinned .pin > span { opacity: 1; }
/* Контент отодвигается вместе с панелью, иначе закреплённая накроет его. */
html.rail-pinned body { padding-left: var(--rail-open); }

/* Появляются только на узком экране. */
.mobilebar, .menu-close, .scrim { display: none; }
.container { max-width: 960px; margin: 2rem auto; padding: 0 1.5rem; }
.card {
    /* Своего фона нет — сквозь карточку видно паттерн страницы. Лёгкое
       матирование, чтобы мотивы не мешали читать текст. Объём собирается из
       трёх вещей: блик градиентом, фаска внутренними тенями (светлая верхняя
       кромка, притенённая нижняя) и контактная тень под краем. */
    background: var(--surface-gloss);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    border: 1px solid var(--surface-edge);
    border-radius: 12px; padding: 1.2rem 1.4rem; margin-bottom: 1.2rem;
    box-shadow:
        var(--shadow),
        0 2px 6px rgba(0, 0, 0, .18),
        inset 0 1px 0 rgba(255, 255, 255, .8),
        inset 0 -1px 0 rgba(0, 0, 0, .12);
}
h1 { font-size: 1.5rem; } h2 { font-size: 1.2rem; }
label { display: block; margin: .7rem 0 .25rem; color: var(--muted); font-size: .9rem; }
input, select, textarea {
    width: 100%; padding: .55rem .7rem; background: var(--panel-2);
    border: 1px solid var(--border); border-radius: 8px; color: var(--text);
    font-size: .95rem;
}
textarea { min-height: 90px; resize: vertical; }
button, .btn {
    display: inline-block; padding: .55rem 1rem; border: none; border-radius: 8px;
    /* Тёмная заливка со светлым текстом: на светлой карточке кнопка так заметнее. */
    background: var(--accent); color: #fff; font-weight: 600; cursor: pointer;
    font-size: .9rem;
}
button.secondary, .btn.secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
button.danger { background: var(--red); color: #fff; }
button.ok { background: var(--green); color: #fff; }
button:hover { opacity: .92; }
.muted { color: var(--muted); }
.alert { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; }
.alert.error { background: var(--red); color: #fff; }
.alert.info { background: var(--green-soft); color: #1d4620; border: 1px solid var(--green); }
.row { display: flex; gap: 1rem; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 180px; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { padding: .5rem .6rem; border: 1px solid var(--border); text-align: left; }
th { background: var(--panel-2); position: sticky; }
.badge { padding: .15rem .5rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.badge.pending { background: var(--yellow); color: #fff; }
.badge.approved { background: var(--green); color: #fff; }
.badge.rejected { background: var(--red); color: #fff; }
.badge.blocked { background: var(--red); color: #fff; }
.badge.paid { background: var(--green); color: #fff; }
.badge.unpaid { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }

/* Заполненность профиля. */
.progress {
    height: 10px; border-radius: 999px; overflow: hidden;
    background: var(--panel-2); border: 1px solid var(--border);
}
.progress > i { display: block; height: 100%; background: var(--green); }

/* Статус марафона: крупная плашка рядом с периодом. */
.status-pill {
    display: inline-block; margin-left: .5rem; padding: .2rem .8rem; border-radius: 999px;
    font-size: .85rem; font-weight: 700; letter-spacing: .01em; vertical-align: middle;
}
.status-pill.s-draft { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }
.status-pill.s-active { background: var(--green); color: #fff; }
.status-pill.s-finished { background: var(--muted); color: #fff; }

/* Чекбоксы: общее правило растягивает поля на всю ширину, флажкам это не нужно. */
input[type="checkbox"] { width: auto; margin-right: .3rem; vertical-align: middle; }
label.check { display: inline-block; margin: 0 .8rem 0 0; color: var(--text); font-size: .85rem; }
.weekdays { display: flex; flex-wrap: wrap; gap: .2rem .4rem; margin-top: .3rem; }

/* ---- Дни тренировок в ленте ---- */
/* Колонка слева от постов: весь марафон целиком, чтобы участник видел и то,
   что уже открыто, и то, что впереди. */
/* Лента с колонкой дней шире обычной страницы: иначе колонка съедает
   ширину постов. Старые браузеры без :has() просто оставят 960px. */
.container:has(.feedgrid) { max-width: 1280px; }
.feedgrid { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.days { position: sticky; top: 1rem; }
.days h2 { margin: 0 0 .6rem; font-size: 1rem; }
.days ul { list-style: none; margin: 0; padding: 0; }
.days li + li { border-top: 1px solid var(--border); }
.days a, .days span { display: block; padding: .45rem 0; font-size: .85rem; line-height: 1.3; }
/* Наступивший день — синим, прошедшие — чёрным, оба открыты. */
.d-today { color: #1d6fd0; font-weight: 700; }
.d-past { color: var(--text); }
.d-today:hover, .d-past:hover { text-decoration: underline; }
/* Открытое сейчас задание — залитая строка. */
.d-current { background: rgba(0, 0, 0, .14); border-radius: 6px; padding-left: .4rem; padding-right: .4rem; }
/* Будущий день недоступен: серым и без ссылки. */
.d-future { color: #8a9270; cursor: default; }

/* Турнирная таблица */
.tournament { overflow-x: auto; }
.tournament td.cell { text-align: center; width: 44px; padding: 3px; }
/* В дне может быть несколько тренировок — ячейка делится на сегменты по числу заданий. */
.cell .segs { display: flex; gap: 2px; height: 20px; }
.cell .seg { flex: 1; border-radius: 3px; }
.seg.s-none { background: transparent; border: 1px solid var(--border); }
.seg.s-pending { background: var(--yellow); }
.seg.s-approved { background: var(--green); }
.seg.s-rejected { background: var(--red); }
.col-today { outline: 2px solid var(--accent); background: rgba(212,160,23,.12); }
.dot { display:inline-block; width:12px;height:12px;border-radius:3px; vertical-align:middle;}
.legend span { margin-right: 1rem; font-size: .8rem; color: var(--muted); }

/* Переключатель «таблица / календарь» */
.view-switch { display: flex; gap: .4rem; margin-bottom: .8rem; }
.view-switch button.active { background: var(--accent); color: #fff; border-color: transparent; }

/* Календарь заданий: неделя в строке, понедельник первым. */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-head {
    text-align: center; font-size: .8rem; font-weight: 600; color: var(--muted);
    padding: .2rem 0;
}
.cal-day {
    min-height: 82px; padding: .3rem; border-radius: 8px;
    background: var(--panel-2); border: 1px solid var(--border);
}
/* Дни за границами марафона нужны только чтобы сетка недель не рвалась. */
.cal-day.out { opacity: .35; }
.cal-day.today { outline: 2px solid var(--accent); }
.cal-date {
    display: flex; align-items: center; justify-content: space-between;
    font-size: .75rem; color: var(--muted); margin-bottom: .2rem;
}
.cal-add {
    padding: 0 .35rem; font-size: .85rem; line-height: 1.3;
    background: transparent; color: var(--muted); border: 1px solid var(--border);
}
.cal-add:hover { color: var(--text); }
.chip {
    display: block; margin-top: 2px; padding: .15rem .35rem; border-radius: 5px;
    font-size: .75rem; line-height: 1.25; background: var(--green); color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip:hover { text-decoration: none; opacity: .9; }
/* Заготовка без описания — участнику показывать пока нечего. */
.chip.empty { background: var(--panel-2); color: var(--muted); border: 1px dashed var(--border); }

@media (max-width: 700px) {
    /* Семь колонок на телефоне нечитаемы — разворачиваем календарь в две. */
    .cal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cal-head { display: none; }
    .cal-day.out { display: none; }
}

/* Чат: свои сообщения справа, ответы собеседника слева. */
.chat {
    max-height: 60vh; overflow-y: auto; padding: .2rem;
    display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem;
}
.msg { max-width: 78%; padding: .45rem .7rem; border-radius: 10px; }
.msg.mine { align-self: flex-end; background: var(--green); color: #fff; }
.msg.theirs { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--border); }
.msg-body { white-space: pre-wrap; word-break: break-word; }
.msg-meta { margin-top: .2rem; font-size: .7rem; opacity: .75; }

/* Лента */
.post { border-left: 3px solid var(--accent); }
/* Заглавный материал поста: показывается целиком, не обрезаясь по краям. */
.post-media {
    display: block; width: 100%; max-height: 60vh; object-fit: contain;
    margin: .6rem 0; border-radius: 10px; background: rgba(0, 0, 0, .06);
}

/* История проверки результата: попытки участника и ответы проверяющего. */
.sub-log { display: flex; flex-direction: column; gap: .4rem; margin: .5rem 0; }
.sub-event {
    max-width: 88%; padding: .4rem .65rem; border-radius: 9px;
    background: var(--panel-2); border: 1px solid var(--border);
}
.sub-event.mine { align-self: flex-end; }
.sub-event.theirs { align-self: flex-start; }
.sub-event-head { font-size: .75rem; font-weight: 600; color: var(--muted); }
.sub-event-time { margin-left: .4rem; font-weight: 400; font-size: .7rem; }
.sub-event-body { font-size: .85rem; white-space: pre-wrap; word-break: break-word; }

/* Подтверждение необратимого действия. */
.modal {
    padding: 0; max-width: 420px; border: 1px solid var(--surface-edge);
    border-radius: 12px; background: var(--panel-2); color: var(--text);
    box-shadow: var(--shadow);
}
.modal::backdrop { background: rgba(0, 0, 0, .45); }
.modal form { padding: 1.1rem 1.3rem; }
.modal h3 { margin: 0 0 .5rem; font-size: 1.05rem; }
.modal p { margin: 0; font-size: .9rem; color: var(--muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.1rem; }
.modal-actions button { padding: .4rem 1rem; font-size: .85rem; }

/* Отправка результата — тот же язык, что и у комментариев: строка ввода,
   которая разворачивается при фокусе, и действия, не занимающие место впустую. */
.submit-form { margin-top: .6rem; }
.submit-form textarea {
    min-height: 0; padding: .4rem .7rem; font-size: .9rem;
    resize: none; overflow: hidden;
}
/* Высоту поля при фокусе не меняем: это подбрасывало бы комментарии под ним.
   Растянуть его пользователь может сам за уголок. */
.submit-form textarea:focus { resize: vertical; }
/* Высота строки действий постоянна: иначе при наведении кнопки появлялись бы
   из ниоткуда и подбрасывали всё, что ниже. */
.submit-actions {
    display: flex; align-items: center; gap: .9rem; margin-top: .45rem;
    flex-wrap: wrap; min-height: 26px;
}
/* Нативное поле файла громоздкое — прячем его, оставляя кликабельной подпись. */
.attach { margin: 0; cursor: pointer; }
.attach input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.attach-label { font-size: .72rem; color: var(--muted); }
.attach:hover .attach-label, .attach input:focus + .attach-label { color: var(--text); }
.submit-form button { padding: .22rem .7rem; font-size: .75rem; font-weight: 600; }
/* Над пустым полем не висит ничего: кнопка и скрепка проявляются при наведении
   на форму, при работе с ней или после выбора файла (в этот момент фокус уходит
   из формы, поэтому у неё есть отдельный признак). Скрываем видимостью, а не
   display — место остаётся занятым и ничего не смещается. */
.submit-form button, .submit-form .attach {
    visibility: hidden; opacity: 0; transition: opacity .12s ease;
}
.submit-form:hover button, .submit-form:focus-within button, .submit-form.has-file button,
.submit-form:hover .attach, .submit-form:focus-within .attach, .submit-form.has-file .attach {
    visibility: visible; opacity: 1;
}

/* Обсуждение под заданием.
   Читается как отдельная лента под постом: своя подложка во всю ширину карточки,
   отделённая линией и скруглённая по нижнему краю. */
.comments {
    margin: 1rem -1.4rem -1.2rem;
    padding: .8rem 1.4rem 1rem;
    background: rgba(255, 255, 255, .34);
    border-top: 1px solid var(--surface-edge);
    border-radius: 0 0 12px 12px;
}
.comments-head { font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: .6rem; }
.comment { position: relative; display: flex; gap: .6rem; margin-bottom: .7rem; }
.comment.reply { margin: .5rem 0 0 0; }
.comment-avatar {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%;
    object-fit: cover; border: 1px solid var(--border);
}
.comment-avatar.empty { background: var(--panel-2); }
.comment-main { flex: 1; min-width: 0; }
.comment-author { font-size: .85rem; font-weight: 600; }
.comment-time { margin-left: .4rem; font-weight: 400; font-size: .72rem; color: var(--muted); }
.comment-body { white-space: pre-wrap; word-break: break-word; font-size: .9rem; }

/* Удаление — крестик в углу комментария, появляется при наведении. */
.comment-del { position: absolute; top: 0; right: 0; line-height: 1; }
.comment-del button {
    padding: 0 .25rem; background: transparent; border: none; box-shadow: none;
    color: var(--muted); font-size: 1.05rem; font-weight: 700; line-height: 1;
}
.comment-del button:hover { color: var(--red); opacity: 1; }

/* «Ответить» — тоже всплывающая подпись, а не постоянная кнопка. */
.comment-reply-box > summary {
    display: inline-block; margin-top: .1rem;
    font-size: .75rem; color: var(--muted); cursor: pointer; list-style: none;
}
.comment-reply-box > summary::-webkit-details-marker { display: none; }
.comment-reply-box > summary:hover { color: var(--text); }

.comment-del, .comment-reply-box > summary { opacity: 0; transition: opacity .12s ease; }
.comment:hover > .comment-del,
.comment:focus-within > .comment-del,
.comment:hover > .comment-main > .comment-reply-box > summary,
.comment:focus-within > .comment-main > .comment-reply-box > summary,
.comment-reply-box[open] > summary { opacity: 1; }

/* Поле ввода в одну строку; кнопка отправки появляется, когда в него встали. */
.comment-form { margin-top: .4rem; }
.comment-form textarea {
    min-height: 0; padding: .35rem .6rem; font-size: .85rem;
    resize: none; overflow: hidden;
}
.comment-form textarea:focus { min-height: 58px; resize: vertical; }
.comment-form button { display: none; margin-top: .4rem; padding: .35rem .8rem; font-size: .8rem; }
.comment-form:focus-within button { display: inline-block; }

@media (hover: none) {
    /* На сенсорных экранах наведения нет — показываем действия сразу. */
    .comment-del, .comment-reply-box > summary, .comment-form button { opacity: 1; display: inline-block; }
    .submit-form button, .submit-form .attach { visibility: visible; opacity: 1; }
}

.avatar { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }
.inline-form { display: inline; }
.small { font-size: .8rem; }

/* Мобильные экраны */
@media (max-width: 700px) {
    /* Тайл 640px на узком экране даёт меньше одного повтора — мотивы выходят
       крупнее, чем на десктопе. Уменьшаем, чтобы масштаб рисунка совпадал. */
    :root { --pattern-size: 300px; }

    /* Эти таблицы лежат в карточке без обёртки с прокруткой и на узком экране
       вылезали за её правый край. Делаем саму таблицу блоком со своей
       горизонтальной прокруткой. Турнирная таблица сюда не попадает — она
       вложена в .tournament, где прокрутка уже есть. */
    .card > table { display: block; overflow-x: auto; }

    /* Полосы слева нет: её место занимает шторка, выезжающая сверху,
       поэтому закрепление здесь бессмысленно. */
    body, html.rail-pinned body { padding-left: 0; }
    .pin { display: none; }
    .rail-pinned .sidebar { width: auto; }

    .mobilebar {
        display: flex; align-items: center; gap: .7rem;
        padding: .6rem 1rem; position: sticky; top: 0; z-index: 25;
        background: var(--surface-gloss-bar);
        backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
        border-bottom: 1px solid var(--surface-edge);
        box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
    }
    .mobilebar-title { font-weight: 700; }
    .burger {
        display: flex; flex-direction: column; justify-content: center; gap: 4px;
        width: 40px; height: 34px; padding: 0 8px; background: none; border: 0;
    }
    .burger span { display: block; height: 2px; background: var(--text); border-radius: 2px; }

    .sidebar {
        top: 0; left: 0; right: 0; bottom: auto;
        /* Выше мобильной шапки: шторка накрывает её целиком, иначе бургер
           остаётся поверх меню и дублирует крестик. */
        z-index: 30;
        width: auto; max-height: 86vh; overflow-y: auto;
        border-right: 0; border-bottom: 1px solid var(--surface-edge);
        /* Прячем вверх за край экрана, а не шириной: раскрытие по наведению
           на сенсорном экране не работает, нужна явная кнопка.
           visibility страхует от percentage-transform: он считается от высоты
           самой шторки, и при её изменении (загрузка шрифтов, картинки) край
           меню успевал показаться из-за края экрана. */
        transform: translateY(-100%);
        visibility: hidden;
        transition: transform .22s ease, visibility 0s linear .22s;
    }
    .sidebar:hover, .sidebar:focus-within { width: auto; }
    .sidebar nav { padding: .4rem 0 1rem; }
    .sidebar nav a { padding: .85rem 1.2rem; }
    .sidebar nav a > span { opacity: 1; }
    body.menu-open .sidebar {
        transform: none; visibility: visible;
        transition: transform .22s ease, visibility 0s;
    }
    body.menu-open { overflow: hidden; }

    .menu-close {
        display: block; margin: .6rem .7rem -.2rem auto;
        width: 38px; height: 38px; padding: 0; line-height: 1;
        font-size: 1.5rem; color: var(--text);
        background: rgba(255, 255, 255, .55); border: 1px solid var(--border);
        border-radius: 50%;
    }
    .scrim {
        display: block; position: fixed; inset: 0; z-index: 15;
        background: rgba(0, 0, 0, .45);
        opacity: 0; pointer-events: none; transition: opacity .2s ease;
    }
    body.menu-open .scrim { opacity: 1; pointer-events: auto; }

    .hero { min-height: 130px; }

    /* Две колонки на узком экране не помещаются: дни встают над лентой. */
    .feedgrid { grid-template-columns: 1fr; }
    .days { position: static; }
}
@media (pointer: coarse) {
    /* На iOS background-attachment: fixed привязывает фон к документу и не
       перерисовывает его при прокрутке — фон уезжает и выглядит увеличенным. */
    body { background-attachment: scroll; }
}