/* ============================================================
   web3D.pro : правка мобильной версии под требования
   Яндекс.Вебмастера и WCAG 2.5.5 (размер тап-зоны).

   Куда вставлять: Внешний вид, Настроить, Дополнительные стили.
   Этот код грузится ПОСЛЕ style.css темы, поэтому переопределяет
   её медиазапросы 992px / 700px / 420px без правки файлов темы.

   Что закрывает:
   1. Мелкий шрифт (в теме есть 10px, 10.5px, 11px, 11.5px и body 13px).
   2. Тап-зоны меньше 44px и зазоры между ссылками 4-8px.
   3. Автозум полей ввода на iOS (шрифт меньше 16px).
   4. Риск горизонтального скролла (длинные слова, grid min-width auto).
   5. Пропавшие на телефоне поиск и переключатель темы.
   6. Залипающий :hover на тач-экранах.
   7. Пустые поля 16px внутри карточек рубрики на мобильном.
   ============================================================ */

/* ------------------------------------------------------------
   0. База: запрет авторастяжения шрифта в iOS и перенос слов
   ------------------------------------------------------------ */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

h1, h2, h3, h4, p, li, a, dd, dt, blockquote,
.dek, .card h2, .card h3, .archive-hero h1, .article-hero h1 {
  overflow-wrap: break-word;
}

.post-content a,
.web3d-crumbs a { word-break: break-word; }

/* grid- и flex-элементы с min-width:auto растягивают трек
   под самое длинное неразрывное слово и тянут страницу вбок */
.article-body .post-content,
.article-body .toc,
.article-body .related,
.card, .card .body, .card .meta,
.card.feature .thumb, .card.feature .body,
.most-read li, .live .rail, .hero-text, .hero-figure { min-width: 0; }

/* ------------------------------------------------------------
   1. Тач-устройства: убираем залипающий hover
   ------------------------------------------------------------ */
@media (hover: none) {
  .card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--line);
  }
  .most-read li:hover { padding-left: 0; }
  .most-read li:hover::after { width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .live .track { animation: none; }
  .live .pulse { animation: none; }
  .card { transition: none; }
}

/* ============================================================
   2. Планшет и телефон (до 992px): тап-зоны и шапка
   ============================================================ */
