/* =========================
   0. БАЗА И ПЕРЕМЕННЫЕ
   ========================= */
html {
    box-sizing: border-box;
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

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

:root {
    /* Цвета текста */
    --color-text-main: #ffffff;
    --color-text-muted: rgba(255, 255, 255, 0.6);
    --color-accent: #ccbc9a;

    /* Фоны секций */
    --bg-hero-overlay: #4e4e40;
    --bg-intro-top: #4e4e40;
    --bg-intro-bottom: #36332c;
    --bg-slovo: #36332c;
    --bg-groups: #292626;
    --bg-poem-1: #2e2b2b;
    --bg-poem-2: #3b3a38;
    --bg-memory: #36332c;
    --bg-menu: #201f1f;

    /* Отступы и размеры */
    --section-padding-y: 5rem;

    /* 80px */
    --section-padding-x: 3.125rem;

    /* 50px */
    --grid-gutter: 2.5rem;

    /* 40px */
    --radius-image: 0.375rem;

    /* 6px */
}

/* =========================
   1. БАЗОВЫЕ СТИЛИ
   ========================= */
body {
    margin: 0;
    background-color: #292626;
    color: var(--color-text-main);
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.0625rem;

    /* 17px */
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-image);
}

a {
    color: var(--color-text-main);
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

a:hover,
a:focus,
a:active {
    color: var(--color-accent);
    text-decoration-color: var(--color-accent);
}

@media (max-width: 1199px) {
    html,
    body {
        overflow-x: hidden;
    }
}

/* =========================
   HERO: заголовок и подзаголовок
   ========================= */
.heading-1 {
    font-family: "Forum", serif;
    font-weight: 400;
    font-size: clamp(2.8rem, 7vw, 9rem);
    line-height: 90%;
    color: #FFE09D;
    margin-bottom: 02rem;

    /* ← уменьшили расстояние */
}

.hero-subtitle {
    font-family: "Inter", sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 2.4vw, 1.6rem);
    line-height: 1.3;
    color: #E2E2E2;
    margin-top: 0.2rem;

    /* ← минимальный аккуратный отступ */
}

/* H3 — Forum 70px / 110% */
h3,
.heading-3 {
    font-family: "Forum", "Times New Roman", serif;
    font-weight: 400;
    color: var(--color-accent);
    font-size: clamp(2.4rem, 4vw, 5.2rem);

    /* 32–70px */
    line-height: 1.1;
    margin: 0 0 1rem;
}

/* H4 — Inter 28px / 120% */
h4,
.heading-4 {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 400;
    color: var(--color-accent);
    font-size: 1.75rem;

    /* 28px */
    line-height: 1.2;
    margin: 0 0 1rem;
}

p {
    margin: 0 0 1.5rem;
    grid-column-start: 8;
}

/* Основной текст — Inter Light 17px / 160% */
.body-text {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 300;
    font-size: 1.0625rem;
    line-height: 1.6;
}

/* Подписи к фото — Inter Light 14px / 140% */
.caption {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 300;
    font-size: 0.875rem;

    /* 14px */
    line-height: 1.4;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
}

/* Выделенные фразы / крупные цитаты — Cactus 32px / 130% */
.highlight-text {
    font-family: "Cactus Classic Serif", "Times New Roman", serif;
    font-weight: 300;
    font-size: 1.7rem;

    /* 32px */
    line-height: 1.3;
    color: var(--color-accent);
}

/* Стихи и переводы — Cactus 20px / 160% */
.poem {
    font-family: "Cactus Classic Serif", "Times New Roman", serif;
    font-weight: 400;
    font-size: 1.25rem;

    /* 20px */
    color: var(--color-accent);
    white-space: pre-line;
}

/* Имя автора и время чтения — Inter Regular 16px / 140% */
.meta {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 400;
    font-size: 1rem;

    /* 16px */
    line-height: 1.4;
    color: var(--color-text-main);
}

/* =========================
   3. СЕКЦИИ И СЕТКА
   ========================= */
