/* ═══════════════════════════════════════════════════════════════════
   «Рядом с Викой» — компоненты портала.

   Подключается после tokens.css и пользуется только его значениями:
   своих цветов и размеров здесь нет. Каждый компонент рассчитан на
   повторное использование на будущих страницах портала.
   ═══════════════════════════════════════════════════════════════════ */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--text-base);
    line-height: var(--leading-base);
    -webkit-text-size-adjust: 100%;
}

/* Выразительное слово внутри заголовка: засечный курсив терракотой.
   Приём направления «Тёплая студия» — не украшение, а способ выделить
   в строке одно слово, на котором держится смысл. */
.accent {
    font-family: var(--font-accent);
    font-style: italic;
    font-weight: 400;
    color: var(--accent);
}

/* Надстрочная метка с точкой: «Семейный проект · Новосибирск» */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink);
}
.eyebrow::before {
    content: "";
    width: .625rem;
    height: .625rem;
    border-radius: 50%;
    background: var(--accent);
    flex: 0 0 auto;
}

/* Нумерованная метка раздела: «01 / ИНСТРУМЕНТ» */
.numlabel {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
}

h1, h2, h3 { line-height: var(--leading-snug); margin: 0; }
p { margin: 0; }
img, svg { max-width: 100%; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-dk); }

/* Фокус виден всегда и везде — это условие приёмки, а не украшение */
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ─────────────── Служебное ─────────────── */

/* Текст только для читающих программ */
.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Ссылка «к содержанию»: появляется, когда на неё встал фокус */
.skip {
    position: absolute;
    left: var(--space-2);
    top: calc(-1 * var(--space-16));
    z-index: 20;
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    color: var(--accent);
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    font-weight: 600;
    transition: top .15s ease-out;
}
.skip:focus { top: var(--space-2); }
@media (prefers-reduced-motion: reduce) {
    .skip { transition: none; }
}

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-4);
}
@media (min-width: 48rem) {
    .container { padding-inline: var(--space-6); }
}

.measure { max-width: var(--measure); }

/* ─────────────── Строка действий ─────────────── */
/* Одна или несколько кнопок в ряд, с переносом на узком экране.
   Отступ сверху задаёт тот блок, в котором строка стоит. */
.actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.actions--spaced { margin-top: var(--space-8); }

/* ─────────────── Кнопки ─────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: var(--tap);
    padding: var(--space-3) var(--space-6);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-base);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
.btn:hover { background: var(--surface-warm); color: var(--ink); }

/* Основная кнопка крупнее остальных и с мягкой тенью: на первом
   экране она должна читаться как главное действие с одного взгляда. */
.btn--primary {
    padding: var(--space-4) var(--space-8);
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: var(--shadow);
}
.btn--primary:hover { background: var(--accent-dk); border-color: var(--accent-dk); color: #fff; }

/* Стрелка после надписи. Отдельным элементом, чтобы не попадать
   в текст для читающих программ. */
.btn__arrow { font-weight: 400; }

/* Второстепенное действие: ссылка-кнопка без рамки */
.btn--plain {
    border-color: transparent;
    background: transparent;
    color: var(--accent);
    padding-inline: var(--space-3);
}
.btn--plain:hover { background: var(--accent-soft); color: var(--accent-dk); }

/* ─────────────── Шапка ─────────────── */
.header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}
/* Вход в инструмент прямо из шапки — доступен с любой страницы. */
.header__action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-pill);
    background: var(--surface-warm);
    color: var(--ink);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
}
.header__action:hover { background: var(--accent-soft); color: var(--accent-dk); }
@media (max-width: 47.999rem) {
    .header__action { display: none; }
}
.header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
    padding-block: var(--space-3);
}
/* Название — только текстом: знак проекта не утверждён. */
.brand {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.015em;
    line-height: 1.15;
}
.brand:hover { color: var(--accent); }

