/* ---------------------------------------------------------------------------
   Цветомания · блоки статьи блога
   /local/templates/main/components/bitrix/news.detail/blog-redesign/style.css

   Здесь только НОВЫЕ блоки: короткий ответ, тезисы, оглавление,
   вопрос-ответ, карточка автора, источники.

   Базовая типографика статьи описана в /css/app.css. Раньше здесь стояло
   правило её не трогать — оно снято сознательно: замеры показали колонку
   в 1200 px (около 107 знаков в строке), интерлиньяж 1,25 и заголовок h2,
   отличающийся от основного текста на шесть пунктов. Переопределения
   собраны в конце файла одним блоком «типографика текста статьи»,
   с объяснением каждого числа.

   Взято из вашей же системы, чтобы блоки не выглядели чужими:
     шрифт   "Suisse Intl Regular", Arial, sans-serif
     текст   #262729, приглушённый #626365, светлый #A8A9AB
     фон     #F4F5F7, акцентный #FAF0F1
     акцент  #A11826
     радиусы 24px крупные блоки, 8–20px мелкие
     точки   1220 / 992 / 600
--------------------------------------------------------------------------- */

.tsv-block {
    font-family: "Suisse Intl Regular", Arial, sans-serif;
    color: #262729;
}

.tsv-block__title {
    font-size: 22px;
    font-weight: 500;
    line-height: 24px;
    margin: 0 0 16px;
}

@media (max-width: 992px) {
    .tsv-block__title {
        font-size: 18px;
        line-height: 20px;
    }
}

/* ── обложка ──────────────────────────────────────────────────────────────
   У картинки в шаблоне проставлены настоящие width и height — они убирают
   скачок вёрстки при загрузке. Но без этих двух строк браузер понимает их
   буквально и рисует обложку в 1200 пикселей шириной на любом экране:
   на телефоне она вылезала за границы. width:100% и height:auto оставляют
   атрибутам их работу (браузер знает пропорции заранее) и одновременно
   вписывают картинку в колонку. */
.n-article__visual {
    margin: 0;
}

.n-article__visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 32px;
}

.n-article__image-text {
    margin-top: 12px;
    font-family: "Suisse Intl Regular", Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #A8A9AB;
}

@media (max-width: 992px) {
    .n-article__visual img {
        border-radius: 24px;
    }

    .n-article__image-text {
        margin-top: 8px;
        font-size: 12px;
        line-height: 16px;
    }
}

/* ── короткий ответ ───────────────────────────────────────────────────────
   Первое, что видит человек, и первое, что забирает нейропоиск.
   Держим его сразу под обложкой, до основного текста. */

.tsv-answer {
    margin: 24px 0 0;
    padding: 24px;
    border-radius: 24px;
    background-color: #FAF0F1;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.tsv-answer__mark {
    flex-shrink: 0;
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
    background-color: #A11826;
}

.tsv-answer__text {
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    margin: 0;
}

@media (max-width: 992px) {
    .tsv-answer {
        margin-top: 16px;
        padding: 16px;
        border-radius: 16px;
        gap: 12px;
    }

    .tsv-answer__text {
        font-size: 16px;
        line-height: 22px;
    }
}

/* ── тезисы ───────────────────────────────────────────────────────────── */

.tsv-takeaways {
    margin: 24px 0 0;
    padding: 24px;
    border-radius: 24px;
    background-color: #F4F5F7;
}

.tsv-takeaways__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tsv-takeaways__item {
    position: relative;
    padding-left: 28px;
    font-size: 16px;
    line-height: 22px;
}

.tsv-takeaways__item::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #A11826;
}

@media (max-width: 992px) {
    .tsv-takeaways {
        margin-top: 16px;
        padding: 16px;
        border-radius: 16px;
    }

    .tsv-takeaways__item {
        font-size: 14px;
        line-height: 20px;
        padding-left: 22px;
    }

    .tsv-takeaways__item::before {
        left: 4px;
        top: 7px;
    }
}

/* ── оглавление ───────────────────────────────────────────────────────────
   <details> вместо скрипта: раскрытие работает без JS, а на широком экране
   мы его принудительно открываем и прячем стрелку. */

