/* 22arcana.com — оформление сайта.
   Один файл на весь сайт. Правится здесь, нигде больше.

   ШРИФТЫ задаются двумя переменными ниже. Чтобы примерить другой шрифт,
   меняются только они — вёрстку трогать не нужно. Сейчас стоят системные:
   задача первого захода — проверить вёрстку, а не облик. */

/* Oswald — тот самый шрифт заголовков живого сайта: в его разметке стоит
   font-family: oswald-medium, oswald. Свободный, с кириллицей, лежит у нас
   в assets\fonts. Из выгрузки Wix кириллица приехала только у одного
   начертания — шрифты там отдавались кусками, поэтому взят полный набор. */
@font-face {
    font-family: Oswald;
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/oswald-500-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: Oswald;
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/oswald-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+2000-206F, U+2212, U+2215;
}

@font-face {
    font-family: "Oswald Bold";
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url("fonts/oswald-700-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Oswald Bold";
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url("fonts/oswald-700-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+2000-206F, U+2212, U+2215;
}

:root {
    --font-headline: Oswald, "Segoe UI", sans-serif;
    --font-body: "Segoe UI", system-ui, sans-serif;

    /* палитра снята с разметки живого сайта */
    --accent: #cea8ff;          /* сиреневый: кнопки, заголовки, плашки */
    --accent-soft: #e3b2f9;
    --accent-deep: #675480;
    --yellow: #fcf7be;          /* акцентный текст в первом экране */
    --ink-on-accent: #313131;   /* тёмный текст на сиреневой заливке */
    --text: #ffffff;
    --text-dim: #d9d2e6;
    /* Подложка карточек полупрозрачная — звёздный фон просвечивает насквозь.
       🗣 Е.Г. 2026-08-06: «подложки полупрозрачные у карточек сделай».
       Число не на глаз: на живом сайте у карточки консультаций стоит
       `--bg-overlay-color: rgba(0, 0, 0, 0.85)` (`_live\pages\index.html`,
       правило `comp-mirxlmtf1__`) — чёрный при непрозрачности 0,85. */
    --card: rgba(0, 0, 0, .85);
    --card-edge: rgba(206, 168, 255, .18);
    --page: #05040c;

    /* СКРУГЛЕНИЕ УГЛОВ — крутится отсюда, по всему сайту сразу.
       Ставим одно из готовых сочетаний ниже или свои числа.
         строгое  : 4 / 6 / 8 / 8
         текущее  : 6 / 10 / 12 / 14      ← умеренное, углы читаются
         мягкое   : 10 / 16 / 20 / 999    ← как было, кнопки-пилюли */
    --round-s: 6px;     /* мелочь: плашки, подсказки */
    --round-m: 10px;    /* кнопки */
    --round-l: 12px;    /* карточки, широкие блоки */
    --round-pill: 14px; /* пункты меню */

    /* БАЗОВАЯ ШИРИНА — одна на весь сайт. По ней выровнено всё: шапка,
       первый экран, секции, карточки, подвал. Меняется здесь, следом едет
       весь сайт. --pad — поля от края экрана, они же не дают контенту
       упереться в край на телефоне. */
    --shell: 1000px;   /* оригинал на Wix свёрстан под 980 — держимся рядом */
    --pad: clamp(16px, 4vw, 40px);

    /* ТОН ФОНА — одно место на весь сайт. Крутится здесь, следом едут оба
       слоя неба: общий фон страницы и собственная подложка первого экрана.
       Держать их порознь нельзя — разъедутся, и вверху страницы появится
       светлая полоса (так и было, замерено: 18,5 против 5,2).
         saturate    — цветность
         hue-rotate  — холод, в минус синее
         contrast    — выше 1 глубже, ниже 1 мягче

       Выставлено 2026-08-06 подбором вместе с владельцем, 🗣 Е.Г.: «почти
       1 в 1 — оставляем». Шли сверху вниз: 1,15 → 1,08. Выше 1,15 небо
       начинает пустеть — контраст гасит звёзды первыми. */
    --sky-tone: saturate(1.35) hue-rotate(-8deg) contrast(1.08);

    --gap: clamp(16px, 3vw, 32px);
    /* Отступ секции — расстояние от предыдущего раздела до заголовка следующего.
       🗣 Е.Г. 2026-08-06: «сделай все отступы у названий одинаковые… надо чтобы
       было везде как между „ВЫБЕРИТЕ ВАШ ПУТЬ“ и первой верхней плашкой».
       Замерено: у образца было 40 px, у остальных разделов 56–57 — разнобой
       оттого, что у первой секции работал `section--tight`, а у прочих зазор
       держал нижний отступ соседа. Сведено к 40 px одним числом.
       Складываться отступы не могут: у соседних секций верхний снят
       правилом `.section + .section` ниже. */
    --section-gap: clamp(34px, 4.6vw, 65px);
}

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

/* Запас сверху при переходе по ссылке-якорю. 🗣 Е.Г. 06.08: «добавь чуть ниже
   проезд, а то верхняя главная плашка остаётся в поле при проезде», затем
   «надо чтобы улетало вверх сильнее». Смысл: доехать так, чтобы первый экран
   ушёл из кадра целиком, а раздел встал прямо под шапку. Прилипшая шапка
   занимает 85 px — это и есть весь нужный запас, лишний воздух оставлял
   в кадре полоску предыдущего блока. */
html { scroll-behavior: smooth; scroll-padding-top: 86px; }

/* На узком экране шапка ниже (65 px против 85), и общий запас оставлял
   в кадре полоску предыдущего блока — замерено 19–20 px. Запас уменьшен
   по месту, под фактическую высоту шапки. */
@media (max-width: 900px) {
    html { scroll-padding-top: 66px; }
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.65;
    color: var(--text);
    background: var(--page);
    overflow-x: hidden;
}

/* Звёздный фон. На живом сайте он закреплён и не едет при прокрутке.
   На телефонах закрепление отключаем: там оно даёт рывки и лишний расход. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--page) url("img/background.webp?v=ca71631a") center / cover no-repeat;
    /* ТОН ФОНА — крутится этой одной строкой.
       🗣 Е.Г. 2026-08-06: холоднее, темнее, «добавь контраста и цветности».

       Почему именно так, а не слоями поверх (проверено замером, двумя
       неудачными заходами подряд):
       • затемняющая пелена делает фон не холоднее, а ровно наоборот —
         гасит синее наравне с красным, разница B−R падает;
       • синее пятно в режиме умножения валит яркость вдвое (29,9 → 15,0)
         и тоже уводит в тепло;
       • `contrast()` на почти чёрной картинке давит её к нулю: замерено,
         при 1,3 яркость падает до 4,6 — фон превращается в чёрное поле.

       Работает другое: цветность поднимаем `saturate`, холод даёт поворот
       оттенка в синюю сторону, а темнее делаем чуть-чуть — картинка и так
       тёмная, запаса тут мало. */
    filter: var(--sky-tone);
}

/* 🔴 Проверено замером, прежде чем править тон: наш файл фона и исходник Wix
   совпадают почти точно — яркость 29,8 у обоих, холодность (B−R) +26,9
   против +27,3. Значит при ужатии картинки цвет не пострадал, и разница
   не в файле. У Wix под фоном лежит сплошной чёрный слой при полной
   непрозрачности — он ничего не подкрашивает. То есть тон фона — **решение
   владельца по виду, а не восстановление оригинала** (рамка «улучшаем»). */

/* 🔴 СВЕТЛОЕ ПЯТНО ВВЕРХУ — разобрано замером, причина не в фильтре.
   🗣 Е.Г. 2026-08-06: «где-то стоит у нас светлее — надо темнее».

   В самой картинке фона на 35 % её высоты нарисована светлая туманность:
   яркость 42,8 против 20–29 по краям, то есть вдвое. Фон закреплён
   (`fixed`) и кадрируется по `cover`, поэтому в окне всегда видна именно
   эта светлая середина — она и стоит в верхней части экрана. Проверено
   и отвергнуто: файл `hero-sky.webp` тут ни при чём, он ДАРКЕ общего
   фона (9,4 против 29,9), и фильтр до обоих слоёв доходит исправно.

   🔴 Итог по этому пятну: вёрсткой оно НЕ убирается, проверено замером
   в обе стороны. Контраст ниже единицы тянет тёмную картинку вверх, к серому
   (при 0,55 верх уходил с 14 до 66 — фон бледнел весь целиком); контраст
   выше единицы давит низ в чистый чёрный и первым гасит звёзды — они самые
   светлые точки кадра (при 1,25 живость неба падала с 6,5 до 1,6, при 2,2
   до нуля). Пелена, гасящая яркостью, пятно убирала (13,3 → 6,7), но она
   валит и звёзды заодно — владелец её забраковал.

   Осталось на будущее, если пятно ещё помешает: сдвинуть точку кадрирования
   фона вниз (туманность лежит на 35 % высоты картинки и попадает в кадр
   потому, что фон кадрируется по центру) либо затемнить её в самом файле.
   Оба пути пятно убирают, звёзд не трогая. Долг № 22.

   Значение тона — в переменной `--sky-tone` в начале файла. */

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); }

/* ВЫКЛЮЧКА ПО ШИРИНЕ — как в текстовом редакторе: строка упирается в оба края.
   Обязательно вместе с переносами по слогам: без них узкая колонка идёт
   провалами в полстроки между словами. Язык объявлен в теге html, по нему
   браузер и переносит. */
p, li {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}

/* Короткие строки выключать нельзя — растянет два слова на всю ширину. */
.pill, .section__title, .card__price, .card__note, .review__meta,
.footer__row, .hero__badge, .btn, .nav__link, .marquee__track span {
    text-align: inherit;
    hyphens: manual;
}

.pill, .card__price, .card__note, .review__meta, .footer__row { text-align: center; }
.card__price, .card__note { text-align: left; }

/* ---------- каркас ---------- */

/* Единая полоса содержимого. Всё, что стоит по базовой ширине, получает
   этот класс — тогда левый и правый край совпадают у всех секций. */
.shell {
    width: min(100% - 2 * var(--pad), var(--shell));
    margin-inline: auto;
}

.section { padding-block: var(--section-gap); }

/* 🔴 Отступы соседних секций СКЛАДЫВАЮТСЯ: 56 px снизу у одной плюс 56 px
   сверху у другой давали 112 px, вдвое больше, чем над первой секцией
   страницы (🗣 Е.Г. 06.08: «расстояние ОПЫТ РАБОТЫ от верхней плашки больше
   чем от ОБО МНЕ до верхней — надо везде как у ОБО МНЕ»).
   Верхний отступ снимается у каждой секции, кроме первой: расстояние между
   разделами держит нижний отступ предыдущей, одним числом. */
.section + .section { padding-top: 0; }

/* 🔴 Исключение: у первого экрана «Обо мне» нижнего отступа нет вовсе —
   плашка с фотографией кончается ровно по своему краю. Поэтому следующей
   секции верхний отступ нужен, иначе заголовок прилипает к плашке
   (🗣 Е.Г. 06.08: «Обо мне — прилипло теперь»). */
.about-hero + .section,
.kons-hero + .section,
.obuch-hero + .section,
.igry-hero + .section { padding-top: var(--section-gap); }

/* 🔴 Второе исключение: секция-плашка со своим фоном и рамкой. У обычной секции
   верхний отступ снимать можно — расстояние держит сосед сверху. А у плашки он
   ВНУТРЕННИЙ: без него заголовок прилипает к её краю (замерено: 1 px сверху
   против 41 снизу). 🗣 Е.Г. 06.08: «внутри карточки „6 причин“ сделай отступ».
   Соседу сверху при этом нижний отступ снимаем: иначе он складывается
   с внутренним и зазор над плашкой удваивается (замерено: 111 px против 55). */
.section + .section--plate,
.section--plate { padding-top: var(--section-gap); }

/* 🗣 Е.Г. 06.08: «МЕЖДУ плашками расстояние 55 — МЕЖДУ ЗОНАМИ ПЛАШЕК».
   Плашка — самостоятельная зона со своим фоном, поэтому между её краем
   и краем соседней зоны нужен воздух, а не стык вплотную. Отступ задан
   внешним полем: внутренний (`padding`) держит заголовок от края плашки,
   внешний (`margin`) — саму плашку от соседей. Два разных расстояния,
   и путать их нельзя. */
.section--plate { margin-block: var(--section-gap); }

/* Сосед сверху свой нижний отступ отдаёт: расстояние до плашки держит
   её собственное внешнее поле, иначе они складываются (замерено: 110 px). */
.section:has(+ .section--plate) { padding-bottom: 0; }

/* Раздел сразу под первым экраном. Отступ тот же, что у всех прочих
   разделов — иначе первый заголовок стоял бы иначе остальных
   (🗣 Е.Г. 06.08: «сделай все отступы у названий одинаковые»). */
.section--tight { padding-top: var(--section-gap); }

/* Как в оригинале: Oswald средней насыщенности, без разрядки. Самый жирный
   вес расплывался вширь и терял вертикальную вытянутость шрифта, а разрядка
   между буквами добавляла ширины ещё. Размер — по оригиналу, 60 px.
   🔴 Межстрочный интервал по оригиналу (1.02, «строки почти вплотную») —
   буквы с надстрочными знаками (Й) наезжали на строку выше на заголовках
   в две строки, поймано 13.08 на «Оффлайн игре». Увеличен до 1.15. */
.section__title {
    font-family: var(--font-headline);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: clamp(24px, 4vw, 48px);  /* было 28-60, сжато 13.08 */
    line-height: 1.15;
    text-align: center;
    color: var(--accent);
    /* Отступ под заголовком — вдвое меньше, чем над ним (🗣 Е.Г. 06.08:
       «НАД авторскими 55, под — в 2 раза меньше чем есть сейчас»).
       Заголовок так ближе к своему содержимому, чем к предыдущему разделу:
       видно, к чему он относится. */
    margin: 0 0 calc(var(--section-gap) / 2);
    text-wrap: balance;
}

.section__lead {
    max-width: 62ch;
    margin: 0 auto 2.2em;
    text-align: center;
    color: var(--text-dim);
}

/* ---------- шапка ---------- */

.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(5, 4, 12, .82);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--card-edge);
}

.header__inner {
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding-block: 10px;
}

.header__logo img { width: clamp(44px, 5vw, 64px); }

/* 🗣 Е.Г. 06.08: «может по центру кнопки поставим?» — после того как из меню
   убрали «Наставничество» и «Чистки», оно стало короче и перекос полез в глаза:
   справа 0 px, слева пустовало 435 px (замерено). Раньше, с восемью пунктами,
   меню занимало почти всю строку.
   Следом: 🗣 «и логотип вверху не надо к кнопкам придвинуть?» — знак висел
   у самого края (0 px), до меню от него было 202 px. Теперь знак и меню идут
   общей группой по центру шапки, разделённые обычным промежутком. */
.header__inner { justify-content: center; }

.nav { margin-inline: 0; }

.nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__link {
    display: block;
    padding: 7px 15px;
    border-radius: var(--round-pill);
    font-size: .93em;
    color: var(--text);
    text-decoration: none;
    background: rgba(255, 255, 255, .05);
    transition: background .18s, color .18s;
}

/* «Игры» — кнопка, не ссылка (раскрывает только подменю). Сброс вида
   браузерной кнопки под общий `.nav__link`. 🔴 `line-height` у кнопки свой
   от браузера, у ссылки наследуется от страницы (1.65) — без явного
   наследования кнопка выходила ниже и казалась мельче соседних пунктов
   (🗣 Е.Г. 13.08: «кнопка Игры стала меньше»). */
button.nav__link {
    border: 0;
    margin: 0;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}

.nav__link:hover { background: rgba(206, 168, 255, .22); }

.nav__link[aria-current="page"] {
    background: var(--accent);
    color: var(--ink-on-accent);
    font-weight: 600;
}

/* вложенный список: «Игры» раскрывает «Играть» и «Купить игру» */
.nav__item--has-sub { position: relative; }

/* Невидимый мост через зазор между кнопкой и списком. Без него мышь по дороге
   вниз попадает в пустоту, наведение теряется и список захлопывается. */
.nav__item--has-sub::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
}

.nav__sub {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    /* Ширина — по самой длинной надписи, в одну строку. Было `min-width:190px`
       при коротких «Играть» и «Купить игру»; с четырьмя пунктами
       (🗣 Е.Г. 10.08) «Купить настольную игру» рвалась пополам — поймано
       замером. `max-content` берёт ширину без переносов, потолок держит
       подменю в пределах экрана на узком окне. */
    width: max-content;
    max-width: min(320px, calc(100vw - 2 * var(--pad)));
    padding: 6px;
    margin: 0;
    list-style: none;
    background: #0d0b18;
    border: 1px solid var(--card-edge);
    border-radius: var(--round-l);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
    display: none;
}

.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub:focus-within .nav__sub,
.nav__sub[data-open="true"] { display: block; }

.nav__toggle {
    display: none;
    margin-left: auto;
    padding: 8px 14px;
    border: 1px solid var(--card-edge);
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

/* ---------- бегущая строка ---------- */

.marquee {
    overflow: hidden;
    padding-block: 10px;
    border-bottom: 1px solid var(--card-edge);
    background: rgba(11, 11, 18, .55);
}

/* 🗣 Е.Г. 06.08: «В бегушке дырка какая то». Промежуток `gap` стоял МЕЖДУ
   двумя копиями строки, а сдвиг идёт ровно на -50 % — на шве копий
   появлялся разрыв. Промежуток убран, отступ теперь внутри самого текста
   (у `span`), поэтому шов не виден. */
.marquee__track {
    display: flex;
    width: max-content;
    animation: marquee-run 46s linear infinite;
    font-family: var(--font-headline);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--accent-soft);
    font-size: clamp(13px, 1.5vw, 20px);
}