/* Кнопка меню существует только при включённом JavaScript:
   в разметке она помечена hidden, скрипт снимает пометку. */
.nav__toggle {
    display: none;
    min-height: var(--tap);
    min-width: var(--tap);
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
    align-items: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}
.nav__toggle[hidden] { display: none; }

.nav__bars { display: block; width: 1.125rem; height: 2px; background: currentColor;
             position: relative; }
.nav__bars::before, .nav__bars::after {
    content: ""; position: absolute; left: 0;
    width: 100%; height: 2px; background: currentColor;
}
.nav__bars::before { top: -6px; }
.nav__bars::after  { top:  6px; }

.nav { margin-right: auto; }
.nav__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--ink);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
}
.nav__link { border-radius: var(--radius-pill); }
.nav__link:hover { background: var(--accent-soft); color: var(--accent-dk); }

/* Узкий экран И работающий скрипт — только тогда меню сворачивается.
   Без скрипта срабатывает лишь правило выше: список остаётся на виду
   и переносится на вторую строку. */
@media (max-width: 47.999rem) {
    [data-nav="enhanced"] .nav__toggle { display: inline-flex; }
    [data-nav="enhanced"] .nav {
        flex-basis: 100%;
        order: 3;
    }
    [data-nav="enhanced"] .nav[data-open="false"] { display: none; }
    [data-nav="enhanced"] .nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-1);
        padding-block: var(--space-2) var(--space-3);
        border-top: 1px solid var(--line);
    }
    [data-nav="enhanced"] .nav__link { padding-inline: var(--space-3); }
}

/* ─────────────── Разделы ─────────────── */
.section { padding-block: var(--space-16); }

.section--warm { background: var(--surface-warm); }
.section__title { letter-spacing: -0.02em; }
.section__head { margin-bottom: var(--space-8); }
.section__title { font-size: var(--text-2xl); }
.section__lead {
    margin-top: var(--space-3);
    font-size: var(--text-lg);
    color: var(--ink-2);
    max-width: var(--measure);
}
.section__note {
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--ink-2);
    max-width: var(--measure);
}

/* ═══════════════════════════════════════════════════════════════════
   Первый экран: слева сообщение и действие, справа — сцена.
   Композиция намеренно несимметричная: текстовая колонка шире
   и выровнена по верху, сцена смещена и живёт по своим правилам.
   ═══════════════════════════════════════════════════════════════════ */
.hero { padding-block: var(--space-12) var(--space-16); }
.hero__grid {
    display: grid;
    gap: var(--space-12);
    align-items: center;
}
@media (min-width: 60rem) {
    .hero__grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: var(--space-16);
    }
}
.hero__title {
    margin-top: var(--space-6);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.035em;
    max-width: 16ch;
}
.hero__text {
    margin-top: var(--space-6);
    font-size: var(--text-lg);
    color: var(--ink-2);
    max-width: 44ch;
}

/* ─────────────── Сцена: расписание как предмет ───────────────
   Не карточка в ряду одинаковых карточек, а собранный кадр:
   тёплое пятно, круг за ним, наклонённый лист и подпись.
   overflow: clip обязателен — наклон и круг выходят за рамку,
   и без него страница получила бы горизонтальную прокрутку. */
.stage {
    position: relative;
    overflow: hidden;        /* запасной вариант для старых браузеров */
    overflow: clip;
    padding: var(--space-10) var(--space-6) var(--space-12);
    border-radius: var(--radius-xl);
}
.stage__blob {
    position: absolute;
    inset: 0;
    background: var(--blob);
    /* Неодинаковые углы: форма читается как пятно, а не как плашка */
    border-radius: var(--radius-xl) 45% var(--radius-xl) 35%;
}
/* Круг держим внутри сцены целиком: у сцены скруглённые углы и обрезка,
   и круг, выведенный за край, читался бы прямоугольником, а не кругом. */