.tsv-toc {
    margin: 24px 0 0;
    padding: 20px 24px;
    border-radius: 24px;
    border: 1px solid #E4E5E7;
}

.tsv-toc__summary {
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    cursor: pointer;
    list-style: none;
}

.tsv-toc__summary::-webkit-details-marker {
    display: none;
}

.tsv-toc__summary::after {
    content: "";
    float: right;
    width: 8px;
    height: 8px;
    margin-top: 4px;
    border-right: 2px solid #A8A9AB;
    border-bottom: 2px solid #A8A9AB;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.tsv-toc[open] .tsv-toc__summary::after {
    transform: rotate(-135deg);
    margin-top: 8px;
}

.tsv-toc__list {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    counter-reset: tsv-toc;
}

.tsv-toc__item_2 {
    padding-left: 20px;
}

.tsv-toc__link {
    font-size: 16px;
    line-height: 20px;
    color: #626365;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.tsv-toc__link:hover {
    color: #262729;
    border-bottom-color: #A11826;
    text-decoration: none;
}

@media (min-width: 993px) {
    /* на десктопе оглавление всегда развёрнуто */
    .tsv-toc__summary::after {
        display: none;
    }

    .tsv-toc__summary {
        cursor: default;
    }
}

@media (max-width: 992px) {
    .tsv-toc {
        margin-top: 16px;
        padding: 16px;
        border-radius: 16px;
    }

    .tsv-toc__link {
        font-size: 14px;
    }
}

/* Шапка сайта прилипающая: без отступа переход по ссылке оглавления
   оставлял бы заголовок ПОД шапкой — человек попадает в нужное место
   и не видит, куда попал. В app.css такое правило есть, но только для
   устаревших якорей a[name]; у нас якоря на самих заголовках.

   Число измерено, а не взято из головы. Прилипшая шапка: 165 px на 1728,
   167 на 820, 156 на 500 — то есть по всем ширинам примерно одна высота,
   и разные значения по точкам ей не нужны. 190 даёт 25–34 px воздуха
   над заголовком.

   Прежние значения были неверны в обе стороны. 260 на десктопе оставляло
   под шапкой 95 px пустоты — тот самый «большой отступ». А 110 на телефоне
   заводило заголовок ПОД шапку: проверено на 500 px, заголовок оказывался
   на отметке 110 при нижнем крае шапки 156, то есть его не было видно
   вовсе. Ошибка тихая: страница прокручивается, значит «работает». */
.n-article__content h2[id],
.n-article__content h3[id],
.n-article__content h4[id] {
    scroll-margin-top: 190px;
}

/* ── вопрос-ответ ─────────────────────────────────────────────────────────
   Тоже на <details>: раскрывается без скрипта, а главное — содержимое
   присутствует в разметке всегда, поэтому его видят и поисковики,
   и программы чтения с экрана. */

.tsv-faq {
    margin: 64px 0 0;
}

.tsv-faq__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tsv-faq__item {
    border-radius: 16px;
    background-color: #F4F5F7;
    overflow: hidden;
}

.tsv-faq__question {
    padding: 16px 48px 16px 20px;
    position: relative;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    cursor: pointer;
    list-style: none;
    min-height: 24px;
}

.tsv-faq__question::-webkit-details-marker {
    display: none;
}