/* 🗣 Е.Г. 06.08, второй раз: «в бегушке перед НАСТАВНИЧЕСТВО дырка».
   🔴 В первый раз я убрал `gap` между копиями и перенёс отступ внутрь копии —
   шов сошёлся, но дырка осталась, просто переехала. Причина была в самом
   отступе: текст уже оканчивается разделителем «·», и `padding-right: 40px`
   добавлял к нему пустоту перед началом следующей копии, то есть перед словом
   «Наставничество». Отступ убран совсем: промежутки задаёт сам текст. */

@keyframes marquee-run {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---------- первый экран ---------- */

/* Бегущая строка лежит ПОД первым экраном: голова Натальи должна её
   перекрывать. Снимок прозрачный, поэтому строка видна вокруг силуэта. */
.marquee { position: relative; z-index: 1; }

/* Первый экран — полоса во всю ширину со своей подложкой: чистое звёздное
   небо. Он поднят на высоту бегущей строки, но его ФОН начинается ровно там,
   где строка кончается: закрывать её нельзя, перекрывать должна только фигура. */
.hero {
    --hero-lift: clamp(44px, 4.4vw, 62px);   /* высота бегущей строки */
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--hero-lift));
    padding-top: calc(var(--hero-lift) + clamp(8px, 1.2vw, 18px));
    padding-bottom: 0;                        /* фон кончается по низу фигуры */
    background: transparent;
}

/* Подложка растянута по секции, а не по окну: единица «ширина окна» включает
   полосу прокрутки, страница становится шире экрана и всё съезжает влево.
   Низ секции задаёт фигура — она выше текстовой колонки. */
.hero::before {
    content: "";
    position: absolute;
    inset: var(--hero-lift) 0 0;
    background: #05060e url("img/hero-sky.webp?v=725b9cc1") center / cover no-repeat;
    z-index: -1;
    /* 🔴 РАЗБОР 06.08, второй заход. Тон общего фона сюда наводился, чтобы
       убрать светлую полосу вверху страницы (см. запись ниже) — но у этой
       подложки поверх лежит фигура Натальи, и тон, применённый к подложке,
       на границе фигуры (волосы, плащ — полупрозрачные края PNG) выглядит
       как излом контраста между тем, что просвечивает, и самой фигурой.
       🗣 Е.Г.: «Плашка звёздного неба на которой фото Натальи КОНТРАСТНАЯ —
       с неё отдельно надо убрать контраст!» Фильтр с этой подложки снят
       целиком, естественный вид файла. Общий фон страницы (`body::before`)
       тон сохраняет — трогает только звёзды за пределами первого экрана. */
}

.hero__inner {
    position: relative;
    width: min(100% - 2 * var(--pad), var(--shell));
    margin-inline: auto;
}

/* Колонки сведены к центру и прижаты друг к другу: врозь по краям экрана
   первый экран разваливался на две отдельные половины. */
.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
}

.hero__text { max-width: 480px; }

.hero__figure { position: relative; }

/* Снимок прозрачный, обрезать его маской не нужно — он и так садится на небо
   без шва. Поднимаем над бегущей строкой, чтобы голова её перекрывала. */
/* Фигура выходит выше фона больше, чем на высоту строки, — голова уверенно
   перекрывает бегущую строку.
   Отрицательного отступа снизу здесь быть не должно: он поднимал низ секции
   выше низа фигуры, и она торчала за фон. Без него низ секции задаётся самой
   фигурой, и край фона совпадает с ней точно. */
/* Макушка приходится на верхнюю треть бегущей строки: голова заходит на неё
   заметно, но под шапку не уходит и не срезается. Прозрачного поля над
   макушкой в снимке всего 1 % высоты, поэтому верх картинки — это и есть
   макушка; величина подбиралась измерителем `tools\check_hero.py`. */
.hero__figure {
    position: relative;
    z-index: 3;
    margin-top: calc(-1 * var(--hero-lift) / 2 - 26px);
}

/* 🔴 РАЗБОР 06.08: первая попытка — наложить `--sky-tone` и на фото Натальи —
   была неверной. 🗣 Е.Г.: «Наталья сильно контрастная... надо плашку —
   полоску вместе с ней отделить от фона и у обоих убрать контраст чтобы
   контраст был только на фоне — звёзд, а на плашке с Натальей всё было
   как по умолчанию». Тон фона (contrast/saturate/hue) — решение только
   про звёздное небо. Фигура и подпись остаются без фильтра, естественного
   вида: filter на .hero__figure img и .hero__badge не задаётся вовсе. */

/* Значок опыта не должен наезжать на фигуру — держим его мельче и левее. */
.hero__badge {
    position: absolute;
    left: 1%;
    top: 8%;
    width: clamp(74px, 8vw, 104px);
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    text-align: center;
    border: 1px solid var(--accent);
    border-radius: 50%;
    background: rgba(5, 4, 12, .6);
    line-height: 1.15;
}

.hero__badge b {
    display: block;
    font-family: var(--font-headline);
    font-size: clamp(14px, 1.5vw, 20px);
    color: var(--accent);
}

.hero__badge span { font-size: .72em; color: var(--text-dim); }

.hero__claim {
    font-family: var(--font-headline);
    font-size: clamp(17px, 1.9vw, 26px);
    line-height: 1.4;
    color: var(--yellow);
    margin: 0 0 1.1em;
    text-align: justify;
    text-wrap: pretty;
}

/* Кнопка под текстом — во всю его ширину, чтобы низ блока был ровным. */
/* 🗣 Е.Г. 06.08: «внутри кнопки НЕ ЗНАЕТЕ С ЧЕГО НАЧАТЬ — оба текста больше,
   плохо читается». Кегль кнопки не задавался вовсе, наследовался от страницы,
   а подпись под ним шла ещё на четверть мельче. Обе строки укрупнены. */
.hero__text .btn {
    width: 100%;
    font-size: clamp(15px, 1.35vw, 20px);
}

.hero__text .btn .btn__hint {
    font-size: .82em;
    opacity: 1;
}

/* ---------- кнопки ---------- */

.btn {
    display: inline-block;
    padding: 13px 30px;
    border-radius: var(--round-m);
    font-family: var(--font-headline);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: transform .16s, box-shadow .16s, background .16s;
}

.btn--solid {
    background: var(--accent);
    color: var(--ink-on-accent);
    border: 1px solid var(--accent);
}

.btn--solid:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(206, 168, 255, .32);
}

.btn--ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid rgba(255, 255, 255, .45);
}

.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Кнопка страницы, которой ещё нет (🗣 Е.Г. 06.08: «эти две кнопки на карточках
   пока не ведут никуда — не кликабельными их делай»). Это не ссылка, а `span`:
   нажать нельзя ни мышью, ни с клавиатуры, и экранный диктор её не предложит.
   Вид приглушён, чтобы читалось как «пока недоступно», а не как поломка. */
.btn--soon {
    background: transparent;
    color: var(--text-dim);
    border: 1px dashed rgba(255, 255, 255, .28);
    cursor: default;
}

.btn--wide { width: 100%; }

.btn__hint {
    display: block;
    font-size: .78em;
    font-weight: 400;
    letter-spacing: .02em;
    opacity: .85;
}

/* стрелка-указатель под кнопкой первого экрана */
.chevron {
    display: block;
    width: 34px;
    height: 34px;
    margin: 18px auto 0;
    border-right: 3px solid var(--accent);
    border-bottom: 3px solid var(--accent);
    transform: rotate(45deg);
    opacity: .8;
}

/* ---------- плашки-подписи ---------- */

/* Плашки в ряду выровнены по высоте, поэтому короткий вопрос в одну строку
   надо центрировать по вертикали — иначе он висит у верхнего края.

   🔴 ВСЕ ПЛАШКИ САЙТА — ОДНОЙ ВЫСОТЫ, ПОД ДВЕ СТРОКИ (🗣 Е.Г. 2026-08-06:
   «все плашки заголовков надо сразу все сделать одной высоты под две строки,
   с выравниванием по вертикали»). Было четыре разные высоты — 50, 54, 73
   и 81 px, ряды выглядели рвано.

   Высота НЕ задана числом: она считается из кегля и межстрочного, поэтому
   при смене шрифта поедет сама и останется ровно двухстрочной.
   `2lh` — высота двух строк текущего набора. */
.pill {
    display: grid;
    place-content: center;
    /* Кегль задан ПЛАШКЕ, а не унаследован: у блоков-родителей он разный
       (14,25 px в путях против 16,8 в причинах), и высота плашек расходилась
       даже при одинаковой формуле — замерено 71/73/79/81. */
    font-size: 15px;
    /* Межстрочное в целых пикселях: при дробном (1.3 × 15 = 19,5) две строки
       дают 39,0, а браузер округляет каждую строку по-своему — высота плашек
       расходилась на 2 px. С целым числом расчёт сходится точно. */
    line-height: 20px;
    /* 2 строки по 20 + поля 12 сверху и снизу + рамка 1+1.
       Рамку надо считать: `box-sizing: border-box` включает её в высоту,
       и без неё двухстрочные плашки выходили на 2 px выше (66 против 64). */
    min-height: 66px;
    margin: 0;                    /* абзац приносит свои поля — снимаем */
    padding: 12px 20px;
    border-radius: var(--round-s);
    background: rgba(206, 168, 255, .16);
    border: 1px solid var(--card-edge);
    color: var(--text);
    text-align: center;
}

/* Блок пути: плашка-вопрос, стрелка-указатель и под ними карточка —
   как на оригинале. Плашка стоит отдельно, а не шапкой карточки.

   Три его строки подчинены общей сетке раздела: иначе вопрос в две строки
   опускает свою карточку ниже соседней, и ряд разъезжается по высоте. */
.path {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: 10px;
}

.grid--paths { grid-auto-rows: auto; align-items: stretch; }

.path .card { height: 100%; }

/* Сиреневая стрелка вниз: ведёт взгляд от вопроса к карточке. */
.path__arrow {
    justify-self: center;
    width: 26px;
    height: 26px;
    border-right: 4px solid var(--accent);
    border-bottom: 4px solid var(--accent);
    border-radius: 3px;
    transform: rotate(45deg);
    margin-block: -2px 6px;
}

/* Плашка-заголовок повода: рамка со свечением, не сплошная заливка
   (🗣 Е.Г. 13.08: «плашки как рамки с подсветкой», кнопку «Виды
   консультаций» ниже не трогать — она осталась `.btn--solid`). */
.pill--accent {
    width: 100%;
    background: rgba(206, 168, 255, .1);
    border: 2px solid var(--accent);
    box-shadow: 0 0 18px rgba(206, 168, 255, .45);
    color: var(--accent);
    font-family: var(--font-headline);
    font-weight: 600;
    /* Кегль НЕ переопределяем: он задан в `.pill` и общий для всех плашек —
       иначе высота расходится, хотя формула у всех одна (замерено: 63/65/68/70
       вместо одной высоты). */
    text-transform: uppercase;
    letter-spacing: .01em;
    align-self: start;
}

/* ---------- хелпер: свечение по контуру ---------- */

/* Переиспользуемый класс, не завязан на .card (🗣 Е.Г. 13.08: «не вокруг
   мышки, а вокруг карточек» — было пятно света за курсором, оказалось
   не то). Мягкое свечение по всему контуру при наведении, слежения
   за мышью не нужно — чистый CSS, без `site.js`. */
.glow-hover {
    /* Сиреневый акцент по умолчанию; `--glow-hover--gold` переопределяет
       переменную под золото колец «Оффлайн игры» (🗣 Е.Г. 13.08). */
    --glow-rgb: 206, 168, 255;
    transition: box-shadow .25s, border-color .25s;
}

.glow-hover:hover {
    /* 🔴 Кант — это была не тень, а сама рамка карточки: `border-color`
       перекрашивался в цвет свечения при наведении. Владелец видел его
       и после того, как я убрал слой box-shadow (🗣 Е.Г. 13.08: «кант
       остался») — снята и эта строка, рамка на наведении не меняется.
       Яркость: вдвое вверх, затем в 1.5 раза вниз (🗣 Е.Г. 13.08) —
       .18/.1 → .36/.2 → .24/.13. Радиусы прежние: пробовал уменьшить
       их, оказалось не то. */
    box-shadow:
        0 0 22px 6px rgba(var(--glow-rgb), .24),
        0 0 46px 14px rgba(var(--glow-rgb), .13);
}

/* Золото свечения смещено к оранжевому (🗣 Е.Г. 13.08): #c98a1e, HUE 38°
   против 44° у цвета колец #9c7a21 — сам узор колец не трогаем, там
   прежний тон. Только по наведению, как и лиловый вариант: постоянное
   свечение пробовали и откатили. */
.glow-hover--gold { --glow-rgb: 201, 138, 30; }

/* ---------- сетки и карточки ---------- */

.grid { display: grid; gap: var(--gap); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

.card {
    position: relative;      /* заголовок карточки позиционируется по ней */
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--card-edge);
    border-radius: var(--round-l);
    overflow: hidden;
}

/* Фотография не должна диктовать высоту карточки: на широком экране она
   вырастала до полуэкрана и топила текст под собой. Постоянная пропорция
   держит все карточки ряда одной высоты. */
/* Снимок идёт от самого верха карточки и целиком, без кадрирования:
   нарисованный внутри него заголовок обрезать нельзя. */
.card__media { position: relative; }

.card__media img { width: 100%; height: auto; display: block; }

/* Заголовок этих карточек НАРИСОВАН внутри самой фотографии, вместе с фигурой,
   которая перекрывает низ букв, — так их сделали в графическом редакторе.
   Вёрсткой это не собирается, поэтому снимок берётся целиком.
   Свой заголовок остаётся в разметке, но скрыт от глаз: его читают поисковики
   и программы чтения с экрана, человек видит нарисованный. */
.card__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.card__body { padding: var(--gap); display: flex; flex-direction: column; gap: 1em; }

/* Карточка с узором: орнамент прижат к правому краю и наполовину срезан им,
   текст обходит его слева — как на живом сайте. */
/* 🔴 `overflow: hidden` СНЯТ. 🗣 Е.Г. 2026-08-06: «у тебя подложка под кнопками
   и текстом — она и обрезает сверху и снизу! Убирай!». Догадка верная,
   подтверждена замером: обрезку давала сама карточка, у неё стояло
   `overflow: hidden`, и узор не мог выйти за её границы — ни вправо, ни вниз
   под кнопки. Отсюда и «огрызки».

   Обрезку задаёт БАЗОВОЕ правило `.card`, общее для всех карточек сайта
   (там она нужна: у карточек путей фотография прижата к краям и без обрезки
   вылезала бы за скругление). Поэтому снимаем её точечно, только здесь,
   а общее правило не трогаем.

   Скругление углов при этом сохраняется: его держит `border-radius`
   на самой карточке, а не обрезка. */
/* 🔴 ОБРЕЗКА ВОЗВРАЩЕНА — и это правильно, а не откат назад.
   Я снял её, чтобы узор мог выйти за край карточки. Пока вылет был 74 px,
   держалось; при выставленных владельцем 274 px узоры расползлись по всей
   странице поверх соседних разделов, и появилась прокрутка вбок.

   Верное устройство: край карточки и ЕСТЬ то, что режет мандалу пополам —
   ровно как на оригинале Wix. Без обрезки резать нечем, и «половина за
   карточкой» превращается в узор поверх всей страницы. */
.card--ornate { position: relative; overflow: hidden; }

/* 🔴 РАЗБОР 2026-08-06: почему узор выходил мелким. Причина — не в размерах
   и не в вытянутости карточки, а в том, ЧТО именно показывает оригинал.

   Разобрано по адресу картинки в разметке живого сайта — Wix хранит операции
   прямо в нём (`_live\pages\index.html`, `comp-mirxlmtq11__item1`):

       /v1/crop/x_2,y_39,w_710,h_1378/fill/w_183,h_355/22.png

   Читается так: сначала из файла ВЫРЕЗАЕТСЯ полоса 710 x 1378, и только она
   вписывается в окно 183 x 355 (пропорции совпадают, 0,515 — `cover` при этом
   ничего не режет). Исходник, из которого Wix резал, был 712 x 1417.

   Наш файл — 1417 x 1417, тот же рисунок целиком. Значит вырез Wix шириной
   710 — это РОВНО ЛЕВАЯ ПОЛОВИНА нашего файла: мандала симметрична, плотность
   её рисунка нарастает к центру (замерено по прозрачности: пик на x=700 из
   1417). Оригинал разрезает мандалу по middle-оси и показывает левую половину,
   а правая уходит за край карточки.

   🔴 МОЯ ОШИБКА, стоившая круга правок. Числа 183 x 355 я принял за размер
   рисунка и задал их пропорцией (`aspect-ratio: 183/355` = 0,52). Но файл
   почти квадратный (1,00), и `object-fit: contain` честно вписывал квадрат
   в рамку вдвое уже — рисунок садился до половины возможного размера. Рамка
   была широкой, а узор в ней маленьким. Это и был баг: не «карточка вытянута»,
   а вписывание квадрата в узкую рамку.

   ПРАВИЛЬНОЕ УСТРОЙСТВО. Показываем левую половину файла в натуральной
   пропорции, ростом во всю высоту карточки: ширина = половина от высоты
   (файл квадратный), правый край половины совпадает с правым краем карточки. */