.stage__sun {
    position: absolute;
    top: 3%;
    right: 3%;
    width: 30%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--sun);
}
/* Содержимое поверх декораций.
   Перечислено поимённо намеренно: правило вида «.stage > *» имеет ту же
   специфичность, что и .stage__blob, идёт ниже по файлу и сбрасывало бы
   декорациям position: absolute — пятно и круг просто не появлялись. */
.stage__label,
.stage__card,
.stage__pill { position: relative; }

.stage__label {
    margin: 0 0 var(--space-6);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: var(--leading-snug);
    letter-spacing: -0.02em;
}
.stage__label .accent { display: block; font-weight: 400; }

/* Лист расписания */
.stage__card {
    margin: 0;
    padding: var(--space-5);
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
@media (min-width: 48rem) {
    .stage__card { transform: rotate(-2deg); }
}
.stage__rows { margin: 0; padding: 0; list-style: none; }
.stage__row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-3);
}
.stage__row + .stage__row { border-top: 1px dashed var(--line-strong); }
.stage__num {
    font-size: var(--text-sm);
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}
.stage__icon {
    width: 2.75rem;
    height: 2.75rem;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--surface-warm);
    object-fit: contain;
}
.stage__text { font-weight: 600; }

/* Подпись-плашка под листом */
.stage__pill {
    display: inline-block;
    max-width: 100%;
    margin: var(--space-6) 0 0;
    padding: var(--space-3) var(--space-5);
    background: var(--surface);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow);
    font-size: var(--text-sm);
    font-weight: 600;
}
@media (min-width: 48rem) {
    .stage__pill { transform: rotate(-3.5deg); margin-left: var(--space-5); }
}

/* ═══════════════════════════════════════════════════════════════════
   Входы: родителям, специалистам, в историю проекта.
   Три разных блока, а не один блок трижды: отличаются шириной,
   цветом, высотой и внутренним строем.
   ═══════════════════════════════════════════════════════════════════ */
.entries {
    display: grid;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 56rem) {
    .entries {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        gap: var(--space-6);
    }
    /* Вторая карточка опущена: ряд перестаёт читаться как таблица */
    .entry--pros { margin-top: var(--space-12); }
}

.entry {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
}
.entry__title { font-size: var(--text-2xl); letter-spacing: -0.02em; }
.entry__text { color: var(--ink-2); }
.entry__action { margin-top: auto; padding-top: var(--space-2); }

.entry--parents { background: var(--tint-peach); }
.entry--pros    { background: var(--tint-sage); }


/* ─────────────── Список правил ─────────────── */
.rules {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: var(--measure);
}
.rules__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: baseline;
}
.rules__item::before {
    content: "";
    width: .5rem;
    height: .5rem;
    margin-top: .5rem;
    border-radius: 50%;
    background: var(--accent);
}

/* ─────────────── Отметка прототипа ───────────────
   Осталась одна, в подвале: заметная, но ненавязчивая. Пометки
   внутри содержания убраны вместе с незаконченными блоками. */
.proto-only {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-pill);
    color: var(--ink-2);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* ─────────────── Подвал ─────────────── */
.footer {
    padding-block: var(--space-10);
    border-top: 1px solid var(--line);
    background: var(--surface-warm);
}
.footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-8);
}
.footer__brand { font-size: var(--text-lg); font-weight: 700; }
.footer__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin-right: auto;
}
.footer__note {
    flex-basis: 100%;
    font-size: var(--text-sm);
    color: var(--ink-2);
}

/* ─────────────── Переход по ссылкам внутри страницы ─────────────── */
/* Шапка прилипшая, поэтому у цели перехода оставляем над ней запас:
   иначе заголовок блока уезжает под шапку и выглядит пропущенным. */
[id] { scroll-margin-top: calc(var(--space-16) + var(--space-4)); }

/* Цель перехода получает фокус (tabindex="-1" в разметке), но обводка
   вокруг целого раздела только мешает — читающие программы объявят
   заголовок и без неё. */
