/* ── Терминал-главная: flex-layout.
     Слева — .home-left (весь основной контент непрерывным потоком:
     эксперты + lead + темы + компании), справа — sticky-лента .home-news.
     Поскольку лента вынесена в отдельную колонку, высота правой колонки
     больше НЕ влияет на высоту левой — при фильтрации оставшиеся блоки
     поджимаются вверх без пустот.
     На планшете/мобиле колонки схлопываются: контент, затем лента. ── */
  .home-layout {
    /* СЕТКА, а не флекс — намеренно, это лечение «мелькающей раскладки».
       При флексе ширина левой колонки зависела от того, пришла ли правая:
       сервер отвечает 1.6–1.9 с и досылает HTML потоком, а .home-news лежит
       в разметке ПОСЛЕ .home-left. Пока её нет, единственный ребёнок
       растягивался на все 989 px, .exp-grid (auto-fit minmax(200px))
       раскладывался в 4 карточки вместо 3, и с приходом ленты вся середина
       скачком сжималась. У грида дорожки заданы заранее — левая колонка
       получает свои 641 px в первом же кадре, что бы ещё ни грузилось.
       Правило: колонки главной задаём ТРЕКАМИ, не растяжением ребёнка. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 28px;
    /* Нижний отступ обязателен: правая колонка выравнивается по низу левой
       (min-height от ddsFillFeed), а подписка прижата к её низу — при нулевом
       padding-bottom блок упирался прямо в следующую секцию и футер. */
    padding: 24px 28px 30px;
  }
  .home-left        { min-width: 0; }
  .home-main-top    { min-width: 0; }
  .home-main-bottom { min-width: 0; }
  /* flex-колонка: подписка прижимается к низу (margin-top:auto ниже), а JS
     задаёт min-height = высоте левой колонки → низ ленты/подписки ровно
     совпадает с низом кейсов. Пустот ни справа, ни слева — «зафиксировано». */
  /* Ширину держит вторая дорожка грида (320px), width дублирует её для
     схлопывания на планшете (там дорожка одна и width: 100%). */
  .home-news        { width: 320px; min-width: 0; display: flex; flex-direction: column; }

  /* Правая колонка скроллится вместе со страницей.
     Никакого sticky: из-за overflow-x: hidden на body порог top отсчитывался
     не от окна, а от body — а у него padding-top в высоту фикс-шапки, и
     колонку выталкивало вниз на 72px, ломая выравнивание с левой. */
  .home-news { align-self: start; }

  /* Eyebrow заголовок ленты в правой колонке.
     Отступа сверху нет намеренно: командная панель вынесена НАД обеими
     колонками (.cmd-bar--top), поэтому обе стартуют с одного уровня сами.
     Раньше тут стоял margin-top: 64px под высоту панели — и разъезжался,
     стоило добавить кнопку фильтра: панель переносилась на новую строку. */
  .home-news .news-side-h {
    display: flex; align-items: baseline; gap: 12px;
    border-top: 1px solid var(--ink); padding: 10px 0;
    margin-bottom: 10px;
  }
  .home-news .news-side-h .t {
    font-family: var(--mono); font-size: 11px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .14em; color: var(--ink);
  }
  .home-news .news-side-h .t::before { content: ':: '; color: var(--accent); }
  .home-news .news-side-h a { font-family: var(--mono); font-size: 11px; color: var(--accent); margin-left: auto; }

  /* Лента в правой колонке — компактный стек, не таблица.
     В мобильной версии этого селектора нет — там лента в основной колонке
     и использует стандартный табличный вид. */
  .home-news .feed-head { display: none; }
  /* Сетка, а не flex-колонка: дата и бейдж обязаны стоять в одну строку.
     Прежний расчёт был на обёртку .news-meta-line, которой в разметке WP нет,
     а display: inline на flex-детях игнорируется — вот дата, бейдж и заголовок
     и вставали тремя этажами с зазором на каждом. */
  .home-news .feed-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 5px 8px;
    padding: 12px 0;
  }
  .home-news .feed-row > .fr-date {
    grid-area: 1 / 1;
    width: auto; padding-top: 0;
    font-size: 10px; letter-spacing: .04em; opacity: .8;
  }
  .home-news .feed-row > .fr-section {
    grid-area: 1 / 2; justify-self: start;
    width: auto; padding-top: 0;
  }
  .home-news .feed-row .fr-body { grid-area: 2 / 1 / 3 / 3; }
  .home-news .feed-row .fr-section .badge { font-size: 9px; }
  .home-news .feed-row > .fr-read,
  .home-news .feed-row > .fr-views,
  .home-news .feed-row > .fr-arr { display: none; }
  .home-news .feed-row .fr-body { padding-right: 0; }
  .home-news .feed-row .fr-body h3 { font-size: 14px; line-height: 1.3; }
  .home-news .feed-row .fr-body p {
    font-size: 11px; line-height: 1.45;
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; overflow: hidden;
  }
  /* .fr-body в селекторе обязателен: ниже в файле стоит
     `.feed-row .fr-body .fr-by { display: flex }` с такой же специфичностью
     (0,3,0), и при равенстве побеждает правило, идущее позже. Без этого
     уточнения автор вылезал в узкой ленте и раздувал строку. */
  .home-news .feed-row .fr-body .fr-by { display: none; }
  /* Объединяем дату и бейдж в одну meta-строку наверху карточки */
  .home-news .news-meta-line {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 4px;
  }

  /* Подписка в правой колонке — прижата к низу (margin-top:auto), чтобы её низ
     совпадал с низом левой колонки (см. min-height от ddsFillFeed). На телефоне
     ниже переопределяется на фиксированный отступ — там колонки идут стопкой. */
  .home-news .sub-w { margin-top: auto; }
  /* Раскрытая лента: подписка идёт по потоку с обычным отступом (margin-top:auto
     прижал бы её вниз и оставил дыру над ней). */
  .home-news.is-feed-expanded .sub-w { margin-top: 22px; }
  .home-news .sub-w h3 { font-size: 14px; }
  .home-news .sub-w p { font-size: 11px; margin-bottom: 10px; }

  /* ── «Будьте в курсе»: каналы вместо почты (23.09.2026) ──
     Тёмную плашку .sub-w завела почтовая форма: чёрный фон нужен был
     полю ввода. Без формы тот же блок читался чёрным кирпичом с висящей
     линией внизу, а текст в нём шёл моноширинным — он там для служебных
     подписей, а не для фразы. Светлая карточка, как у соседних блоков
     колонки, и обычный шрифт. */
  .home-news .home-follow {
    margin-top: auto;
    background: var(--card); border: 1px solid var(--line);
    /* Акцентная полоса слева и терракотовые кнопки: белая карточка на
       светлом фоне колонки читалась как пустое место (замечание редакции
       23.09.2026 — «незаметная и бледная»). Тёмная плашка, наоборот,
       давила; полоса даёт опору, не затемняя блок. */
    border-left: 3px solid var(--accent);
    border-radius: var(--r-md); padding: 16px 18px;
  }
  .home-news.is-feed-expanded .home-follow { margin-top: 22px; }
  .home-news .home-follow h3 {
    font-family: var(--serif); font-size: 16px; font-weight: 500;
    color: var(--ink); margin: 0 0 6px;
  }
  .home-news .home-follow p {
    font-family: var(--sans); font-size: 13px; line-height: 1.5;
    color: var(--ink-3); margin: 0 0 12px;
  }
  .home-news .home-follow .dds-follow { margin: 0; gap: 8px; }
  .home-news .home-follow .dfl-b {
    border-color: var(--accent); color: var(--accent); font-weight: 500;
  }
  .home-news .home-follow .dfl-b:hover { background: var(--accent); color: #fff; }

  /* ── Кейсы компаний в правой колонке ── */
  .cases-side-h {
    display: flex; align-items: baseline; gap: 12px;
    border-top: 1px solid var(--ink); padding: 10px 0; margin: 20px 0 8px;
  }
  .cases-side-h .t {
    font-family: var(--mono); font-size: 11px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .14em; color: var(--ink);
  }
  .cases-side-h .t::before { content: ':: '; color: var(--accent); }
  .cases-side-h a { font-family: var(--mono); font-size: 11px; color: var(--accent); margin-left: auto; }

  .case-card {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid var(--line-2);
    text-decoration: none;
  }
  .case-card:last-of-type { border-bottom: none; }
  .cc-thumb {
    width: 72px; height: 54px; flex-shrink: 0;
    background: var(--ink-2); border-radius: var(--r-sm);
    overflow: hidden; display: flex; align-items: center; justify-content: center;
  }
  .cc-thumb svg { width: 100%; height: 100%; }
  .case-card:hover .cc-thumb { opacity: .85; }
  .cc-body { flex: 1; min-width: 0; }
  .cc-co {
    font-family: var(--mono); font-size: 10px; font-weight: 500;
    color: var(--accent); text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: 3px;
  }
  .cc-title {
    font-family: var(--serif); font-size: 13px; font-weight: 500;
    color: var(--ink); line-height: 1.3; margin-bottom: 4px;
  }
  .case-card:hover .cc-title { color: var(--accent); }
  .cc-meta { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }

  /* ── Кейсы в основном потоке (широкая колонка) ── */
  .cases-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 0 28px; margin-bottom: 18px;
  }
  .cases-grid .case-card { border-bottom: 1px solid var(--line-2); }
  /* Из напечатанного пула кейсов видны только отмеченные: отбор делает
     инлайн-скрипт в front-page.php. Закреплённые редакцией класса --pool
     не имеют и правилом не задеваются. Обложки скрытых с loading="lazy"
     браузер не запрашивает. */
  .cases-grid .case-card--pool { display: none; }
  /* На «Все» видны is-on (ротация), но НЕ скрытые фильтром (:not([hidden])). */
  .cases-grid .case-card--pool.is-on:not([hidden]) { display: flex; }
  /* Выбран регион (body.dds-reg): показываем ВСЕ подходящие кейсы из пула, не
     только is-on. Скрытые регионом ([hidden]) не затрагиваем — их прячет
     базовое правило [hidden]/.case-card--pool. */
  body.dds-reg .cases-grid .case-card--pool:not([hidden]) { display: flex; }
  .cases-grid .cc-title { font-size: 14px; }
  @media (max-width: 700px) {
    .cases-grid { grid-template-columns: 1fr; }
  }

  /* Командная панель: крошки + фильтры */
  .cmd-bar {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 22px; flex-wrap: wrap;
  }
  /* Панель над колонками: те же поля, что у .home-layout, чтобы крошки
     и фильтры стояли по одной вертикали с контентом. */
  .cmd-bar--top { padding: 14px 28px 0; margin-bottom: 12px; }
  /* Ряды кнопок не размазываются по всей ширине: фильтр материалов и период
     держатся вместе справа, как задумано, а не разъезжаются по краям. */
  .cmd-bar--top .cmd-toggle { flex-shrink: 0; }
  .cmd-bar .crumbs { padding: 0; }
  .cmd-bar .grow { flex: 1; }
  .cmd-toggle {
    display: inline-flex;
    border: 1px solid var(--line); border-radius: 2px; overflow: hidden;
  }
  .cmd-toggle button {
    padding: 6px 12px; font-family: var(--mono); font-size: 11px;
    background: transparent; color: var(--ink-2);
    border: none; border-right: 1px solid var(--line);
    cursor: pointer; letterspacing: .04em;
  }
  .cmd-toggle button:last-child { border-right: none; }
  .cmd-toggle button.active { background: var(--ink); color: var(--card); }

  /* — Бейдж активного фильтра по региону — */
  .region-filter-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 8px 4px 10px;
    border: 1px solid var(--accent); border-radius: 2px;
    background: var(--accent-bg);
    font-family: var(--mono); font-size: 11px; color: var(--ink);
  }
  .region-filter-badge[hidden] { display: none; }
  .region-filter-badge .rfb-eyebrow {
    color: var(--accent); font-weight: 500; letter-spacing: .06em;
    text-transform: uppercase; font-size: 10px;
  }
  .region-filter-badge .rfb-code { color: var(--accent); font-weight: 500; }
  .region-filter-badge .rfb-name { color: var(--ink); }
  .region-filter-badge .rfb-reset {
    margin-left: 4px; padding-left: 8px; border-left: 1px solid var(--accent);
    color: var(--accent-deep); font-size: 11px;
  }
  .region-filter-badge .rfb-reset:hover { color: var(--ink); }

  /* — Скрытые элементы при фильтрации — */
  .home-main-top [data-region][hidden],
  .home-main-bottom [data-region][hidden],
  .home-news [data-region][hidden] { display: none !important; }
  /* Скрытые по секционному фильтру */
  .sec-hidden { display: none !important; }
  /* Скрытые по временному фильтру */
  .period-hidden { display: none !important; }
  .ranking [data-region][hidden] { display: none !important; }
  /* Дополнительные строки рейтинга (для подиум-компаний) — скрыты по умолчанию,
     показываются только когда подиум скрыт (т.е. при фильтре по региону). */
  .rk-row.podium-also { display: none; }
  .ranking.is-filtered .rk-row.podium-also { display: grid; }
  .ranking.is-filtered .podium { display: none; }

  /* Пустой регион — заглушка */
  .rk-empty {
    display: flex; align-items: center; gap: 16px;
    margin: 0 0 24px;
    padding: 18px 22px;
    background: rgba(0,0,0,.03); border: 1px dashed var(--line);
    border-radius: var(--r-sm);
  }
  .rk-empty[hidden] { display: none; }
  .rk-empty-ic {
    width: 38px; height: 38px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-size: 22px;
    color: var(--accent); border: 1px solid var(--line); border-radius: 2px;
  }
  .rk-empty-t { font-family: var(--serif); font-size: 18px; color: var(--ink); }
  .rk-empty-s { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 4px; }
  .rk-empty-s a { color: var(--accent); }

  /* — Featured pinned lead — */
  .lead-card {
    background: var(--card);
    border: 1px solid var(--ink);
    border-radius: 0;
    margin-bottom: 24px; position: relative;
    display: grid; grid-template-columns: 1fr 360px;
  }
  .lead-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--accent);
  }
  /* justify-content:center — короткий текст стоит по центру рядом с обложкой,
     а не растягивается margin-top:auto, оставляя пустоту между лидом и кнопкой. */
  .lead-text { padding: 18px 22px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
  .lead-text .lt-top {
    display: flex; align-items: baseline; margin-bottom: 14px;
    font-family: var(--mono); font-size: 10px; color: var(--ink-4); gap: 12px;
  }
  .lead-text .lt-top .grow { flex: 1; }
  .lead-text h1, .lead-text .lt-title {
    font-family: var(--serif); font-size: 27px; font-weight: 400;
    color: var(--ink); line-height: 1.12; letter-spacing: -0.01em;
    margin-bottom: 8px;
  }
  .lead-text .lt-lead {
    font-family: var(--serif); font-size: 14px; color: var(--ink-2);
    line-height: 1.55; margin-bottom: 0;   /* кнопки «Читать» больше нет — нижний отступ не нужен */
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* Блок кликается целиком: невидимая растянутая ссылка на заголовке. Обложка
     тоже ссылка — ей нужен свой слой, иначе растянутая накроет её сверху
     (правило темы: вторая ссылка внутри карточки получает z-index). */
  .lead-card { position: relative; }
  /* Растянутая ссылка живёт на ПСЕВДОЭЛЕМЕНТЕ ссылки внутри заголовка,
     а не на самом заголовке. Когда сюда дописывали второй селектор,
     часть «a::after» осталась только у него, и первая половина правила
     превратилась в «.lead-text h1 { position: absolute; inset: 0 }» —
     заголовок вырывался из потока и растягивался на всю карточку.
     Отсюда правило: у каждого селектора в списке пишем хвост целиком. */
  .lead-text h1 a::after,
  .lead-text .lt-title a::after { content: ''; position: absolute; inset: 0; z-index: 0; }
  .lead-cover { position: relative; z-index: 1; }
  .lt-mini {
    display: flex; gap: 0; margin-bottom: 16px;
    border: 1px solid var(--line-2); background: var(--card-2);
  }
  .lt-mini > div {
    flex: 1; padding: 8px 12px; line-height: 1.2;
    border-right: 1px solid var(--line-2);
    display: flex; flex-direction: column; gap: 2px;
  }
  .lt-mini > div:last-child { border-right: none; }
  .lt-mini .ltm-l {
    font-family: var(--mono); font-size: 9px; color: var(--ink-4);
    text-transform: uppercase; letter-spacing: .08em;
  }
  .lt-mini .ltm-v {
    font-family: var(--serif); font-size: 16px; font-weight: 500;
    color: var(--ink); display: flex; gap: 4px; align-items: baseline;
  }
  .lt-mini .ltm-v .ltm-d { font-family: var(--mono); font-size: 9px; }
  .lt-mini .ltm-v .ltm-d.up { color: var(--good); }
  .lt-mini .ltm-v .ltm-d.dn { color: var(--bad); }
  .lt-actions { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
  .lt-actions .grow { flex: 1; }
  .lt-stats {
    display: flex; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  }
  .lead-cover {
    position: relative; min-height: 200px;
    border-left: 1px solid var(--line); overflow: hidden;
    background: linear-gradient(160deg, hsl(28 26% 78%) 0%, hsl(28 22% 56%) 60%, hsl(28 30% 32%) 100%);
  }
  .lead-cover::after {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 11px);
    pointer-events: none;
  }
  /* ── БЕЗ ПОДЛОЖЕК ПОД ФОТОГРАФИЯМИ ──────────────────────────────────
     Все обложки рисовались поверх декоративного градиента со штриховкой.
     Пока снимок не пришёл (а он тяжёлый: фотографии лежат в PNG — обложка
     закреплённого материала весит 686 КБ там, где JPEG весил бы 50), читатель
     видел цветной прямоугольник, который затем подменялся фотографией. Это и
     есть «мелькает блок с закреплённой темой».
     Там, где внутри есть <img>, подложку снимаем совсем: место под фото
     остаётся частью карточки, и подмена почти не читается. Где фотографии
     нет — градиент остаётся, там он осмысленная заглушка, а не подложка.
     :has() поддерживают все текущие браузеры; в старых просто останется
     прежний градиент — не ошибка, а прежнее поведение. */
  .lead-cover--photo,
  .lead-cover:has(img),
  .topic-img:has(img),
  .feat-co-cover:has(img),
  .cc-thumb:has(img) { background: none; }

  .lead-cover--photo::after,
  .lead-cover:has(img)::after,
  .topic-img:has(img)::after,
  .feat-co-cover:has(img)::after { content: none; }
  .lead-cover svg.lc-chart { position: absolute; inset: 0; width: 100%; height: 100%; }
  .lead-cover .lc-label {
    position: absolute; top: 12px; left: 14px; right: 14px;
    display: flex; align-items: center;
    font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.8);
    letter-spacing: .08em; text-transform: uppercase;
  }
  .lead-cover .lc-label .grow { flex: 1; }
  .lead-cover .lc-caption {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 8px 14px;
    background: linear-gradient(transparent, rgba(0,0,0,.55));
    display: flex; align-items: center; gap: 10px;
    font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.8);
  }
  .lead-cover .lc-caption .grow { flex: 1; }
  .lead-cover .lc-caption .lc-tag { color: var(--accent); }

  /* — Полоса-маршрут «Строите дом?» (под главным материалом) —
     Три шага из существующих страниц: сравнение → смета → каталог.
     Намеренно не кнопка-баннер: портал редакционный, и маршрут читается как
     навигация, а не как реклама. */
  .dds-route {
    display: flex; align-items: stretch; gap: 0;
    margin: 0 0 24px; background: var(--accent-bg);
    border: 1px solid var(--accent); border-radius: var(--r-md);
    overflow: hidden;
  }
  /* Плашка терракотовая, а не графитовая: маршрут — это действие, и он должен
     читаться как действие, а не как ещё один служебный заголовок. */
  .dds-route .dr-label {
    display: flex; align-items: center; flex-shrink: 0;
    padding: 0 16px; background: var(--accent); color: #fff;
    font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
    text-transform: uppercase; font-weight: 600;
  }
  .dds-route .dr-step {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; text-decoration: none; color: inherit;
    border-left: 1px solid var(--line-2);
    transition: background .14s;
  }
  /* Разделитель у первого шага не нужен — но правило ДОЛЖНО быть заперто
     в десктопном медиазапросе. Селектор с :first-of-type даёт 0,3,0 и без
     запора побеждает мобильное `.dds-route .dr-step` (0,2,0) НЕЗАВИСИМО
     от порядка правил: на телефоне у первого чипа пропадала левая половина
     обводки (замер 12.08.2026: border-left 0px против 1px у соседей).
     Тот же класс ошибки, что с .page-template-page-rating в style.css. */
  @media (min-width: 901px) {
    .dds-route .dr-step:first-of-type { border-left: none; }
  }
  .dds-route .dr-step:hover { background: #fff; }
  .dds-route .dr-step { border-left-color: rgba(194,65,12,.25); }
  .dds-route .dr-n {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-bg); color: var(--accent-deep);
    border: 1px solid var(--accent);
    font-family: var(--mono); font-size: 11px; font-weight: 600;
  }
  .dds-route .dr-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
  .dds-route .dr-t b { font-size: 13.5px; font-weight: 600; color: var(--ink); }
  .dds-route .dr-step:hover .dr-t b { color: var(--accent); }
  .dds-route .dr-d { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }
  .dds-route .dr-short { display: none; }   /* короткая подпись — только для телефона */

  /* — Feed table — */
  .feed-head {
    display: flex; align-items: center;
    border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line);
    padding: 8px 0;
    font-family: var(--mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3);
  }
  .feed-head .fh-date    { width: 60px; }
  .feed-head .fh-section { width: 90px; }
  .feed-head .fh-title   { flex: 1; }
  .feed-head .fh-read    { width: 60px; text-align: right; }
  .feed-head .fh-views   { width: 80px; text-align: right; }
  .feed-head .fh-arr     { width: 30px; }

  .feed-row {
    display: flex; align-items: flex-start;
    padding: 14px 0; border-bottom: 1px solid var(--line-2);
    transition: background .12s;
  }
  .feed-row:hover { background: var(--card-2); }
  .feed-row .fr-date {
    width: 60px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); padding-top: 3px;
  }
  .feed-row .fr-section { width: 90px; padding-top: 2px; }
  .feed-row .fr-body { flex: 1; min-width: 0; padding-right: 16px; }
  .feed-row .fr-body h3 {
    font-family: var(--serif); font-size: 15px; font-weight: 500;
    color: var(--ink); line-height: 1.35; margin-bottom: 3px;
  }
  .feed-row .fr-body h3 a:hover { color: var(--accent); }
  .feed-row .fr-body p {
    font-family: var(--sans); font-size: 12px; color: var(--ink-3); line-height: 1.5;
  }
  .feed-row .fr-body .fr-by {
    display: flex; gap: 10px;
    margin-top: 4px; font-family: var(--mono); font-size: 10px; color: var(--ink-4);
  }
  .feed-row .fr-read {
    width: 60px; text-align: right; padding-top: 3px;
    font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  }
  .feed-row .fr-views {
    width: 80px; text-align: right; padding-top: 3px;
    font-family: var(--mono); font-size: 11px; color: var(--ink-2);
    font-variant-numeric: tabular-nums;
  }
  .feed-row .fr-arr {
    width: 30px; text-align: right; padding-top: 3px;
    font-family: var(--mono); font-size: 12px; color: var(--ink-4);
  }

  .feed-more { display: flex; justify-content: center; padding: 14px 0; }
  /* Доп. материалы ленты — скрыты до нажатия «Загрузить ещё» */
  .feed-more-item { display: none !important; }

  /* Повтор того, что уже показано карточкой выше (тема недели, главный
     материал). На телефоне лента и карточки — один поток, и публикация
     шла дважды подряд: плиткой с картинкой и текстовой строкой.

     МЕДИАЗАПРОС ОБЯЗАТЕЛЕН И ЛЕЖИТ ЗДЕСЬ, а не в общем мобильном блоке
     файла: соседнее .feed-more-item стоит на верхнем уровне, и правило,
     дописанное рядом «по аналогии», молча погасило бы повторы и на
     десктопе — ровно то, чего делать нельзя. Порог 900 тот же, на котором
     появляется полоса тем .feed-topics: прячем строку там и только там, где
     есть её карточка-двойник.

     !important — фильтры разделов и периода ставят строкам inline-display,
     без него скрытая строка вернулась бы при переключении фильтра. */
  @media (max-width: 900px) {
    .feed-row--dup { display: none !important; }
  }
  /* …кроме тех, что JS раскрыл на десктопе, чтобы правая колонка дотянулась
     до низа левой (ddsFillFeed). display: grid — как у обычной строки ленты в
     правой колонке (.home-news .feed-row), иначе раскрытая строка ломала бы
     свою двухрядную раскладку. На телефоне правило не действует. Фильтр по
     региону ставит [hidden] — раскрытая строка при этом обязана прятаться,
     поэтому у .feed-filled[hidden] специфичность выше (перебивает раскрытие). */
  @media (min-width: 901px) {
    .home-news .feed-row.feed-filled { display: grid !important; }
    .home-news .feed-row.feed-filled[hidden] { display: none !important; }
  }

  /* Врезка рейтинга в ленте (dds_home_rating_inset, третья строка).
     Решение редакции 20.10.2026: почти неотличима от новостей — та же
     разметка и шрифты, отличие одно, тонкая рамка. Внутренний отступ
     нужен только из-за рамки: у обычной строки боковых полей нет.
     Специфичность 0,3,0 — выше `.home-news .feed-row` (0,2,0) в обеих
     мобильных ветках, иначе их padding: 12px 0 снимал бы поля. */
  .feed-row.feed-row--rating,
  .home-news .feed-row.feed-row--rating {
    border: 1px solid var(--line);
    padding-left: 10px; padding-right: 10px;
    margin: 6px 0;
  }
  /* Два экземпляра (см. front-page.php): «d» — третья строка на компьютере,
     «m» — третья ВИДИМАЯ на телефоне, где строки-повторы скрыты.
     Порог 900 — тот же, что у .feed-row--dup. !important — фильтры ленты
     снимают и ставят строкам inline-display. */
  @media (max-width: 900px) { .feed-row--rating-d { display: none !important; } }
  @media (min-width: 901px) { .feed-row--rating-m { display: none !important; } }

  /* — Section header (terminal) — */
  .ts-h {
    display: flex; align-items: baseline; gap: 12px;
    border-top: 1px solid var(--ink); padding: 10px 0; margin: 36px 0 18px;
  }
  /* 36px сверху — это воздух МЕЖДУ секциями. Первому заголовку колонки он
     не нужен: сверху уже командная панель. Из-за него левая колонка
     начиналась на 36px ниже правой, и линии заголовков не сходились. */
  /* Первым ребёнком .home-main-top теперь стоит скрытый h1 страницы,
     поэтому одного :first-child мало — иначе подпись «эксперты» снова
     получает свои 36px, и левая колонка начинается ниже правой. */
  .home-main-top > .ts-h:first-child,
  .home-main-top > h1 + .ts-h { margin-top: 0; }
  .ts-h .ts-t {
    font-family: var(--mono); font-size: 11px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .14em; color: var(--ink);
  }
  .ts-h .ts-t::before { content: ':: '; color: var(--accent); }
  .ts-h .grow { flex: 1; }
  .ts-h .ts-aside { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }
  .ts-h a { font-family: var(--mono); font-size: 11px; color: var(--accent); }

  /* — Experts (обложка публикации фоном + текст на градиенте в цветах сайта) — */
  /* РОВНО три колонки, без auto-fit — это лечение «мелькающей раскладки».
     auto-fit считал, сколько влезет: на три колонки нужно 3×200 + 2×14 = 628px,
     а колонка шириной 641 — запас всего 13px. Любое сужение (полоса прокрутки,
     иное окно, кадр до раскрытия ленты) роняло сетку на 2 колонки, пятая
     карточка уезжала на третий ряд, и ВСЁ, что ниже — главный материал, CTA,
     кейсы — прыгало почти на 300px. Замер кадра до JS: 2 колонки, лид на 1041;
     финал: 3 колонки, лид на 775. Ширина карточки пусть будет меньше 200px —
     это лучше скачка. minmax(0,1fr) обязателен: с 1fr длинные имена экспертов
     не дали бы колонке сжаться. Ниже 1100px действует своя ветка с auto-fit. */
  .exp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
  .exp-card {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 252px; overflow: hidden; text-decoration: none;
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--dk-bg) center/cover no-repeat;   /* фон-обложка приходит инлайном */
    transition: transform .15s, border-color .15s;
  }
  .exp-card:hover { transform: translateY(-2px); border-color: var(--ink-4); }
  /* Градиентная заливка в цветах сайта: графит снизу + терракотовый подтон —
     чтобы обложка читалась как фон, а текст оставался контрастным. */
  .exp-shade {
    position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(180deg, rgba(22,22,19,0) 6%, rgba(22,22,19,.5) 42%, rgba(22,22,19,.96) 100%),
      linear-gradient(180deg, rgba(194,65,12,0) 40%, rgba(194,65,12,.32) 100%);
  }
  /* Без обложки — плотный фирменный градиент (графит → терракота) + монограмма. */
  .exp-card--plain { background: linear-gradient(150deg, #24241f 0%, #161613 52%, #3a1c0e 100%); }
  .exp-card--plain .exp-shade { background: linear-gradient(180deg, rgba(22,22,19,0) 45%, rgba(22,22,19,.55) 100%); }
  .exp-body {
    position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px;
    padding: 16px 16px 15px; min-width: 0;
  }
  .exp-init {
    font-family: var(--serif); font-size: 30px; font-weight: 500;
    color: rgba(255,255,255,.85); line-height: 1; margin-bottom: 2px;
  }
  .exp-teaser {
    margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 500;
    color: #fff; line-height: 1.22; letter-spacing: 0; text-wrap: pretty;
    text-shadow: 0 1px 10px rgba(0,0,0,.55);
  }
  .exp-foot { display: flex; flex-direction: column; gap: 2px; }
  .exp-foot .exp-name { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.25; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
  .exp-foot .exp-meta { font-size: 11px; color: rgba(255,255,255,.82); line-height: 1.35; font-family: var(--mono); text-shadow: 0 1px 8px rgba(0,0,0,.55); }

  /* — Featured companies — */
  .feat-co-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 14px; }
  /* Из напечатанной десятки видны только отмеченные (три штуки): отбор
     делает инлайн-скрипт в front-page.php. display:none у остальных нужен
     и ради вёрстки, и ради трафика — их логотипы с loading="lazy"
     браузер не запрашивает вовсе. Карточка партнёра класса --pool
     не имеет и правилом не задевается. */
  .feat-co-grid .feat-co--pool { display: none; }
  /* На «Все» — ротационная тройка (is-on), но не скрытые фильтром. */
  .feat-co-grid .feat-co--pool.is-on:not([hidden]) { display: flex; }
  /* Выбран регион: показываем все подходящие из пула (строго по базовому
     региону), не только is-on; скрытые регионом — прячет [hidden]. */
  body.dds-reg .feat-co-grid .feat-co--pool:not([hidden]) { display: flex; }
  .feat-co {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-md); overflow: hidden;
    display: flex; flex-direction: column;
    transition: border-color .15s;
  }
  .feat-co:hover { border-color: var(--ink-3); }
  .feat-co-cover {
    position: relative; height: 108px;
    background: linear-gradient(160deg, hsl(30 22% 76%) 0%, hsl(30 18% 56%) 60%, hsl(30 22% 38%) 100%);
  }
  .feat-co-cover.h-18  { background: linear-gradient(160deg, hsl(18 22% 76%), hsl(18 18% 56%) 60%, hsl(18 22% 38%)); }
  .feat-co-cover.h-60  { background: linear-gradient(160deg, hsl(60 22% 76%), hsl(60 18% 56%) 60%, hsl(60 22% 38%)); }
  .feat-co-cover.h-280 { background: linear-gradient(160deg, hsl(280 18% 74%), hsl(280 14% 54%) 60%, hsl(280 22% 36%)); }
  .feat-co-cover::after {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 10px);
    pointer-events: none;
  }
  .feat-co-cover svg.house { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 116px; opacity: .45; }
  /* Обложка-логотип: белый фон + логотип целиком (contain) с полями.
     cover обрезал логотипы и криво их ставил, а прозрачный PNG пропускал
     цветной градиент насквозь — здесь фон плотно-белый под любой логотип. */
  .feat-co-cover--logo {
    background: #fff;
    border-bottom: 1px solid var(--line);
  }
  .feat-co-cover--logo::after { display: none; }   /* косую штриховку убираем — на белом она шумит */
  .feat-co-logo-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: contain; object-position: center;
    padding: 14px 18px; box-sizing: border-box;
    display: block;
  }
  /* Бейджи над белым фоном — плотнее, чтобы белый текст читался */
  .feat-co-cover--logo .feat-co-badge { background: rgba(0,0,0,.6); }
  .feat-co-badge {
    position: absolute; top: 9px; left: 9px;
    padding: 3px 8px; background: rgba(0,0,0,.4); backdrop-filter: blur(2px);
    font-family: var(--mono); font-size: 9px; color: #fff;
    letter-spacing: .07em; text-transform: uppercase;
  }
  .feat-co-vrf {
    position: absolute; top: 9px; right: 9px;
    padding: 3px 7px; background: var(--accent); color: #fff;
    font-family: var(--mono); font-size: 9px; letter-spacing: .05em;
    display: flex; gap: 4px;
  }
  .feat-co-cap {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 8px 12px;
    background: linear-gradient(transparent, rgba(0,0,0,.5));
    display: flex; gap: 8px;
    font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.85);
    letter-spacing: .04em;
  }
  .feat-co-cap .grow { flex: 1; }
  .feat-co-body { padding: 11px 13px 12px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
  .feat-co-head { display: flex; align-items: center; gap: 9px; margin-bottom: 2px; }
  .feat-co-logo {
    width: 32px; height: 32px; background: var(--paper); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-size: 13px; font-weight: 500; flex-shrink: 0;
  }
  .feat-co-head .feat-co-info { flex: 1; line-height: 1.25; min-width: 0; }
  .feat-co-head .feat-co-info b { font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--ink); display: block; }
  .feat-co-head .feat-co-info span { font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
  .feat-co-head .feat-co-id { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
  .feat-co-head .feat-co-id .id-code { font-family: var(--mono); font-size: 10px; color: var(--accent); }
  .feat-co-head .feat-co-id .id-techs { display: flex; gap: 4px; }
  .feat-co-head .feat-co-id .id-techs span {
    font-family: var(--mono); font-size: 9px; padding: 2px 6px;
    background: var(--card-2); border: 1px solid var(--line); color: var(--ink-2);
    letter-spacing: .04em;
  }
  .feat-co-blurb {
    font-family: var(--sans); font-size: 12px; color: var(--ink-3); line-height: 1.45;
    margin-bottom: 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .feat-co-stats {
    display: flex; padding-top: 8px; margin-top: auto;
    border-top: 1px solid var(--line-2);
  }
  .feat-co-stats div {
    flex: 1; padding: 0 10px; border-right: 1px solid var(--line-2);
    display: flex; flex-direction: column; gap: 1px;
  }
  .feat-co-stats div:first-child { padding-left: 0; }
  .feat-co-stats div:last-child { border-right: none; }
  .feat-co-stats .fc-l { font-family: var(--mono); font-size: 8.5px; color: var(--ink-4); text-transform: uppercase; letter-spacing: .08em; }
  .feat-co-stats .fc-v { font-family: var(--serif); font-size: 15px; font-weight: 500; color: var(--ink); }

  /* — Topics (interesting) — */
  /* Компактная сетка тем: 3 колонки × 2 ряда = 6 карточек */
  .topics-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 6px;
  }
  .topic-card {
    display: flex; flex-direction: column;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-md); overflow: hidden; transition: border-color .15s;
  }
  .topic-card:hover { border-color: var(--ink-3); }
  .topic-img {
    position: relative; height: 128px; flex-shrink: 0;
    background: linear-gradient(160deg, hsl(30 22% 78%) 0%, hsl(30 18% 54%) 60%, hsl(30 26% 36%) 100%);
  }
  .topic-img::after {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0, rgba(255,255,255,.05) 1px, transparent 1px, transparent 13px);
    pointer-events: none;
  }
  .topic-img .ti-tag {
    position: absolute; left: 10px; bottom: 10px;
    font-family: var(--mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
    color: #fff; background: rgba(0,0,0,.45); padding: 3px 7px; border-radius: 3px;
  }
  .topic-text {
    padding: 12px 14px 13px; display: flex; flex-direction: column; gap: 7px; flex: 1;
  }
  .topic-text h3 {
    font-family: var(--serif); font-size: 16px; font-weight: 500;
    line-height: 1.22; letter-spacing: 0; color: var(--ink);
  }
  .topic-text p {
    font-family: var(--sans); font-size: 12.5px; color: var(--ink-3); line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .topic-text .tt-foot {
    display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px;
    font-family: var(--mono); font-size: 10px;
  }
  .topic-text .tt-kicker { text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
  .topic-text .tt-date { color: var(--ink-4); }
  @media (max-width: 1160px) { .topics-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px)  { .topics-grid { grid-template-columns: 1fr; } }

  /* — Sidebar widgets — */
  .home-side .ts-panel {
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: 14px; margin-bottom: 18px;
  }
  .home-side .ts-eyebrow {
    font-family: var(--mono); font-size: 10px; font-weight: 500;
    text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3);
    margin-bottom: 10px;
  }
  .home-side .ts-eyebrow::before { content: ':: '; color: var(--accent); }

  /* role panel */
  .role-toggle {
    display: flex; border: 1px solid var(--ink); border-radius: 2px;
    overflow: hidden; margin-bottom: 12px;
  }
  .role-toggle button {
    flex: 1; padding: 8px 10px; font-family: var(--mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: .08em;
    background: transparent; color: var(--ink); border: none; cursor: pointer;
  }
  .role-toggle button + button { border-left: 1px solid var(--ink); }
  .role-toggle button.active { background: var(--ink); color: var(--card); }
  .role-list { display: flex; flex-direction: column; }
  .role-list a {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--line-2);
  }
  .role-list a:last-child { border-bottom: none; }
  .role-list a:hover .role-arr { color: var(--accent); }
  .role-list .role-num { font-family: var(--mono); font-size: 10px; color: var(--accent); width: 18px; }
  .role-list .role-label { font-size: 12px; font-weight: 500; color: var(--ink); flex: 1; line-height: 1.3; }
  .role-list .role-arr { font-family: var(--mono); font-size: 11px; color: var(--ink-4); }

  /* quick actions list */
  .qa-list { display: flex; flex-direction: column; gap: 6px; }
  .qa-list a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; background: var(--card); border: 1px solid var(--line);
    border-radius: 2px;
  }
  .qa-list a:hover { border-color: var(--accent); }
  .qa-list .qa-ic { font-family: var(--mono); font-size: 10px; color: var(--accent); width: 26px; }
  .qa-list .qa-l { font-size: 12px; flex: 1; }
  .qa-list .qa-r { font-family: var(--mono); font-size: 10px; color: var(--ink-4); }

  /* stats panel */
  .stats-panel { padding: 0; }
  .stats-panel .stat-row {
    display: flex; align-items: baseline; gap: 8px;
    padding: 10px 14px; border-bottom: 1px solid var(--line-3);
  }
  .stats-panel .stat-row:last-child { border-bottom: none; }
  .stats-panel .stat-row .sr-info { flex: 1; line-height: 1.25; display: flex; flex-direction: column; }
  .stats-panel .stat-row .sr-num { font-family: var(--mono); font-size: 18px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
  .stats-panel .stat-row .sr-lbl { font-size: 11px; color: var(--ink-3); }
  .stats-panel .stat-row .sr-tr { font-family: var(--mono); font-size: 10px; }
  .stats-panel .stat-row .sr-tr.up { color: var(--good); }
  .stats-panel .stat-row .sr-tr.dn { color: var(--bad); }

  /* faq small */
  .faq-small a {
    display: flex; gap: 8px; padding: 10px 0;
    border-bottom: 1px solid var(--line-2);
  }
  .faq-small a:last-child { border-bottom: none; }
  .faq-small .q-n { font-family: var(--mono); font-size: 10px; color: var(--ink-4); width: 22px; padding-top: 2px; }
  .faq-small .q-t { font-size: 12px; line-height: 1.4; flex: 1; color: var(--ink); }
  .faq-small a:hover .q-t { color: var(--accent); }

  /* — Ranking section (dark) — */
  .ranking {
    /* Светлая секция — в цвет основного фона, без визуальной тяжести
       двух тёмных блоков подряд. */
    background: var(--paper-2);
    color: var(--ink);
    padding: 40px 0 48px;
    border-top: 1px solid var(--line);
    margin-top: 0;            /* плотно стыкуется с tem-блоком выше */
    box-sizing: border-box;
    overflow: hidden;
  }
  .ranking-inner {
    max-width: 1280px; margin: 0 auto;
    padding: 0 28px;
    box-sizing: border-box;
  }
  /* Шапка рейтинга — вертикальная колонка: заголовок, подзаголовок и ряд
     фильтров по технологиям все прижаты к левому краю. Прежняя строка-флекс
     отправляла фильтры вправо/вниз непредсказуемо — теперь строго слева. */
  .ranking-head {
    display: flex; flex-direction: column; align-items: flex-start;
    margin-bottom: 28px;
  }
  .ranking-head .grow { display: none; }
  .ranking-head .rk-toggle { margin-top: 18px; }
  .ranking-head .rk-subtitle {
    font-size: 15px; line-height: 1.45; color: var(--ink-3);
    margin: 0 0 4px; max-width: 640px;
  }
  .ranking-head .rk-eyebrow {
    font-family: var(--mono); font-size: 10px; color: var(--accent);
    letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px;
  }
  .ranking-head .rk-eyebrow::before { content: ':: '; }
  .ranking-head h2,
  .ranking-head .rk-title {
    font-family: var(--serif); font-size: 36px; font-weight: 400;
    line-height: 1.1; letter-spacing: -0.01em; color: var(--ink);
    /* Отступы заданы явно и одинаково для обоих уровней. На /rating/ этот
       заголовок h1, на главной — h2, а в style.css у них разные значения
       по умолчанию (24/14 против 28/12). Без явного margin блок ехал бы
       на 4px в зависимости от страницы. */
    margin: 28px 0 6px;
  }
  .ranking-head .rk-meta {
    display: flex; gap: 14px; font-family: var(--mono);
    font-size: 11px; color: var(--ink-3);
  }
  .ranking-head .rk-meta a { color: var(--accent); }
  /* Дата обновления рейтинга — заметная плашка. Для рейтинга это признак
     живого списка, поэтому показывается и на десктопе, и на телефоне
     (в отличие от строки методики, которую на главной прячем). */
  .rk-updated {
    display: inline-flex; align-items: center; gap: 7px;
    margin: 8px 0 4px; padding: 4px 11px 4px 9px;
    background: var(--accent-bg); border: 1px solid var(--accent);
    border-radius: 999px;
    font-family: var(--mono); font-size: 11px; color: var(--accent-deep);
  }
  .rk-updated .rk-u-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--good, #4b7f2f);
    flex-shrink: 0;
  }
  .rk-updated--soon { background: var(--card-2); border-color: var(--line); color: var(--ink-3); }
  .rk-updated--soon .rk-u-dot { background: var(--ink-4); }
  /* Подиум: в DOM карточки идут 1·2·3 (ради краулеров и нейросетей — первым
     читается победитель), а визуальная «пирамидка» 2·1·3 собирается порядком
     на grid-элементах: серебро слева, золото в широкой средней колонке,
     бронза справа. Меняем только раскладку, разметка остаётся однозначной. */
  .podium-card.silver { order: 1; }
  .podium-card.gold   { order: 2; }
  .podium-card.bronze { order: 3; }
  .rk-toggle {
    display: flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden;
    background: var(--card);
  }
  .rk-toggle button {
    padding: 7px 12px; font-family: var(--mono); font-size: 11px;
    background: transparent; color: var(--ink-2); border: none;
    border-right: 1px solid var(--line); cursor: pointer; letter-spacing: .04em;
  }
  .rk-toggle button:last-child { border-right: none; }
  .rk-toggle button.active { background: var(--accent); color: #fff; }

  .podium {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 14px; align-items: end; margin-bottom: 24px;
  }
  /* Адаптив подиума */
  @media (max-width: 900px) {
    .podium { grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
    .podium-card { padding: 16px 14px 18px; min-height: auto !important; }
    .podium-card .pc-rank { font-size: 44px; }
    .podium-card.gold .pc-rank { font-size: 48px; }
    .podium-card .pc-name { font-size: 16px; }
    .podium-card.gold .pc-name { font-size: 18px; }
    .podium-card .pc-foot .pf-v { font-size: 15px; }
  }
  @media (max-width: 560px) {
    .podium {
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .podium-card { min-height: auto !important; padding: 14px 16px; }
    .podium-card .pc-rank { font-size: 36px; }
    .podium-card.gold .pc-rank { font-size: 40px; }
    .podium-card .pc-name { font-size: 18px; margin-bottom: 4px; }
    .podium-card .pc-foot { padding-top: 8px; }
  }
  .podium-card {
    /* Silver / Bronze — белая карточка с тонкой рамкой */
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r-sm); padding: 20px 22px 22px; position: relative;
    transition: transform .15s, border-color .15s;
    display: flex; flex-direction: column;
  }
  .podium-card:hover { transform: translateY(-2px); border-color: var(--ink-3); }
  /* Gold — единственный акцентный (терракотовый) */
  .podium-card.gold {
    background: var(--accent); border-color: var(--accent); min-height: 200px; color: #fff;
  }
  .podium-card.gold:hover { border-color: var(--accent-deep); }
  .podium-card.silver { min-height: 168px; }
  .podium-card.bronze { min-height: 140px; }
  .podium-card .pc-top { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
  .podium-card .pc-rank {
    font-family: var(--serif); font-size: 64px; font-weight: 400;
    line-height: .8; letter-spacing: -.04em; color: var(--ink-2);
  }
  .podium-card.gold .pc-rank { color: #fff; }
  /* letter-spacing сбрасываем: подпись «·место» наследовала -.04em от крупного
     номера и буквы слипались. Отступ ½em отделяет её от цифры. */
  .podium-card .pc-rank .pc-suf { font-family: var(--mono); font-size: 14px; color: var(--ink-4); letter-spacing: .01em; margin-left: .12em; display: inline-block; }
  .podium-card.gold .pc-rank .pc-suf { color: rgba(255,255,255,.6); }
  .podium-card .pc-change {
    font-family: var(--mono); font-size: 10px; margin-left: auto; margin-top: 4px;
    color: var(--ink-4);
  }
  .podium-card.gold .pc-change { color: rgba(255,255,255,.6); }
  .podium-card .pc-change.up { color: var(--good); }
  .podium-card .pc-change.dn { color: var(--bad); }
  .podium-card.gold .pc-change.up { color: #c5e3ad; }
  .podium-card.gold .pc-change.dn { color: #ffd0bb; }
  .podium-card .pc-name {
    font-family: var(--serif); font-size: 22px; font-weight: 500;
    color: var(--ink); line-height: 1.1; margin-bottom: 6px;
  }
  .podium-card.gold .pc-name { color: #fff; font-size: 26px; }
  .podium-card .pc-meta { font-size: 11px; color: var(--ink-3); margin-bottom: 10px; }
  .podium-card.gold .pc-meta { color: rgba(255,255,255,.85); }
  .podium-card .pc-foot {
    display: flex; gap: 0; padding-top: 12px; margin-top: auto;
    border-top: 1px solid var(--line-2);
  }
  .podium-card.gold .pc-foot { border-top-color: rgba(255,255,255,.2); }
  .podium-card .pc-foot > div { flex: 1; display: flex; flex-direction: column; line-height: 1.2; }
  .podium-card .pc-foot .pf-l { font-family: var(--mono); font-size: 9px; color: var(--ink-4); letter-spacing: .06em; }
  .podium-card.gold .pc-foot .pf-l { color: rgba(255,255,255,.75); }
  .podium-card .pc-foot .pf-v {
    font-family: var(--mono); font-size: 18px; font-weight: 500;
    color: var(--ink); font-variant-numeric: tabular-nums;
  }
  .podium-card.gold .pc-foot .pf-v { color: #fff; }

  /* ── Таблица рейтинга: CSS-grid с адаптивными колонками ──
     Колонки идут в одном порядке в head и row через grid-template-columns.
     Скрытие колонок через display:none на media-query, без удаления из DOM. */
  .rk-table-head, .rk-row {
    display: grid;
    grid-template-columns:
      36px            /* # rank */
      40px            /* ± change */
      64px            /* code */
      minmax(140px, 1.6fr)  /* company */
      minmax(0,   100px)    /* region */
      minmax(0,   1fr)      /* tech */
      100px           /* rate bar */
      54px            /* projects */
      20px;           /* arrow */
      /* Колонка «отзывы» убрана (авг. 2026): портал их не собирает.
         Дорожку тоже сняли — иначе стрелка уехала бы в пустой столбец. */
    gap: 10px;
    align-items: center;
    box-sizing: border-box;
  }
  .rk-table-head {
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--line);
    padding: 10px 0; font-family: var(--mono); font-size: 10px;
    text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3);
  }
  .rk-row {
    padding: 14px 0; border-bottom: 1px solid var(--line-2);
    font-size: 13px; color: var(--ink-2);
    transition: background .12s;
  }
  .rk-row:hover { background: var(--card-2); }
  /* Ячейки */
  .rk-c-rank { font-family: var(--mono); font-size: 14px; font-weight: 500; color: var(--ink-3); }
  .rk-c-chg  { font-family: var(--mono); font-size: 11px; color: var(--ink-4); white-space: nowrap; }
  .rk-c-chg.up { color: var(--good); }
  .rk-c-chg.dn { color: var(--bad); }
  .rk-c-code { font-family: var(--mono); font-size: 11px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rk-c-co   { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .rk-c-co .co-av {
    width: 30px; height: 30px; flex-shrink: 0;
    background: var(--card-2); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--serif); font-size: 12px; font-weight: 500; color: var(--ink-2);
  }
  .rk-c-co .co-nm { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rk-c-reg  { color: var(--ink-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rk-c-tech { font-family: var(--mono); font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rk-c-rate { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .rk-c-rate .rate-bar { flex: 1; height: 4px; background: var(--line-2); border-radius: 1px; min-width: 30px; }
  .rk-c-rate .rate-bar > div { height: 100%; background: var(--good); }
  .rk-c-rate .rate-bar > div.mid { background: var(--ochre); }
  .rk-c-rate .rate-bar > div.low { background: var(--bad); }
  .rk-c-rate .rate-num { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
  .rk-c-proj { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
  .rk-c-arr  { text-align: right; color: var(--ink-4); }

  /* ────────── ADAPTIVE BREAKPOINTS для таблицы рейтинга ────────── */

  /* Средние экраны (1100–1280px) — те же колонки, но у́же */
  @media (max-width: 1280px) {
    .rk-table-head, .rk-row {
      grid-template-columns:
        36px 40px 60px minmax(130px, 1.6fr)
        minmax(0, 95px) minmax(0, 1fr)
        92px 50px 20px;
    }
  }

  /* Планшетный (760–1100px) — прячем «±» */
  @media (max-width: 1100px) {
    .rk-table-head, .rk-row {
      grid-template-columns:
        32px 56px minmax(120px, 1.5fr)
        minmax(0, 90px) minmax(0, 1fr)
        86px 44px 20px;
    }
    .rk-c-chg { display: none; }
  }

  /* Узкий планшет / большой телефон (560–760px) — прячем «регион» и «технологии» */
  @media (max-width: 900px) {
    .rk-table-head, .rk-row {
      grid-template-columns:
        28px 52px minmax(130px, 1.6fr)
        minmax(0, 1fr) 80px 18px;
    }
    .rk-c-reg { display: none; }
  }

  /* Служебный span для телефона: на десктопе скрыт и в сетку не попадает.
     Умолчание стоит ДО медиа-блока: при равной специфичности (0,1,0)
     побеждает порядок в файле — поставь его после, и телефонное
     display:block было бы перебито. */
  .rk-c-mob { display: none; }

  /* Телефоны — строка в две линии: данные не выбрасываем, а складываем.
     Верх: имя. Низ: регион · технологии · динамика · проекты (это
     отдельный span .rk-c-mob, который печатает PHP; десктопные колонки
     скрыты — их содержимое продублировано в нём). Справа балл и мини-бар. */
  @media (max-width: 560px) {
    .rk-table-head { display: none; }
    /* Подиум на телефоне — 600px карточек с теми же данными, что и в
       строках 1–3 ниже: чистое дублирование. Прячем на любой странице;
       на планшете (560–900) три карточки в ряд остаются. Топ-3 в списке
       помечен терракотовым номером. */
    .podium { display: none; }
    .rk-row {
      grid-template-areas:
        "rank co  rate"
        "rank mob rate";
      grid-template-columns: 30px minmax(0, 1fr) auto;
      grid-template-rows: auto auto;
      gap: 3px 10px;
      padding: 13px 0;
    }
    .rk-c-rank { grid-area: rank; align-self: center; font-size: 16px; }
    /* Топ-3 в списке помечен терракотой — подиум на главной скрыт,
       и без этого призовые места ничем не отличались */
    .ranking-inner > a.rk-row:nth-of-type(-n+3) .rk-c-rank {
      color: var(--accent); font-weight: 600;
    }
    .rk-c-co { grid-area: co; min-width: 0; align-self: end; }
    .rk-c-co .co-av { display: none; }  /* монограмма дублирует имя рядом и ест 38px */
    .rk-c-co .co-nm { font-size: 15px; white-space: normal; line-height: 1.25; }
    .rk-c-mob {
      grid-area: mob; display: block; min-width: 0;
      font-family: var(--mono); font-size: 10.5px; line-height: 1.55;
      color: var(--ink-3); letter-spacing: .01em;
    }
    .rk-c-mob .m-dot { color: var(--ink-5); }
    .rk-c-mob .m-chg.up { color: var(--good); }
    .rk-c-mob .m-chg.dn { color: var(--bad); }
    .rk-c-mob .m-chg.new { color: var(--accent); }
    .rk-c-rate {
      grid-area: rate; align-self: center;
      flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0;
    }
    .rk-c-rate .rate-bar { display: block; flex: none; width: 46px; }
    .rk-c-rate .rate-num { font-size: 16px; color: var(--ink); font-weight: 600; }
    .rk-c-chg, .rk-c-code, .rk-c-reg, .rk-c-tech, .rk-c-proj, .rk-c-arr {
      display: none;
    }
  }

  .rk-bottom {
    display: flex; align-items: center; gap: 14px;
    padding-top: 18px; font-family: var(--mono); font-size: 11px; color: var(--ink-3);
    flex-wrap: wrap;
  }
  .rk-bottom a { color: var(--accent); }
  /* «Посмотреть весь рейтинг» — главное действие блока, а не пункт в ряду
     служебных ссылок: полноценная кнопка, крупнее и заметнее соседей. */
  .rk-bottom a.rk-all {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--accent); color: #fff;
    font-family: var(--sans); font-size: 13px; font-weight: 500;
    padding: 9px 16px; border-radius: 3px;
    text-decoration: none; transition: background .14s, transform .14s;
  }
  .rk-bottom a.rk-all:hover { background: var(--accent-deep); transform: translateY(-1px); }
  .rk-bottom a.rk-all:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .rk-bottom a.rk-all .rk-all-n { font-family: var(--mono); font-size: 12px; opacity: .85; }
  .rk-bottom .sep { color: var(--ink-5); }
  .rk-bottom .grow { flex: 1; }
  .rk-bottom .rk-note { color: var(--ink-4); font-size: 10px; }

  /* responsive home */
  @media (max-width: 1100px) {
    /* Tablet/mobile: схлопываем в одну колонку. Лента уходит под основной
       контент (после блока компаний). Sticky отключаем. */
    .home-layout {
      grid-template-columns: 1fr;   /* одна дорожка: лента уходит под контент */
      gap: 0;
      padding: 18px 20px 0;
    }
    .home-left        { width: 100%; }
    .home-news        { width: 100%; }
    .home-news {
      position: static; max-height: none; overflow: visible;
    }
    /* Внутренний контейнер .ranking-inner — ужимаем padding на узком экране */
    .ranking-inner { padding: 0 20px; }
    .lead-card { grid-template-columns: 1fr; }
    .lead-cover { min-height: 200px; }
    .exp-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .feat-co-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .topic-card, .topic-card.flip { grid-template-columns: 1fr; }
    .topic-card.flip .topic-img, .topic-card.flip .topic-text { order: initial; }
    /* Подиум и колонки rk-c-* — управляются собственными media-блоками выше */
  }
  @media (max-width: 600px) {
    .lead-text h1, .lead-text .lt-title { font-size: 22px; }
    .lt-mini { flex-wrap: wrap; }
    .lt-mini > div { min-width: 50%; }
    .ranking-inner { padding: 0 14px; }
    .ranking { padding: 30px 0 36px; }
    .ranking-head h2,
    .ranking-head .rk-title { font-size: 26px; }
    .feed-head .fh-section, .feed-row .fr-section { display: none; }
    .feed-head .fh-views, .feed-row .fr-views { display: none; }
  }
/* ═══════════════════════════════════════════════════════════════
   MOBILE v2 — телефон получает свой порядок, а не десктоп в столбик.

   Проблема, которую это чинит (замерено на 390×844):
     вся главная 11 308px = 13,4 экрана;
     лента начиналась на 8-м экране, рейтинг — на 11-м,
     потому что две колонки складывались стопкой: сначала левая целиком.

   Новый порядок: главное → эксперты → лента → рейтинг → остальное.
   Три верхних экрана несут всё, ради чего заходят.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* display:contents растворяет вложенность: main-top, main-bottom и
     home-news становятся соседями рейтинга внутри .home-wrap — и только
     тогда order может их переставить. */
  .home-wrap   { display: flex; flex-direction: column; }
  .home-layout { display: contents; }
  .home-left   { display: contents; }

  .home-main-top    { order: 1; }   /* главный материал + эксперты */
  .home-news        { order: 2; }   /* лента */
  .home-wrap .ranking { order: 3; } /* рейтинг */
  .home-main-bottom { order: 4; }   /* темы, компании, кейсы */

  /* Внутри верхнего блока: сначала материал дня, потом лица.
     «Что случилось» → «что об этом думают» — порядок газетной полосы.
     Заголовок «эксперты» едет вместе со своей сеткой, иначе повиснет
     над главным материалом и подпишет чужой блок. */
  .home-main-top { display: flex; flex-direction: column; }
  .home-main-top > .lead-card   { order: 1; }
  .home-main-top > .ts-h        { order: 2; }   /* заголовок «эксперты» */
  .home-main-top > .exp-grid    { order: 3; }
  .home-main-top > .dds-route   { order: 4; }   /* маршрут — ПОСЛЕ экспертов */

  /* Маршрут на телефоне — лёгкий ряд чипов, а не три карточки.
     Убираем: рамку-контейнер, тёмную плашку, кружки-номера и описания шагов.
     Остаются короткие подписи с номером — тот же приём, что у чипов регионов
     и фильтров, поэтому блок не выглядит чужеродным и почти не ест высоту. */
  .dds-route {
    /* ряд с переносом: подпись занимает всю строку, чипы встают под ней */
    flex-direction: row; flex-wrap: wrap; align-items: center;
    background: none; border: none; border-radius: 0; overflow: visible;
    /* Сверху 28px: маршрут — отдельный смысловой блок, а не подпись к
       карточкам экспертов, под которыми он стоит. Было 4px (чипы прилипали),
       18px всё ещё читалось как продолжение блока экспертов. */
    margin: 28px 0 18px; gap: 8px;
  }
  /* Подпись — тёмная и заметная: это зов к действию, а не служебная метка */
  .dds-route .dr-label {
    flex: 0 0 100%;
    background: none; color: var(--ink); padding: 0;
    font-size: 10.5px; letter-spacing: .12em; font-weight: 600;
  }
  .dds-route .dr-label::before { content: '→ '; color: var(--accent); }
  /* Все три чипа ОДИНАКОВЫЕ. Залитый первый шаг читался как «активная
     страница» — будто пользователь уже в разделе технологий. Заметность даёт
     акцентная обводка и цвет текста, а не выделение одного из шагов. */
  /* Три чипа делят ширину поровну (flex: 1 1 0), а не по длине подписи.
     Было `flex: 0 0 auto`: ряд заканчивался рваным пустым местом справа —
     6px на 375px и уже 43px на 412px, то есть чем шире телефон, тем
     заметнее дыра. Равные доли убирают её на любой ширине; подписи
     короткие («Технология», «Смета», «Подрядчик») и при 8px полях
     не обрезаются даже на 360px. */
  .dds-route .dr-step {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0 8px;
    border: 1px solid var(--accent);
    border-radius: 999px; background: var(--card); color: var(--accent-deep);
  }
  .dds-route .dr-t b { color: var(--accent-deep); }
  .dds-route .dr-n {
    width: auto; height: auto; border: none; background: none;
    color: var(--accent); font-size: 11px;
  }
  .dds-route .dr-d { display: none; }        /* описания — только на десктопе */
  .dds-route .dr-full { display: none; }
  .dds-route .dr-short { display: inline; }
  .dds-route .dr-t { flex-direction: row; }
  .dds-route .dr-t b { font-size: 13.5px; font-weight: 500; }

  /* Поля одинаковые у всех блоков — колонки больше нет */
  .home-layout { padding: 0; }
  .home-main-top, .home-main-bottom, .home-news { padding: 0 14px; }
  .home-news { width: auto; flex: none; }
  /* align-self: stretch ОБЯЗАТЕЛЕН (20.10.2026). На десктопе у ленты
     align-self: start (строка 41), и в мобильной колонке-флексе он делал
     ширину «по содержимому»: полоса тем (6 карточек, 1338px) растягивала
     ВСЮ ленту до 1338px — сама полоса не листалась (ей нечего листать),
     а строки новостей обрезались по краю экрана. min-width: 0 — та же
     страховка для вложенных флекс-детей. */
  .home-news { align-self: stretch; min-width: 0; max-width: 100%; }

  /* ── Типографика: было 111 элементов мельче 13px ── */
  .lead-card .lt-lead      { font-size: 15px; line-height: 1.5; }
  .home-news .feed-row .fr-body h3 { font-size: 15.5px; line-height: 1.3; }
  .home-news .feed-row .fr-body p  { font-size: 13.5px; line-height: 1.45; }
  .topic-card .topic-text p { font-size: 14px; line-height: 1.5; }
  .exp-card .exp-teaser    { font-size: 15px; }

  /* ── Мишени: было 27px, норма 44 ── */
  .home-news .feed-row { padding: 13px 0; min-height: 44px; }
  .cmd-toggle button   { min-height: 40px; padding: 0 13px; }
}

/* ── Эксперты на телефоне: полоса карточек-обложек, листается вбок ──
   Работа блока — «здесь живые люди и темы недели»: показать рано, не занимая
   площадь. Полоса горизонтального скролла, каждая карточка — обложка публикации
   с текстом на градиенте. */
@media (max-width: 900px) {
  .exp-grid {
    display: flex; flex-direction: row;
    gap: 10px; overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Полоса тянется в поля колонки, чтобы карточки уезжали за край
       экрана — жест листания читается сразу, без подсказок. */
    margin: 0 -14px; padding: 0 14px 2px;
  }
  .exp-grid::-webkit-scrollbar { display: none; }

  /* ПОДСКАЗКА «СБОКУ ЕСТЬ ЕЩЁ» — для обеих полос, экспертов и материалов
     недели: тонкая дорожка прокрутки под карточками (.hs-bar, её ставит
     скрипт в конце front-page.php). Светлая линия во всю ширину, на ней
     терракотовый отрезок: его длина — какая доля полосы видна, положение —
     где мы сейчас. Читается как привычная полоса прокрутки и ничего
     не перекрывает. Карточка 210px к тому же выглядывает следующей.
     ОТКАЗАЛИСЬ (решение редакции 20.10.2026): от растворения краёв
     (mask-image) — гасит заголовки карточек, и от круглых стрелок ‹ ›
     в строке заголовка — обрезали подпись «…вопросы недели».
     .home-wrap .hs-bar (0,2,0): базовое «скрыть на десктопе» стоит НИЖЕ
     по файлу (блок MOBILE v3), простой .hs-bar оно бы перебило. */
  .home-wrap .hs-bar {
    display: block; position: relative; overflow: hidden;
    height: 2px; margin: 10px 0 0; background: var(--line-2);
  }
  .home-wrap .hs-bar > span {
    position: absolute; top: 0; bottom: 0; left: 0;
    background: var(--accent);
  }
  .home-wrap .hs-bar.hs-none { display: none; }   /* всё влезло — листать нечего */
  /* У экспертов дорожка — соседка сетки внутри .home-main-top, где
     порядок задан order: без своего order она уехала бы наверх блока.
     Тот же order, что у сетки, — встаёт сразу за ней по порядку в DOM. */
  .home-main-top > .hs-bar { order: 3; }

  .exp-card {
    flex: 0 0 auto; width: 210px; min-height: 210px;
    scroll-snap-align: start;
  }
  .exp-card .exp-body { padding: 13px 13px 14px; }
  .exp-card .exp-init { font-size: 26px; }
  .exp-card .exp-teaser { font-size: 15px; line-height: 1.25; }
  .exp-card .exp-name { font-size: 12px; }
  .exp-card .exp-meta { font-size: 10px; line-height: 1.32; }
}

/* ═══ MOBILE v2 — длина страницы ═══
   Порядок исправлен, но сама страница осталась 13,4 экрана: блоки не худели.
   Здесь режем то, что мерено съедает экран: фильтры 19%, подписка 27%,
   подиум 625px. */
@media (max-width: 900px) {

  /* ── Фильтры: было 4 ряда (157px, 19% экрана) ──
     Кнопки не переносим, а листаем — приём уже работает в полосе регионов.
     Два ряда (раздел + период) остаются, но каждый в одну строку. */
  .cmd-bar--top {
    /* Сверху 0: полоса регионов уже отделяет шапку от контента, и любой
       отступ здесь читается как пустота под ней. */
    padding: 0; margin-bottom: 8px;
    flex-wrap: nowrap; align-items: center;
    gap: 8px; overflow: hidden;
  }
  .cmd-bar--top .crumbs { padding: 0 14px; flex-shrink: 0; }
  .cmd-bar--top .cmd-label { display: none; }   /* «фильтр материалов:» — очевидно из кнопок */
  .cmd-bar--top .grow { display: none; }
  .cmd-bar--top .cmd-toggle {
    overflow-x: auto; scrollbar-width: none;
    max-width: 100%; border-radius: 0;
    scroll-snap-type: x proximity;
  }
  .cmd-bar--top .cmd-toggle::-webkit-scrollbar { display: none; }
  .cmd-bar--top .cmd-toggle button { flex-shrink: 0; scroll-snap-align: start; }
  /* Ряды друг под другом, каждый со своим скроллом */
  .cmd-bar--top { flex-wrap: wrap; }
  .cmd-bar--top .cmd-toggle { flex: 1 0 100%; margin: 0 14px; max-width: calc(100% - 28px); }
  .cmd-bar--top [aria-label="Период"] { display: none; }
  /* Период на телефоне прячем: фильтровать ленту по дню/неделе с телефона
     почти не нужно, а ряд кнопок стоит 44px и половину внимания.
     Раздел — оставляем: им пользуются. */

  /* ── Заголовок секции: «+ комментарий →» переносился на 3 строки ── */
  .home-main-top > .ts-h { flex-wrap: wrap; margin-top: 22px; }
  .home-main-top > .ts-h a { display: none; }   /* действие не для телефона */
  .ts-h .ts-t { font-size: 10.5px; line-height: 1.4; }

  /* ── Обложка главного материала: 200px = 24% экрана ── */
  .lead-card { flex-direction: column; }
  .lead-cover { height: 150px; order: -1; }     /* картинка над текстом, как в карточке новости */
  .lead-text { padding: 14px; }
  .lead-text h1, .lead-text .lt-title { font-size: 21px; line-height: 1.22; }

  /* ── Подписка: 231px = 27% экрана ── */
  .home-news .sub-w { padding: 16px 14px; margin-top: 14px; }
  .home-news .sub-w h3 { font-size: 15px; margin-bottom: 4px; }
  .home-news .sub-w p { font-size: 12.5px; margin-bottom: 10px; }
  /* На телефоне колонки идут стопкой: прижимать блок некуда */
  .home-news .home-follow { margin-top: 14px; padding: 16px 14px; }
  .home-news .home-follow h3 { font-size: 15px; }
  .home-news .home-follow p { font-size: 13px; }
  .home-news .sub-w > div:last-child { display: none; }   /* «4 280 подписчиков · Архив писем» — не выдумываем цифры */

  /* ── Подиум рейтинга НА ГЛАВНОЙ: 625px ради трёх карточек ──
     На главной рейтинг — тизер с кнопкой «весь рейтинг», подиум там
     лишний. На странице /rating/ (без .home-wrap) подиум ОСТАЁТСЯ:
     это ядро раздела. Топ-3 в списке подсвечен (см. блок ≤560). */
  .home-wrap .podium { display: none; }
  .ranking-inner { padding: 0 14px; }
  .ranking-head h2,
  .ranking-head .rk-title { font-size: 20px; line-height: 1.2; }
  .rk-eyebrow { font-size: 10px; }
  .home-wrap .rk-meta { display: none; }        /* на главной; на /rating/ метод виден */
  .ranking .rk-meta { flex-wrap: wrap; row-gap: 2px; font-size: 10.5px; }
  .rk-toggle { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .rk-toggle::-webkit-scrollbar { display: none; }
  .rk-toggle button { flex-shrink: 0; min-height: 44px; padding: 0 15px; font-size: 12px; }
}

/* ═══ MOBILE v2 — крупные блоки ═══
   Замер показал главного обжору: темы + компании + кейсы = 5231px = 6,2 экрана,
   половина страницы. Одна тема 690px (картинка 280), одна компания 456.
   На десктопе это витрина, на телефоне — бесконечная простыня. */
@media (max-width: 900px) {

  /* Обложка главного: у неё min-height: 200px, поэтому height его не брал */
  .lead-cover { min-height: 0; height: 150px; }

  /* ── Тема: 690 → ~330px ──
     Картинка вдвое ниже, описание обрезаем до двух строк: на телефоне
     карточка — анонс, а не пересказ. Кому интересно, тот откроет. */
  .topic-card { margin-bottom: 14px; }
  .topic-img { height: 140px; }
  .topic-text { padding: 12px 14px 14px; }
  .topic-text h3 { font-size: 17px; line-height: 1.25; }
  .topic-text p {
    font-size: 13.5px; line-height: 1.45;
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; overflow: hidden;
  }
  .tt-badges { display: none; }        /* теги дублируют бейдж в картинке */
  .topic-card .tt-meta { display: none; }  /* «↗ читают 6 280» — выдуманные цифры */

  /* ── Компания в фокусе: 456 → ~210px ──
     Обложка-заглушка съедала 200px ради градиента. Оставляем то, по чему
     компанию выбирают: имя, регион, место в рейтинге, балл. */
  .feat-co { margin-bottom: 12px; }
  .feat-co-cover { display: none; }
  .feat-co-body { padding: 13px 14px; }
  .feat-co-blurb {
    font-size: 13px; line-height: 1.45;
    display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; overflow: hidden;
  }
  .feat-co-grid { display: block; }
}

/* ═══ MOBILE v2 — добивка ═══ */
@media (max-width: 900px) {
  /* Картинка темы: у неё min-height: 280px, из-за которого height не работал.
     Второй такой случай после .lead-cover — в этой теме высоту часто держит
     min-height, и задавать надо ОБА. */
  .topic-img { min-height: 0; height: 140px; }

  /* Обложка главного без фото — 150px пустого градиента, 18% экрана.
     Есть фото — показываем, нет — не занимаем место ничем.
     :not(:has(img)) поддерживают все браузеры с 2023; где нет — увидят
     градиент, как раньше, то есть не хуже. */
  .lead-cover:not(:has(img)) { display: none; }
}

/* ═══ MOBILE v2 — переносы ═══
   Служебные подписи рвались посреди смысловой единицы: «КОМПАНИИ — В /
   ФОКУСЕ», «4 проекта · отобраны / редакцией», «· обн. / 14.07.2026».
   Причина: моноширинный шрифт с разрядкой .14em широкий, а фразы длинные. */
@media (max-width: 900px) {

  /* Заголовок секции: подпись и ссылка «все →» — в ОДНУ строку.
     Раньше подпись рвалась пополам («КОМПАНИИ — В / ФОКУСЕ»); я отдал ей
     всю ширину, но тогда ссылка повисла на своей строке отдельно от всего.
     Обмер показал: при 10px и разрядке .05em пара влезает целиком в 362px —
     это минимальная уступка, при которой ничего не разъезжается. */
  .ts-h { flex-wrap: nowrap; align-items: baseline; gap: 10px; }
  .ts-h .ts-t {
    flex: 0 1 auto; min-width: 0;
    font-size: 10px; letter-spacing: .05em; white-space: nowrap;
  }
  .ts-h .grow { flex: 1; }
  .ts-h a { flex-shrink: 0; font-size: 10.5px; white-space: nowrap; }

  /* «4 проекта · отобраны редакцией» — служебная приписка редакции.
     На телефоне это лишний ряд ради факта, который и так виден. */
  .ts-h .ts-aside { display: none; }

  /* Метод и дата обновления рейтинга: на главной прячем (тизер),
     на /rating/ это строка легитимности — оставляем. Селектор с
     .home-wrap и .ranking-head — иначе базовое правило
     `.ranking-head .rk-meta` (0,2,0) перебивает голое `.rk-meta`
     (0,1,0). Это уже третий такой случай в теме. */
  .home-wrap .ranking-head .rk-meta { display: none; }

  /* Дата и время чтения у главного материала — одной строкой */
  .lead-card .lt-top { flex-wrap: wrap; row-gap: 4px; }
  .lead-card .lt-top span:last-child { white-space: nowrap; }
}

/* ── Строка под рейтингом ──
   Девять элементов в одном flex-ряду: кнопка, три точки-разделителя, CSV,
   регистрация, дата. На 390px ряд ломался, и точки оставались висеть в
   конце строк сиротами. Разделители нужны только когда всё в одну строку —
   на телефоне их роль берёт на себя перенос. */
@media (max-width: 900px) {
  .rk-bottom {
    flex-direction: column; align-items: flex-start;
    gap: 10px; padding-top: 14px;
  }
  .rk-bottom .sep,
  .rk-bottom .grow { display: none; }
  .rk-bottom .rk-all { width: 100%; justify-content: center; }
  .rk-bottom > a { min-height: 40px; display: inline-flex; align-items: center; }
  .rk-bottom .rk-note { font-size: 10.5px; }
}

/* ── Пустое состояние фильтров периода ──
   Узкий период оставил экран без материалов: раньше секции молча
   исчезали и главная выглядела сломанной. Плашка объясняет и даёт сброс. */
.cmd-empty {
  margin: 10px 28px 0;
  padding: 14px 18px;
  background: var(--card); border: 1px dashed var(--line);
  border-radius: var(--r-sm, 3px);
  font-family: var(--mono); font-size: 12px; color: var(--ink-3);
}
.cmd-empty[hidden] { display: none; }
.cmd-empty button {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: 12px; color: var(--accent);
  text-decoration: underline; text-underline-offset: 2px;
}
.cmd-empty button:hover { color: var(--accent-deep); }
@media (max-width: 900px) {
  .cmd-empty { margin: 10px 14px 0; }
  .cmd-empty button { display: inline-block; padding: 10px 0; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE v3 — доводка главной под запрос (июль 2026)
   1) Тема-карточки подмешиваются в ленту на телефоне (десктоп-витрина
      3×2 остаётся, здесь она скрыта).
   2) Главный материал компактнее — следующий блок заходит на 1-й экран.
   3) Рейтинг на телефоне — топ-3 + разворот, остальное на /rating/.
   ═══════════════════════════════════════════════════════════════ */

/* Полоса «интересные материалы недели» в ленте — только мобайл: на десктопе
   прячем (там витрина 3×2). До 20.10.2026 вместо полосы темы по одной
   вшивались в ленту карточками .feed-topic — по решению редакции собраны
   в одну полосу после второй строки, как у экспертов. */
.feed-topics { display: none; }
/* Дорожка прокрутки полос (эксперты, материалы недели) — только телефон,
   где полосы листаются вбок; на десктопе эксперты — сетка, листать нечего. */
.hs-bar { display: none; }
/* Кнопка разворота рейтинга — по умолчанию скрыта (видна на мобайле, см. ниже). */
.rk-home-more { display: none; }

@media (max-width: 900px) {

  /* ── (1) Витрина «Темы» уезжает: её место — полоса в ленте ── */
  .ts-h--topics, .topics-grid { display: none !important; }

  /* Полоса «интересные материалы недели». Карточки и прокрутка — от
     полосы экспертов (.exp-grid / .exp-card выше в этом файле), здесь
     только место в ленте: отбивка сверху и снизу, как у блока экспертов,
     и заголовок тем же .ts-h. Скрыта фильтром раздела — класс sec-hidden. */
  .feed-topics { display: block; margin: 18px 0 8px; }
  .feed-topics.sec-hidden { display: none !important; }
  .feed-topics .ts-h { margin: 0 0 10px; }
  .feed-topics .ts-h .ts-t { font-size: 10.5px; line-height: 1.4; }

  /* ── (2) Главный материал компактнее ── */
  .lead-cover { height: 124px; min-height: 0; }
  .lead-text { padding: 11px 14px 13px; }
  .lead-text h1, .lead-text .lt-title { font-size: 19px; line-height: 1.2; }
  .lead-text .lt-top { margin-bottom: 8px; }
  .lead-card .lt-lead {
    font-size: 14px; line-height: 1.45; margin-bottom: 10px;
    -webkit-line-clamp: 2;
  }
  .lead-card .lt-actions { margin-top: 2px; }

  /* ── (3) Рейтинг: видны первые три, остальное — по кнопке ──
     Кап и кнопка не действуют при фильтре по региону (тогда показываем
     все строки региона) и когда пользователь уже развернул список. */
  .home-wrap .ranking:not(.is-filtered):not(.rk-home-expanded) .ranking-inner > a.rk-row:nth-of-type(n+4) {
    display: none !important;
  }
  .home-wrap .ranking:not(.is-filtered) .rk-home-more {
    display: flex; align-items: center; justify-content: center;
    width: 100%; margin: 12px 0 2px; min-height: 44px;
    background: var(--card-2); border: 1px solid var(--line); border-radius: 3px;
    font-family: var(--mono); font-size: 12px; color: var(--accent); cursor: pointer;
  }
  .home-wrap .ranking:not(.is-filtered) .rk-home-more:hover { border-color: var(--ink-3); }
}

  /* ── Компания-партнёр в блоке «в фокусе» ──────────────────────────────
     Оплаченная карточка стоит РЯДОМ с рейтинговой тройкой, а не внутри неё.
     Оформление намеренно сдержанное: тот же каркас, что у соседей, плюс
     метка «Реклама» и тонкая рамка. Кричащая подсветка тут была бы вредна
     дважды — портит полосу и превращает партнёра в баннер, который взгляд
     обучается пропускать. */
  .feat-co--partner { border-color: var(--ink-3); }
  .feat-co-badge--ad {
    background: rgba(0,0,0,.66);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
  }
  .feat-co-erid {
    display: block; margin-top: 6px;
    font-family: var(--mono); font-size: 9px; letter-spacing: .04em;
    color: var(--ink-3);
  }

  /* Ссылка на хаб региона — появляется только при включённом фильтре.
     Оформлена как продолжение плашки региона, а не как кнопка: это
     уточняющий переход, а не призыв к действию. */
  .cmd-bar .rfb-hub {
    font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
    color: var(--accent); white-space: nowrap; margin-left: 10px;
  }
  .cmd-bar .rfb-hub:hover { color: var(--accent-deep); }
  @media (max-width: 600px) {
    .cmd-bar .rfb-hub { margin-left: 0; }
  }

  /* Обёртка кнопки «Ещё N публикаций». Раньше стояла инлайновым
     margin-top:14px и БЕЗ нижнего отступа — при фильтре по региону, когда
     колонка идёт по содержимому, чёрный блок подписки упирался в кнопку
     вплотную. На полной ленте это не было видно: подписку отжимал вниз
     margin-top:auto, и зазор возникал сам собой. */
  .home-news .feed-more-wrap { margin: 14px 0 22px; }

  /* ── Форма подписки: настоящая, с согласием ──────────────────────────
     Раньше здесь были голые input и button, а кнопка показывала выдуманное
     «вы подписаны ✓ (прототип)». Теперь форма отправляет данные и пишет
     журнал согласия (inc/subscribers.php), а рядом с адресом стоит галочка:
     без неё рассылать письма нельзя по ч.1 ст.18 ФЗ «О рекламе». */
  .sub-w .sub-form { display: flex; flex-direction: column; gap: 10px; }
  .sub-w .dds-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .sub-w .sub-consent {
    display: flex; gap: 9px; align-items: flex-start;
    font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.72);
    cursor: pointer;
  }
  .sub-w .sub-consent input {
    width: 16px; height: 16px; flex-shrink: 0; margin: 2px 0 0;
    accent-color: var(--accent);
  }
  .sub-w .sub-msg {
    margin: 0; font-family: var(--mono); font-size: 11px; line-height: 1.4;
  }
  .sub-w .sub-msg--ok  { color: #c5e3ad; }
  .sub-w .sub-msg--err { color: #ffd0bb; }

/* Визуально скрытый текст: читают поисковик и экранный диктор, читатель не видит.
   Не display:none и не visibility:hidden — их поисковые системы и скринридеры
   игнорируют. Приём стандартный (WordPress зовёт его screen-reader-text). */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ── Отступы у заголовков, которые заголовками стали недавно ──
   Подписи секций («эксперты», «темы», «компании», «кейсы», «лента») и
   заголовок закреплённого материала — теги h2 ради структуры страницы.
   Но в style.css у h2 свои отступы (28px сверху, 12px снизу): они рассчитаны
   на текст статьи, а здесь вертикальные интервалы задаёт сам контейнер.
   Раньше подписи были span и отступов не имели — возвращаем как было.

   Только margin. Размер и начертание каждая подпись задаёт своим правилом
   (.ts-h .ts-t и соседние, все с font-weight: 500); прошлая версия сброса
   гасила их через «font-weight: inherit» и подписи теряли полужирность. */
.ts-h .ts-t,
.cases-side-h .t,
.home-news .news-side-h .t { margin: 0; }

/* Заголовок закреплённого материала раньше был h1 и брал у него 24px
   сверху, теперь h2 — берёт 28px. Разница мелкая, но заметная: карточка
   стала выше, и правая колонка разъехалась с левой. Возвращаем 24px;
   нижние 8px задаёт правило .lead-text h1, .lead-text .lt-title выше. */
.lead-text .lt-title { margin-top: 24px; }