.section {
    padding: var(--section-padding-y) var(--section-padding-x);
    position: relative;
}

/* HERO */
.section--hero {
    min-height: 100vh;
    display: flex;
    justify-content: center;

    /* по горизонтали */
    align-items: center;

    /* по вертикали */
    text-align: center;
    background-image: url("/projects/most/images/executed_renaissance/cover.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-content {
    max-width: 80%;
    margin: 12vh auto 0;

    /* чуть ниже центра */
}

.hero-subtitle {
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 300;
    font-size: clamp(1.2rem, 5vw, 2rem);
    line-height: 1.4;
    color: var(--color-text-main);
}

/* HERO — блок автора */
.hero-author {
    margin-top: 4rem;

    /* отступ ниже заголовка */
    align-items: center;
    row-gap: 2rem;
}

.hero-author__photo {
    width: 120px;
    height: 120px;
    border-radius: 30px;
    object-fit: cover;
    display: block;
}

.hero-author__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-author__name {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1.25rem;

    /* 20px */
    font-weight: 400;
    color: var(--color-text-main);
}

.hero-author__date {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1rem;

    /* 16px */
    color: var(--color-text-muted);
    margin-top: 0.4rem;
}

.hero-author__reading {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.hero-author__clock {
    width: 28px;
    height: 28px;
    opacity: 0.6;
}

.hero-author__time {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1rem;

    /* 16px */
    color: var(--color-text-main);
}

@media (max-width: 767px) {
    .hero-author__reading {
        justify-content: flex-start;
    }
}

/* Фоны секций */
.section--intro.section--intro-top {
    background-color: var(--bg-intro-top);
}

.section--intro.section--intro-bottom {
    background-color: var(--bg-intro-bottom);
}

.section--slovo {
    background-color: var(--bg-slovo);
}

.section--groups,
.section--jalovyj,
.section--hvyljovyj,
.section--kurbas,
.section--kulish,
.section--johansen,
.section--avangard,
.section--neoklassicizm,
.section--intellektualnyj-roman,
.section--bojchukisty {
    background-color: var(--bg-groups);
}

.section--memory {
    background-color: var(--bg-memory);
}

/* Карточки со стихами */
.poem-card-1 {
    background-color: var(--bg-poem-1);
}

.poem-card-2 {
    background-color: var(--bg-poem-2);
}

/* Блок с оригиналом и переводом Хвылевого */
.poem-block {
    border-radius: 30px;
    padding: 3rem;
    margin-top: 3rem;
}

.poem-block__inner {
    display: flex;
    gap: 2.5rem;
}

.poem-block__card {
    flex: 1 1 0;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.25);
}

.poem-block__translator {
    margin-top: 2rem;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

/* до 1199px просто уменьшаем отступы, но оставляем строки */
@media (max-width: 1199px) {
    .poem-block {
        padding: 1.5rem;
    }

    .poem-block__card {
        padding: 2rem;
    }
}

/* а вот здесь уже реально переключаемся в колонку — с 600px и ниже */
@media (max-width: 768px) {
    .poem-block__inner {
        flex-direction: column;
        gap: 2rem;

        /* можешь подправить по ощущениям */
    }
}

/* 12-колоночная сетка */
.grid-12 {
    display: grid;
    gap: var(--grid-gutter);
}

/* XS: 0–767px — 2 колонки (логика внутренняя, но по факту используем как 1) */
.grid-12 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* SM: 768–991px — 6 колонок */
@media (min-width: 768px) and (max-width: 991px) {
    .grid-12 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* MD+LG: 992px+ — 12 колонок */
@media (min-width: 1200px) {
    .grid-12 {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }
}

/* Базовый helper для колонок */
.col {
    grid-column: 1 / -1;
}

/* span-ы на планшете */
@media (min-width: 768px) and (max-width: 991px) {
    .col-sm-3 {
        grid-column: span 3;

        /* половина из 6 */
    }

    .col-sm-6 {
        grid-column: span 6;

        /* вся ширина */
    }
}

/* span-ы на десктопе */
@media (min-width: 1200px) {
    .col-lg-3 {
        grid-column: span 3;

        /* 1/4 */
    }

    .col-lg-4 {
        grid-column: span 4;

        /* 1/3 */
    }

    .col-lg-6 {
        grid-column: span 6;

        /* 1/2 */
    }

    .col-lg-8 {
        grid-column: span 8;

        /* 2/3 */
    }

    .col-lg-12 {
        grid-column: span 12;

        /* вся ширина */
    }
}

/* ЛОГОТИП ВВЕРХУ СЛЕВА */
.logo-link {
    position: absolute;
    top: 1.5rem;
    left: var(--section-padding-x);

    /* тот же внутренний отступ, что у секций */
    display: inline-flex;
    align-items: center;
    text-decoration: none;

    /* убираем подчеркивание */
    z-index: 1000;

    /* чтобы логотип был поверх контента */
}

.logo-image {
    height: 1.7rem;

    /* можно менять под размер твоего svg */
    width: auto;
    border-radius: 0;
    opacity: 80%;

    /* переопределяем общий border-radius для img */
}

/* =========================
   4. КАРТИНКИ
   ========================= */
.image-block {
    overflow: visible;

    /* не обрезать изображение */
    width: 100%;

    /* блок занимает всю ширину родителя */
    display: flex;

    /* изображение + подпись */
    flex-direction: column;
    gap: 0.5rem;

    /* расстояние между картинкой и подписью */
}

.image-block img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-image);
}

/* =========================
   5. ЛЕЙАУТ + БОКОВОЕ МЕНЮ
   ========================= */
/* mobile-first */
/* На десктопе — контент + меню справа */
@media (min-width: 1200px) {
    .layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 14%;
        min-height: 100vh;
    }
}