.card__ornament {
    /* 🔴 УЗОР — СЛОЙ ПОВЕРХ КАРТОЧКИ, вынут из потока.
       🗣 Е.Г. 2026-08-06: «почему узор увеличивает плашку по вертикали при
       своём увеличении? Он не должен! Он должен только внутри двигаться!»

       Пока узор стоял в потоке, его высота И БЫЛА высотой строки: растёт
       узор — растёт карточка. Вынутый из потока элемент места не занимает,
       поэтому теперь размер узора на высоту плашки не влияет никак.

       Второй баг, найденный тем же разбором: общее правило `img` задаёт
       `max-width: 100%`, и оно зажимало узор шириной ячейки — ползунок
       размера выше ~57 % не делал ничего (хотел 568 px, выходило 418).
       Снимаем ограничение точечно. */
    position: absolute;
    max-width: none;
    /* Половина узора уходит за правый край — тогда его центр стоит ровно
       на краю карточки. `--ornament-out` доводит от этого положения. */
    right: calc(-1 * var(--ornament-w) / 2 - var(--ornament-out, 0%));
    /* 🔴 ЦЕНТР УЗОРА — В ПРАВОМ ВЕРХНЕМ УГЛУ КАРТОЧКИ.
       🗣 Е.Г. 2026-08-06: «подними рисунки настолько, чтобы их центр был
       прямо в углу».

       Привязка идёт к самому углу, а не к середине карточки: `top: 0` плюс
       подъём на половину своей высоты ставит центр ровно на верхний край.
       Так же по горизонтали — половина ширины уходит за правый край.
       Считать от середины карточки было бы неверно: карточки разной высоты,
       и центр уезжал бы у каждой по-своему.

       `--ornament-y` остаётся для тонкой доводки от этого положения. */
    top: 0;
    transform: translateY(calc(-50% + var(--ornament-y, 0%)));
    width: var(--ornament-w);
    /* Пропорция окна — по самому файлу, чтобы не было ни подрезки, ни пустоты
       внутри бокса. Каждому узору своя, задаётся ниже. */
    object-fit: contain;
    object-position: left center;
    opacity: var(--ornament-op, .9);
    pointer-events: none;
    z-index: 0;
}

/* Пропорция окна каждого узора — по его файлу. Замерено: файлы разные,
   от 1,00 до 1,19, и одна общая пропорция дала бы либо подрезку, либо
   пустоту внутри бокса. */
.card--ornate:nth-of-type(1) .card__ornament { aspect-ratio: 1417 / 1417; }
.card--ornate:nth-of-type(2) .card__ornament { aspect-ratio: 1043 / 1004; }
.card--ornate:nth-of-type(3) .card__ornament { aspect-ratio: 1417 / 1189; }
.card--ornate:nth-of-type(4) .card__ornament { aspect-ratio: 1043 / 1004; }
.card--ornate:nth-of-type(5) .card__ornament { aspect-ratio: 1417 / 1417; }
.card--ornate:nth-of-type(6) .card__ornament { aspect-ratio: 1265 / 1185; }

/* 🔴 Размер узора и его вылет за край — оба числа здесь, крутятся вместе.
   Доли ширины карточки. Пропорции оригинала: окно 39,8 % ширины, вылет 9,6 %. */
/* 🔴 УЗОР — ЧЕТЫРЕ ЧИСЛА, ВСЁ ОТСЮДА.
   Выставлено владельцем 2026-08-06 вживую, ползунками в панели настройки
   (`?nastroyka`), а не подобрано мной на глаз.

   Замер при этих значениях: карточка 422 px, узор 453 x 453, за краем 274 px.
   Узор шире карточки и больше половины его уходит вправо за край — отсюда
   крупная мандала, разрезанная краем карточки.

     --ornament-w    размер узора, доля ширины карточки
     --ornament-out  сколько уходит за правый край
     --ornament-y    сдвиг по вертикали, минус — вверх
     --ornament-op   прозрачность

   Узор лежит слоем ПОВЕРХ карточки и на её высоту не влияет: можно крутить
   любое из этих чисел, плашка не поедет. */
.card--ornate {
    --ornament-w: 94%;
    /* Доводка от углового положения. Ноль = центр узора ровно в углу.
       Плюс у `out` уводит дальше вправо, минус у `y` — выше. */
    --ornament-out: 0%;
    --ornament-y: 0%;
    /* 🗣 Е.Г. 2026-08-06: прозрачность 60 → 40 %. */
    --ornament-op: .4;
}

/* 🔴 ШАГ 1б. Дырка справа от узора убрана: текст занимает ВСЮ ширину карточки
   и ложится поверх узора, а не жмётся слева от него.

   Раскладка карточки — сетка из двух строк:
     строка 1  заголовок (он стоит НАД узором, там мандала сходит на конус)
     строка 2  узор и текст в одной ячейке, друг поверх друга

   Высоту второй строки берёт та часть, что выше, — узор. Отсюда «карточка
   на высоту рисунка» выполняется сама, без заданных руками высот. Текст лежит
   поверх узора во всю ширину и от него не зависит совсем. */
.card--ornate .card__body {
    display: grid;
    /* Строк две: заголовок и стороны карточки. Узор в сетке НЕ участвует —
       он вынут из потока и лежит слоем поверх, поэтому высоту не задаёт.
       `1fr` у второй строки нужен, чтобы цена на обороте могла прижаться
       к низу карточки. */
    grid-template-rows: auto 1fr;
    align-content: start;
}

.card--ornate .feature__title { grid-row: 1; }

/* 🔴 Текст ПОВЕРХ узора — весь, включая заголовок (🗣 Е.Г. 2026-08-06).
   Узор лежит слоем с `z-index: 0`; всё, что должно читаться поверх него,
   обязано иметь свой слой. У заголовка его не было — он стоял `static`
   и оказывался под рисунком. */
.card--ornate .feature__title,
.card--ornate .card__face,
.card--ornate .card__back,
.card--ornate .card__foot { position: relative; z-index: 1; }

/* 🔴 ЛИЦО И ОБОРОТ — СОСЕДИ В ОДНОЙ ЯЧЕЙКЕ, а не вложенные друг в друга.
   Переделано 2026-08-06 правкой разметки (🗣 Е.Г.: «делай правку разметки,
   мы делаем хорошо и медленно, на века, без хаков»).

   Прежде оборот лежал ВНУТРИ блока текста и делил с лицом одни строки сетки.
   Из-за этого любая правка ради оборота ломала лицо: дважды подряд жёлтая
   строка уезжала под список, а сверху появлялась дыра. Причина была в общей
   раскладке — её и устранили, а не обошли.

   Теперь у каждой стороны своя раскладка. Обе лежат в одной ячейке, поэтому
   ячейка берёт высоту большей — высота карточки при переключении постоянна. */
.card--ornate .card__face,
.card--ornate .card__back { grid-row: 2; grid-column: 1; }

.card--ornate .card__face {
    display: grid;
    gap: .55em;
    align-content: start;
}

/* 🔴 Правое поле СНЯТО: теперь границу текста держит не прямоугольный отступ,
   а контур узора (`shape-outside` ниже). Прежние 30 % оставляли текст прямой
   колонкой — при обтекании они бы съели весь эффект, отодвинув строки от
   рисунка ещё до того, как контур начнёт действовать. */
.card--ornate .card__body { padding-right: var(--gap); }

/* ---------- обтекание текстом узора ---------- */

/* 🔴 ОБТЕКАНИЕ ТЕКСТОМ СНЯТО 2026-08-06 — решение владельца.
   🗣 Е.Г.: «у тебя взаимодействие рисунка и текста. Надо рисунок сделать фоном
   и карточку на высоту рисунка. А текст ОТДЕЛЬНО форматировать и подгонять,
   потому что мы не выправим текст по заданным мною условиям — картинка
   двигает его».

   Довод верный: пока узор стоит в потоке плавающим, он отнимает у текста
   ширину и рвёт строки, и текст нельзя настроить независимо от рисунка.
   Разделили: узор держит высоту карточки, текст лежит поверх во всю ширину.

   Что при этом потеряно и почему не жаль: обтекание давало разброс края строк
   всего 20–32 px и работало только по адресу http:// — с диска браузер
   запрещает читать пиксели файла, и правило отменялось целиком.

   Найденное тогда сохраняем в журнале, оно верное и может пригодиться:
   `shape-outside` действует только на элементе с собственной картинкой
   (пустая фигура-обходчик контура не даёт вовсе — 0 px против 104 px). */


.card__body p { margin: 0; }

.card__foot { margin-top: auto; padding: 0 var(--gap) var(--gap); }

/* ---------- две кнопки внизу карточки консультации ---------- */

/* 🔴 Замена переворота по наведению. На оригинале карточка переворачивается
   при наведении мыши: спереди описание, сзади формат, цена и «Подробнее».
   Устройство авторское, поэтому содержимое сторон повторяем один в один
   (🗣 Е.Г. 2026-08-06: «оригинал придумала хозяйка и нам желательно
   повторить. Поэтому ПЕРВЫЙ вариант»).

   А вот СПОСОБ показа меняем осознанно: «мы избавляемся от неочевидного
   переворачивания и делаем две кнопки — это уже отлично». Причина: у наведения
   нет подсказки, посетитель о втором слое не догадывается, а на телефоне
   наведения не существует вовсе. Две кнопки видны сразу и работают одинаково
   мышью и пальцем. */
.card__foot--pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.card__foot--pair .btn { width: 100%; text-align: center; }

/* Оборот. Скрыт атрибутом `hidden` в разметке — значит и без стилей, и без
   работающих сценариев страница остаётся правильной: содержимое просто
   не показано, а не свалено в кучу.

   🔴 `[hidden]` обязателен вместе с `display`. Атрибут `hidden` — это всего
   лишь `display: none` из встроенной таблицы браузера, и ЛЮБОЕ своё правило
   с `display` его перебивает. Написав просто `.card__back { display: grid }`,
   я показал оборот на всех шести карточках сразу — владелец увидел то самое
   дублирование, от которого мы уходили. Ошибка 2026-08-06. */
.card__back[hidden] { display: none; }
.card__back { display: grid; gap: .55em; }

/* Пока оборот закрыт, лицо занимает всю карточку; открытый оборот встаёт
   на место списка — как на оригинале, где стороны не показываются вместе. */
/* Лицо прячется целиком, одним блоком — место продолжает занимать. */
.card__body[data-back-open] .card__face { visibility: hidden; }

/* 🔴 ВЫСОТА КАРТОЧКИ ПОСТОЯННА, по лицевой стороне.
   🗣 Е.Г. 2026-08-06: «при нажатии СТОИМОСТЬ опять карточка уменьшается —
   фиксируем высоту всегда как у фронтального вида», «при переключении
   на бэк узор прыгает».

   Обе беды из одного корня: оборот короче лица, карточка садилась
   на 12–59 px, а узор привязан к середине карточки — и уезжал вслед
   за высотой на 6–30 px.

   Решение без заданных руками высот: лицо не убирается из потока,
   а прячется `visibility` — место продолжает занимать. Оборот лежит с ним
   в одной ячейке. Ячейка берёт высоту большей стороны и не меняется. */

/* 🔴 Оборот НЕ прячется `display: none` — иначе он не участвует в раскладке,
   и ячейка берёт высоту только лица. У карточек 1–4 оборот ДЛИННЕЕ лица,
   поэтому при открытии карточка подрастала на 16–32 px, а узор ехал вслед
   за серединой (замерено).

   Прячем `visibility`: место оборот занимает всегда, значит ячейка берёт
   высоту БОЛЬШЕЙ из сторон и не меняется ни при открытии, ни при закрытии.
   Высота карточки постоянна, узор стоит намертво. */
.card__back[hidden] { display: grid; visibility: hidden; }

/* Оборот: описание сверху, цена отдельной строкой внизу, у кнопок.
   🗣 Е.Г. 2026-08-06: «стоимость давай отделим и прижмём к низу — к кнопкам
   и больше размер». Делается чисто: у оборота своя раскладка, лицо она
   не задевает. */
.card--ornate .card__back {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: .55em;
}

.card--ornate .card__back-text {
    display: grid;
    gap: .55em;
    align-content: start;
}

.card--ornate .card__back .card__price {
    align-self: end;
    padding-top: .7em;
    border-top: 1px solid var(--card-edge);
    font-size: 1.5em;
}

/* Текст оборота того же размера, что и на лице (🗣 Е.Г. 2026-08-06:
   «размер шрифта на обратной стороне сделай таким же, как и спереди»).
   Прежде оборот шёл `.card__note` — мельче на 8 %. */
.card--ornate .card__back .card__note { font-size: 1em; color: var(--text); }

/* 🔴 Размер карточки при переключении не меняется (🗣 Е.Г. 2026-08-06: «при
   нажатии на некоторых карточках из-за меньшего количества текста они
   уменьшаются и дёргает — давай уберём динамический размер»).

   Замерено: сама карточка и так не прыгает — её держит сетка ряда, она
   равняет соседок по самой высокой (615/615 и 650/650 на всех проверенных
   ширинах, скачок 0 px). Но внутри тело карточки сжимается, потому что
   оборот короче лица, и кнопки уезжают вверх, а под текстом остаётся дыра.

   Закрепляем явно, а не полагаемся на сетку: тело карточки занимает всю
   свободную высоту, а содержимое прижато к верху. Тогда и в одиночной
   карточке (узкий экран, ряд из одной) переключение ничего не двигает. */
.card--ornate { display: flex; flex-direction: column; }
.card--ornate .card__body { flex: 1 1 auto; }

/* ⚠️ На узком экране (ряд из одной карточки, выравнивать не с кем) переключение
   сторон меняет высоту на 15 px — 317 → 302, замерено на 390 px.
   Проверено и ОТВЕРГНУТО: положить обе стороны в одну ячейку сетки, чтобы
   ячейка взяла высоту большей. Сетка на теле карточки убивает обтекание —
   узор перестаёт быть плавающим в потоке, разброс края строк падает с 6 до 0,
   и карточки прибавляют в высоте 443 → 608. Цена несопоставима с 15 px.
   Оставлено как есть: на телефоне карточка одна в ряду, соседки не дёргаются,
   а 15 px на глаз не читаются. */

.card__price {
    font-family: var(--font-headline);
    color: var(--accent);
    font-size: 1.05em;
}

.card__note { color: var(--text-dim); font-size: .92em; }

/* 🗣 Е.Г. 06.08: «в карточках надо будет кнопку красиво „ЗАПИСАТЬСЯ“.
   Точно „ПОДРОБНЕЕ“ нужна кнопка?» — проверено: «Подробнее» ведёт на реальные
   страницы-описания, они есть в архиве живого сайта (по 1,5 МБ каждая),
   просто ещё не собраны. Поэтому обе кнопки нужны, но на разных сторонах:
   на лице «Подробнее» и «Стоимость», на обороте — цена и запись.
   Так человек, увидевший цену, записывается сразу, не уходя в подвал. */
.card__signup {
    display: block;
    margin-top: .9em;
    text-align: center;
    /* Целевое действие — заметнее прочих кнопок карточки. */
    font-size: 1.02em;
    letter-spacing: .04em;
}

.card__list { margin: 0; padding-left: 1.15em; display: grid; gap: .5em; }

/* 🔴 Плотность карточек консультаций — по замеру оригинала, а не на глаз.
   На живом сайте текст карточки 14–16 px при межстрочном 1,5; у нас общий
   текст сайта 15–17 px при 1,65 и промежуток 1em между каждым блоком.
   Сложение этих трёх запасов и растягивало карточку вдвое против оригинала.

   Правим ровно карточки этого раздела, общий текст сайта не трогаем. */
.card--ornate .card__body {
    font-size: .95em;
    /* 🔴 Межстрочное расстояние и промежутки между блоками — РАЗНЫЕ величины,
       и владелец просит их развести (🗣 Е.Г. 2026-08-06: «между строками прям
       мало делай, а между параграфами и важными отступами оставляй»).

       Строки внутри абзаца — плотно: 1,20 (🗣 Е.Г. 2026-08-06, после пробы
       на 1,0). Плотнее оригинала (1,5), решение владельца. Замерено: до
       смыкания букв остаётся 4 px против 1 px на единице, см. журнал 8д. */
    line-height: 1.2;
    /* Промежутки между блоками НЕ трогаем — они и держат структуру карточки. */
    gap: .55em;
}

/* Между пунктами списка воздух остаётся: это разные мысли, а не одна строка.
   Чем плотнее строки внутри пункта, тем нужнее просвет между пунктами —
   иначе список читается сплошной кашей. */
.card--ornate .card__list { gap: .6em; line-height: 1.2; }

/* Заголовок карточки. Сначала был поднят до 30 px (🗣 Е.Г.: «оглавления внутри
   карточек больше»), но самый длинный заголовок — «Электронная консультация
   „Родителям о ребёнке“», 45 знаков против 21–24 у прочих — разваливался
   при этом на четыре строки.
   🗣 Е.Г. 2026-08-06: «давай чуть меньше тогда все заголовки чтобы влезло».

   После того как заголовок перестал обтекать узор и получил всю ширину
   карточки, места прибавилось и кегль поднят обратно — 🗣 Е.Г. 2026-08-06:
   «как раз можно теперь больше немного сделать оглавление карточек».

   30 px — не подбор, а замеренный потолок: перебором кеглей от 24 до 34
   видно, что до 30 включительно пять заголовков стоят в одну строку,
   а самый длинный («Электронная консультация „Родителям о ребёнке“»,
   45 знаков против 21–24 у прочих) — в две. На 32 картина ломается:
   третий заголовок уходит в две строки, длинный в три. */
.card--ornate .feature__title {
    font-size: clamp(20px, 2.15vw, 30px);
    line-height: 1.15;
    /* 🗣 Е.Г. 2026-08-06: «можно у заголовков сделать ограничение справа
       не до рисунка узора, а до конца карточки? Узор сверху закругляется
       и не будет накладываться».

       Наблюдение верное, проверено замером силуэта: вверху мандала сходит
       на конус — на 2 % своей высоты рисунок начинается только с 38,9 %
       ширины файла, на 5 % с 33,8 %. То есть на уровне заголовка узора
       там почти нет, и обтекать нечего.

       Из обтекания заголовок выводится тем, что он ставится ПЕРЕД плавающим
       узором в порядке отрисовки и получает отрицательное поле справа
       на ширину узора. Плавающий элемент ужимает соседние блоки целиком,
       поэтому `display: grid` тут не помогает — проверено, рамка заголовка
       так и обрывалась о левый край узора (326 px из 484), а длинный
       заголовок разваливался уже на три строки.
       Остальной текст обтекание сохраняет — правило касается заголовка. */
    /* Заголовок не обтекает узор и идёт во всю ширину карточки. Делается это
       НЕ вынутием из потока: пробовал абсолютное положение — ширина вставала
       верно (451 из 484), но заголовок переставал занимать высоту, и в шестой
       карточке двухстрочный заголовок наезжал на текст (зазор −14 px).
       Пробовал отрицательное поле — проценты в нём считаются от ужатой узором
       колонки, заголовок вылезал за карточку (706 px при ширине 484).

       Работает простое: узор переставлен в разметке ПОСЛЕ заголовка. Плавающий
       элемент ужимает только то, что идёт за ним, — значит заголовок, стоящий
       выше по потоку, берёт всю ширину карточки сам, без единого правила
       в стилях. Замерено: 451 px из 484, то есть ровно до внутреннего поля. */
}

