/*
 * Кирпич · статья.
 *
 * Готовый текст: статья из markdown, документ из редактора, перенесённый
 * контент. Классов в нём нет и быть не может — разметку пишет конвертер,
 * а не человек.
 *
 * Поэтому здесь, в отличие от остальных блоков, стилизуются сами теги.
 * Ограничение одно: всё живёт внутри .article, за его пределы правила
 * не выходят и с блоками страницы не спорят.
 *
 *   <article class="article">…</article>
 */

/*
 * Длинное слово переносится внутри себя, а не выдавливает страницу вбок.
 * Текст сюда попадает из markdown, а там неизбежны ссылки целиком:
 * адрес в семьдесят знаков шире колонки телефона и разрывов внутри не
 * имеет, поэтому строка уезжает за край и вся страница начинает ездить.
 *
 * anywhere, а не break-word: break-word ищет разрыв только когда слово
 * не помещается в пустую строку, и адрес, вставший после «Подробности:»,
 * всё равно вылезал. Обычный текст правило не трогает — оно включается
 * лишь там, где иначе случилось бы переполнение.
 */
.article {
    overflow-wrap: anywhere;
}

/*
 * Шапка статьи: дата над заголовком и лид под ним. Пишутся руками, а не
 * конвертером, поэтому стоят перед готовым текстом.
 *
 *     article.article
 *         time 9 апреля 2026
 *         h1 Заголовок
 *         p.lead Короткое изложение
 *
 * Вид даты — мелкая приглушённая строка — описан в base.css вместе с
 * такой же припиской списка: это одна и та же строка, и задаваться она
 * должна в одном месте.
 */

/*
 * Лид крупнее основного текста, но легче заголовка: он ведёт от
 * заголовка к статье, а не спорит с ним.
 */
.article > .lead {
    margin: 0 0 var(--gap);
    color: var(--color-text);
    font-size: var(--lead-size);
    line-height: var(--lead-line);
}

/*
 * Заголовок второго уровня описан вместе с .section-title в headings.css:
 * вид у них общий, и копия здесь разъехалась бы при первой правке.
 *
 * Третий уровень мельче: он подчинён второму, а не равен ему. Линии под
 * ним нет, иначе два уровня читаются как один.
 */
.article h3 {
    margin: 0;
    padding: var(--title-space) 0 var(--title-space-under);
    color: var(--color-title);
    font-size: var(--text);
    font-weight: var(--title-weight);
    line-height: var(--line);
}

/* Как и везде: отбивка только снизу, верхнее поле держит сосед сверху. */
.article p {
    margin: 0 0 var(--gap);
}

/*
 * Списки без маркеров: точки и цифры браузера сбивают ритм и уводят
 * текст вправо на 40px. Номер ставится счётчиком, в колонке слева.
 */
.article ul,
.article ol {
    margin: 0 0 var(--gap);
    padding: 0;
    list-style: none;
}

/*
 * Пункт: маркер стоит в своей колонке слева, текст начинается от общей
 * левой линии страницы. Отрицательный text-indent здесь не годится — он
 * выносит маркер за край колонки, и список выпадает из вертикали.
 */
.article li {
    position: relative;
    padding-left: 22px;
}

.article li::before {
    position: absolute;
    left: 0;
    color: var(--color-muted);
}

.article ul > li::before {
    content: '—';
}

.article ol {
    counter-reset: item;
}

.article ol > li {
    counter-increment: item;
}

.article ol > li::before {
    content: counter(item) '.';
}

/* Отбивка снизу: расстояние держит пункт сверху, а не следующий. */
.article li:not(:last-child) {
    margin-bottom: 6px;
}

/*
 * Таблица: те же волосяные линии, что у списков.
 *
 * Прокрутка широких таблиц вынесена на обёртку, а не на саму таблицу:
 * с display: block таблица сжимается по содержимому и перестаёт тянуться
 * на всю колонку, а линии обрываются на середине строки.
 */
.article table {
    width: 100%;
    margin: 0 0 var(--gap);
    border-collapse: collapse;
    font-size: var(--text);
    line-height: var(--line);
}

.article th,
.article td {
    border-bottom: var(--hairline) solid var(--separator);
    padding: var(--step) 16px var(--step) 0;
    text-align: left;
    vertical-align: top;
}

/* Значение в последней колонке прижимается к правому краю, как в списках. */
.article th:last-child,
.article td:last-child {
    padding-right: 0;
    text-align: right;
}

.article th {
    color: var(--color-title);
    font-weight: 700;
    white-space: nowrap;
}

/*
 * Обёртка вокруг таблицы: широкая прокручивается внутри себя, а не
 * растягивает страницу вбок. Ставится конвертером или руками.
 */
.article .table-scroll {
    overflow-x: auto;
}

/* Последняя строка без линии: край таблицы остаётся чистым. */
.article tbody tr:last-child th,
.article tbody tr:last-child td {
    border-bottom: 0;
}

/* Цитата: отбита слева линией, текст приглушён. */
.article blockquote {
    margin: 0 0 var(--gap);
    border-left: 2px solid var(--separator);
    padding: 0 0 0 20px;
    color: var(--color-muted);
}

.article blockquote p {
    margin: 0;
}

/*
 * Разделитель между частями статьи. Здесь поле с обеих сторон, и это
 * законное исключение из правила «отбивка только снизу»: черта делит
 * текст надвое, и прижатая к абзацу сверху она читается как его
 * подчёркивание, а не как граница раздела.
 */
.article hr {
    height: var(--hairline);
    margin: var(--title-space) 0;
    border: 0;
    background: var(--separator);
}

/*
 * Скругление углов задаётся дважды, и это не опечатка.
 *
 * border-radius задаёт размер угла и работает везде. corner-shape задаёт
 * его форму: обычная дуга окружности на крупном радиусе выглядит резкой
 * на стыке с прямой стороной, а суперэллипс входит в неё плавно, как
 * скругления в macOS и iOS.
 *
 * Свойство новое и понимают его пока только браузеры на Chromium. Это
 * не мешает: незнакомое свойство браузер пропускает, и угол остаётся
 * обычным скруглением того же размера. Терять тут нечего.
 */
.article img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 0 var(--gap);
    border-radius: var(--image-radius);
    corner-shape: var(--corner-shape);
}

.article code {
    background: var(--color-surface);
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: var(--text-small);
}

/*
 * Блок кода скругляется как картинка, а не как мелкая плашка: оба во всю
 * колонку и стоят в тексте соседями, поэтому разное скругление у них
 * читается как небрежность.
 */
.article pre {
    overflow-x: auto;
    margin: 0 0 var(--gap);
    border-radius: var(--image-radius);
    corner-shape: var(--corner-shape);
    background: var(--color-surface);
    padding: 14px 16px;
    line-height: 20px;
}

.article pre code {
    padding: 0;
    background: none;
}