/* Скрытый чекбокс для мобильного меню */
.toc-toggle-checkbox {
    display: none;
}

/* Кнопка "Содержание" — только на SM и ниже */
.toc-toggle-button {
    position: fixed;
    right: 1.5rem;
    top: 1rem;

    /* то же расстояние, что у логотипа */
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    border: 1px solid var(--color-accent);
    background-color: rgba(32, 31, 31, 0.9);
    color: var(--color-text-main);
    font-family: "Inter", sans-serif;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    z-index: 1100;
    backdrop-filter: blur(6px);
}

@media (min-width: 1200px) {
    .toc-toggle-button {
        display: none;
    }
}

/* Боковое меню — десктоп */
@media (min-width: 1200px) {
    .side-menu {
        background-color: var(--bg-menu);
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
        padding: 1.5rem 1.25rem;
        padding-top: 3rem;
    }
}

@media (max-width: 1199px) {
    .side-menu {
        position: fixed;
        top: 0;
        right: 0;

        /* теперь всегда «прижато» к правому краю */
        bottom: 0;
        width: 80%;
        max-width: 320px;
        background-color: var(--bg-menu);
        padding: 2rem 1.5rem;
        transform: translateX(100%);

        /* полностью за экраном, но без влияния на ширину страницы */
        transition: transform 0.3s ease;
        z-index: 1050;
        overflow-y: auto;
    }

    #toc-toggle:checked ~ .side-menu {
        transform: translateX(0);
    }
}

/* -------------------------------
   OVERLAY WHEN SIDE MENU IS OPEN
   ------------------------------- */
@media (max-width: 1199px) {
    .toc-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 1040;

        /* темнее страницы, но ниже меню */
    }

    #toc-toggle:checked ~ .toc-overlay {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (min-width: 1200px) {
    .toc-overlay {
        display: none;
    }
}

/* Список меню — базово */
.side-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Список меню — на мобайле отступ сверху 100px */
@media (max-width: 1199px) {
    .side-menu__list {
        padding-top: 100px;
    }
}