/* Секция с собственной тёмной подложкой во всю ширину — на оригинале этот
   блок лежит на сплошном тёмном поле, а не прямо на звёздном фоне. */
.section--plate {
    background: rgba(6, 5, 14, .92);
    border-block: 1px solid var(--card-edge);
}

/* Кнопка под разделом-вводной: ведёт на страницу, где тема раскрыта целиком.
   Заведена 2026-08-06, когда «Виды консультаций» и «Программы обучения»
   переехали с главной на свои страницы (🗣 Е.Г.: «на главной уберем карточки
   с консультацией и обучением а то там перегружено»). Без неё читатель
   дочитывал вводную и упирался в тупик. */
/* 🗣 Е.Г. 06.08: «тут надо прибрать воздух», затем «программы обучения кнопку
   выше ближе к тексту» — кнопка отрывалась от того, к чему относится.
   Зазор кажется больше заданного: карточки в ряду разной высоты, и кнопка
   отсчитывается от нижнего края самой длинной, а не от видимого текста. */
.section__more {
    margin: clamp(8px, 1vw, 14px) 0 0;
    text-align: center;
}

/* Повод: значок, плашка, текст. Три строки подчинены общей сетке раздела,
   поэтому значки, плашки и тексты стоят вровень по всему ряду. */
.reason {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: .7em;
    justify-items: center;
    text-align: center;
}

.reason__icon {
    width: clamp(44px, 4.6vw, 62px);
    height: auto;
    align-self: end;
}

.reason p { margin: 0; color: var(--text-dim); }

/* Плашка — тоже абзац внутри повода, поэтому правило выше перебивало ей цвет:
   у «.reason p» сила больше, чем у одного класса. Задаём явно и сильнее.
   Светлый акцентный, не тёмный — рамка больше не сплошная заливка. */
.reason .pill--accent { color: var(--accent); }

/* Лотос нарисован мельче остальных внутри своего поля — выравниваем на глаз. */
.reason__icon--big { width: clamp(56px, 5.9vw, 80px); }

.grid--reasons { grid-auto-rows: auto; }

/* широкая карточка: картинка сбоку, текст рядом */
.feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: var(--card);
    border: 1px solid var(--card-edge);
    border-radius: var(--round-l);
    overflow: hidden;
}

.feature--flip .feature__media { order: 2; }
.feature__media img { height: 100%; object-fit: cover; }
.feature__body { padding: clamp(20px, 3vw, 44px); display: flex; flex-direction: column; gap: 1em; }

.feature__title {
    font-family: var(--font-headline);
    font-weight: 800;
    text-transform: uppercase;
    font-size: clamp(19px, 2.2vw, 32px);
    line-height: 1.15;
    color: var(--accent);
    margin: 0;
    text-wrap: balance;
}

.feature__accent { color: var(--yellow); font-size: 1.06em; }

/* ---------- карточка, где картинка лежит во всю плашку ---------- */

/* Устройство снято замером с разметки живого сайта (`_live\pages\index.html`,
   компоненты comp-miu7* — карточка «Погружение»). Оригинал НЕ делит плашку
   на две колонки: картинка одна на всю ширину, текст лежит поверх неё справа.
   Тёмная правая часть — не подложка вёрстки, она нарисована внутри файла
   (замерено по самой картинке: яркость правой трети 10,9 против 59,3 слева).
   Своей затемняющей пелены поэтому нет и быть не должно.

   Доли пересчитаны от ширины плашки оригинала 955 px, чтобы держались
   на любой ширине экрана:
     плашка     955 x 445           пропорция 2,146
     текст      607 px от 324 px    63,6 % шириной, левый край на 33,9 %
     кнопка     304 x 44 от 627 px  левый край на 65,7 %
     заголовок  894 px от 37 px     по центру всей плашки

   Картинка: у Wix в адресе стоит вырез `crop/x_22,y_0,w_3433,h_1600` —
   из исходника 3559 x 1600 берётся полоса 3433 шириной, то есть 3,54 % уходит
   с боков. Наш файл — исходник целиком (1920 x 863, пропорция 2,225 против
   2,146 у плашки), поэтому тот же срез делается показом: при `cover` лишними
   оказываются 3,3 % ширины (замерено). Куда уводится срез — см. ниже.

   🔴 КАРТОЧКИ ЧЕРЕДУЮТСЯ ПО СТОРОНЕ. Замерено по разметке живого сайта:
     1 Погружение              текст справа, 33,9 % · ширина 63,6 % · плашка 955x445
     2 Матрица Судьбы          текст СЛЕВА,   4,0 % · ширина 53,4 % · плашка 955x455
     3 Биолокация              текст справа, 38,3 % · ширина 60,4 % · плашка 955x464
     4 Многомерная медицина    текст СЛЕВА,   4,1 % · ширина 70,5 % · плашка 955x552
     5 Психологический портрет текст справа, 40,5 % · ширина 57,4 % · плашка 955x464
   Наша разметка помечает 2-ю и 4-ю как `feature--flip` — совпадает с оригиналом.
   Числа у каждой свои, поэтому вынесены переменными и задаются на карточке. */
.feature--overlay {
    --text-left: 33.9%;      /* левый край колонки текста */
    --text-w: 63.6%;         /* ширина колонки */
    --plate: 955 / 445;      /* пропорция плашки */

    display: grid;
    /* Одна колонка во всю ширину: без этого распорка задаёт ширину колонки
       по своей пропорции и плашка съёживается вдвое (поймано на снимке).
       🔴 `minmax(0, 100%)`, а не голое `100%`: на узком экране распорка
       с `aspect-ratio` требовала себе высоту по пропорции, и колонка
       раздувалась до 1320 px при экране 390 — содержимое уезжало под
       `overflow: hidden` карточки, текст обрезался (замерено 13.08). */
    grid-template-columns: minmax(0, 100%);
    position: relative;
    /* 🔴 Пропорция оригинала — НИЖНЯЯ граница, а не жёсткий размер. Тексты
       сняты с живого сайта целиком, и у «Продвинутого курса» они не влезают
       в высоту оригинала: содержимое 576 px при плашке 578, кнопка тонет
       под текстом (замерено, запас ровно 0 px). Высоту задаёт содержимое,
       а пропорция держит минимум — плашка не может стать ниже оригинальной,
       но подрастает, если текста больше. Картинка тянется вместе с ней. */
    background: none;
}

/* Пропорция оригинала как МИНИМАЛЬНАЯ высота: пустая распорка и тело кладутся
   в одну ячейку сетки. Высоту берёт тот, кто выше — распорка при коротком
   тексте, тело при длинном. Так плашка не ниже оригинальной и не режет текст. */
.feature--overlay::before {
    content: "";
    grid-area: 1 / 1;
    width: 100%;
    aspect-ratio: var(--plate);
}

/* Числа остальных карточек — каждой свои, снято замером оригинала. */
.feature--overlay.feature--flip { --text-left: 4%; }

/* 🗣 Е.Г. 06.08: «на этой карточке чуть больше отступа надо сделать справа
   тексту» — колонка упиралась в нарисованную книгу. Ширина срезана
   с 53,4 до 49 %, левый край на месте. */
.feature--o2 { --plate: 955 / 455; --text-w: 49%; }
/* 🗣 Е.Г. 06.08: «В основах картинку чуть левее» — рука с нитями сдвигалась
   к центру и лезла под текст. Показ сдвинут к левому краю файла. */
.feature--o3 { --plate: 955 / 464; --text-left: 38.3%; --text-w: 60.4%; }
.feature--o3 .feature__media img { --img-x: 0%; }

/* 🗣 Е.Г. 06.08: «В продвинутом курсе рисунок сильно вправо двигай чтобы маятник
   ушёл из-под титров». Маятник нарисован на 80 % ширины файла (замерено),
   плашка 955x552 срезает 24 % — при показе вправо маятник упирался в правый
   край ровно под заголовком.
   🔴 Расширять картинку и двигать её отступом НЕЛЬЗЯ: сдвиг вправо обнажает
   левый край плашки (было 267 px голого фона — поймано на снимке). Плашка
   высокая, поэтому картинка после `cover` и так шире её на 305 px — хватает
   одного положения показа, без изменения ширины.
   Положение доведено владельцем вживую через ползунок (06.08): 70 % —
   маятник ушёл из-под заголовка, левый и правый край плашки закрыты. */
.feature--o4 { --plate: 955 / 552; --text-w: 70.5%; }
/* Отбор повторяет вес правила `feature--flip` — иначе то стоит выше по весу
   и переменная остаётся 100 %, а сдвиг молча не применяется (поймано замером). */
.feature--overlay.feature--o4.feature--flip .feature__media img { --img-x: 70%; }
.feature--o5 { --plate: 955 / 464; --text-left: 40.5%; --text-w: 57.4%; }

/* 🗣 Е.Г. 06.08: «Текст правее — подрежь сильнее слева». Колонка сдвинута
   с 33,9 на 42 %, показ картинки уведён дальше от левого края (стол со
   свечами уходит за левый обрез сильнее). */
.feature--o6 { --text-left: 42%; --text-w: 55%; }
.feature--o6 .feature__media img { --img-x: 15%; }

/* Картинка — подложка: лежит в той же ячейке и тянется на всю итоговую высоту,
   какой бы та ни вышла. Первым слоем, поэтому текст поверх неё. */
.feature--overlay .feature__media {
    grid-area: 1 / 1;
    overflow: hidden;
    border-radius: inherit;
}

/* 🗣 Е.Г. 06.08: «правее картинку двинь — рука подрезалась».
   Прежде показ был прижат к правому краю (`object-position: right`) — так режет
   Wix. Но срез в 3,3 % ширины приходился ровно на край руки: замерено по файлу,
   фигура занимает 12,5–27 % ширины, а правее 50 % идёт сплошная темнота под текст.
   Поэтому срез уводится туда, где терять нечего — в тёмную часть под текстом.
   У карточек с текстом справа фигура слева, срез уходит вправо; у зеркальных
   наоборот. Сознательное расхождение с оригиналом по решению владельца. */
.feature--overlay .feature__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Сдвиг рисунка внутри плашки: 0 % — прижат влево, 100 % — вправо.
       Задаётся у каждой карточки своим числом, потому что фигура на каждом
       рисунке стоит в своём месте. */
    object-position: var(--img-x, 0%) center;
    display: block;
}

.feature--overlay.feature--flip .feature__media img { --img-x: 100%; }

/* У зеркальных карточек кнопка стоит слева — привязка по левому краю,
   тем же отступом 2,5 %, что и у правых. */
.feature--overlay.feature--flip .btn {
    margin-left: 2.5%;
    margin-right: auto;
}

/* Блоков внутри четыре: заголовок, жёлтый абзац, серый абзац, кнопка.
   🔴 Число блоков РАЗНОЕ: у карточек 3, 4, 5 жёлтого абзаца нет, их всего три.
   Поэтому сетка не считает строки по блокам, а кнопка привязана к последней
   строке явно (`grid-row: -2`), а запас высоты собирает строка перед ней.
   Так кнопка прижата к низу и при трёх блоках, и при четырёх.
   Прежде строки задавались числом: при четырёх блоках кнопка попадала
   в растяжимую строку и висела в 103 px от низа, при трёх — в 302 px.
   🗣 Е.Г. 06.08: «надо к верху прижать название и сделать больше, текст выше
   под титулом и расстояние между параграфами убрать а снизу кнопку». */
.feature--overlay .feature__body {
    /* В той же ячейке, что распорка: высоту берёт тот, кто выше. */
    grid-area: 1 / 1;
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 🔴 Общий .feature__body ставит gap: 1em — он добавлялся к каждому
       промежутку сверх заданных отступов, и все расстояния разъезжались
       (замерено: заголовок 41 px от верха вместо 18, между абзацами 24
       вместо 4). Здесь расстояния задаются только отступами блоков. */
    gap: 0;
    /* Кегли считаются от ширины плашки, а не окна: 1cqw = 1 % её ширины,
       и числа переносятся напрямую. Объявление стоит здесь, ДО правил,
       которые этой единицей пользуются. */
    container-type: inline-size;
}

/* Заголовок центрируется по ВСЕЙ плашке, а не по колонке текста — так в оригинале.
   Кегль поднят с 30 до 38 px и отступ сверху срезан с 34 до 18 px по просьбе
   владельца: в оригинале 30 px и 34 px, здесь сознательно расходимся. */
.feature--overlay .feature__title {
    align-self: stretch;
    text-align: center;
    font-size: clamp(17px, 3.98cqw, 38px);  /* 38 px на 955 */
    /* Отступы долей ШИРИНЫ плашки: процент здесь считался бы от ширины
       и без того, но записан явно, чтобы число читалось однозначно.
       18 px сверху и 14 px снизу при плашке 955 = 1,88 % и 1,47 %. */
    margin: 1.88cqw 0 1.47cqw;
    padding: 0 3.87%;
}

/* 🗣 Е.Г. 06.08: «Давай без тире сделаем — без переноса. Окончание на полные
   слова везде». Переносы по слогам сняты: слова не разрываются.
   Цена решения, принята сознательно: при выключке по ширине без переносов
   пробелы в строке растягиваются сильнее — мерится в check_feature.py. */
.feature--overlay .feature__accent,
.feature--overlay .feature__body > p {
    width: var(--text-w);
    margin-left: var(--text-left);
    margin-right: var(--text-right, 0);
    text-align: justify;
    hyphens: none;
}

.feature--overlay .feature__accent {
    font-size: clamp(11px, 2.3cqw, 22px);   /* 22 px на 955 — крупнее серого */
    line-height: 1.3;
    /* Собственный верхний отступ абзаца (22 px от общих стилей) снимается —
       расстояние до заголовка держит сам заголовок, одним числом. */
    margin-top: 0;
    /* 🗣 Е.Г. 06.08: «расстояние между параграфами убрать». Оставлено 6 px
       вместо прежних 13. В ноль не ставим: абзацы сольются в сплошную
       простыню и разделение мысли пропадёт. */
    margin-bottom: 6px;
}

/* Жёлтый абзац — тоже <p> внутри тела, поэтому отбор серого его исключает:
   иначе правило серого стоит ниже, весит столько же и молча переписывает
   кегль жёлтого с 22 на 18 (поймано замером). */
.feature--overlay .feature__body > p:not(.feature__accent) {
    font-size: clamp(10px, 1.88cqw, 18px);  /* 18 px на 955 */
    margin-top: 0;
    /* Зазор до кнопки. Прижатие кнопки к низу даёт `margin-top: auto`, но при
       длинном тексте он схлопывается в ноль и последняя строка встаёт к кнопке
       впритык (замерено на «Продвинутом курсе»: запас ровно 0). Эти 25 px
       держатся всегда, независимо от длины текста. */
    margin-bottom: 25px;
}

/* Высота кнопки в процентах внутри сетки берётся не от плашки, а от строки,
   и кнопка схлопывалась в 2 px (замерено). Поэтому высота задана долей
   ШИРИНЫ плашки — та известна и пропорцию не ломает: 44 из 955 = 4,6 %. */
/* 🗣 Е.Г. 06.08: «У правых кнопок УЗНАТЬ ПОДРОБНЕЕ у всех отступа разные справа.
   Сделай одинаковые как у ПОГРУЖЕНИЯ В 22 ЭНЕРГИИ».
   В оригинале кнопки стоят по левому краю, и правый отступ выходил вразнобой:
   2,5 % у «Погружения», 1,3 % у «Биолокации», 2,1 % у «Портрета» (замерено).
   Теперь правые кнопки привязаны к ПРАВОМУ краю по «Погружению» — 2,5 % у всех.
   Зеркальные карточки стоят слева, у них привязка прежняя. */
.feature--overlay .btn {
    /* Кнопка прижата к низу запасом сверху: число блоков у карточек разное
       (три или четыре), поэтому считать строки сетки нельзя — при трёх блоках
       кнопка попадала в растяжимую строку и висела в 302 px от низа. */
    margin-top: auto;
    margin-left: auto;
    margin-right: 2.5%;
    /* Отступ снизу в процентах считался бы от ШИРИНЫ плашки, а не высоты,
       и давал 56 px вместо 25 (замерено). Задан долей ширины напрямую:
       25 px при плашке 955 = 2,6 %. */
    margin-bottom: 2.6cqw;
    width: 31.8%;                           /* 304 из 955 */
    height: 4.6cqw;
    min-height: 0;
    padding: 0;
    display: grid;
    place-items: center;
    text-align: center;
    font-size: clamp(9px, 2.1cqw, 20px);
}

/* Две кнопки рядом на карточке курса — «Подробнее» и «Записаться»
   (🗣 Е.Г. 06.08: «на карточках надо добавить кнопку ЗАПИСАТЬСЯ как в оригинале,
   но по стилю как в консультациях — рядом»). На оригинале кнопки «ЗАПИСАТЬСЯ»
   есть, но они мёртвые: голые `button` без адреса вовсе. У нас ведут в Telegram.
   Блок перенимает позиционирование одиночной кнопки: так же прижат к низу
   и к правому краю плашки, а ширину берёт на пару. */
/* Пара занимает ровно ширину текстовой колонки и стоит под ней край в край
   (🗣 Е.Г. 06.08: «сделаем всю ширину обоих кнопок на ширину текста ровно»).
   Ширина берётся из той же переменной, что у текста, — у каждой карточки
   своя, и подгонять числами по отдельности не нужно. */