@media (max-width: 992px) {

  /* --- Страховка от горизонтального скролла --- */
  html, body { max-width: 100%; overflow-x: hidden; }

  /* --- Шапка: компактный поиск вместо скрытого --- */
  /* В теме .search-trigger просто display:none, и поиска на
     телефоне не было вообще. Возвращаем как иконку 44x44.
     Подпись убираем через text-indent, а не font-size:0, иначе
     робот видит текст с нулевым кеглем и считает это мелким шрифтом. */
  .search-trigger {
    display: inline-flex;
    position: relative;
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    align-items: center;
    border-color: var(--line-2);
    text-indent: -200em;
    overflow: hidden;
    white-space: nowrap;
  }
  .search-trigger::before {
    position: absolute;
    top: 15px;
    left: 15px;
    text-indent: 0;
    width: 13px;
    height: 13px;
    border-width: 2px;
    box-shadow: 5px 5px 0 -3px var(--mute);
  }
  .search-trigger .kbd { display: none; }

  /* --- Переключатель темы: показываем только целевое состояние --- */
  /* Двухсекционный свитч на телефоне занимал 130px и мог выдавить
     шапку за вьюпорт. Оставляем одну плашку: «куда переключиться». */
  .theme-toggle {
    min-height: 44px;
    padding: 0;
    border-color: var(--line-2);
  }
  body:not(.lite) .theme-toggle .t-d { display: none; }
  body.lite .theme-toggle .t-l { display: none; }
  .theme-toggle span {
    min-height: 44px;
    padding: 0 14px;
    font-size: 12px;
    color: var(--fg);
    background: transparent;
    box-shadow: none;
    font-weight: 500;
  }

  /* --- Кнопки --- */
  .btn, .btn-ghost {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }
  .menu-toggle { min-width: 48px; min-height: 48px; font-size: 22px; }

  /* --- Бургер-меню: строки 48px вместо 32px, зазор вместо 4px --- */
  body.menu-open .main-nav {
    padding: 10px var(--pad) 14px;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
    overflow-x: hidden;
    gap: 0;
  }
  body.menu-open .main-nav ul { gap: 0; }
  body.menu-open .main-nav li { display: block; border-top: 1px solid var(--line); }
  body.menu-open .main-nav li:first-child { border-top: 0; }
  body.menu-open .main-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 12px;
    font-size: 15px;
    border-radius: 12px;
    color: var(--fg);
    white-space: normal;
  }
  body.menu-open .main-nav .current-menu-item > a,
  body.menu-open .main-nav .current-cat > a { border: 0; background: var(--card-hi); }

  /* --- Ссылки подвала: были 16px высоты с зазором 8px --- */
  .site-footer ul { gap: 0; }
  .site-footer ul li { border-top: 1px solid var(--line); }
  .site-footer ul li:first-child { border-top: 0; }
  .site-footer ul a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
  }

  /* --- Плашки, теги, пагинация: 44px и зазор 10px --- */
  .section-head .pills,
  .archive-hero .pill-row,
  .article-tags,
  .pagination { gap: 10px; }

  .section-head .pills a,
  .archive-hero .pill-row a,
  .article-tags a,
  .pagination a,
  .pagination span {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
  }

  /* --- Кнопки «поделиться»: в шаблоне заданы инлайновым style,
         поэтому переопределяем через !important --- */
  .article-hero .meta a.btn-ghost,
  .article-hero .meta button.btn-ghost,
  .article-body .toc a.btn-ghost,
  .article-body .toc button.btn-ghost {
    min-height: 44px;
    padding: 0 16px !important;
    font-size: 14px !important;
  }

  /* --- Изолированные плашки категорий: не в ряду, но кликабельны --- */
  /* .kicker это inline-flex без переноса: плашка сжималась и название
     рубрики рвалось на две строки внутри пилюли. */
  .kicker { flex-wrap: wrap; row-gap: 8px; }
  .kicker .chip { padding: 0 12px; flex: none; }
  .kicker .chip a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    white-space: nowrap;
  }
  .card .thumb .tag a,
  .archive .card .tag a,
  .category .card .tag a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
  }
  .card .thumb .tag { padding: 0 12px; }

  /* --- Чекбокс согласия в комментариях: нативные 13x13 --- */
  .comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
  }
  .comment-form-cookies-consent input[type="checkbox"] {
    width: 22px;
    height: 22px;
    min-height: 22px;
    flex: none;
    margin: 0;
  }
  .comment-form-cookies-consent label { font-size: 15px; }
  /* контейнеры этих кнопок тоже с инлайновым display:flex; gap:8px */
  .article-hero .meta > span[style] {
    margin-left: 0 !important;
    gap: 10px !important;
    flex-wrap: wrap;
    width: 100%;
  }
  .article-body .toc div[style] {
    gap: 10px !important;
    flex-wrap: wrap;
  }

  /* --- Хлебные крошки --- */
  .web3d-crumbs ol { gap: 2px 10px; }
  .web3d-crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 2px;
  }

  /* --- Содержание и «читайте также» ---
     Кликабельной была только строка текста (20px), сам пункт списка
     при этом занимал 40px. Высоту вешаем на ссылку, а не на li. */
  /* Зазор 2px при высоте пункта 40px это и есть «элементы слишком
     близко»: в статье с 20 подзаголовками таких пунктов двадцать
     подряд. Поднято до 44px и 4px, добавлено 3 сентября после замеров. */
  .article-body .toc ol,
  .article-body .related ol { gap: 4px; }
  /* штрих-маркер ставим по центру первой строки, а не по центру
     всего пункта, иначе у двухстрочных названий он висит в междустрочье */
  .article-body .toc li::before,
  .article-body .related li::before { top: 22px; }
  .article-body .toc ol a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
  }
  .article-body .related ol a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
  }

  /* В одноколоночной раскладке содержание встаёт между шапкой статьи
     и текстом. На длинном материале это 20 пунктов и около 800px
     пролистывания до первого абзаца. Ограничиваем высоту блока,
     внутри остаётся вертикальная прокрутка.
     Если хотите видеть содержание целиком, уберите max-height. */
  .article-body .toc #js-toc {
    max-height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    padding: 6px 12px;
    background: var(--card);
  }

  /* --- Поля ввода: 16px, иначе iOS зумит страницу при фокусе --- */
  .search-form input[type="search"],
  .comment-form input[type="text"],
  .comment-form input[type="email"],
  .comment-form input[type="url"],
  .comment-form textarea,
  .site-footer .newsletter input,
  input[type="text"], input[type="email"], input[type="search"], select, textarea {
    font-size: 16px;
    min-height: 48px;
  }
  .comment-form textarea { min-height: 140px; }
  .search-form button,
  .comment-form input[type="submit"],
  .comment-form .submit { min-height: 48px; padding: 0 20px; }
  .search-form { flex-wrap: wrap; }
}