/* Улучшение мобильных пунктов меню */
@media (max-width: 767px) {
    /* Шрифт: делаем заметно крупнее (20–22px) */
    .side-menu__link {
        font-size: 1.25rem;

        /* ~20px */
        line-height: 1.45;
        padding: 0.5rem 0;

        /* кликабельная зона сверху/снизу */
        display: block;
    }

    /* Главные пункты — чуть крупнее */
    .side-menu__link--main {
        font-size: 1.35rem;

        /* ~22px */
        font-weight: 800;
    }

    /* Подпункты на мобайле: тоньше, но кликабельнее */
    .side-menu__link--sub {
        font-size: 1.2rem;

        /* ~19px */
        font-weight: 300;
    }

    /* Чуть уменьшим вертикальные промежутки между пунктами */
    .side-menu__item + .side-menu__item {
        margin-top: 1rem;
    }
}

/* Заголовок внутри бокового меню */
.side-menu__title {
    font-family: "Cactus Classic Serif", "Times New Roman", serif;
    font-weight: 400;
    font-size: 1.2rem;

    /* 22px */
    line-height: 1.25;
    color: var(--color-accent);
    margin-bottom: 1.75rem;
}

/* Расстояние между пунктами */
.side-menu__item + .side-menu__item {
    margin-top: 1.25rem;
}

/* Ссылки меню — базовый стиль (увеличено для мобайла) */
.side-menu__link {
    font-family: "Inter", system-ui, sans-serif;

    /* комфортный размер меню — 18–20px */
    font-size: clamp(1.125rem, 2.7vw, 1.25rem);
    line-height: 1.45;
    color: var(--color-text-main);
    text-decoration: none;
    transition: color 0.2s ease;
    font-weight: 400;
    position: relative;

    /* ← добавить сюда */
}

.side-menu__link:hover,
.side-menu__link:focus {
    color: var(--color-accent);
}

/* Главные пункты меню: В начало, О проекте, Дом «Слово», Люди и тексты, Память */
.side-menu__link--main {
    font-size: 1.1rem;
    font-weight: 800;

    /* стало жирнее на 2 шага */
}

/* Подпункты: делаем тоньше + сохраняем «отступы с переносами» */
.side-menu__link--sub {
    display: block;
    font-weight: 200;

    /* стало тоньше на 1 шаг */
}

/* Активный пункт */
.side-menu__link.active {
    color: var(--color-accent);

    /* подчёркивание активного, но не переезжает в 800 */
}

/* Адаптация по высоте */
@media (max-height: 900px) {
    .side-menu__link {
        font-size: 0.875rem;
    }

    .side-menu__item + .side-menu__item {
        margin-top: 1rem;
    }
}

@media (max-height: 750px) {
    .side-menu__link {
        font-size: 0.8rem;
    }

    .side-menu__item + .side-menu__item {
        margin-top: 0.8rem;
    }
}

@media (max-height: 780px) {
    .side-menu__item--sub {
        display: none;
    }
}

/* =========================
   6. INTRO-БЛОКИ
   ========================= */
.div-intro {
    display: flex;
    justify-content: space-between;
}

@media (max-width: 899px) {
    .div-intro {
        flex-direction: column;
        gap: 2rem;
    }
}

/* lead-текст */
.lead {
    margin: 0;
    font-weight: 300;
    font-family: "Inter", sans-serif;
    font-size: 1.4rem;
    line-height: 1.45;
}

/* контейнер для пары .div-half */
.column-intro {
    display: flex;
    gap: 4rem;
}