.feature--overlay .feature__foot {
    margin-top: auto;
    margin-left: var(--text-left);
    margin-right: 0;
    margin-bottom: 2.6cqw;
    width: var(--text-w);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5%;
}

/* Внутри пары кнопки сами не позиционируются — этим занят блок выше. */
.feature--overlay .feature__foot .btn {
    margin: 0;
    width: 100%;
}

/* Зеркальным карточкам отдельного правила не нужно: у них своя `--text-left`
   (4 %), и пара встаёт под текстом слева сама. */

/* На узком экране карточка распускается, текст идёт во всю ширину — привязка
   к `--text-left` там не к месту, кнопки уезжали на 1233 px вбок (замерено). */
@media (max-width: 900px) {
    .feature--overlay .feature__foot {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
        /* `100 %` здесь считался бы от растянутого тела карточки и давал
           1280 px при карточке 358 (замерено). `auto` берёт ширину по месту. */
        width: auto;
    }
}

/* ---------- картина во всю ширину ---------- */

/* Книги на оригинале — цельная картина: заголовок, подпись и обложка нарисованы
   внутри файла. Вёрстка добавляет только кнопку поверх. Свой текст оставлен
   в разметке скрытым — для поисковиков и чтения с экрана. */
.banner {
    position: relative;
    border-radius: var(--round-l);
    overflow: hidden;
}

.banner img { width: 100%; height: auto; display: block; }

/* Кнопка привязана НЕ к низу картины, а к концу нарисованного текста.
   Тексты на картинах кончаются на разной высоте (измерено по самим файлам:
   у книги на 66,7 % высоты, у пособия на 70,6 %), поэтому общий отступ снизу
   давал разный зазор до текста, а разный отступ — разное расстояние до края.
   Точка конца текста задаётся у каждой картины своя, зазор под ним — общий. */
/* Точки конца текста измерены по самим файлам, единым правилом: берётся
   САМЫЙ НИЖНИЙ пиксель букв, вместе с ножками «Д» и хвостами «р», «у», «д».
   Прежде у книги бралось основание строки, а у пособия — низ с хвостами:
   разные мерки давали разный зазор, хотя число процентов выглядело похожим. */
.banner {
    --text-end: 68.13%;      /* index-11: низ «В 22 ЭНЕРГИИ МИРОЗДАНИЯ», Y=573 из 841 */
    --gap-under-text: 11%;   /* кнопка стоит ближе к нижнему краю картины */
}

.banner__action {
    position: absolute;
    left: 5%;          /* по измеренной левой границе текста index-11 */
    top: calc(var(--text-end) + var(--gap-under-text));
    padding: clamp(7px, .75vw, 11px) clamp(26px, 3vw, 44px);
    font-size: clamp(13px, 1.25vw, 17px);
}

/* У пособия нарисованный текст стоит справа — подпись идёт под ним,
   а не слева на пустом месте. */
/* Пособие: текст стоит справа и кончается ниже — своя точка привязки.
   index-12: низ «подробное руководство для практики», Y=611 из 864.
   Ширина кнопки — по измеренным границам строки: от 53,44 % до 93,28 %. */
.banner--manual { --text-end: 70.72%; }

.banner__action--right {
    left: 53.44%;
    right: 6.72%;
    width: auto;
    min-width: 0;
    text-align: center;
}

.banner__action--note { cursor: default; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ---------- «Обо мне» ---------- */

/* Картинка здесь — вся карточка целиком, со скруглёнными углами: слева портрет,
   справа пустое тёмное поле, оставленное под текст. Поэтому она идёт фоном,
   а текст ложится поверх её правой половины. */
.about { position: relative; }

.about__bg { width: 100%; height: auto; display: block; }

/* Текст занимает всё свободное поле справа от портрета — на оригинале он
   начинается сразу за плечом, а не с середины карточки. */
/* Текст занимает всё свободное поле справа от портрета — на оригинале он
   начинается сразу за плечом, а не с середины карточки.
   Блок растянут по высоте картинки: ФИО прижато кверху, знак с кнопкой —
   книзу, текст расходится по остатку и оказывается посередине. */
.about__text {
    position: absolute;
    top: 7%;
    bottom: 7%;
    right: 6%;      /* от правого края нужен воздух, иначе текст впритык */
    width: 59.5%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-content: stretch;
    gap: .7em;
}

.about__body {
    align-self: center;
    display: grid;
    gap: .8em;
}

/* ФИО тянется во всю ширину текстового блока: буквы разгоняются по строке,
   чтобы строка кончалась там же, где кончается текст под ней. */
.about__title {
    margin: 0;
    font-family: var(--font-headline);
    font-weight: 500;
    text-transform: uppercase;
    /* Размер подобран замером: при ширине блока 595 px строка ФИО занимает
       ровно 595 px при 3,3 % ширины окна. Строка тянется во всю ширину сама,
       без разгона пробелов. 🔴 Меняется ширина блока — пересчитать и это. */
    font-size: clamp(16px, 3.3vw, 47px);
    line-height: 1.1;
    color: var(--accent);
    text-align: center;
    white-space: nowrap;
}

.about__text p {
    margin: 0;
    font-size: clamp(12px, 1.42vw, 20px);
    line-height: 1.5;
}

.about__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    margin-top: .4em;
}

.about__mark { width: clamp(70px, 9vw, 130px); }

.about__foot .btn {
    padding: clamp(6px, .7vw, 12px) clamp(16px, 2vw, 32px);
    font-size: clamp(10px, 1vw, 14px);
}

@media (max-width: 700px) {
    /* На узком экране текст поверх картинки не помещается — уходит под неё. */
    .about__text {
        position: static;
        width: auto;
        transform: none;
        padding: var(--gap);
        background: var(--card);
    }

    .about {
        background: var(--card);
        border: 1px solid var(--card-edge);
        border-radius: var(--round-l);
        overflow: hidden;
    }
}

/* ---------- отзывы ---------- */

/* Лента комментариев, не карточки в ряд — аватар слева, пузырь с текстом
   справа, один столбец (🗣 Е.Г. 13.08: «естественнее, не в рамках как
   картины»). */
.reviews {
    display: grid;
    gap: clamp(18px, 2.6vw, 28px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.review {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.review__avatar {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-soft), var(--accent));
    opacity: .35;
}

.review__body {
    /* Плотнее — было rgba(...,.1), текст спорил со звёздным фоном
       (🗣 Е.Г. 13.08: «не читается ничего»). */
    background: rgba(20, 14, 34, .82);
    border-radius: var(--round-l);
    padding: 14px 18px;
}

.review__text {
    margin: 0;
    text-align: left;
}

.review__stars {
    margin: .5em 0 0;
    color: var(--accent);
    letter-spacing: .1em;
    font-size: .9em;
}

.review__meta { margin-top: .4em; color: var(--text-dim); font-size: .9em; text-align: left; }
.review__author { color: var(--accent); font-weight: 600; }

/* ---------- подвал ---------- */

.footer {
    background: #000;
    border-top: 1px solid var(--card-edge);
    padding-block: var(--section-gap);
}

/* 🗣 Е.Г. 06.08: «давай подвал в порядок приведем. Тут справа колонка
   с кучей воздуха. Надо красиво скомпоновать».
   Причина воздуха: строки контактов шли с промежутком 1,1em, колонка
   вырастала до 344 px против 106 px у слогана и тянула весь подвал
   (замерено). Промежуток сжат, колонки выровнены по верху — так все три
   начинаются от одной линии, а не расходятся от середины. */
.footer__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--gap);
}

.footer__slogan {
    font-family: var(--font-headline);
    font-size: clamp(24px, 3.4vw, 46px);
    line-height: 1.15;
    margin: 0;
}

.footer__slogan b { display: block; font-weight: 800; }

/* Подписи под знаком нет: «ПРОСТРАНСТВО МИСТЕРИЙ · место, где меняется
   сознание» нарисовано прямо внутри файла картинки — текстом ниже это
   дублировалось дважды. */
.footer__brand { text-align: center; }
/* 🗣 Е.Г. 06.08: «лого которое по центру сделай больше». Файл знака
   850x1133, поэтому запас по качеству есть — увеличено без потери резкости. */
.footer__brand img { width: clamp(150px, 19vw, 260px); margin-inline: auto; }

/* Три ссылки со значками идут плотной группой, почта и города отделены
   от неё отступом — так видно, что это разные вещи, а колонка не
   растягивается на пустоте (образец компоновки прислан владельцем). */
/* 🗣 Е.Г. 06.08: «только вправо правые сдвинь» — колонка контактов прижата
   к правому краю подвала, сами строки внутри неё выровнены по левому краю
   между собой, чтобы значки стояли в одну линию. */
.footer__contacts {
    display: grid;
    gap: .55em;
    justify-items: start;
    justify-self: end;
}

/* Строка не растягивается по высоте значка — иначе шаг между строками
   вырастал до 66 px и группы переставали читаться (замерено). */
.footer__row { display: flex; align-items: center; gap: .7em; margin: 0; line-height: 1.3; }
.footer__row img { width: 22px; }

/* Почта — начало второй группы, под ссылками со значками. */
.footer__row:nth-child(4) { margin-top: 1.2em; }
.footer__row a { color: var(--text); text-decoration: none; }
.footer__row a:hover { color: var(--accent); }

/* ---------- ширины экрана ---------- */

@media (max-width: 900px) {
    /* На узком экране колонки встают друг под друга, фигура оказывается
       первой и упирается в шапку — та непрозрачная и срезает голову.
       Подъём убираем: перекрывать бегущую строку здесь нечем и незачем. */
    .hero__figure { margin-top: 0; }
    .hero { padding-top: calc(var(--hero-lift) + clamp(20px, 5vw, 40px)); }

    .hero__grid,
    .grid--2,
    .grid--3,
    .feature,
    .footer__grid { grid-template-columns: 1fr; }

    .feature--flip .feature__media { order: 0; }

    /* Наложение текста на картинку живёт только на широком экране. На узком
       колонка в 63,6 % ширины становится нечитаемой поверх рисунка, а жёсткая
       пропорция 955:445 обрезает текст, который туда не помещается. Поэтому
       здесь карточка распускается обратно: картинка сверху, текст под ней.
       Выключка по ширине и порядок блоков сохраняются. */
    /* Колонка текста распускается на всю ширину: сами переменные, а не
       правила поверх них — так число меняется в одном месте и не спорит
       с широким правилом (🗣 Е.Г. 13.08: «жёлтый текст так же на всю
       ширину»). Зеркальные карточки названы отдельно: у них своё правило
       `.feature--overlay.feature--flip` с двумя классами, оно тяжелее
       и держало отступ 4 % — на двух карточках текст не примыкал к левому
       краю (🗣 Е.Г. 13.08). */
    .feature--overlay,
    .feature--overlay.feature--flip {
        --text-w: 100%;
        --text-left: 0%;
        --text-right: 0%;
    }

    .feature--overlay {
        aspect-ratio: auto;
        background: var(--card);
        /* 🔴 Сетка распускается в обычный поток (13.08). Прежде оставались
           `grid` и распорка `::before` с `aspect-ratio`: картинка и текст
           лежали в одной ячейке друг на друге, а распорка тянула колонку
           до 1320 px при экране 390 — содержимое уходило под `overflow:
           hidden`, текст обрезался на полуслове. */
        display: block;
    }

    .feature--overlay::before { content: none; }

    .feature--overlay .feature__media {
        position: static;
        /* Ячейка сетки больше не задана — снимаем привязку явно, иначе
           `grid-area: 1 / 1` держит наложение. */
        grid-area: auto;
    }

    .feature--overlay .feature__media img { height: auto; object-position: center; }

    .feature--overlay .feature__body {
        position: static;
        grid-area: auto;
        display: flex;
        flex-direction: column;
        gap: 1em;
        padding: clamp(20px, 3vw, 44px);
    }

    .feature--overlay .feature__title {
        font-size: clamp(19px, 2.2vw, 32px);
        margin: 0;
        padding: 0;
        text-align: left;
    }

    /* Отбор повторяет тот, что на широком экране (`:not(.feature__accent)`):
       иначе он весит меньше, широкий clamp серого просачивается сюда
       и на 390 px даёт 10 px — нечитаемо. Поймано замером. */
    .feature--overlay .feature__accent,
    .feature--overlay .feature__body > p:not(.feature__accent) {
        /* 🔴 `width: auto` во флекс-колонке даёт ширину ПО СОДЕРЖИМОМУ,
           а не по родителю: жёлтый абзац оставался 201 px из 356 и стоял
           колонкой посреди карточки (замерено 13.08, 🗣 Е.Г.: «жёлтый текст
           так же на всю ширину»). Серый выглядел правильно случайно — он
           длиннее и упирался в край сам. Ширину задаём явно. */
        width: 100%;
        margin: 0;
        font-size: inherit;
    }

    .feature--overlay .feature__accent { font-size: 1.06em; line-height: inherit; }

    .feature--overlay .btn {
        margin-left: 0;
        width: auto;
        height: auto;
        line-height: inherit;
        display: inline-block;
        padding: 12px 26px;
        font-size: inherit;
        align-self: start;
    }

    .footer__grid { text-align: center; justify-items: center; }
    /* На узком экране колонки складываются в одну — прижимать контакты
       вправо здесь незачем, они центрируются вместе с остальным. */
    .footer__contacts { justify-items: center; justify-self: center; }

    body::before { background-attachment: scroll; }

    .nav__toggle { display: block; }

    .nav {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        padding: 12px;
        background: #0d0b18;
        border-bottom: 1px solid var(--card-edge);
        display: none;
    }

    .nav[data-open="true"] { display: block; }
    .nav__list { flex-direction: column; }
    .nav__link { padding: 12px 16px; }
    .nav__sub { position: static; display: block; border: 0; padding-left: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
    /* Бегущие огни на таймлайне — украшение, при просьбе убрать движение
       точки просто стоят зажжёнными. */
    .timeline__item::before { animation: none; }
    html { scroll-behavior: auto; }
}

/* ---------- панель настройки узоров (служебное, не для эфира) ---------- */

/* Показывается только при адресе с ?nastroyka — на боевой странице сценарий
   сам ничего не делает, а эти правила ни к чему не применяются. */
.tuner {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 320px;
    z-index: 999;
    overflow-y: auto;
    padding: 18px;
    background: #14121c;
    border-left: 1px solid #443b5c;
    font: 14px/1.4 "Segoe UI", system-ui, sans-serif;
    color: #fff;
    transform: translateX(100%);
    transition: transform .2s;
}

.tuner[data-open] { transform: none; }

.tuner h2 { margin: 0 0 4px; font-size: 17px; color: var(--accent); }
.tuner__hint { margin: 0 0 16px; font-size: 12px; color: #a99cc4; text-align: left; }
.tuner label { display: block; margin: 14px 0 4px; font-size: 13px; }
.tuner b { color: var(--accent); font-variant-numeric: tabular-nums; }
.tuner input[type="range"] { width: 100%; }

.tuner select {
    width: 100%;
    padding: 5px;
    background: #241f33;
    color: #fff;
    border: 1px solid #443b5c;
    border-radius: var(--round-s);
}

.tuner__out {
    margin-top: 18px;
    padding: 12px;
    background: #0c0a14;
    border: 1px solid #443b5c;
    border-radius: var(--round-s);
    font: 12px/1.5 Consolas, monospace;
    color: var(--text-dim);
    white-space: pre-wrap;
    user-select: all;
    text-align: left;
}

.tuner button {
    width: 100%;
    margin-top: 10px;
    padding: 9px;
    background: var(--accent);
    color: var(--ink-on-accent);
    border: 0;
    border-radius: var(--round-m);
    font: 600 14px "Segoe UI", sans-serif;
    cursor: pointer;
}

.tuner button + button { background: #241f33; color: #fff; }

/* Узор глух к щелчкам, поэтому курсор-указатель ставим на карточку целиком —
   иначе не видно, что по рисунку можно щёлкнуть. */
body:has(.tuner[data-open]) .card--ornate { cursor: crosshair; }

/* Предупреждение о подрезке рисунка — видно только когда она есть. */
.tuner__warn {
    margin: 14px 0 0;
    padding: 10px;
    background: #43231f;
    border: 1px solid #a3564a;
    border-radius: var(--round-s);
    font-size: 12px;
    line-height: 1.45;
    color: #ffd9d2;
    text-align: left;
}


/* ===========================================================================
   СТРАНИЦА «ОБО МНЕ» (about-me.html)
   ===========================================================================
   Три блока: профиль-шапка (имя, титулы, контакты), биография (текст в одну
   колонку), таймлайн опыта работы (вертикальная линия с точками, как
   в оригинале — замерено по снимку живого сайта 06.08). */

/* --- Профиль-шапка -------------------------------------------------------
   🔴 Фотография Натальи НАРИСОВАНА ВНУТРИ широкой картинки-макета
   (3462x1169): слева фигура, справа пустое тёмное поле, оставленное под
   текст. Тот же случай, что уже ловили на главной, — картинка Wix это
   готовая композиция, а не иллюстрация. Поэтому она идёт подложкой,
   а текст ложится поверх её правой половины.
   В архиве выгрузки этого файла не оказалось (не забрался при сборе),
   скачан отдельно с CDN 06.08. */

/* 🗣 Е.Г. 06.08: «Давай дырку сверху уберем над плашкой — сдвинем вверх
   плашку с Натали». Между бегущей строкой и плашкой оставалась полоса
   звёздного фона от отступа секции — снят, плашка начинается сразу. */
.about-hero {
    position: relative;
    padding-top: 0;
}

/* Подложка тянется на всю высоту блока: текста может оказаться больше, чем
   высота картинки в её натуральной пропорции, и тогда низ уезжал на голый
   фон страницы (поймано на снимке). `object-fit: cover` держит фигуру
   в левой части, лишнее срезается по краям. */
/* 🗣 Е.Г. 06.08: «Растягиваем фон — плашку под Натальей на всю длину».
   Плашка идёт во всю ширину экрана, как в оригинале: без скруглений
   и без полей по бокам. Секции снят класс `shell` — базовую ширину
   держит внутренний блок с текстом. */
.about-hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Показ прижат к низу: при растяжении по высоте `cover` приближает
       картинку, и фигура срезалась по ногам (поймано на снимке). */
    object-position: center bottom;
    z-index: -1;
}

.about-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap);
    align-items: start;
    /* Базовая ширина сайта — на самом блоке текста, раз секция теперь
       во всю ширину экрана. */
    width: min(100% - 2 * var(--pad), var(--shell));
    margin-inline: auto;
    padding-block: clamp(20px, 3vw, 44px);
}

