/*
 * Кирпич · каркас.
 *
 * Обёрток нет: содержимое лежит прямо в main соседями, а не вложено друг
 * в друга. Ширину держит сам тег.
 */
/*
 * Место под полосу прокрутки держится всегда. Иначе на короткой странице
 * полосы нет, на длинной есть, и содержимое дёргается вбок на её ширину
 * при каждом переходе между разделами.
 */
html {
    scrollbar-gutter: stable;
}

/*
 * Страница раскладывается флексом сверху вниз: полоса меню, содержимое,
 * подвал. Даёт это две вещи сразу.
 *
 * Первая: подвал прижимается к низу экрана на короткой странице. Место
 * между ним и текстом забирает main своим flex, и подвал не повисает
 * посреди белого поля, как в блочном потоке.
 *
 * Вторая: выделение текста мышью перестаёт заливать полосы во всю
 * ширину. В блочном потоке протяжка через несколько абзацев захватывает
 * анонимные блоки между ними, и они выделяются целиком, вместе с полями.
 * Во флекс-контейнере таких блоков не возникает, и выделяется ровно
 * текст, который тянут.
 */
body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    margin: 0;
    /*
     * Заливка вверху и фон под ней. Градиент прижат к верхнему краю и
     * не повторяется, поэтому на длинной странице он остаётся полосой в
     * начале, а не тянется на всю высоту.
     *
     * Держится на месте при прокрутке: фон закреплён, и содержимое
     * уезжает из-под него, как на dxdxdxd. Цвет уходит не в белый, а в
     * прозрачность, иначе заливка спорила бы с тёмным фоном страницы.
     */
    background:
        linear-gradient(
                to bottom,
                rgb(from var(--glow-color) r g b / var(--glow-on)),
                rgb(from var(--glow-color) r g b / 0)
            )
            0 0 / 100% var(--glow-height) no-repeat fixed,
        var(--color-page);
    color: var(--color-text);
    font-family: var(--font);
    font-size: var(--text);
    line-height: var(--line);
    -webkit-font-smoothing: antialiased;
}

/*
 * Текст и подвал образуют одну колонку. Обёртка нужна широкому экрану
 * с боковой навигацией: там она становится отдельной областью
 * прокрутки. В обычной раскладке это та же флекс-колонка, которой раньше
 * был сам body, поэтому подвал по-прежнему прижат к низу короткой
 * страницы и идёт после текста на длинной.
 */
.page-column {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
}

/*
 * Колонка. Боковое поле работает, только пока экран уже колонки:
 * max-width включает его в себя, поэтому на широком экране текст идёт
 * ровно на --site-width, а на узком не липнет к краю.
 *
 * border-box здесь обязателен: при content-box поле не входит в ширину,
 * а прибавляется к ней, и колонка выходит шире заявленной на два поля.
 *
 * Ширина описана один раз на всех, кто её держит: кроме текста страницы
 * это внутренний слой меню. Полоса меню тянется во всю ширину экрана, а
 * содержимое внутри неё обязано встать по тому же левому краю, что и
 * текст, иначе название сайта висит со сдвигом. Пока формула стояла в
 * двух местах, совпадение держалось на том, что правку не забудут
 * повторить, — а забыть достаточно одного раза.
 *
 * Селектор меню назван здесь, в каркасе, потому что здесь живёт сама
 * колонка. Что лежит внутри полосы, по-прежнему решает menu.css.
 */
main,
.menu > div {
    box-sizing: border-box;
    max-width: calc(var(--site-width) + var(--site-gutter) * 2);
    margin-inline: auto;
}

/*
 * Содержимое забирает всё свободное место по высоте: на короткой
 * странице оно растягивается, и подвал уходит к низу экрана вместо того,
 * чтобы висеть посреди белого поля.
 *
 * Внутри та же флекс-колонка, что и у страницы, по той же причине:
 * выделение мышью не должно заливать полосы во всю ширину.
 *
 * Просветы между абзацами остаются на своих полях, а не на gap: у блоков
 * они разные — у заголовка секции свой отступ сверху, у абзаца свой, — и
 * общий gap сделал бы их одинаковыми.
 */
main {
    display: flex;
    flex: 1;
    flex-direction: column;
    /*
     * Ширина во всю колонку. Во флекс-колонке элемент по поперечной оси
     * ужимается по содержимому, а не растягивается, поэтому страница с
     * короткими строками выходила уже заявленной ширины и уезжала от
     * левого края меню.
     */
    width: 100%;
    padding: var(--site-space-top) var(--site-gutter) var(--site-space-bottom);
}

/* Заголовок страницы. Класса нет: страница начинается с него. */
h1 {
    margin: 0 0 var(--page-title-space-under);
    color: var(--color-title);
    font-size: var(--page-title-size);
    font-weight: var(--title-weight);
    line-height: var(--page-title-size);
}

/*
 * Абзац страницы: текст, лежащий в main напрямую, не внутри блока.
 * Вступление под заголовком, пояснение между секциями.
 *
 * Просвет между абзацами задан переменной, а не оставлен браузеру. Своё
 * значение у браузера почти такое же — 1em, то есть 17px при нашем кегле,
 * — и потому расхождение не бросалось в глаза: страницы выглядели
 * правильно случайно. Стоило сменить --gap, и абзацы внутри списка со
 * статьёй разъезжались, а эти оставались на браузерном.
 *
 * Отбивка снизу, и только снизу. Верхнего поля у абзаца нет: расстояние
 * до него держит тот, кто стоит выше, своим полем снизу. Так у блока
 * одно правило вместо двух встречных, и поля не спорят между собой.
 *
 * Последний абзац лишнего края не даёт: соседние поля схлопываются, а
 * низ колонки задаёт сам блок, а не хвост текста в нём.
 */
p {
    margin: 0 0 var(--gap);
}

/*
 * Ссылка помечена цветом, а подчёркивание появляется под указателем.
 * В сплошном тексте линия рвёт строку и цепляет выносные буквы, а цвета
 * для распознавания хватает: подчёркивание здесь подсказка о том, что
 * будет нажато, а не пометка ссылки.
 *
 * Блоки со своими ссылками — меню, крошки, списки — подчёркивания не
 * получают ни в каком состоянии: там ссылка это строка целиком, и линия
 * под ней прочерчивала бы половину блока.
 */
a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/*
 * Приписка: мелкая приглушённая строка. Дата над названием, подробности
 * под ним, дата в шапке статьи — вид у них один и тот же, поэтому задан
 * здесь, а не повторён в каждом блоке.
 *
 * Стоит в каркасе, а не в одном из блоков: тогда список и статья берут
 * его независимо друг от друга, и порядок подключения ни на что не
 * влияет. Своё блоки дописывают у себя — отступ и сторону, с которой он
 * нужен.
 *
 * Приписка заголовка секции сюда не входит намеренно: у неё строка
 * ритма, а не мелкая, иначе заголовок теряет высоту и съезжает с
 * вертикали.
 */
.rows time,
.rows small,
.article > time {
    display: block;
    color: var(--color-muted);
    font-size: var(--text-small);
    line-height: var(--line-small);
}