.tsv-faq__question::after {
    content: "";
    position: absolute;
    right: 22px;
    top: 24px;
    width: 8px;
    height: 8px;
    border-right: 2px solid #A8A9AB;
    border-bottom: 2px solid #A8A9AB;
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.tsv-faq__item[open] .tsv-faq__question::after {
    transform: rotate(-135deg);
    top: 28px;
}

.tsv-faq__answer {
    padding: 0 20px 20px;
    font-size: 16px;
    line-height: 24px;
    color: #626365;
}

.tsv-faq__answer p {
    margin: 0 0 12px;
}

.tsv-faq__answer p:last-child {
    margin-bottom: 0;
}

@media (max-width: 992px) {
    .tsv-faq {
        margin-top: 40px;
    }

    .tsv-faq__question {
        font-size: 16px;
        line-height: 22px;
        padding: 14px 44px 14px 16px;
    }

    .tsv-faq__question::after {
        right: 18px;
        top: 21px;
    }

    .tsv-faq__item[open] .tsv-faq__question::after {
        top: 25px;
    }

    .tsv-faq__answer {
        padding: 0 16px 16px;
        font-size: 14px;
        line-height: 20px;
    }
}

/* ── таблица-справка внутри статьи ────────────────────────────────────────
   Обёртка со своей прокруткой обязательна: без неё широкая таблица
   растягивает страницу и на телефоне появляется горизонтальный скролл
   всего документа. Прокручиваться должна таблица, а не страница. */

.tsv-table-wrap {
    margin: 32px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tsv-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    font-family: "Suisse Intl Regular", Arial, sans-serif;
    font-size: 15px;
    line-height: 21px;
    color: #262729;
}

.tsv-table caption {
    text-align: left;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    padding-bottom: 12px;
}

.tsv-table th {
    text-align: left;
    font-weight: 500;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #626365;
    padding: 0 16px 10px 0;
    border-bottom: 2px solid #A11826;
    vertical-align: bottom;
}

.tsv-table td {
    padding: 12px 16px 12px 0;
    border-bottom: 1px solid #E4E5E7;
    vertical-align: top;
}

.tsv-table tbody tr:last-child td {
    border-bottom: none;
}

.tsv-table td:first-child {
    font-weight: 500;
    white-space: nowrap;
}

.tsv-table-note {
    margin: 12px 0 0;
    font-family: "Suisse Intl Regular", Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #626365;
}

@media (max-width: 992px) {
    .tsv-table-wrap {
        margin: 24px 0;
    }

    .tsv-table {
        font-size: 14px;
        line-height: 20px;
    }

    .tsv-table caption {
        font-size: 16px;
        line-height: 20px;
    }
}

/* ── автор и проверяющий ──────────────────────────────────────────────── */

.tsv-author {
    margin: 64px 0 0;
    padding: 24px;
    border-radius: 24px;
    background-color: #F4F5F7;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.tsv-author__photo {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.tsv-author__body {
    min-width: 0;
}

.tsv-author__role {
    font-size: 12px;
    line-height: 16px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #A8A9AB;
    margin: 0 0 4px;
}

.tsv-author__name {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    margin: 0;
    color: #262729;
    text-decoration: none;
}

a.tsv-author__name:hover {
    text-decoration: underline;
}

.tsv-author__position {
    font-size: 14px;
    line-height: 20px;
    color: #626365;
    margin: 4px 0 0;
}

.tsv-author__about {
    font-size: 14px;
    line-height: 20px;
    color: #626365;
    margin: 12px 0 0;
}

.tsv-author__checked {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid #E4E5E7;
    font-size: 14px;
    line-height: 20px;
    color: #626365;
}

@media (max-width: 600px) {
    .tsv-author {
        margin-top: 40px;
        padding: 16px;
        border-radius: 16px;
        gap: 14px;
    }

    .tsv-author__photo {
        width: 56px;
        height: 56px;
    }

    .tsv-author__name {
        font-size: 16px;
        line-height: 20px;
    }
}

/* ── источники ───────────────────────────────────────────────────────── */

.tsv-sources {
    margin: 40px 0 0;
}

.tsv-sources__list {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tsv-sources__item {
    font-size: 14px;
    line-height: 20px;
    color: #626365;
}

.tsv-sources__item a {
    color: #626365;
    text-decoration: underline;
}

.tsv-sources__item a:hover {
    color: #262729;
}

/* ── дата обновления ─────────────────────────────────────────────────── */

.tsv-updated {
    margin: 24px 0 0;
    font-size: 14px;
    line-height: 20px;
    color: #A8A9AB;
}

/* ── товары из статьи ───────────────────────────────────────────────────── */

/* Разметку карточек рисует шаблон recommendedRedesign — тот же, что на
   главной сайта. Здесь только отбивка блока и подпись. В сами карточки
   не лезем намеренно: они общие для всего сайта, и правка отсюда поехала
   бы по каталогу. */

.tsv-products {
    margin: 40px 0 0;
}

/* Компонент рисует свою сетку. Наша задача — не дать типографике статьи
   дотянуться до неё: у соседних блоков есть правила на ссылки и абзацы,
   а карточка товара со своими цветами и кнопкой в них не нуждается. */
.tsv-products__list > * {
    margin: 0;
}

/* Ряд товаров вместо карусели.

   Шаблон каталога отдаёт разметку Swiper: `.swiper` → `.swiper-wrapper` →
   четыре `.swiper-slide`. Скрипта, который превращает её в слайдер,
   на странице блога нет, и без него слайды растягиваются во всю ширину
   колонки. Класс-триггер снят в шаблоне, инициализации не будет никогда —
   значит разметку нужно разложить сеткой самим.

   Ширина карточки при этом получается ровно та же, что на главной:
   1400 px колонки на четыре части с зазором 20 — это 335 px. */

.tsv-products__list .swiper,
.tsv-products__list .catalog__items {
    display: block;
    width: auto;
    overflow: visible;
}

.tsv-products__list .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: auto;
    transform: none;
}

.tsv-products__list .swiper-slide {
    width: auto;
    height: auto;
    margin: 0;
    flex: none;
}

/* На узком экране — две карточки в ряд, как в остальном блоге. */
@media (max-width: 992px) {
    .tsv-products__list .swiper-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

.tsv-products__note {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 18px;
    color: #A8A9AB;
}

@media (max-width: 992px) {
    .tsv-products { margin-top: 32px; }
}

/* ── снимки из галереи ──────────────────────────────────────────────────── */

/* Снимок лежит МЕЖДУ секциями текста, а не внутри: типографика статьи
   описана селекторами вида `.n-article__content p`, и подпись под фото
   получила бы отступы абзаца.

   Своего предела ширины у снимка больше нет: его задаёт карточка статьи,
   внутри которой 814 px. Раньше здесь стояло 720 — тогда текст лежал прямо
   на странице во всю её ширину, и снимок приходилось сдерживать отдельно. */

.tsv-photo {
    margin: 32px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tsv-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    background-color: #F4F5F7;
}

.tsv-photo__caption {
    font-family: "Suisse Intl Regular", Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #A8A9AB;
}

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

.tsv-gallery {
    margin: 40px 0 0;
}

.tsv-gallery__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.tsv-gallery__list .tsv-photo {
    margin: 0;
}

.tsv-gallery__list .tsv-photo img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

@media (max-width: 600px) {
    .tsv-photo { margin: 24px 0; max-width: none; }
    .tsv-photo img { border-radius: 14px; }
    .tsv-gallery__list { grid-template-columns: 1fr; gap: 16px; }
    .tsv-gallery__list .tsv-photo img { aspect-ratio: 343 / 226; }
}

/* ── устройство страницы: рельса, карточка, серый фон ───────────────────────

   Страница серая, статья лежит на белой карточке, слева едет оглавление.
   Это не украшение, а ответ на вопрос о ширине колонки, который до этого
   решался вслепую три раза подряд:

     во всю ширину контейнера  1200 px, ~107 знаков в строке — читать тяжело;
     760 с прижимом влево      справа 600 px пустоты, страница выглядит
                               наполовину пустой;
     760 по центру             пустота симметрична, но обложка и оглавление
                               рядом с центрированным текстом читаются
                               как случайность.

   Карточка снимает вопрос: ширину колонки определяет она, а пустое место
   слева занимает оглавление. Заодно белое на сером выделяет сам текст —
   ровно то, ради чего это и делается.

   Числа: сетка не шире 1180, рельса 250, зазор 36. Остаётся карточка 894,
   внутри неё 814 — это около 69 знаков в строке при кегле 18. Столько же
   выходит и на экране 1280, потому что сетка упирается в ширину окна
   раньше, чем в свой предел.

   Ниже 1200 сетки нет: оглавление, карточка и всё остальное идут одной
   колонкой, как раньше. Карточка при этом остаётся — она и на телефоне
   отделяет статью от фона. */

body { background-color: #F1F2F4; }

.tsv-doc {
    background-color: #FFFFFF;
    border-radius: 24px;
    padding: 40px;
    margin: 0 0 24px;
}

/* Первый элемент карточки не должен добавлять к её отступу свой:
   у заголовков сверху 48 px, и без этого правила статья начиналась бы
   почти на сотню пикселей ниже края карточки. */
.tsv-doc > *:first-child { margin-top: 0; }

/* Обложка — первый элемент карточки, во всю её ширину и всегда 16:9.

   Пропорции у анонсных картинок разные: 3:2, 4:3, изредка квадрат. Без
   общей пропорции высота первого экрана прыгает от статьи к статье,
   а у вертикальных снимков обложка занимает экран целиком. Кадрируем.

   Соседняя правда, которую пропорция не чинит: у старых статей исходник
   600×400, и в карточке шириной 814 он растянут. Это не лечится стилями,
   только заменой картинки — пункт про COVER в плане. */
.tsv-doc > .n-article__visual { margin: 0 0 4px; }

.tsv-doc > .n-article__visual img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 18px;
}

@media (min-width: 1200px) {
    .n-article {
        display: grid;
        grid-template-columns: 250px minmax(0, 1fr);
        column-gap: 36px;
        max-width: 1180px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Дата со счётчиками, ряд товаров и «Другие статьи» идут во всю ширину:
       им рельса не нужна, а товарам она мешает — внутри карточки на четыре
       букета остаётся по 188 px вместо 280. */
    .n-article > .n-article__info-wrapper,
    .n-article > .tsv-products,
    .n-article > .n-encyclopedia-swiper-section { grid-column: 1 / -1; }

    .tsv-rail { grid-column: 1; }
    .tsv-doc  { grid-column: 2; }

    /* Липнет вложенный блок, а не сам элемент сетки. Элемент сетки
       с `position: sticky` Chrome прижимает к границам всей сетки, а не
       своей ячейки, и оглавление уезжало поверх ряда товаров.

       185 — это измеренная высота прилипшей шапки (165) плюс воздух.
       Было 262, и колонка висела на сотню пикселей ниже, чем нужно.
       То же число стоит у правой колонки и почти то же — в
       `scroll-margin-top` якорей: изменится шапка — менять все три. */
    .tsv-rail__inner {
        position: sticky;
        top: 185px;
    }

    /* В рельсе оглавление уже не карточка: рамка вокруг рамки — лишний шум,
       а на сером фоне список читается и без неё. */
    .tsv-rail__toc {
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
    }

    .tsv-rail__toc > .tsv-toc__summary {
        font-size: 13px;
        line-height: 16px;
        font-weight: 400;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #A8A9AB;
        cursor: default;
        pointer-events: none;
    }

    .tsv-rail__toc > .tsv-toc__summary::after { display: none; }

    .tsv-rail__toc .tsv-toc__list { margin-top: 14px; gap: 12px; }
    .tsv-rail__toc .tsv-toc__link { font-size: 15px; line-height: 20px; }

    /* Текущий раздел. Полоска слева, а не жирность: жирный пункт меняет
       ширину строки, и список дёргается при каждой прокрутке. */
    .tsv-rail__toc .tsv-toc__item {
        border-left: 2px solid transparent;
        padding-left: 12px;
        transition: border-color .15s ease;
    }

    .tsv-rail__toc .tsv-toc__item_2 { padding-left: 26px; }

    .tsv-rail__toc .tsv-toc__item:has(.tsv-toc__link_now) { border-left-color: #A11826; }

    .tsv-rail__toc .tsv-toc__link_now { color: #262729; }
}

/* ── правая колонка: темы статьи ────────────────────────────────────────────

   Третья колонка появляется только от 1480 px и только у статей, где есть
   темы со своими страницами. Порог не круглый и не случайный: 250 рельса,
   36 зазор, 894 карточка, 36 зазор, 300 колонка и 28 полей контейнера дают
   ровно 1544; средняя колонка сжимается до 866, то есть теряет 28 px —
   строка остаётся той же длины. Взять порог ниже значило бы отнять
   у текста уже заметное, показав взамен список из трёх ссылок. */

@media (min-width: 1480px) {
    .n-article_aside {
        grid-template-columns: 250px minmax(0, 894px) 300px;
        max-width: 1516px;
    }

    .tsv-aside { grid-column: 3; }

    .n-article_aside > .n-article__info-wrapper,
    .n-article_aside > .tsv-products,
    .n-article_aside > .n-encyclopedia-swiper-section { grid-column: 1 / -1; }

    /* Липнет вложенный блок — по той же причине, что и в левой рельсе,
       и на той же высоте. */
    .tsv-aside__inner {
        position: sticky;
        top: 185px;
    }
}

@media (min-width: 1200px) and (max-width: 1479px) {
    /* Колонки нет — блок встаёт под карточку, по её левому краю. */
    .tsv-aside { grid-column: 2; }
}

/* «Читайте также». Живёт только в колонке: ниже 1480 px её нет, а под
   статьёй этот список встал бы прямо над «Другими статьями» — два
   одинаковых перечня подряд. Поэтому на узком экране он скрыт целиком. */

.tsv-chitajte {
    display: none;
    margin: 0 0 28px;
}

@media (min-width: 1480px) {
    .tsv-chitajte { display: block; }
}

.tsv-chitajte__title {
    font-family: "Suisse Intl Regular", Arial, sans-serif;
    font-size: 13px;
    line-height: 16px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #A8A9AB;
    margin: 0 0 14px;
}

.tsv-chitajte__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tsv-chitajte__link {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-decoration: none;
    color: #262729;
}

.tsv-chitajte__pic {
    flex-shrink: 0;
    width: 96px;
    height: 68px;
    object-fit: cover;
    border-radius: 10px;
    background-color: #E9EAEC;
}

/* Три строки и не больше. Заголовки в блоге доходят до 70 знаков, и без
   ограничения один длинный пункт делает колонку выше остальных вчетверо.
   Подчёркивание при наведении не подходит: у обрезанного блока линия
   рисуется под всей коробкой, а не под последней строкой, — поэтому
   отклик цветом. */
.tsv-chitajte__name {
    font-family: "Suisse Intl Regular", Arial, sans-serif;
    font-size: 15px;
    line-height: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s ease;
}

.tsv-chitajte__link:hover .tsv-chitajte__name {
    color: #A11826;
}

.tsv-temy {
    margin: 0 0 24px;
}

.tsv-temy__title {
    font-family: "Suisse Intl Regular", Arial, sans-serif;
    font-size: 13px;
    line-height: 16px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #A8A9AB;
    margin: 0 0 14px;
}

.tsv-temy__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tsv-temy__link {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 100px;
    background-color: #FFFFFF;
    border: 1px solid #E4E5E7;
    font-family: "Suisse Intl Regular", Arial, sans-serif;
    font-size: 15px;
    line-height: 20px;
    color: #262729;
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}

.tsv-temy__link:hover {
    background-color: #FAF0F1;
    border-color: #A11826;
    color: #A11826;
    text-decoration: none;
}

@media (max-width: 1199px) {
    /* Одной колонкой оглавление встаёт между заголовком и обложкой —
       это его законное место: читатель видит устройство статьи сразу.
       Темы, наоборот, идут после статьи — они про «что дальше». */
    .tsv-rail { display: block; margin: 0 0 24px; }
    .tsv-aside { display: block; }
}

@media (max-width: 992px) {
    .tsv-doc {
        padding: 20px;
        border-radius: 16px;
        margin-bottom: 16px;
    }
}

@media (max-width: 600px) {
    .tsv-doc {
        padding: 16px;
        border-radius: 14px;
    }
}

/* ── типографика текста статьи ──────────────────────────────────────────────

   Единый набор правил на весь блог. До него каждая статья выглядела так,
   как её оставил редактор: замеры по 145 статьям показали 94 фрагмента
   с размером «12pt», 65 — со старым розовым #ea375e, 68 абзацев по центру,
   следы Word и Tilda, серые таблицы с рамкой #aaa и галочки FontAwesome
   вместо обычных маркеров списка в шести статьях.

   Ширину колонки здесь больше не задаём — её задаёт карточка (см. выше).
   Остаётся то, что от ширины не зависит.

   КЕГЛЬ И ИНТЕРЛИНЬЯЖ. Было 16/20 — это 1,25, слишком плотно для длинного
   текста. Стало 18/30. Списки раньше жили своей жизнью (16/24), теперь
   идут в том же ритме, что и абзацы.

   ЗАГОЛОВКИ. h2 был 22 px при весе 500 — на 6 пунктов крупнее основного
   текста, то есть почти неотличим. Стало 30/38 и вес 600. Отдельно
   починен случай, когда заголовок обёрнут в <strong>: тег внутри получал
   от общих стилей сайта свой размер и сбивал h2 обратно к 18 px.

   НАСЛЕДСТВО РЕДАКТОРА. Размеры, цвета, шрифты и выключку, записанные
   прямо в тексте, глушим: они не убираются из базы этим файлом, но
   перестают влиять на вид. Сам мусор чистится отдельно, скриптом. */

.n-article .n-article__content p,
.n-article .n-article__content li {
    font-size: 18px;
    line-height: 30px;
}

.n-article .n-article__content p { margin: 0 0 20px; }

.n-article .n-article__content h2 {
    font-size: 30px;
    line-height: 38px;
    font-weight: 600;
    margin: 48px 0 18px;
}

.n-article .n-article__content h3 {
    font-size: 22px;
    line-height: 30px;
    font-weight: 600;
    margin: 32px 0 12px;
}

/* Заголовок, обёрнутый в <strong> или <span>, брал размер у общих стилей
   сайта и переставал быть заголовком. Внутренности наследуют кегль. */
.n-article .n-article__content h2 *,
.n-article .n-article__content h3 * {
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    font-family: inherit !important;
    color: inherit !important;
}

.n-article .n-article__content ul,
.n-article .n-article__content ol {
    margin: 0 0 20px;
    padding-left: 24px;
}

.n-article .n-article__content li {
    margin: 0 0 10px;
    padding: 0;
}

.n-article .n-article__content li::marker { color: #A11826; }

/* Таблицы шли шрифтом по умолчанию — 13,3 px без наследования, — и в рамке
   1px solid #aaa, нарисованной руками. Теперь они той же гарнитуры, что
   текст, и в цветах бренда. Важность нужна: инлайн-стиль в тексте иначе
   сильнее любого селектора. */
.n-article .n-article__content table {
    font-size: 17px;
    line-height: 26px;
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 28px;
}

.n-article .n-article__content table td,
.n-article .n-article__content table th {
    border: 1px solid #EDE7E8 !important;
    padding: 12px 14px !important;
    vertical-align: top;
}

.n-article .n-article__content table th {
    background: #FAF0F1 !important;
    font-weight: 600;
    text-align: left !important;
}

/* Оформление, записанное в тексте: размеры в пунктах, старый розовый,
   чужие гарнитуры, выключка по центру. Обезвреживаем. */
.n-article .n-article__content span,
.n-article .n-article__content font {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    background-color: transparent !important;
    letter-spacing: normal !important;
}

.n-article .n-article__content p,
.n-article .n-article__content li,
.n-article .n-article__content h2,
.n-article .n-article__content h3 {
    font-family: inherit !important;
    color: inherit !important;
    text-align: left !important;
}

/* Галочки FontAwesome вместо маркеров списка встречаются в шести статьях
   и нарисованы старым розовым. Пока их не заменил скрипт — пусть будут
   хотя бы фирменного цвета. */
.n-article .n-article__content i[class*="fa-"] { color: #A11826 !important; }

@media (max-width: 992px) {
    .n-article .n-article__content p,
    .n-article .n-article__content li { font-size: 17px; line-height: 28px; }
    .n-article .n-article__content h2 { font-size: 24px; line-height: 30px; margin: 36px 0 14px; }
    .n-article .n-article__content h3 { font-size: 20px; line-height: 26px; margin: 26px 0 10px; }
    .n-article .n-article__content table { font-size: 15px; line-height: 22px; }
    .n-article .n-article__content table td,
    .n-article .n-article__content table th { padding: 10px !important; }
}