.about-hero__intro { grid-column: 2; }
.about-hero__contacts { grid-column: 2; }

.about-hero__name {
    margin: 0 0 .4em;
    font-family: var(--font-headline);
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(24px, 3.6vw, 44px);
    line-height: 1.15;
    color: var(--accent);
}

.about-hero__roles {
    margin: 0;
    font-size: clamp(13px, 1.3vw, 17px);
    line-height: 1.6;
    color: var(--text-dim);
}

/* Реквизиты и QR-код рядом, а не столбиком: столбиком блок вырастал так,
   что плашка тянулась вдвое выше картинки, и `cover` раздувал фигуру
   (замерено: масштаб 1,38, срез по бокам 821 px).
   🗣 Е.Г. 06.08: «Давай местами поменяем QR и слева что от него — данные» —
   QR слева, реквизиты справа. Порядок задан раскладкой, разметка не тронута:
   в ней сначала идут данные, потом картинка. */
.about-hero__contacts {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 18px;
}

.about-hero__qr { grid-column: 1; grid-row: 1; }
.about-hero__list { grid-column: 2; grid-row: 1; }

.about-hero__list {
    margin: 0;
    display: grid;
    gap: 14px;
    width: 100%;
}

.about-hero__list dt {
    margin: 0 0 2px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-dim);
}

.about-hero__list dd {
    margin: 0;
    font-size: clamp(14px, 1.5vw, 18px);
    line-height: 1.4;
}

.about-hero__list a { color: var(--accent); }

.about-hero__qr {
    width: clamp(90px, 10vw, 140px);
    height: auto;
    border-radius: var(--round-s);
}

/* --- Биография ------------------------------------------------------------ */

/* Биография на тёмной плашке — как в оригинале и как таймлайн ниже.
   Плашка нужна ещё и затуханию: градиент обрыва текста уходит в её фон,
   на звёздном фоне страницы он был почти незаметен. */
.about-bio {
    display: grid;
    gap: var(--gap);
    padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 48px);
    background: var(--card);
    border: 1px solid var(--card-edge);
    border-radius: var(--round-l);
}

/* 🗣 Е.Г. 06.08: «весь текст не на экране сразу. Он разворачивается
   по кнопке. Нам надо так же а не полотенце сразу».
   Свёрнутый текст обрезан по высоте, а не по числу абзацев: на оригинале
   обрыв приходится на середину второго абзаца. Низ затухает в фон плашки,
   чтобы обрыв читался как «дальше есть ещё», а не как конец текста. */
.about-bio__text {
    position: relative;
    display: grid;
    gap: 1em;
    /* 🗣 Е.Г. 06.08: «Текст внутри плашки не до конца вправо». Ограничение
       `max-width: 74ch` зажимало строку до 638 px и оставляло 313 px пустоты
       справа при отступе плашки 48 px (замерено). Ширину держит сама плашка. */
    font-size: clamp(13px, 1.3vw, 16px);
    line-height: 1.6;
    text-align: justify;
    hyphens: none;
}

.about-bio__text[data-collapsed="true"] {
    max-height: clamp(220px, 30vh, 320px);
    overflow: hidden;
}

.about-bio__text[data-collapsed="true"]::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 5em;
    background: linear-gradient(to bottom, transparent, var(--card));
    pointer-events: none;
}

.about-bio__text p { margin: 0; }

.about-bio__teachers { color: var(--text-dim); font-size: .95em; }

/* Кнопка и знак — по краям одной строки под текстом. */
.about-bio__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
}

/* Не кнопка на вид, а ссылка — как в оригинале. */
.about-bio__more {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
}

.about-bio__more:hover { color: var(--accent-soft); }

.about-bio__mark {
    width: clamp(90px, 10vw, 160px);
    height: auto;
    opacity: .8;
}

/* --- Таймлайн опыта работы ------------------------------------------------
   Вертикальная линия слева от текста, с точкой на каждой записи — образец
   снят замером живого сайта. Дата слева отдельной узкой колонкой, описание
   справа. На узком экране колонки складываются одна под другую. */

/* Сама лента — тоже сетка с теми же тремя колонками, что и у записей: линия
   кладётся в среднюю (колонку точек) одним элементом на всю высоту, поэтому
   не нужно ни считать её положение через calc(), ни тянуть между записями
   по отдельности. */
.timeline {
    /* Ширина колонки дат и промежуток сетки — одними числами, чтобы точка
       и линия считались от них и не разъезжались. */
    --timeline-col: minmax(140px, 220px);
    --timeline-gap: clamp(16px, 3vw, 32px);
    /* Промежуток между записями. Одним числом — его же протягивает через
       себя линия, соединяющая точки. */
    --timeline-row: clamp(22px, 3vw, 38px);
    position: relative;
    list-style: none;
    margin: 0;
    padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 48px);
    display: grid;
    grid-template-columns: var(--timeline-col) auto 1fr;
    /* 🗣 Е.Г. 06.08: «надо сделать отступы между событиями как в оригинале».
       Прежде по вертикали не было промежутка вовсе, записи шли вплотную.
       На оригинале между ними заметный воздух — замерено по снимку живого
       сайта: шаг между точками около четырёх межстрочных интервалов. */
    gap: var(--timeline-row) var(--timeline-gap);
    background: var(--card);
    border: 1px solid var(--card-edge);
    border-radius: var(--round-l);
}

/* 🗣 Е.Г. 06.08: «точки — они не напротив точно своих надписей, смещены ВСЕ
   вверх». Прежде точка висела на записи с жёстким `margin-top`, а дата
   и текст выравнивались сами по себе: у длинных записей расхождение росло
   (замерено: у седьмой 47 px). Теперь точка нарисована НА САМОЙ ДАТЕ —
   она всегда напротив своей надписи, какой бы длины ни был текст рядом. */
.timeline__item {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: start;
}

.timeline__period {
    position: relative;
    grid-column: 1;
    margin: 0;
    font-family: var(--font-headline);
    font-size: clamp(16px, 1.6vw, 19px);  /* в 1.2 раза, 🗣 Е.Г. 13.08 */
    color: var(--accent-soft);
}

/* Точка и линия живут в средней колонке сетки — между датой и текстом.
   Точка выровнена по центру первой строки даты (`top: .75em` — половина
   её межстрочного интервала), линия идёт от точки вниз до следующей записи.
   Оба элемента в одной колонке, поэтому по горизонтали совпадают всегда,
   при любой ширине колонки дат. */
.timeline__item::before,
.timeline__item::after {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
}

.timeline__item::before {
    content: "";
    align-self: start;
    width: 10px;
    height: 10px;
    margin-top: calc(.75em - 5px);
    border-radius: 50%;
    background: var(--text);
    box-shadow: 0 0 0 3px var(--card);
    z-index: 1;
    /* 🗣 Е.Г. 06.08: «можешь эффект сделать чтобы по очереди точки загорались
       сверху вниз в цикле? Такие бегущие огни». Каждая точка вспыхивает
       со своей задержкой — огонь пробегает сверху вниз и повторяется.
       Задержка задаётся ниже, по порядковому номеру записи. */
    /* 🗣 Е.Г. 06.08: «давай огоньки медленее сделаем раза в 2 в общем чтобы
       не отвлекали от чтения и ярче чуть». Цикл 4,2 → 8,4 с, шаг задержки
       0,3 → 0,6 с: огонь бежит спокойнее и реже возвращается. */
    animation: timeline-spark 8.4s ease-in-out infinite;
    animation-delay: var(--spark-delay, 0s);
}

/* Задержка вспышки по порядку: шаг 0,6 с, огонь бежит сверху вниз. */
.timeline__item:nth-child(1) { --spark-delay: 0s; }
.timeline__item:nth-child(2) { --spark-delay: .6s; }
.timeline__item:nth-child(3) { --spark-delay: 1.2s; }
.timeline__item:nth-child(4) { --spark-delay: 1.8s; }
.timeline__item:nth-child(5) { --spark-delay: 2.4s; }
.timeline__item:nth-child(6) { --spark-delay: 3s; }
.timeline__item:nth-child(7) { --spark-delay: 3.6s; }

/* Вспышка короткая, остальное время точка спокойная. Доли пересчитаны под
   удвоенный цикл: сама вспышка осталась той же длины по времени (≈0,75 с),
   просто пауза между пробегами стала вдвое больше. Свечение ярче прежнего —
   белое ядро и более плотный ореол. */
@keyframes timeline-spark {
    0%, 100% {
        background: var(--text);
        box-shadow: 0 0 0 3px var(--card);
    }
    3% {
        background: #fff;
        box-shadow: 0 0 0 3px var(--card),
                    0 0 12px 3px var(--accent),
                    0 0 26px 7px rgba(206, 168, 255, .7);
    }
    9% {
        background: var(--text);
        box-shadow: 0 0 0 3px var(--card);
    }
}

/* Линия тянется от центра точки до точки следующей записи. Нижний
   отрицательный отступ протягивает её через промежуток сетки — иначе
   линия обрывалась на границе записи и в промежутке зияла пустота
   (поймано на снимке после того, как отступы между записями появились). */
.timeline__item:not(:last-child)::after {
    content: "";
    align-self: stretch;
    width: 1px;
    margin-top: .75em;
    /* 🔴 Линия не доставала до следующей точки 11 px (замерено). Тянется она
       до низа своей записи, а точка следующей стоит ниже на своё смещение
       от верха (`.75em`) — его и надо добавить сверх промежутка сетки. */
    margin-bottom: calc(-1 * var(--timeline-row) - .75em);
    background: var(--text-dim);
    opacity: .35;
}

.timeline__body {
    grid-column: 3;
    display: grid;
    gap: .4em;
}

.timeline__body p {
    margin: 0;
    font-size: clamp(13px, 1.3vw, 16px);
    line-height: 1.5;
}

@media (max-width: 700px) {
    /* 🔴 На узком экране фигура занимает всю ширину плашки, и текст,
       положенный поверх, становится нечитаемым (поймано на снимке).
       Здесь картинка уходит в затемнённую подложку, а текст идёт по всей
       ширине в одну колонку. */
    .about-hero__grid { grid-template-columns: 1fr; }
    .about-hero__intro,
    .about-hero__contacts { grid-column: 1; }
    .about-hero__contacts { grid-template-columns: auto 1fr; }

    .about-hero__photo { opacity: .28; }

    /* Слой во всю ширину экрана, а не только под текстовым блоком: плашка
       теперь без полей по бокам. */
    .about-hero__grid::before {
        content: "";
        position: absolute;
        inset: 0 calc(-50vw + 50%);
        background: rgba(5, 4, 12, .55);
        z-index: -1;
    }

    /* На узком экране дата и текст встают друг под другом, а точка с линией
       уходят в узкую колонку слева. Точка по-прежнему выровнена по первой
       строке даты, линия тянется до следующей записи. */
    .timeline { grid-template-columns: 20px 1fr; }

    .timeline__item {
        grid-template-columns: 20px 1fr;
        row-gap: 6px;
    }

    .timeline__item::before { grid-column: 1; grid-row: 1; }

    .timeline__item:not(:last-child)::after {
        grid-column: 1;
        grid-row: 1 / -1;
    }
    .timeline__period { grid-column: 2; }
    .timeline__body { grid-column: 2; }
}


/* ===========================================================================
   СТРАНИЦА «КОНСУЛЬТАЦИИ» (konsultacii.html)
   ===========================================================================
   🔴 Шапка страницы — ГОТОВЫЙ МАКЕТ ЦЕЛИКОМ: фотография Натальи и надпись
   «ЭЗОТЕРИКА VS ПСИХОЛОГИЯ · доступные виды консультаций» нарисованы прямо
   внутри файла (4351x1627). Своего заголовка у секции нет и быть не должно —
   он дублировал бы нарисованный. Тот же случай, что на «Обо мне». */

/* Отступов нет ни сверху, ни снизу: картинка доходит до края секции.
   🗣 Е.Г. 06.08: «расстояние между карточкой с Натальей и следующей с текстом
   сделай меньше — дырка там большая». Снизу оставался отступ 64 px, он
   складывался с верхним у следующей секции и давал 129 px пустоты (замерено). */
.kons-hero {
    position: relative;
    padding-block: 0;
}

.kons-hero__photo {
    display: block;
    width: 100%;
    height: auto;
}

/* Вводный текст о том, как разошлись психология и эзотерика, оформлен тем же
   блоком, что биография на «Обо мне»: тёмная плашка, свёрнутый текст, ссылка
   «Читать подробнее» (🗣 Е.Г. 06.08: «надо сделать как в оригинале на подложке
   с кнопкой „Читать подробнее“ — у нас уже есть такой блок на странице ОБО МНЕ,
   скопируй стиль»). Собственных правил не нужно, работают `.about-bio*`. */


/* ===========================================================================
   СТРАНИЦА «ОБУЧЕНИЕ» (obucheniye.html)
   ===========================================================================
   🗣 Е.Г. 06.08: «„Как правило, ко мне на приём“ — этот текст идёт в первой
   верхней плашке с разворотом ПОДРОБНЕЕ, но не в той же плашке как ОБО МНЕ,
   переделай». То есть текст лежит ПОВЕРХ картинки с Натальей, а не отдельной
   плашкой ниже.

   🔴 Отличие от «Обо мне» и «Консультаций»: тамошние шапки — готовые макеты
   с нарисованным внутри текстом, поверх них верстать было нельзя. Здесь
   картинка чистая (проверено просмотром), поэтому текст ложится на неё.
   Фигура стоит справа — текст занимает левую половину. */

/* Отступов у шапки нет ни сверху, ни снизу: картинка должна доходить
   до самого края секции, иначе под ней остаётся полоса голого фона. */
/* Картинка подложкой, текст поверх неё. Высоту задаёт картинка, при раскрытии
   текста секция вырастает под него. */
/* 🗣 Е.Г. 06.08: «убери растягивание картинки под раскрытие текста
   по ЧИТАТЬ ПОДРОБНЕЕ». Высота секции закреплена пропорцией картинки
   (1920:648) и не зависит от того, свёрнут текст или раскрыт. */
.obuch-hero {
    position: relative;
    padding-block: 0;
    aspect-ratio: 1920 / 648;
}

/* Картинка и текст в одной ячейке сетки. Картинка идёт своей высотой и НЕ
   растягивается под текст (🗣 Е.Г. 06.08: «не надо тянуть картинку вместе
   с текстом, было хорошо без растягивания»). Высоту секции задаёт она,
   а раскрытый текст обязан в неё вписаться — см. прокрутку ниже. */
.obuch-hero__photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Блок вписан в высоту картинки: столбец, где текст занимает остаток, а ссылка
   «Читать подробнее» прижата к низу. Без этого раскрытый текст выталкивал
   ссылку за пределы плашки (🗣 Е.Г.: «только слово „Свернуть“ чуть вываливалось
   за плашку — надо было выше просто поднять»). */
.obuch-hero__inner {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: min(100% - 2 * var(--pad), var(--shell));
    margin-inline: auto;
    padding-block: clamp(20px, 3vw, 44px);
}

/* Левая половина — там, где на снимке пусто. Правую занимает фигура. */
.obuch-hero__text {
    width: 52%;
    display: grid;
    gap: 1em;
    font-size: clamp(13px, 1.3vw, 16px);
    line-height: 1.6;
    text-align: justify;
    hyphens: none;
}

.obuch-hero__text p { margin: 0; }

/* Свёрнутый вид: обрыв по высоте с затуханием в тёмный фон снимка. */
.obuch-hero__text[data-collapsed="true"] {
    position: relative;
    max-height: clamp(180px, 24vh, 260px);
    overflow: hidden;
}

/* 🔴 Затухания у обрыва здесь НЕТ, в отличие от плашек на других страницах.
   🗣 Е.Г. 06.08: «под текстом подложка картинки, а её там не должно быть,
   то есть вторая подложка на Наталье дополнительная». Так и было: градиент
   заливал низ почти сплошным `rgba(20,12,28,.95)` и читался тёмным пятном
   поверх фотографии. На плашках приём работает — там фон одноцветный,
   и градиент в него уходит незаметно. Поверх фотографии любая заливка
   её пачкает, поэтому обрыв оставлен чистым. */

.obuch-hero__foot { margin: 1em 0 0; }

/* На узком экране фигура занимает почти весь кадр, и текст поверх неё
   не читается — уходит под картинку на собственную тёмную подложку. */
@media (max-width: 900px) {
    /* 🔴 Первый экран собран той же карточкой, что программы ниже (🗣 Е.Г.
       13.08: «была плашка как в других картинках, но неправильная — давай
       как в других»): фон и рамка на всей секции, картинка вплотную к её
       краям сверху, текст под картинкой с внутренним отступом. Пропорция
       снята — высоту задаёт сама картинка, иначе она занимала пол-экрана. */
    .obuch-hero {
        display: block;
        aspect-ratio: auto;
        width: min(100% - 2 * var(--pad), var(--shell));
        margin-inline: auto;
        background: var(--card);
        border: 1px solid var(--card-edge);
        border-radius: var(--round-l);
        overflow: hidden;
    }

    /* Картинка возвращается в поток — иначе `position: absolute; inset: 0`
       растягивал её на всю секцию, а текст ложился поверх. Своего скругления
       не нужно: его даёт `overflow: hidden` секции. */
    .obuch-hero__photo {
        position: static;
        height: auto;
    }

    /* Текст в потоке, ПОД картинкой, внутри общей карточки — своей плашки
       у него больше нет, она была лишней (🗣 Е.Г. 13.08). */
    .obuch-hero__inner {
        position: static;
        width: auto;
        padding: clamp(16px, 4vw, 28px);
        margin-inline: 0;
    }

    .obuch-hero__text { width: 100%; }
}