/* ============================================================
   3. Телефон (до 700px): типографика не мельче 12px
   ============================================================ */
@media (max-width: 700px) {

  /* базовый кегль: в теме 14px, а на 420px падал до 13px */
  body { font-size: 16px; }

  /* --- Тело статьи --- */
  .article-body .post-content { font-size: 17px; line-height: 1.7; gap: 18px; }
  .article-body .post-content h2 { font-size: 22px; }
  .article-body .post-content h3 { font-size: 19px; }
  .article-body .post-content blockquote { font-size: 18px; padding: 18px 18px 18px 20px; }
  .article-body .post-content blockquote::before { font-size: 48px; top: -6px; left: 12px; }
  .article-body .post-content pre { font-size: 13px; padding: 14px; }
  .article-body .post-content ul,
  .article-body .post-content ol { padding-left: 20px; gap: 8px; }

  /* Таблицы в статье: даём переносить текст, чтобы не было
     внутреннего скролла на каждой таблице */
  .post-content table th,
  .post-content table td { font-size: 14px; white-space: normal; padding: 10px 12px; }

  .wp-caption-text { font-size: 13px; }

  /* --- Шапка статьи --- */
  .article-hero h1 { font-size: 27px; }
  .article-hero .dek { font-size: 17px; }
  .article-hero .meta { font-size: 13px; gap: 6px 16px; }
  .article-body h4, .aside-label, .related-title { font-size: 12px; }
  .article-body .toc,
  .article-body .related { font-size: 15px; }
  .article-body .related .mt { font-size: 12px; }
  .article-tags a { font-size: 13px; }

  /* --- Главная: hero --- */
  .hero-text { padding: 20px; backdrop-filter: none; }
  .hero-text h1 { font-size: 29px; }
  .hero-text .dek { font-size: 16px; }
  .hero-text .meta { font-size: 13px; gap: 6px 16px; flex-wrap: wrap; }
  /* две кнопки в ряд на 390px не влезают, и вторая рвётся на две
     строки внутри пилюли. Ставим их друг под другом во всю ширину. */
  .hero-text .actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-figure .caption { font-size: 13px; padding: 14px 16px; gap: 10px; flex-wrap: wrap; }
  .hero-figure .credit { font-size: 12px; top: 12px; right: 12px; padding: 5px 10px; }
  .kicker { font-size: 12px; }

  /* --- Заголовки секций и карточки --- */
  .section-head h2 { font-size: 22px; }
  .section-head .pills a { font-size: 13px; }
  .card h3, .card h2 { font-size: 18px; }
  .card.feature h3 { font-size: 21px; }
  .card.feature .dek { font-size: 15px; }
  .card .tag { font-size: 12px; }
  .card .thumb .tag { font-size: 12px; }
  .thumb .meta { font-size: 12px; }

  /* Мета карточки: nowrap + overflow:hidden обрезал автора и дату.
     Разрешаем перенос вместо многоточия. */
  .card .meta {
    font-size: 12px;
    flex-wrap: wrap;
    gap: 0 4px;
    overflow: visible;
  }
  .card .meta span { white-space: normal; overflow: visible; text-overflow: clip; }

  /* --- Блок «самое читаемое» --- */
  .most-read { padding: 18px; }
  .most-read h4 { font-size: 12px; }
  .most-read .ti { font-size: 16px; line-height: 1.35; }
  .most-read .mt { font-size: 12px; }
  .most-read .num { font-size: 17px; }
  .most-read li { padding: 12px 0; min-height: 44px; }

  /* --- Рубрика и архив --- */
  .archive-hero h1 { font-size: clamp(28px, 8vw, 44px); }
  .archive-hero__dek { font-size: 15px; }
  .archive-hero .pill-row a { font-size: 14px; }
  /* в теме на 700px карточке рубрики возвращали padding:16px 0,
     из-за чего сверху и снизу внутри рамки зияли пустые полосы */
  .archive .card, .category .card { padding: 0; }
  .archive .card h2, .category .card h2 { font-size: 18px !important; }
  .archive .card .dek, .category .card .dek { font-size: 15px; }
  .archive .card .meta, .category .card .meta { font-size: 12px; }
  .archive .card .tag a, .category .card .tag a { font-size: 12px; letter-spacing: 0.06em; }
  .archive .card .body, .category .card .body { padding: 14px 16px 16px; }
  .archive .card.feature h2, .category .card.feature h2 { font-size: 21px; }

  /* --- Лента live: на телефоне из бегущей строки делаем
         обычную ленту со свайпом. Попасть пальцем в движущуюся
         ссылку высотой 17px невозможно, и таких ссылок 36 штук. --- */
  .live .rail { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .live .rail::-webkit-scrollbar { display: none; }
  .live .track {
    animation: none;
    padding: 0 14px;
    gap: 22px;
    font-size: 13px;
    scroll-snap-type: x proximity;
  }
  .live .track span { min-height: 44px; scroll-snap-align: start; }
  .live .track a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Шаблон дублирует ленту (18 постов -> 36 span), это нужно только
     для бесшовной прокрутки анимацией. Анимации на телефоне нет,
     поэтому вторую половину гасим, иначе при свайпе заголовки
     повторяются. Если в шаблоне поменяется число постов в ленте,
     поправьте число 19 = (кол-во постов + 1). */
  .live .track span:nth-child(n+19) { display: none; }
  .live .lab { font-size: 12px; }
  .live .head { padding: 0 14px; min-height: 44px; }

  /* --- Крошки --- */
  .web3d-crumbs { font-size: 13px; }

  /* --- Подвал --- */
  .site-footer { font-size: 15px; gap: 22px; padding: 32px var(--pad) 24px; }
  .site-footer h4, .footer-label { font-size: 12px; }
  .site-footer .col-brand p { font-size: 14px; }
  .site-footer .newsletter b { font-size: 15px; }
  .site-bottom {
    font-size: 12px;
    letter-spacing: 0.06em;
    padding: 14px var(--pad) 22px;
    line-height: 1.5;
  }

  /* --- Комментарии --- */
  .comments-area h2 { font-size: 20px; }
  .comment-meta { font-size: 13px; }
  .comment-body { padding: 16px; }

  /* --- 404 и поиск --- */
  .error-404 { padding: 56px var(--pad); }
  .error-404 h1 { font-size: 26px; }
  .error-404 p { font-size: 16px; }
  .search-head { padding: 32px var(--pad) 18px; }
  .search-head h1 { font-size: 28px; }
  .search-head p { font-size: 15px; }
}

/* ============================================================
   4. Узкий телефон (до 560px): шапка гарантированно влезает
   ============================================================ */
@media (max-width: 560px) {
  .top { column-gap: 10px; }
  .top-right { gap: 8px; }
  .logoSwap.is-lg svg, .logoSwap.is-lg img,
  .logoSwap.is-sm svg, .logoSwap.is-sm img { height: 32px; }
  .theme-toggle { display: none; }   /* приоритет: поиск, подписка, меню */
  .top-right .btn { padding: 0 14px; font-size: 13px; }
}

/* ============================================================
   5. ДОБАВЛЕНО 3 сентября после установки и замеров.

   Поля формы обратной связи на /contact-us/ остались 38px высотой
   и 14px кеглем: правило из блока 2 их не достало. Everest Forms
   стилизует поля селекторами вида `.evf-container .input-text`,
   специфичность 0,2,1 против 0,1,1 у `input[type="text"]`, поэтому
   плагин выигрывал каскад несмотря на порядок подключения.

   Кегль 14px в поле ввода это ещё и автозум на iOS: при тапе
   страница увеличивается, и её приходится отщипывать назад.

   Замер до правки: три поля 362x38, кегль 14px.
   ============================================================ */
@media (max-width: 992px) {
  .evf-container input.input-text,
  .evf-container input[type="text"],
  .evf-container input[type="email"],
  .evf-container input[type="tel"],
  .evf-container input[type="url"],
  .evf-container input[type="number"],
  .evf-container select {
    font-size: 16px !important;
    min-height: 48px !important;
  }
  .evf-container textarea.input-text,
  .evf-container textarea {
    font-size: 16px !important;
    min-height: 140px !important;
  }
  .evf-container .everest-forms-submit-button,
  .evf-container button[type="submit"] {
    min-height: 48px !important;
    font-size: 16px !important;
  }
  /* подписи полей и текст ошибок валидации не мельче 13px */
  .evf-container label,
  .evf-container .evf-field-label { font-size: 15px; }
  .evf-container .evf-error,
  .evf-container .everest-forms-error { font-size: 13px; }

  /* Плашка рубрики у больших карточек лежит не в .thumb, а в .body,
     поэтому селектор из блока 2 её не доставал: ссылка оставалась
     display:inline, где min-height не применяется вовсе, и плашка
     была 16px высотой. Замер до правки: 112x16, десять штук на главной. */
  .card .tag a,
  .card.feature .body .tag a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
  }
  .card .body .tag { display: inline-flex; padding: 0 12px; }

  /* Блок «ещё материалы» на главной: 43px, не хватало одного пикселя */
  .most-read li a,
  .most-read .ti a { display: block; min-height: 22px; }
  .most-read li { min-height: 46px; }
}