main:focus, section:focus, .card:focus { outline: none; }

/* Низкое окно — например, при увеличении текста до 200 % на ноутбуке.
   Прилипшая шапка съела бы слишком много высоты, поэтому отпускаем её. */
@media (max-height: 30rem) {
    .header { position: static; }
}

/* ─────────────── Крупный текст на узком экране ─────────────── */
/* При увеличении текста до 200 % одно длинное русское слово становится
   шире экрана: «последовательность» — 352 px, «повседневных» в заголовке
   первого экрана — 550 px, а внутри .container на 360 px доступно 296 px.
   По умолчанию браузер не даёт ячейке сетки сжаться ниже самого длинного
   слова, и страница уезжает в горизонтальную прокрутку.

   Лечится в два приёма, и нужны оба:
     * ячейкам сеток и кнопкам разрешаем сжиматься — min-width: 0
       (без этого ячейка упирается в длинное слово и держит ширину);
     * длинному слову разрешаем перенос внутри слова — break-word
       (свойство наследуемое, поэтому достаточно одного правила на body).

   Именно break-word, а не anywhere: перенос срабатывает только когда
   слово иначе не влезает, и обычный текст переносится как всегда. */
body { overflow-wrap: break-word; }

.hero__grid > *,
.entries > *,
.entry > *,
.stage__row > *,
.howto > *,
.howto__item > *,
.howto__list > *,
.sample__card,
.actions > * { min-width: 0; }

/* Переносы по слогам — только на узком экране. Там без них длинное
   слово в крупном заголовке рвётся посередине без знака переноса.
   На широком экране заголовок помещается целиком, и перенос в нём
   выглядел бы неряшливо, поэтому правило намеренно ограничено.
   В медиавыражении rem считается от исходных 16 px и не зависит
   от выбранного посетителем размера текста — порог остаётся 480 px. */
/* Переносов по слогам в заголовках намеренно нет.
   При обычном размере текста слова помещаются целиком даже на 360 px,
   а браузер всё равно переносил бы их ради плотности строки —
   «Простые инстру-менты» в крупном заголовке выглядит неряшливо.
   Страховка на крайний случай (текст 200 %) — overflow-wrap: break-word
   на body: он срабатывает, только когда слово иначе не влезает. */

/* Кнопка — inline-flex, а такой элемент не становится уже своего
   min-content. При тексте 200 % слово «расписание» с отступами даёт
   297 px, тогда как внутри карточки остаётся 200 px, и кнопка
   выходит за край экрана. min-width: 0 здесь не поможет: кнопка
   не ячейка сетки. Поэтому разрешаем переносить слово в любом месте —
   это снижает сам min-content, и кнопка сжимается до карточки.
   На широком экране ничего не меняется: места хватает, перенос
   не срабатывает. */
.btn { overflow-wrap: anywhere; hyphens: auto; }

/* ═══════════════════════════════════════════════════════════════════
   Компоненты страницы-инструкции.
   Рассчитаны на повторное использование: любой будущий материал
   портала собирается из них же.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────────── Путь к странице ─────────────── */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    font-size: var(--text-sm);
    color: var(--ink-2);
}
.breadcrumb__sep { color: var(--line-strong); }

/* ─────────────── Порядок действий ───────────────
   Вертикальный список с подробным описанием каждого шага.
   Короткий путь из трёх слов на главной — это .path, другой компонент. */
.howto {
    display: grid;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: howto;
}
.howto__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
    counter-increment: howto;
}
.howto__item::before {
    content: counter(howto);
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: var(--text-base);
    font-weight: 700;
}
.howto__title { font-size: var(--text-xl); }
.howto__body { max-width: var(--measure); }
.howto__body > * + * { margin-top: var(--space-3); }

/* Уточнения внутри шага: подпункты без собственной нумерации */
.howto__list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Маркер выносится абсолютно, а пункт остаётся обычным блоком.
   Сеткой его делать нельзя: в сетке каждый <span> внутри строки
   становится отдельной ячейкой и встаёт на свою строку — названия
   кнопок в тексте разорвали бы абзац. */