/* ===========================================================================
   СТРАНИЦА «ИГРЫ» (igry.html)
   ===========================================================================
   🔴 Шапка — ГОТОВЫЙ МАКЕТ ЦЕЛИКОМ, четвёртый случай подряд: заголовок
   «ТРНСФОРМАЦИОННЫЕ ИГРЫ» (опечатка оригинала — пропущена «А»), подзаголовок
   и фотография Натальи за игровым столом нарисованы внутри файла 4343x1173.
   Своего заголовка у секции нет — он дублировал бы нарисованный. Для поисковиков
   и чтения с экрана заголовок продублирован скрытым текстом, уже без опечатки. */

/* 🔴 Файл заменён 13.08 (опечатка «ТРНСФОРМАЦИОННЫЕ» исправлена Натальей).
   В файле 4343x1173 по бокам чёрный кант — замер дал 1169 px слева, 1200 px
   справа (у нового экспорта края не совсем ровные, у старого файла было
   524/524), сам рисунок 1974. Картинка показывается шире полосы в 2.1996
   раза (4343/1974), кант уходит за края, по бокам чёрное поле секции. Так
   рисунок встаёт ровно шириной с карточкой ниже (🗣 Е.Г. 11.08). */
.igry-hero {
    position: relative;
    padding-block: 0;
    background: #000;
    overflow: hidden;
}

.igry-hero__photo {
    display: block;
    width: calc(min(100% - 2 * var(--pad), var(--shell)) * 2.1996);
    max-width: none;
    height: auto;
    /* `margin-inline: auto` не центрует элемент шире родителя — сдвигаем сами
       на половину лишней ширины. */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* 🔴 Карточка игры — НАЛОЖЕНИЕ, а не две колонки (🗣 Е.Г. 10.08: «у нас картинка
   мелкая, посмотри как в исходнике»). Замер разметки оригинала
   (`_live/pages/копия-главная-1.html`) при полосе содержимого 980:

       фотография `погружение.png`   954 x 434, скругление 20px
       надпись `Без имени-1.png`     318 x 127
       текст описания                ширина 441
       кнопки «Играть» / «Купить»    196 x 44

   Фотография занимает полосу целиком, а надпись, текст и кнопки лежат ПОВЕРХ
   неё справа, на тёмной половине снимка. Прежняя раскладка в две колонки
   ужимала фотографию вдвое: 474 px против 954 у оригинала.

   Надпись — прозрачный PNG «ТРАНСФОРМАЦИОННАЯ ИГРА XXII АРКАНА СУДЬБЫ»,
   в разметке помечена как украшение, а сам заголовок дан текстом скрыто:
   картинку не прочтёт ни поисковик, ни экранный диктор. */
.game-card {
    position: relative;
    isolation: isolate;
    border-radius: var(--round-l);
    overflow: hidden;
}

/* Фотография показана целиком, без обрезки: на снимке трое за столом,
   и `cover` срезал крайнюю фигуру (поймано на проверке). */
.game-card__photo {
    display: block;
    width: 100%;
    height: auto;
}

/* Затемнение правой половины: текст ложится на снимок, и без него буквы
   спорят с лампой и лицами. Слева прозрачно — фотография остаётся видна. */
.game-card__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgb(0 0 0 / 0) 30%,
        rgb(0 0 0 / .55) 46%,
        rgb(0 0 0 / .82) 60%);
}

/* Доля 441/954 — ширина текстового блока оригинала от ширины фотографии.
   🔴 Зазоры между надписью, текстом и кнопками сжаты (🗣 Е.Г. 10.08: «внутри
   карточки плотнее сделай весь текст, чтобы сверху и снизу дать больше
   воздуха»). Замер до правки: тело занимало 434 из 449 высоты снимка,
   воздуха сверху и снизу оставалось по 8 px. */
.game-card__body {
    position: absolute;
    top: 50%;
    right: 3.5%;
    transform: translateY(-50%);
    width: 46%;
    display: grid;
    gap: 0;
    justify-items: start;
    /* 🔴 Кегли и картинка внутри считались от ширины ОКНА (vw): карточка
       держится за --shell и перестаёт сужаться раньше, чем окно, а текст
       на vw сужался и дальше — расхождение поймано 13.08 (🗣 Е.Г.: «уменьшение
       текста происходит намного раньше, чем карточка»). Здесь то же лечение,
       что и на карточках «Направлений» (индекс, cqw от ширины плашки). */
    container-type: inline-size;
}

/* Надпись во всю ширину текстового блока — вровень с текстом под ней
   (🗣 Е.Г. 10.08: «на ширину как и текст под ней, вправо до конца»).
   На оригинале она уже текста (318 против 441), но владелец велел вровень.
   🔴 Пустые поля срезаны В САМОМ ФАЙЛЕ, а не полями в стилях. Замер
   прозрачности исходного 1097x439 показал 10 пустых строк сверху и 24 снизу
   (и по 24 с боков); пустота отъедала высоту, которой не хватало на воздух.
   Обрезано инструментом `tools/trim_logo.py`, файл стал 1049x405, буквы целы.
   Попытка убрать то же отрицательным
   полем в процентах не сработала вовсе: браузер считает такие поля от ШИРИНЫ
   родителя, а не от высоты — поймано замером, надпись осталась 184 px. */
/* 🔴 Корень возни с воздухом был здесь. Надпись — картинка, и её высота
   жёстко следует за шириной: при `width:100%` она забирала 178 px из 449,
   и любой добытый воздух возвращался обратно. Ширина осталась во всю колонку
   (🗣 Е.Г.: «вровень с текстом»), но сверху поставлен потолок высоты —
   доля ширины полосы, той же природы, что и сама карточка. Дальше картинка
   вписывается внутрь потолка и прижимается влево, буквы целы. */
.game-card__logo {
    width: 100%;
    max-height: clamp(52px, 26.5cqw, 122px);  /* 122 px на плашке 460 */
    height: auto;
    object-fit: contain;
    object-position: left center;
}

.game-card__text {
    /* Отступ от заголовка — постоянный, не резиновый (🗣 Е.Г. 13.08: побольше). */
    margin: 40px 0 0;
    font-size: clamp(13px, 3.26cqw, 15px);  /* 15 px на плашке 460, низ выровнен под телефон */
    line-height: 1.5;
    text-align: justify;
    hyphens: none;
    color: var(--yellow);
}

.game-card__foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 3.91cqw, 18px);  /* 18 px на плашке 460 */
    width: 100%;
    margin-top: clamp(10px, 3.91cqw, 18px);
}

.game-card__foot .btn { width: 100%; }

/* 🔴 На узком экране наложение всей плашки не годится: текст поверх снимка
   сжимается до нечитаемого. На снимке остаётся заголовок и текст под ним —
   справа от людей, в тёмной части кадра, там для них есть место (🗣 Е.Г.
   13.08: «тайтл справа от людей на рисунке», следом — «давай текст под
   заголовок, там вроде много места»). Кнопки одни уходят под снимок,
   внутрь карточки.
   Именные области сетки вместо одного `gap`: фото, заголовок и текст делят
   одну область «photo» (лежат друг на друге), кнопки — своя область ниже.
   `.game-card__body` раскрыт `display: contents` — он был нужен только для
   центровки на широком экране, здесь просто отдаёт детей сетке напрямую. */
@media (max-width: 900px) {
    .game-card {
        background: var(--card);
        border: 1px solid var(--card-edge);
        /* Отступ карточки больше не общий: фото до самых краёв (🗣 Е.Г. 13.08:
           «у фото есть отступ от края — убрать»), поле осталось только у кнопок. */
        padding: 0;
        display: grid;
        grid-template-areas: "photo" "text" "foot";
        /* Дырка между фото и кнопками сужена (🗣 Е.Г. 13.08: «много места
           между картой и кнопками»). */
        gap: clamp(8px, 1.5vw, 14px);
    }

    /* Фото вплотную к краям карточки — скругление даёт `overflow: hidden`
       у самой карточки (var(--round-l)), свой радиус фото больше не нужен. */
    .game-card__photo { grid-area: photo; }

    .game-card__veil {
        grid-area: photo;
        position: static;
    }

    .game-card__body { display: contents; }

    .game-card__logo {
        grid-area: photo;
        /* По центру высоты фото (🗣 Е.Г. 13.08: «тайтл на картинке отцентруем
           вертикально по отношению к картинке»). */
        align-self: center;
        justify-self: end;
        /* Высота идёт следом за шириной — потолок в `max-height` здесь мешал
           бы: при высоком отношении сторон браузер сжал бы и ширину тоже.
           Ширина сжата 13.08: «впритык везде», было 46%. */
        width: 38%;
        height: auto;
        /* Отступ справа как у кнопки «Скоро» под фото (🗣 Е.Г. 13.08). */
        margin: 0 clamp(20px, 3vw, 36px) 0 0;
        position: relative;
        z-index: 1;
    }

    /* Текст вернулся под фото, внутрь карточки — на фото остаётся только
       заголовок (🗣 Е.Г. 13.08: «текст под картинкой, тайтл оставь справа
       от картинки»). Своя ширина уже не нужна — во всю ширину карточки. */
    .game-card__text {
        grid-area: text;
        margin: 0;
        padding: 0 clamp(20px, 3vw, 36px);
        font-size: clamp(13px, 3.4vw, 15px);
    }

    .game-card__foot {
        grid-area: foot;
        padding: 0 clamp(20px, 3vw, 36px) clamp(20px, 3vw, 36px);
    }
}

/* ===========================================================================
   СТРАНИЦА «ОФФЛАЙН ИГРА» (offlayn-igra.html)
   ===========================================================================
   Собрана 2026-08-10 с оригинала `22arcana-sudby` — лендинга игры на девять
   разделов. 🗣 Е.Г.: «делаем страницу оффлайн игра, это будет с оригинальной
   WIX — ИГРАТЬ кнопка».

   🔴 Готовых макетов на странице ДВА места: шапка первого экрана и пять
   картинок раздела «С каким запросом» — там заголовок и подпись нарисованы
   внутри файла. Верстать поверх них нельзя, текст ушёл в alt и скрытый
   заголовок. Пятый и шестой случай макетов Wix подряд.

   Остальные картинки — украшения без текста: золотые шары, дерево, арки,
   лабиринт, узоры из точек. Проверено просмотром. */

/* --- 1. Первый экран ---------------------------------------------------- */

/* 🔴 Первый экран — НАЛОЖЕНИЕ: текст и кнопка лежат ПОВЕРХ макета, слева
   на тёмной половине (🗣 Е.Г. 11.08: «картинку больше делать и текст ставить
   в карточку с Натальей»). Прежде текст стоял под картинкой, а сверху висел
   отступ 65 px от `section--tight` — макет должен примыкать к бегущей строке
   вплотную, поэтому классы секции сняты.

   Картинка пересобрана: исходник 4343x1173, в оригинале показывался окном
   980x568 через `cover`, то есть по бокам срезано. Я сперва взял файл целиком
   и растянул полосой — вышло 1710x462, сплюснуто. Теперь вырезано среднее
   окно 2600x1173 (шире оригинального 2024, чтобы текст лёг на тёмную часть)
   и ужато до 1600x722. */
/* Числа вынесены в переменные, чтобы их можно было крутить ползунками
   на самой странице (`?nastroyka`, панель в `tuner.js`) — 🗣 Е.Г. 11.08:
   «если не можешь сам подогнать, давай слайдер, я подвигаю прям на экране».
   Подгонять на глаз мне запрещено законом, а владелец видит сразу. */
.ofl-hero {
    position: relative;
    isolation: isolate;
    /* Числа выставлены владельцем ползунками панели `?nastroyka`
       (🗣 Е.Г. 11.08: «вот как надо»). Замер при 1400: картинка 1379x622,
       текст от 352 до 773, запас до края 768 px. */
    /* 🔴 Ядро (заголовок с фигурой) — ровно в той же полосе, что текст ниже
       (🗣 Е.Г. 11.08: «хочу, чтобы ЯДРО было ВСЕГДА шириной как текст ниже
       на 1000 px»). Одна переменная держит И картинку, И текстовый блок —
       поэтому они не разъезжаются: раньше я двигал их порознь.
       Чёрный фон при этом идёт до краёв экрана, он на самой секции. */
    /* 🔴 Показ шире полосы в 1.325 раза: в файле по бокам чёрный кант
       (замер: слева 216 px, справа 176 из 1600), и сам РИСУНОК занимает
       1208 px. Чтобы рисунок встал шириной ровно как текст ниже, картинку
       показываем крупнее — кант уходит за края полосы, а по бокам чёрное
       поле секции (🗣 Е.Г. 11.08: «увеличь его, а поля по бокам дорисуем»).
       Файл при этом не режется — владелец запретил. */
    --hero-scale: calc(min(100% - 2 * var(--pad), var(--shell)) * 1.325);
    --hero-top: 44%;      /* откуда начинается текст, доля высоты макета */

    /* Чёрное поле по бокам от картинки — она шире полосы, кант уходит
       за края, и стык незаметен: края файла ровно (0,0,0). */
    background: #000;
}

.ofl-hero__art {
    display: block;
    width: var(--hero-scale);
    max-width: 100%;
    height: auto;
    margin-inline: auto;
}

/* 🔴 Текст прижат к НИЖНЕЙ половине макета. Замер яркости по полосам показал:
   нарисованные буквы «ИГРА» занимают 10–50 % высоты, там светлые точки до 255
   и контраст падал до 1.09 при норме 4.5. Ниже 50 % темно — светлый максимум
   всего 9. Текст поставлен туда, как и на оригинале. */
/* 🔴 Текст привязан к КАРТИНКЕ, а не к полосе `shell`. Картинка ужата
   до 81 % и стала уже полосы: на окнах 901–1200 текст вылезал за её левый
   край на 55 px и за нижний на 48 (поймано замером — на широком экране
   этого не видно). Поля отсчитываются от ширины самого макета. */
.ofl-hero__body {
    position: absolute;
    inset: var(--hero-top) 0 0;
    width: var(--hero-scale);
    max-width: 100%;
    margin-inline: auto;
    /* 🔴 Отступ считается от ШИРИНЫ КАРТИНКИ, а не от блока: блок на широком
       экране шире окна и обрезается, оттого текст ездил от +34 до −39 px
       (🗣 Е.Г. 11.08: «на широких вправо уезжает, на узких влево»).
       14 % — там, где в файле начинаются буквы «ИГРА». */
    /* Доля собственной ширины блока: он ужимается вместе с картинкой,
       когда та упирается в край экрана. Считать от `--hero-scale` нельзя —
       переменная остаётся больше того, что реально помещается, и текст
       отставал от букв до 33 px (замер на 1050). */
    padding-inline: min(13.3%, calc(var(--hero-scale) * 0.133))
                    min(5%, calc(var(--hero-scale) * 0.05));
    display: grid;
    align-content: start;
    justify-items: start;
    gap: clamp(8px, 1.1vw, 14px);
}

/* Кнопка ужимается вместе с текстом и плашкой (🗣 Е.Г. 11.08: «уменьшение
   текста в плашке и кнопки делай быстрее, чтобы не вылезало внизу»). */
.ofl-hero .btn {
    padding: clamp(7px, 0.8vw, 14px) clamp(14px, 1.8vw, 30px);
    font-size: clamp(9px, 1.1vw, 14px);
}

/* Слова целиком, без переноса по слогам (🗣 Е.Г. 11.08). */
.ofl-hero__lead,
.ofl-hero__note { hyphens: none; -webkit-hyphens: none; }

.ofl-hero__lead {
    margin: 0;
    max-width: 46ch;
    font-size: clamp(11px, 1.42vw, 15px);
    line-height: 1.55;
    text-align: justify;
    color: var(--yellow);
}

/* 🔴 На окнах 901–1200 картинка ужимается вместе с экраном, а текст с кнопкой
   упираются в свой наименьший размер — кнопка вылезала за нижний край макета
   на 48 px (поймано замером). Текст начинается выше, и запас возвращается. */
@media (max-width: 1240px) {
    .ofl-hero { --hero-top: 44%; }
    .ofl-hero__body { gap: 6px; }
}

.ofl-hero__note {
    margin: 0;
    max-width: 46ch;
    font-size: clamp(10px, 1.3vw, 14px);
    line-height: 1.5;
    text-align: justify;
}

/* --- 2. Что это за игра -------------------------------------------------- */

.ofl-intro {
    display: grid;
    gap: 16px;
    /* Зазор до карточек ниже сжат вдвое (🗣 Е.Г. 13.08). */
    margin-bottom: calc(var(--section-gap) / 2);
}

.ofl-intro p {
    margin: 0;
    font-size: clamp(14px, 1.4vw, 17px);
    line-height: 1.65;
    text-align: justify;
}

.ofl-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(16px, 2.4vw, 30px);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Три картинки-украшения — в оригинале без подписи, придумали при первой
   сборке страницы, убраны 13.08 (🗣 Е.Г.: «откуда тут подписи, в исходнике
   нет их»). Скругление задано и самой плашке: свечение `.glow-hover` рисуется
   по её контуру, и без этого сияло бы прямоугольником вокруг круглой
   картинки. */
.ofl-pillar {
    border-radius: var(--round-m);
    line-height: 0;
}

.ofl-pillar img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--round-m);
}

/* --- 3. С каким запросом (карусель) --------------------------------------- */

/* Большой кадр слева + столбик миниатюр справа, как в оригинале. Слайды —
   те же пять готовых макетов, текст нарисован внутри (см. комментарий
   в разметке), поэтому миниатюры декоративны (`alt=""`), а название кнопки
   идёт через `aria-label`. Переключение — `site.js`, здесь только показ. */