/* ============================================================
   6. Сворачиваемое содержание статьи на телефоне.

   Подпись «В этом материале» заменяется кнопкой (это делает
   mobile-fix.js), блок свёрнут по умолчанию. На компьютере кнопка
   выглядит как прежняя подпись и не кликается, содержание видно
   всегда. Без JS всё остаётся раскрытым, то есть не хуже прежнего.
   ============================================================ */
.w3d-toc-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: default;
}
.w3d-toc-btn .w3d-toc-count,
.w3d-toc-btn .w3d-toc-caret { display: none; }

@media (max-width: 992px) {
  .article-body .toc .w3d-toc-btn {
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--line-2);
    border-radius: 12px;
    background: var(--card);
    cursor: pointer;
    font-size: 13px;
    letter-spacing: 0.08em;
  }
  .article-body .toc .w3d-toc-btn:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 2px;
  }

  /* число пунктов: сразу понятно, насколько длинный список */
  .w3d-toc-btn .w3d-toc-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--card-hi);
    color: var(--mute);
    font-size: 12px;
    letter-spacing: 0;
  }

  /* стрелка справа, поворачивается при раскрытии */
  .w3d-toc-btn .w3d-toc-caret {
    display: block;
    width: 9px;
    height: 9px;
    margin-left: auto;
    border-right: 2px solid var(--mute);
    border-bottom: 2px solid var(--mute);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.18s ease;
  }
  .w3d-toc-btn[aria-expanded="true"] .w3d-toc-caret {
    transform: rotate(-135deg) translate(-2px, -2px);
  }

  /* свёрнутое состояние */
  .article-body .toc.w3d-toc-closed #js-toc { display: none; }

  /* раскрытое: полный список, но не длиннее половины экрана */
  .article-body .toc #js-toc {
    max-height: 50vh;
    margin-top: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .w3d-toc-btn .w3d-toc-caret { transition: none; }
}