/* элементы-«половинки» */
.div-half {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

/* десктоп: две колонки рядом */
@media (min-width: 1200px) {
    .column-intro {
        flex-direction: row;
    }

    .div-half {
        flex: 1 1 0;
    }
}

/* ниже 992px: половины вертикально */
@media (max-width: 1199px) {
    .column-intro {
        flex-direction: column;
    }

    .div-half {
        width: 100%;
    }
}

/* =========================
   X. АДАПТИВНЫЕ ПЕРЕМЕННЫЕ
   ========================= */
/* На устройствах уже 992px уменьшаем внутренние отступы секций */
@media (max-width: 1199px) {
    :root {
        --section-padding-y: 4rem;

        /* сверху/снизу */
        --section-padding-x: 1rem;

        /* слева/справа */
    }
}

/* =========================
   SPACE — универсальные вертикальные отступы
   ========================= */
.space-8 {
    height: clamp(3rem, 12vw, 8rem);
}

.space-6 {
    height: clamp(2.5rem, 9vw, 6rem);
}

.space-4 {
    height: clamp(1.5rem, 6vw, 4rem);
}

.space-2 {
    height: clamp(1rem, 3vw, 2rem);
}

/* =========================
   7. КОЛОНКИ ВНУТРИ .div-80
   ========================= */
.columns {
    width: 100%;
    display: flex;
    gap: 3rem;
    flex-direction: row;

    /* на десктопе — в строку */
}

/* ниже 992px — вертикально */
@media (max-width: 1199px) {
    .columns {
        flex-direction: column;
    }
}

/* странный селектор hide оставляю как есть, если Pinegrow его использует */
hide {
    width: 20%;
}

hide {
    width: 20%;
}

/* =========================
   8. СЕКЦИЯ "ДОМ «СЛОВО»"
   ========================= */
/* базовая сетка: mobile-first — всё на всю ширину */
.slovo-grid {
    row-gap: 0.4rem;

    /* строки заголовка чуть ближе друг к другу */
}

/* по умолчанию (до 992px) — элементы занимают всю ширину (1 колонку сетки) */
.slovo-heading-line1,
.slovo-heading-line2,
.slovo-heading-line3,
.slovo-text,
.slovo-image {
    grid-column: 1 / -1;
}

/* заголовки "Дом «Слово»" — уплотнённая межстрочка, без доп. margin */
.slovo-heading {
    line-height: 1.05;
    margin: 0;
}

/* отступ ПОСЛЕ группы заголовков — через текстовый блок */
.slovo-text {
    margin-top: 3rem;
}

/* ДЕСКТОП ≥ 992px: раскладка по 12 колонкам */
@media (min-width: 1200px) {
    /* Первая строка заголовка — с 1-й колонки */
    .slovo-heading-line1 {
        grid-column: 1 / 13;
    }

    /* Вторая и третья строки — с 3-й колонки */
    .slovo-heading-line2,
    .slovo-heading-line3 {
        grid-column: 3 / 13;
    }

    /* основной текст: с 3-й по 7-ю */
    .slovo-text {
        grid-column: 3 / 8;
    }

    /* картинка: с 8-й по 12-ю */
    .slovo-image {
        grid-column: 8 / 13;
        align-self: start;
    }
}

.chertegi {
    margin-top: 3rem;
}

margin {
    margin-bottom: 2px;
}

/* Уменьшаем фото поэтов на всех экранах до 991px */
@media (max-width: 1199px) {
    .poet-photo {
        max-width: 50%;

        /* можно 55–65% по вкусу */
        height: auto;
        display: block;
        margin: 0;

        /* без центрирования */
    }
}

color {
    color: ccbc9a;
}

/* ПОРТРЕТЫ НЕОКЛАССИКОВ */
/* База: маленькие экраны — карточки переносятся, примерно по 2 в ряд */
.poets-row {
    display: flex;
    flex-wrap: wrap;

    /* разрешаем перенос */
    justify-content: center;
    gap: 2rem;

    /* расстояние между карточками */
}

/* Одна карточка с портретом */
.poet-card {
    flex: 0 1 calc(50% - 2rem);

    /* около 2 карточек в ряд */
    text-align: center;
    margin: 0;
}

/* Изображение (рамка+фото) */
.poet-card__image {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Имя поэта под фото */
.poet-card__name {
    margin-top: 1.5rem;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 300;
    font-size: 1.0625rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

/* Планшет 768–991px: делаем 3 карточки в ряд → 3 + 2, без одинокой */
@media (min-width: 768px) and (max-width: 991px) {
    .poet-card {
        flex: 0 1 calc(33.333% - 2rem);

        /* все карточки одинаковой ширины */
    }
}

/* ≥ 992px: все карточки в одну строку, влезают в ширину браузера и при необходимости сжимаются */
@media (min-width: 992px) {
    .poets-row {
        flex-wrap: nowrap;

        /* не переносим — всегда в одну строку */
        justify-content: space-between;
        gap: 3rem;
    }

    .poet-card {
        flex: 1 1 0;

        /* делят доступную ширину поровну */
        max-width: 20%;

        /* чтобы 5 карточек были не шире 20% каждая */
    }

    .poet-card__name {
        font-size: 1.0625rem;
    }
}

/* Совсем маленькие телефоны (по желанию можно чуть уменьшить подпись) */
@media (max-width: 480px) {
    .poet-card__name {
        font-size: 0.95rem;
    }
}

rotate1 {
    transform: rotate(3.4deg);
}

rotate {
    transform: translateZ(31.4px);
}

row {
    flex-direction: row;
    display: flex;
    gap: 2rem;
}

row {
    flex-direction: row;
    display: flex;
    gap: 2rem;
}

@media (max-width:899px) {
    photos {
        flex-direction: row;
        display: flex;
        gap: 2rem;
    }
}

poets {
    display: flex;
    gap: 2rem;
    flex-direction: row;
}

@media (max-width: 1199px) {
    .collage {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
}

/* Фон-подложка «бумага» для любых блоков */
.paper-bg {
    position: relative;
}

/* Общие настройки фонового изображения */
.paper-bg::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;

    /* растягиваем на высоту блока */
    width: 30vw;

    /* 40% ширины окна браузера */
    background-image: url("/projects/most/images/executed_renaissance/paper1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 0;
}

/* Чтобы контент был над бумагой */
.paper-bg > * {
    position: relative;
    z-index: 1;
}

/* Вариант, когда бумага прилипает к левому краю окна */
.paper-bg--left::before {
    left: calc(50% - 50vw);
}

/* Вариант, когда бумага прилипает к правому краю окна */
.paper-bg--right::before {
    right: 0;
}

/* Бумага в правом нижнем углу всей секции "Слово" */
.section--slovo {
    position: relative;
}

.section--slovo::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 38vw;

    /* ширина бумаги */
    height: 80vh;

    /* высота (можно менять) */
    background-image: url("/projects/most/images/executed_renaissance/paper2.jpg");
    background-size: contain;
    background-position: bottom right;
    background-repeat: no-repeat;
    opacity: 0.4;

    /* можешь менять */
    pointer-events: none;
    z-index: 0;
}

/* весь контент секции поверх бумаги */
.section--slovo > * {
    position: relative;
    z-index: 2;
}

/* Бумага в правом нижнем углу секции "Memory" (paper2) */
.section--memory {
    position: relative;
}

.section--memory::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;

    /* прилегает к краю окна */
    width: 80vw;

    /* как ты и делала */
    aspect-ratio: 3 / 2;
    height: auto;
    background-image: url("/projects/most/images/executed_renaissance/paper2.jpg");
    background-size: contain;

    /* изображение не обрезается */
    background-repeat: no-repeat;
    background-position: bottom right;
    opacity: 0.4;

    /* можно менять */
    pointer-events: none;
    z-index: 0;
}

/* Контент Memory поверх бумаги */
.section--memory > * {
    position: relative;
    z-index: 2;
}

/* Бумага paper3 в самом низу большой секции "Люди и тексты" */
/* Вешаем на ПОСЛЕДНЮЮ секцию из группы — .section--bojchukisty */
.section--bojchukisty {
    position: relative;
}

.section--bojchukisty::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;

    /* те же параметры, что у paper2 */
    width: 80vw;
    aspect-ratio: 3 / 2;
    height: auto;
    background-image: url("/projects/most/images/executed_renaissance/paper3.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}

/* Контент последней секции поверх бумаги */
.section--bojchukisty > * {
    position: relative;
    z-index: 2;
}

/* Контент поверх бумаги */
.section--groups > * {
    position: relative;
    z-index: 2;
}

/* Контент поверх бумаги */
.section--memory > * {
    position: relative;
    z-index: 2;
}

@media (max-width: 600px) {
    .toc-toggle-button {
        right: 0.75rem;
        font-size: 1rem;

        /* меньше, чтобы влезала */
        padding: 0.5rem 1rem;

        /* компактнее */
        border-width: 1px;
    }
}

@media (max-width: 400px) {
    .toc-toggle-button {
        right: 0.5rem;
        font-size: 0.9rem;
        padding: 0.45rem 0.9rem;
    }
}

.collage .poet-card__image {
    width: 100%;
    height: auto;
    display: block;
}

.side-menu__indicator {
    position: absolute;
    left: 0;
    width: 0;
    height: 0;

    /* более маленький треугольник */
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 9px solid var(--color-accent);
    opacity: 1;
    top: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 10;

    /* сюда добавим плавность — см. ниже */
    transition: top 0.35s ease-out;
}

@media (max-width: 767px) {
    .side-menu__indicator {
        display: none;
    }
}

/* =========================
   HERO: анимация при загрузке
   ========================= */
/* Базовое скрытое состояние */
.section--hero .heading-1,
.section--hero .hero-subtitle {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}

/* Состояние "показано" — более специфичный селектор */
.section--hero .heading-1.hero-animate-up,
.section--hero .hero-subtitle.hero-animate-up {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   H2 — увеличенная версия ×2 + анимация появления
   ========================= */
h2,
.heading-2 {
    font-family: "Forum", "Times New Roman", serif;
    font-weight: 400;
    color: var(--color-accent);
    text-transform: uppercase;

    /* твой размер: 4rem — 10rem */
    font-size: clamp(4rem, 7vw, 10rem);

    /* 64px — 160px */
    line-height: 1.05;
    margin: 0 0 1.2rem;

    /* Анимация появления */
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    will-change: opacity, transform;
}

/* Когда заголовок появился в зоне видимости */
h2.is-visible,
.heading-2.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Очередность строк для трёхстрочных заголовков
   "Дом «Слово»", "Люди и тексты" и т.п. */
.slovo-heading-line1 {
    transition-delay: 0.05s;
}

.slovo-heading-line2 {
    transition-delay: 0.2s;
}

.slovo-heading-line3 {
    transition-delay: 0.35s;
}

/* Адаптивные размеры H2 */
@media (max-width: 1199px) {
    h2,
    .heading-2 {
        font-size: clamp(3rem, 8vw, 6rem);

        /* 48px — 96px */
        line-height: 1.1;
    }
}

@media (max-width: 399px) {
    h2,
    .heading-2 {
        font-size: clamp(2.4rem, 9vw, 4rem);
        line-height: 1.1;
    }
}

/* =========================
   Prefers-reduced-motion: отключаем анимацию
   ========================= */
@media (prefers-reduced-motion: reduce) {
    .section--hero .heading-1,
    .section--hero .hero-subtitle,
    .heading-2,
    .heading-2.is-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* =========================
   FOOTER
   ========================= */
.site-footer {
    background-color: #151515;
    padding: 3rem var(--section-padding-x);
    color: var(--color-text-main);
    font-family: "Inter", sans-serif;
}

.footer-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-logo {
    height: 40px;
    width: auto;
    opacity: 50%;
}

.footer-nav {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    opacity: 50%;
}

.footer-nav a {
    color: var(--color-text-main);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 300;
    transition: color 0.2s ease;
}

.footer-nav a:hover {
    color: var(--color-accent);
}

.footer-support {
    padding: 0.9rem 1.8rem;
    border: 1px solid var(--color-accent);
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--color-text-main);
    transition: background 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.footer-support:hover {
    background-color: var(--color-accent);
    color: #000;
}

/* Адаптив */
@media (max-width: 899px) {
    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-nav {
        gap: 1.3rem 2rem;
    }
}

@media (max-width: 768px) {
    .logo-image {
        content: url("/projects/most/images/executed_renaissance/logo-header-small.svg");
        height: 1.4rem;

        /* по желанию: можно подогнать */
    }
}