.howto__list > li {
    position: relative;
    padding-left: var(--space-5);
}
.howto__list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .6em;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: var(--line-strong);
}

/* ─────────────── Название кнопки в тексте ───────────────
   Чтобы в сплошном тексте было видно, на что именно нажимать. */
.ui {
    display: inline-block;
    max-width: 100%;          /* не вытаскивает строку за край экрана */
    padding: 0 var(--space-2);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: .95em;
    font-weight: 600;
}
/* Переноса внутри названия намеренно нет в обычных условиях: inline-block
   держит его одним блоком. Когда места не хватает — например, при тексте
   200 % на узком экране, — название переносится внутри своей рамки,
   а не выталкивает строку за край. */
.section--warm .ui { background: var(--surface); }

/* ─────────────── Важное замечание ───────────────
   Не предупреждение об ошибке, а то, что человеку нужно знать
   заранее. Акцент слева, спокойный фон. */
.callout {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface);
    max-width: var(--measure);
}
.callout__title { font-size: var(--text-base); font-weight: 700; }
.callout__text { color: var(--ink-2); }
.callout + .callout { margin-top: var(--space-4); }

/* На узком экране сцене тесно: номер, значок и подпись не помещаются
   в строку, и подпись рвётся посередине слова («Позавт ракать»).
   Сокращаем поля и значок — подписи снова встают в одну строку. */
@media (max-width: 30rem) {
    .stage { padding: var(--space-6) var(--space-3) var(--space-8); }
    .stage__card { padding: var(--space-4); }
    .stage__row { gap: var(--space-2); }
    .stage__icon { width: 2rem; height: 2rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   Блок инструмента: слева объяснение, справа — что получается.
   ═══════════════════════════════════════════════════════════════════ */
.tool__grid {
    display: grid;
    gap: var(--space-10);
    align-items: start;
}
@media (min-width: 56rem) {
    .tool__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
        gap: var(--space-16);
    }
}
.tool__grid > * { min-width: 0; }

/* ─────────────── Короткий путь из трёх слов ───────────────
   Заменяет прежние три колонки с описаниями: на главной довольно
   назвать порядок, подробности живут в инструкции. */
.path {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: var(--space-8) 0 0;
}
.path__step {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    font-size: var(--text-sm);
    font-weight: 600;
}
.path__arrow { color: var(--accent); font-weight: 600; }

/* ─────────────── Что получается на выходе ───────────────
   Намеренно не похоже на карточку первого экрана: там список шагов
   в работе, здесь — готовый лист, каким он выйдет из принтера. */
.result {
    margin: 0;
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.result__sheet {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}
.result__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
}
.result__num {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-dk);
    font-size: var(--text-xs);
    font-weight: 700;
}
.result__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--bg);
    border-radius: 6px;
}
.result__cap {
    font-size: var(--text-sm);
    font-weight: 600;
    text-align: center;
}
.result__legend {
    margin-top: var(--space-4);
    font-size: var(--text-xs);
    color: var(--ink-2);
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════
   О проекте: только текст. Пустой рамки под будущую фотографию нет —
   она читалась как незаконченная работа.
   ═══════════════════════════════════════════════════════════════════ */
.about { max-width: var(--measure); margin-top: var(--space-8); }
.about__lead {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    color: var(--ink);
}
.about__text { margin-top: var(--space-6); font-size: var(--text-lg); }
/* Анонс будущего — одной строкой и без ссылок: страниц ещё нет. */
.about__next {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
    color: var(--ink-2);
}

/* ─────────────── Редакционные правила, компактно ─────────────── */
.rules__title { margin-bottom: var(--space-6); }
@media (min-width: 56rem) {
    .rules--inline {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-6);
        max-width: none;
    }
}
.rules--inline > * { min-width: 0; }