/* ============================================================
   8. Картинки внутри текста статьи.

   В теме нет ни одного правила для figure, wp-block-image и figcaption:
   до сих пор картинок в теле статей не было вообще. Без этих правил
   браузер применяет к figure поля по умолчанию 1em 40px, и картинка
   оказывается уже текста, а на телефоне заметно уже.

   .post-content это flex-колонка с gap 20px, поэтому собственные
   отступы у figure не нужны, иначе они сложатся с gap.
   ============================================================ */
.post-content figure,
.post-content .wp-block-image {
  margin: 0;
  max-width: 100%;
  min-width: 0;
}
.post-content figure img,
.post-content .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--line);
}
.post-content figcaption {
  margin-top: 9px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--mute);
}

@media (max-width: 700px) {
  .post-content figure img,
  .post-content .wp-block-image img { border-radius: 12px; }
  .post-content figcaption { font-size: 13px; }
}

/* ============================================================
   7. Смещение вёрстки при подмене шрифта (CLS).

   Замер на рубрике при эмуляции 4G дал CLS 0.255 при пороге 0.1.
   Источник: когда подгружается веб-шрифт, кнопка «Подписка» меняет
   ширину с 78 на 82px, строка шапки на мгновение переносится, высота
   шапки прыгает с 68 на 85px и всё содержимое страницы уезжает вниз,
   а затем возвращается. Два сдвига подряд, 0.235 и 0.020.

   Лечится не борьбой со шрифтом, а тем, что геометрия шапки перестаёт
   зависеть от метрик текста: высота строки и ширина кнопки заданы явно.
   ============================================================ */