.ofl-carousel {
    display: flex;
    align-items: flex-start;
    gap: clamp(14px, 2vw, 24px);
}

.ofl-carousel__stage {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.ofl-carousel__slides {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ofl-carousel__slide {
    display: none;
}

.ofl-carousel__slide[data-active="true"] { display: block; }

.ofl-carousel__slide img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--round-m);
}

.ofl-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--card-edge);
    background: rgb(0 0 0 / .55);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background .16s, border-color .16s;
}

.ofl-carousel__arrow:hover { background: rgb(0 0 0 / .78); border-color: var(--accent); }

.ofl-carousel__arrow--prev { left: 14px; }
.ofl-carousel__arrow--next { right: 14px; }

.ofl-carousel__thumbs {
    flex: 0 0 auto;
    width: clamp(90px, 12vw, 150px);
    display: grid;
    gap: clamp(8px, 1vw, 14px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ofl-carousel__thumbs button {
    display: block;
    width: 100%;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--round-s);
    overflow: hidden;
    cursor: pointer;
    opacity: .55;
    transition: opacity .16s, border-color .16s;
}

.ofl-carousel__thumbs button:hover { opacity: .8; }

.ofl-carousel__thumbs button[aria-current="true"] {
    opacity: 1;
    border-color: var(--accent);
}

.ofl-carousel__thumbs img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 700px) {
    .ofl-carousel { flex-direction: column; }

    .ofl-carousel__thumbs {
        width: 100%;
        grid-auto-flow: column;
        grid-auto-columns: 72px;
        overflow-x: auto;
    }
}

/* --- 4. Что даёт игра ---------------------------------------------------- */

.ofl-gives {
    display: grid;
    /* Три в ряд, как «Кому подходит данный формат» (🗣 Е.Г. 13.08), было 2. */
    grid-template-columns: repeat(3, 1fr);
    /* Втрое меньше (🗣 Е.Г. 13.08), было clamp(20px, 3vw, 38px). */
    gap: clamp(7px, 1vw, 13px);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Карточка целиком — общий вид `.card` (фон, рамка, скругление), как на
   «Консультациях» (🗣 Е.Г. 13.08: «как в исходнике — картинка внутри
   карточки и под ней текст», было — картинка сама по себе и текст поверх
   фона страницы, без общей рамки). */
.ofl-give {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--card-edge);
    border-radius: var(--round-l);
    overflow: hidden;
}

.ofl-give__art {
    display: block;
    width: 100%;
    height: auto;
}

/* По центру, золотом, кегль меньше заголовка раздела, строки плотнее
   (🗣 Е.Г. 13.08: «как в исходнике»). */
.ofl-give__title {
    margin: 16px 16px 0;
    font-family: var(--font-headline);
    font-weight: 500;
    font-size: clamp(13px, 1.2vw, 16px);
    line-height: 1.1;
    text-transform: uppercase;
    text-align: center;
    color: var(--yellow);
}

.ofl-give__text {
    margin: 8px 16px 16px;
    font-size: clamp(13px, 1.3vw, 16px);
    line-height: 1.3;
    text-align: center;
    color: var(--text-dim);
}

/* --- 5. Как проходит игра ------------------------------------------------ */

/* Подложка во всю ширину экрана — тот же приём, что на «Обо мне»
   (`.about-hero__grid::before`): слой шире плашки уводится к краям окна
   отрицательным poлем `calc(-50vw + 50%)`, сама разметка остаётся
   в пределах `--shell` (🗣 Е.Г. 13.08: «подложка на всю длину, как
   в оригинале»). Картинка слева, инструкция справа с разделителями между
   шагами. */
.ofl-steps {
    position: relative;
    display: grid;
    grid-template-columns: 0.75fr 1fr;
    align-items: center;
    gap: clamp(24px, 4vw, 50px);
    padding: clamp(24px, 4vw, 48px) 0;
}

.ofl-steps::before {
    content: "";
    position: absolute;
    inset: 0 calc(-50vw + 50%);
    /* Сплошной чёрный, не полупрозрачный `--card» — чтобы слиться с тёмным
       кантом самой картинки, а не просвечивать фоном страницы (🗣 Е.Г. 13.08). */
    background: #000;
    z-index: -1;
}

.ofl-steps__art {
    /* Растяжка на всю высоту строки давала перекос — сверху впритык,
       снизу дыра. Возврат к естественной пропорции, по центру строки
       (🗣 Е.Г. 13.08: «отцентровать вертикально»). */
    width: 100%;
    height: auto;
    border-radius: var(--round-m);
}

.ofl-steps__list {
    display: grid;
    gap: clamp(8px, 1vw, 12px);  /* сжато 13.08, было 18-28 */
    margin: 0;
    padding: 0;
    list-style: none;
}

.ofl-step {
    display: grid;
    gap: 2px;
    padding-bottom: clamp(8px, 1vw, 12px);  /* сжато 13.08, было 18-28 */
    /* Разделитель между шагами, кроме последнего — в оригинале тонкая
       линия, тающая по краям. */
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, transparent, var(--card-edge) 25%, var(--card-edge) 75%, transparent) 1;
}

.ofl-step:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.ofl-step__num {
    margin: 0;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: clamp(30px, 3.2vw, 38px);  /* вдвое, 🗣 Е.Г. 13.08 */
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--yellow);
}

.ofl-step__text {
    margin: 0;
    font-size: clamp(15px, 1.6vw, 19px);
    line-height: 1.3;  /* сжато 13.08, было 1.6 */
    text-align: justify;
}

/* --- 6. Почему мне доверяют ---------------------------------------------- */

/* Раздел переведён на общий компонент `.timeline` (см. «Обо мне», раздел
   «Опыт работы») — тот же вертикальный ряд с пересветом точек (🗣 Е.Г.
   13.08). Своих стилей здесь больше нет, `.ofl-trust*` был удалён вместе
   с разметкой. */

/* --- 7. Чем уникальна игра ----------------------------------------------- */

/* 🔴 Общая тёмная плашка под рисунок И текст разом — не только под рисунком
   (🗣 Е.Г. 13.08, сказано трижды: «ПЛАШКУ ПОД РИСУНОК И ТЕКСТ», «ТЁМНУЮ
   ПЛАШКУ», «РАСТЯГИВАЮЩУЮСЯ СНИЗУ КОГДА Я ЖМУ ЧИТАТЬ ПОДРОБНЕЕ»). Растяжка
   снизу — не отдельный код: текст лежит в обычном потоке ВНУТРИ плашки,
   при разворачивании блок становится выше — и плашка вместе с ним, само
   собой, без анимации и лишней логики. */
.ofl-uniq {
    display: grid;
    grid-template-columns: 1fr 0.75fr;
    align-items: stretch;
    gap: clamp(24px, 4vw, 50px);
    padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 48px);
    background: var(--card);
    border: 1px solid var(--card-edge);
    border-radius: var(--round-l);
}

.ofl-uniq__col { display: grid; gap: clamp(24px, 4vw, 48px); }

/* 🔴 Кнопка «Читать подробнее» тонула в общем зазоре колонки (24-48px) —
   поле в 2px на самой кнопке тонуло на его фоне, дело было не в нём
   (🗣 Е.Г. 13.08: «далеко, ты полчаса возишься»). Гасим родительский gap
   тем же числом через отрицательное поле, добавляем нужные 4px сверху. */
.ofl-uniq__foot {
    margin-top: calc(-1 * clamp(24px, 4vw, 48px) + 4px);
}

.ofl-uniq__plate {
    border-radius: var(--round-m);
    overflow: hidden;
}

.ofl-uniq__plate img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ofl-uniq__body {
    position: relative;
    display: grid;
    gap: 14px;
}

.ofl-uniq__body p {
    margin: 0;
    font-size: clamp(13px, 1.3vw, 16px);
    line-height: 1.65;
    text-align: justify;
}

/* Свёрнуто по умолчанию, разворачивается кнопкой «Читать подробнее»
   (`.about-bio__more`, слушает `site.js`). 🔴 Обрезка по высоте в пикселях
   (clamp, потом фиксированные 150px) дважды давала дыру перед кнопкой:
   рез приходился на середину межстрочного интервала, и пустая полоска
   строки оставалась видна (🗣 Е.Г. 13.08, после второго исправления числом:
   «сделай по-другому»). Корень был в способе, не в числе — обрезка по
   пикселям вообще не знает, где кончаются строки. Взамен показан только
   первый абзац целиком, остальное скрыто: обрыва на полуслове нет никогда,
   при любой ширине и любом кегле. */
.ofl-uniq__body[data-collapsed="true"] > :not(:first-child) {
    display: none;
}

.ofl-uniq__list {
    margin: 0;
    padding-left: 1.2em;
    display: grid;
    gap: 6px;
    font-size: clamp(13px, 1.3vw, 16px);
    line-height: 1.5;
    color: var(--yellow);
}

/* Пять граней с круглыми узорами. 🔴 Исходники — золотые точки на БЕЛОМ
   фоне (не прозрачном), на тёмной странице торчал сплошной белый диск
   вместо золотого свечения (🗣 Е.Г. 13.08: «почему круги белые, надо
   нормальными»). Белый фон вырезан в прозрачность инструментом по цвету
   (порог по яркости), пять файлов картинок кругов перезаписаны на месте. */
.ofl-facets {
    display: grid;
    gap: clamp(16px, 2.2vw, 26px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ofl-facet {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: clamp(16px, 2.4vw, 28px);
}

/* Узор перекрашен в точный цвет #9c7a21 (🗣 Е.Г. 13.08) — сама картинка,
   не фильтром: фильтр менял бы этот цвет непредсказуемо. Прозрачность
   взята из яркости оригинала (силуэт узора), цвет один и тот же везде.
   🔴 Цифры в файле нет — проверено по пикселям, в оригинале был другой
   файл. Цифра — свой элемент `.ofl-facet__num`, лежит НАД кругом
   (`position:absolute`, а не обычным текстом рядом, отсюда был наезд
   на текст справа). */
.ofl-facet__ring {
    position: relative;
    width: clamp(72px, 9vw, 123px);
    line-height: 0;
}

.ofl-facet img {
    width: 100%;
    height: auto;
    transition: filter .2s;
}

.ofl-facet:hover img {
    filter: brightness(1.35);
}

.ofl-facet__num {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 40px);
    color: #e6b84a;  /* ярче кольца, 🗣 Е.Г. 13.08 */
}

.ofl-facet p {
    margin: 0;
    font-size: clamp(13px, 1.3vw, 16px);
    line-height: 1.6;
    text-align: justify;
    transition: color .2s;
}

.ofl-facet:hover p { color: var(--yellow); }

/* --- 8. Кому подходит ---------------------------------------------------- */

.ofl-fit__lead {
    margin: 0 0 calc(var(--section-gap) / 2);
    font-size: clamp(16px, 1.7vw, 20px);  /* крупнее, 🗣 Е.Г. 13.08 */
    line-height: 1.3;  /* вдвое меньше было 1.65, 🗣 Е.Г. 13.08 */
    text-align: justify;
    color: var(--yellow);
}

/* Отступ снизу равен отступу сверху (🗣 Е.Г. 13.08: «одинаковое расстояние
   как сверху»), было вдвое больше снизу. */
.ofl-fit__sub {
    margin: 0 0 calc(var(--section-gap) / 2);
    font-family: var(--font-headline);
    font-weight: 500;
    font-size: clamp(18px, 2.2vw, 28px);
    text-transform: uppercase;
    text-align: center;
    color: var(--accent);
}

.ofl-fit {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Тот же зазор, что у карточек «Что даёт эта игра» выше (🗣 Е.Г. 13.08). */
    gap: clamp(7px, 1vw, 13px);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Та же карточка, что у «Что даёт эта игра» — фон, рамка, скругление,
   картинка вплотную к краям сверху (🗣 Е.Г. 13.08: «карточки как выше
   на странице»). */
.ofl-fit__item {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--card-edge);
    border-radius: var(--round-l);
    overflow: hidden;
}

.ofl-fit__item img {
    display: block;
    width: 100%;
    height: auto;
}

.ofl-fit__item p {
    margin: 16px 16px;
    font-size: clamp(13px, 1.3vw, 16px);
    line-height: 1.55;
    text-align: center;
}

/* --- 9. Формат участия --------------------------------------------------- */

.ofl-join {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(12px, 1.8vw, 20px);
}

/* --- Узкий экран ---------------------------------------------------------- */

/* 🔴 Наложение держится только до 1000 px. Ниже картинка ужимается вместе
   с окном, а текст с кнопкой упираются в свой наименьший размер: при 901
   кнопка вылезала за нижний край на 17 px, а текст задевал нарисованные буквы
   и контраст падал до 2.5 при норме 4.5 (поймано замером). Складываем раньше. */
@media (max-width: 1000px) {
    /* Текст и кнопка под картинкой — в той же полосе, что нижний текст
       (🗣 Е.Г. 11.08). Прежде поля были нулевые, и текст лепился к краям. */
    /* 🔴 Ширина — по фигуре Натальи, а не по всей полосе (🗣 Е.Г. 11.08,
       обвёл красным на снимке). Замер яркости по столбцам файла: фон чёрный
       до 37 % и после 89 % ширины, между ними фигура со столом. */
    .ofl-hero__body {
        position: static;
        /* Края — ровно по рисунку: в файле он занимает 216..1424 из 1600,
           то есть 13.5 %..89 %. Прежние 62 % при отступе 21 % остались
           от старой раскладки и были уже рисунка (замер: слева +49,
           справа −39 при окне 651). */
        width: 75.5%;
        margin-inline: 13.5% auto;
        padding-inline: 0;
        /* Втрое меньше обычного отступа (🗣 Е.Г. 11.08). */
        padding-block: calc(var(--section-gap) / 3);
        gap: clamp(14px, 2.4vw, 22px);
    }
    .ofl-hero__lead,
    .ofl-hero__note { max-width: none; }

    .ofl-pillars { grid-template-columns: 1fr; }
    .ofl-gives { grid-template-columns: 1fr; }
    .ofl-fit { grid-template-columns: repeat(2, 1fr); }
    .ofl-steps,
    .ofl-uniq { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .ofl-fit { grid-template-columns: 1fr; }
    .ofl-facet { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .ofl-facet p { text-align: center; }
}

/* ===========================================================================
   СТРАНИЦА «КОНТАКТЫ» (contacty.html)
   ===========================================================================
   Собрана 2026-08-13. Фотография — чистый кадр без текста (проверено
   просмотром), заголовок и подписи свои. Мессенджер один — Telegram,
   по закону БЕТОНа, WhatsApp с присланного скрина не заводили
   (🗣 Е.Г. 13.08: «делаем как в бетоне и как в подвале»). */

/* Секция без верхнего отступа — плашка вплотную к бегущей строке,
   дыры между ними быть не должно (🗣 Е.Г. 13.08). */
.contact { padding-top: 0; }

.contact__title {
    text-align: left;
    margin-bottom: calc(var(--section-gap) / 2);
}

/* 🔴 Фото — подложка ВСЕЙ плашки, а не блок рядом с текстом (🗣 Е.Г.
   13.08: «фотка должна быть подложкой для карточки», «ставь на всю
   ширину»). Тот же приём, что у `.about-hero__photo` на «Обо мне»:
   `position: absolute` во весь `.contact__layout`, текст поверх.
   Полноширинная плашка — `.contact` без класса `shell`, ширину держит
   только внутренний `.contact__col`. */
.contact__layout {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #000;
}

.contact__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: -2;
}

/* Без затемнения — фото само по себе тёмное (🗣 Е.Г. 13.08: «не затемняй
   фото»). Не `shell` (тот центрируется целиком): левый край держит та же
   формула, что и левое поле шелла, потолок ширины не даёт залезть
   на фигуру справа (🗣 Е.Г. 13.08: «сдвинь данные влево по границу сайта,
   не должны лезть на фото»). */
.contact__col {
    display: grid;
    align-content: start;
    gap: clamp(16px, 2.4vw, 26px);
    padding-block: clamp(32px, 5vw, 64px);
    padding-left: max(var(--pad), calc((100% - var(--shell)) / 2));
    max-width: 850px;  /* правый край почти до фото, 🗣 Е.Г. 13.08 */
}

/* Адреса и мессенджеры/соцсети/почта — рядом, не друг под другом.
   Своей плашки у блока больше нет — общий тёмный фон уже даёт контраст. */
.contact__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(16px, 2.4vw, 28px);
}

.contact__block {
    display: grid;
    gap: 8px;
    align-content: start;
}

.contact__side {
    display: grid;
    gap: 12px;
    align-content: start;
}

.contact__row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.contact__label {
    margin: 0;
    font-family: var(--font-headline);
    font-weight: 500;
    font-size: clamp(14px, 1.4vw, 16px);
    text-transform: uppercase;
    color: var(--accent);
}

.contact__addr {
    margin: 0;
    font-size: clamp(13px, 1.3vw, 15px);
    color: var(--text-dim);
}

.contact__icon {
    display: inline-flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    transition: background .16s;
}

.contact__icon:hover { background: rgba(206, 168, 255, .22); }

.contact__icon img { width: 20px; height: 20px; }

.contact__mail {
    color: var(--text);
    text-decoration: underline;
    font-size: clamp(13px, 1.3vw, 15px);
}

.contact__mail:hover { color: var(--accent-soft); }

.contact-form {
    display: grid;
    gap: 12px;
}

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.contact-form__field {
    display: grid;
    gap: 5px;
    font-size: clamp(13px, 1.3vw, 15px);
    color: var(--text-dim);
}

.contact-form__field input,
.contact-form__field textarea {
    padding: 9px 13px;
    border-radius: var(--round-m);
    border: 1px solid var(--card-edge);
    background: rgba(255, 255, 255, .04);
    color: var(--text);
    font: inherit;
    resize: vertical;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.contact-form .btn { justify-self: start; }

@media (max-width: 900px) {
    .contact__grid { grid-template-columns: 1fr; }
    .contact-form__row { grid-template-columns: 1fr; }
    .contact__col { max-width: none; }
}