.site-header .top { min-height: 68px; }
.site-header .top-right { flex-wrap: nowrap; }

@media (max-width: 992px) {
  /* min-height оказалось мало: высота всё равно прыгала с 68 на 85px.
     Пока меню свёрнуто, высоту шапки фиксируем жёстко, тогда ничто
     внутри неё не может сдвинуть страницу. При открытом бургер-меню
     ограничение снимается, иначе список пунктов будет обрезан. */
  body:not(.menu-open) .site-header .top {
    height: 68px;
    overflow: hidden;
    align-items: center;
  }
  body:not(.menu-open) .site-header .top-right { align-items: center; }

  .site-header .top-right .btn { min-width: 92px; }
}
@media (max-width: 560px) {
  .site-header .top-right .btn { min-width: 86px; }
}
@media (max-width: 400px) {
  .site-header .top-right .btn { min-width: 78px; }
}

@media (max-width: 400px) {
  .logoSwap.is-lg svg, .logoSwap.is-lg img,
  .logoSwap.is-sm svg, .logoSwap.is-sm img { height: 30px; }
  .top-right .btn { padding: 0 12px; font-size: 12px; }

  /* заголовки чуть тише, но не ниже читаемого минимума */
  .hero-text h1 { font-size: 25px; }
  .article-hero h1 { font-size: 24px; }
  .article-body .post-content { font-size: 16px; }
  .article-body .post-content h2 { font-size: 20px; }
  .article-body .post-content h3 { font-size: 18px; }
  .section-head h2 { font-size: 20px; }
  .card h3, .card h2 { font-size: 17px; }

  /* подвал подписки: кнопка во всю ширину */
  .site-footer .newsletter .btn { width: 100%; }
}