/* =====================================================================
   Абирег ТОП-100 2026 — стиль раздела на abireg.ru.
   Токены сняты с типографского файла журнала (DESIGN.md), правила верстки —
   UI-SPEC.md. Собрано из проверенных эталонов мокапы/страница_2026.html и
   мокапы/материал_интервью.html. Один акцент, прямые углы, без градиентов,
   теней и скруглений. Ни одного обращения в сеть: шрифты только системные
   и те, что уже стоят у читателя (разбор стека — в комментарии у :root).
   Файл собирается инструменты/собрать_сайт.py, править руками смысла нет.
   ===================================================================== */

:root{
  /* цвет */
  --primary:#b11116;        /* фирменный красный, единственный акцент */
  --primary-fill:#b20000;   /* заливка шапки таблицы */
  --on-primary:#ffffff;
  --ink:#231f20;
  --ink-soft:#4c4c4c;
  --canvas:#ffffff;
  --zebra:#f7dfdf;          /* веб-зебра, осветлена ради контраста */
  --canvas-soft:#f6f2f0;
  --hairline:#e2d5d5;
  --positive:#336b1f;       /* рабочий зеленый таблицы, 6,43:1 на белом */
  --positive-big:#3d9900;   /* печатный зеленый, только крупный кегль */

  /* шрифт — только то, что уже стоит у читателя: ни одного файла, ни одного
     обращения в сеть. Веб-лицензий на журнальные MinionPro / UniSans / RodeoC
     у издания нет, свободных файлов с кириллицей в проекте нет тоже, поэтому
     стек честно перечисляет реально доступные семейства. Имена лицензионных
     шрифтов оставлены первыми: если лицензию купят и файлы положат на сайт,
     они подхватятся сами, менять верстку не придется.
     Главное требование — развести три роли, чтобы заголовок и корпус не
     оказались одним шрифтом:
       sans    — Segoe UI (Windows) / системный гротеск платформы, не Arial;
       serif   — Georgia, книжная антиква корпуса;
       display — Cambria: брусковые засечки, уже антиквы корпуса, другой ритм.
     Там, где семейства не окажется (Android, часть Linux), роли все равно
     различаются насыщенностью, кеглем и межбуквенным просветом. */
  --sans:"Golos Text","Onest","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --serif:"Source Serif 4","PT Serif",Georgia,"Times New Roman",serif;
  --display:"Bitter","Roboto Slab",Cambria,"Sitka Display","Noto Serif",Georgia,serif;

  /* сетка */
  --pad:24px;
  --gap-block:48px;
  --stick:68px;             /* высота липкой панели оглавления материала */

  /* липкость таблицы, значения проставляет скрипт */
  --rt-top1:0px;
  --rt-top2:0px;
}
@media (min-width:768px){ :root{ --pad:32px; --gap-block:64px; } }
@media (min-width:1024px){ :root{ --pad:40px; --gap-block:96px; } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.4; font-weight:400;
  overflow-wrap:break-word;
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0; list-style:none}
button{font:inherit; color:inherit}
a{color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
a:hover,a:focus{color:var(--primary)}
:focus-visible{outline:3px solid var(--ink); outline-offset:3px}
.vh{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* --- контейнеры --- */
.wrap{max-width:calc(1240px + var(--pad)*2); margin:0 auto; padding-inline:var(--pad)}
.wrap--read{max-width:calc(680px + var(--pad)*2)}
.wrap--wide{max-width:calc(1440px + var(--pad)*2)}

.sec{margin-block:var(--gap-block)}
.sec__head{margin-bottom:32px}
.sec__title{
  font-family:var(--display); font-weight:700; font-size:28px; line-height:1.08;
  letter-spacing:-0.3px;
}
@media (min-width:768px){ .sec__title{font-size:34px} }
@media (min-width:1024px){ .sec__title{font-size:40px} }
.sec__note{margin-top:12px; font-size:18px; line-height:1.45; color:var(--ink-soft); max-width:680px}
@media (min-width:1024px){ .sec__note{font-size:20px} }

/* колонка чтения: 680px текста, на широком экране справа поле под врезки */
.col{max-width:680px}
.col > *{max-width:680px}
@media (min-width:1200px){
  .col{max-width:1000px}
  .col::after{content:""; display:block; clear:both}
}

/* --- кнопки --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:12px 24px; border:1px solid var(--ink);
  background:var(--canvas); color:var(--ink);
  font-family:var(--sans); font-size:16px; font-weight:600; line-height:1.4;
  border-radius:0; cursor:pointer; text-decoration:none; text-align:center;
  transition:background-color .12s linear, color .12s linear;
}
.btn:hover,.btn:focus{color:var(--ink); background:var(--canvas-soft)}
.btn--primary{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.btn--primary:hover,.btn--primary:focus{background:var(--primary); color:var(--on-primary)}
.btn--link{
  display:inline-flex; align-items:center; min-height:44px; padding:12px 0; border:0; background:none;
  font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:3px;
  cursor:pointer; text-align:left;
}
.btn--link:hover,.btn--link:focus{color:var(--primary); background:none}
.btn[disabled]{opacity:.55; cursor:default}
/* На очень узкой полосе (телефон при увеличении до 200 %) длинное слово внутри
   кнопки не давало ей сжаться, и страница получала боковую прокрутку */
@media (max-width:400px){ .btn{padding:12px 12px; max-width:100%; overflow-wrap:anywhere} }

.proto-note{
  margin-top:12px; font-size:13px; line-height:1.35; color:var(--ink-soft);
  border-left:2px solid var(--hairline); padding-left:12px; max-width:680px;
}

/* --- ссылка «перейти» --- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:80;
  background:var(--canvas); color:var(--ink); padding:12px 24px;
  border:1px solid var(--ink); font-weight:600;
}
.skip:focus{left:0}

/* --- полоса прогресса чтения --- */
.progress{position:fixed; top:0; left:0; right:0; height:3px; background:transparent; z-index:70}
.progress i{display:block; height:3px; width:0; background:var(--primary)}

/* --- колонтитул --- */
.masthead{border-bottom:1px solid var(--hairline)}
.masthead__in{
  display:flex; flex-wrap:wrap; gap:8px 24px; align-items:baseline; padding-block:12px;
  color:var(--primary); font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
}
.masthead__in a{color:inherit; text-decoration:none}
.masthead__in a:hover,.masthead__in a:focus{text-decoration:underline}
.masthead__year{color:var(--ink-soft); letter-spacing:.04em}

/* --- хлебные крошки --- */
.crumbs{padding-block:12px; font-size:13px; line-height:1.35; color:var(--ink-soft)}
.crumbs ol{display:flex; flex-wrap:wrap; gap:4px 8px}
.crumbs li{display:flex; gap:8px; align-items:baseline}
.crumbs li+li::before{content:"\2192"; color:var(--hairline)}
.crumbs a{color:var(--ink-soft)}
.crumbs [aria-current]{color:var(--ink); font-weight:600}

/* =============== хаб: обложка =============== */
.hero{margin-top:32px}
.hero__grid{display:grid; gap:24px}
.hero__grid > *{min-width:0}
@media (min-width:1024px){
  .hero__grid{grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:48px; align-items:start}
}
.hero__cover img{width:100%; max-width:420px; border:1px solid var(--hairline)}
.hero__kicker{
  font-family:var(--display); font-weight:700; font-size:34px; line-height:1.02;
  letter-spacing:-0.5px; text-transform:uppercase; color:var(--primary);
}
@media (min-width:768px){ .hero__kicker{font-size:44px} }
@media (min-width:1024px){ .hero__kicker{font-size:56px} }
.hero__h1{margin-top:16px; font-size:21px; font-weight:700; line-height:1.16}
@media (min-width:1024px){ .hero__h1{font-size:26px} }
.hero__facts{
  margin-top:24px; padding-top:16px; border-top:1px solid var(--hairline);
  font-size:16px; line-height:1.45; color:var(--ink-soft);
}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; align-items:center}
.hero__src{margin-top:24px; font-size:13px; color:var(--ink-soft)}

/* =============== хаб: колонка редакции =============== */
.kolonka__label{font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--primary)}
.kolonka__title{margin-top:12px; font-family:var(--display); font-weight:700; font-size:28px; line-height:1.08}
@media (min-width:1024px){ .kolonka__title{font-size:40px} }
.kolonka__sub{margin-top:12px; font-size:18px; line-height:1.45; color:var(--ink-soft)}
.kolonka__lead{margin-top:24px; font-family:var(--sans); font-size:18px; line-height:1.5}
@media (min-width:1024px){ .kolonka__lead{font-size:19px} }
.kolonka__author{margin-top:24px; font-size:14px; font-weight:600}
.kolonka__author span{display:block; font-weight:400; color:var(--ink-soft)}

/* =============== реклама полосой =============== */
.ad{margin-block:var(--gap-block)}
.ad__label{font-size:13px; line-height:1.35; color:var(--ink-soft); margin-bottom:8px; text-align:left}
.ad__box{text-align:center}
.ad__box img{
  max-width:min(620px,100%); max-height:84vh; width:auto; height:auto;
  object-fit:contain; margin-inline:auto; border:1px solid var(--hairline);
}
.ad__box a{display:inline-block; text-decoration:none}
.ad__spread{display:flex; flex-direction:column; align-items:center; gap:8px}
.ad__spread img{max-width:min(620px,100%)}
@media (min-width:1024px){
  .ad__spread{flex-direction:row; gap:0; justify-content:center; align-items:flex-start}
  .ad__spread img{max-width:50%; max-height:84vh; margin:0; border:0}
}

/* =============== рейтинг =============== */
.rt{margin-block:var(--gap-block)}
.rt-panel{
  position:sticky; top:0; z-index:20;
  background:var(--canvas-soft); border:1px solid var(--hairline);
  padding:12px 16px;
}
.rt-panel__row{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end}
.rt-razdel{display:flex; gap:8px; flex:1 1 100%}
@media (min-width:768px){ .rt-razdel{flex:0 0 auto} }
/* неактивная кнопка-фильтр: рамка красная, подпись — основным цветом текста
   (DESIGN.md, компонент filter-chip). Иначе на управляющей полосе стоит десяток
   красных подписей, из которых выбрана одна, и красный перестает быть акцентом */
.rt-razdel .btn{flex:1 1 auto; font-size:14px; padding:12px 16px; border-color:var(--primary); color:var(--ink)}
.rt-razdel .btn[aria-pressed="true"]{background:var(--primary); color:var(--on-primary)}

.fld{display:flex; flex-direction:column; gap:4px}
.fld__lab{font-size:13px; font-weight:600; color:var(--ink-soft)}
.fld select,.fld input{
  font-family:var(--sans); font-size:16px; font-weight:400; line-height:1.4;
  min-height:44px; padding:8px 12px;
  border:1px solid var(--ink); border-radius:0; background:var(--canvas); color:var(--ink);
}
.fld select{max-width:100%}

.rt-search{position:relative; flex:1 1 100%}
@media (min-width:768px){ .rt-search{flex:0 0 320px} }
.rt-search input{width:100%; padding-right:48px}
.rt-search__clear{
  position:absolute; right:0; bottom:0; width:44px; height:44px;
  border:0; background:none; cursor:pointer; display:none;
  align-items:center; justify-content:center;
}
.rt-search__clear[data-on="1"]{display:flex}
.rt-search__clear svg{width:16px; height:16px; fill:none; stroke:var(--ink); stroke-width:2}

.rt-chips{display:flex; flex-wrap:wrap; gap:8px}
.rt-chips .btn{font-size:14px; padding:8px 10px; min-height:44px; border-color:var(--primary); color:var(--ink)}
.rt-chips .btn[aria-pressed="true"]{background:var(--primary); color:var(--on-primary)}

.rt-panel__tail{display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center; margin-top:12px}
.rt-count{font-size:14px; font-weight:600}
.rt-copied{font-size:14px; color:var(--positive); font-weight:600}
.rt-copied[hidden]{display:none}
.rt-foot{margin-top:24px; font-size:14px; line-height:1.45; color:var(--ink-soft)}

.rt-mob-toggle{display:none}
.only-mob{display:none}
@media (max-width:767px){
  .only-mob{display:block}
  .rt-panel{padding:8px 12px}
  .rt-panel__row{gap:8px}
  .rt-search{flex:1 1 0; min-width:140px}
  .rt-mob-toggle{display:inline-flex; flex:0 0 auto; padding:12px 12px; font-size:14px}
  .rt-more{display:none; width:100%; margin-top:12px; padding-top:12px; border-top:1px solid var(--hairline)}
  .rt-more[data-open="1"]{display:block}
  .rt-more > *{margin-bottom:12px}
  .rt-more .fld select{width:100%}
  .rt-razdel{flex:1 1 100%}
  #rt-region-chips-box{display:none}
}
@media (min-width:768px){
  .rt-panel{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:flex-end; padding:12px 16px}
  #rt-otrasl-box select{max-width:200px}
  .rt-panel__row{display:contents}
  .rt-more{display:contents}
  .rt-razdel{order:1}
  .rt-search{order:2}
  #rt-otrasl-box{order:3}
  #rt-region-chips-box{order:4; flex:1 1 100%}
  .rt-sort-fld{display:none}
}
.no-js .rt-panel{display:none}

/* --- таблица --- */
.rt-tablebox{margin-top:24px}
.rt-tablebox[hidden]{display:none}
.rt-caption{text-align:left; font-size:14px; font-weight:600; color:var(--ink-soft); padding-bottom:8px}
.rt-table{width:100%; table-layout:fixed; border-collapse:separate; border-spacing:0}
.rt-table thead th{
  background:var(--primary-fill); color:var(--on-primary);
  font-size:12px; font-weight:700; line-height:1.2; text-transform:uppercase;
  letter-spacing:.02em; text-align:left; padding:8px 12px; vertical-align:bottom;
}
@media (min-width:768px){ .rt-table thead th{font-size:13px} }
.rt-table thead .rt-hgap{background:var(--primary-fill); padding:0}
@media (min-width:768px){
  .rt-table thead tr:first-child th,
  .rt-table thead tr:first-child td{position:sticky; top:var(--rt-top1); z-index:10}
  .rt-table thead tr:nth-child(2) th{position:sticky; top:var(--rt-top2); z-index:10}
}
.rt-table thead th.k-mesto,.rt-table thead th.k-bylo{text-align:center}
.rt-table thead th.k-v24,.rt-table thead th.k-v25,.rt-table thead th.k-din{text-align:right}
.rt-table thead th.k-grp-mesto{text-align:center}
.rt-table thead th.k-grp-vyr{text-align:right}

.rt-sort{
  border:0; background:none; color:inherit; font:inherit; text-transform:inherit;
  letter-spacing:inherit; padding:6px 0; min-height:44px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; text-align:inherit;
}
.rt-sort::after{content:""; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; opacity:.35}
th[aria-sort="none"] .rt-sort::after{border-top:6px solid currentColor}
th[aria-sort="ascending"] .rt-sort::after{border-bottom:6px solid currentColor; opacity:1}
th[aria-sort="descending"] .rt-sort::after{border-top:6px solid currentColor; opacity:1}

.rt-table tbody td{
  padding:10px 12px; vertical-align:top; border-bottom:1px solid var(--hairline);
  font-size:15px; line-height:1.32;
}
.rt-table tbody tr.rt-zebra td{background:var(--zebra)}
.rt-table tbody tr.is-hit td{outline:2px solid var(--primary); outline-offset:-2px}

.k-mesto,.k-bylo{text-align:center}
.k-v24,.k-v25,.k-din{text-align:right}
.k-name,.k-act{hyphens:auto; overflow-wrap:break-word}

.mesto-num{font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; display:block}
.bylo-num{font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; display:block}
.nm{font-size:15px; font-weight:700; line-height:1.28; text-transform:uppercase}
.utoch{font-size:15px; font-weight:400; text-transform:none}
.act{font-size:14px; font-weight:400; font-style:italic; line-height:1.3}
.reg{font-size:15px}
.num{font-size:15px; font-weight:600; font-variant-numeric:tabular-nums}
@media (min-width:768px){ .num{font-size:16px} }
.din{font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.d-up{color:var(--positive)}
.d-down{color:var(--primary)}
.d-zero{color:var(--ink)}
.d-none{color:var(--ink-soft)}

.sdv{display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:600; margin-top:2px}
.sdv::before{content:""; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent}
.sdv--up{color:var(--positive)}
.sdv--up::before{border-bottom:6px solid var(--positive)}
.sdv--down{color:var(--primary)}
.sdv--down::before{border-top:6px solid var(--primary)}
.sdv--flat,.sdv--new{color:var(--ink-soft); font-weight:400}
.sdv--flat::before,.sdv--new::before{display:none}

.act-more{
  display:none; border:0; background:none; padding:4px 0; min-height:44px;
  font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}

.c-mesto{width:5%} .c-bylo{width:7%} .c-name{width:27%} .c-act{width:25%}
.c-reg{width:11%} .c-v24{width:8%} .c-v25{width:8.5%} .c-din{width:8.5%}
.act-inline,.sdv-inline{display:none}

/* Лишние колонки не выключаются через display:none: при table-layout:fixed браузер
   раздает ширины из colgroup по порядку ОСТАВШИХСЯ ячеек, и вся таблица съезжает
   на колонку влево (проверено: на 768 px страница вырастала со 19 до 160 тысяч
   пикселей). Поэтому ячейка остается на месте, а обнуляется ее содержимое.

   Заголовочную ячейку гасим отдельным селектором `.rt-table thead th.<класс>`:
   короткая запись `.k-act` (вес 0-1-0) проигрывает правилу `.rt-table thead th`
   (вес 0-1-2), кегль 13px оставался живым, и подпись «Вид деятельности»
   переносилась по одной букве внутрь колонки нулевой ширины. Шапка вырастала
   до 250 px против 62 px у строки данных. Лечение тела таблицы было доведено
   до `<td>` и не доведено до `<th>` — здесь этот пробел закрыт. */
@media (max-width:1279px) and (min-width:1024px){
  .c-mesto{width:5.5%} .c-bylo{width:7.5%} .c-name{width:29%} .c-act{width:26%}
  .c-reg{width:12%} .c-v24{width:0} .c-v25{width:10%} .c-din{width:10%}
  .k-v24,
  .rt-table thead th.k-v24{padding:0; font-size:0; line-height:0; letter-spacing:0; word-spacing:0}
  .k-v24 > *{display:none}
}
@media (max-width:1023px) and (min-width:768px){
  .c-mesto{width:13%} .c-bylo{width:0} .c-name{width:47%} .c-act{width:0}
  .c-reg{width:15%} .c-v24{width:0} .c-v25{width:12.5%} .c-din{width:12.5%}
  .k-bylo,.k-act,.k-v24,
  .rt-table thead th.k-bylo,
  .rt-table thead th.k-act,
  .rt-table thead th.k-v24{padding:0; font-size:0; line-height:0; letter-spacing:0; word-spacing:0}
  .k-bylo > *,.k-act > *,.k-v24 > *{display:none}
  .rt-table thead tr:first-child{display:none}
  .act-inline{display:block; margin-top:4px}
  .sdv-inline{display:block}
  .rt-table thead th.k-mesto{text-align:center}
  .k-reg{hyphens:auto}
}
@media (max-width:767px){
  .rt-table,.rt-table tbody,.rt-table tr,.rt-table td{display:block}
  .rt-caption{display:block; width:100%; font-size:13px; padding-bottom:12px}
  /* Свойство overflow к ячейкам таблицы не применяется, поэтому спрятать шапку
     одним `thead` нельзя: ячейки сохраняли свою ширину и вылезали за правый край
     (при увеличении до 200 % это давало боковую прокрутку — документ 227 px
     против окна 188 px). Прячем каждую ячейку отдельно, переведя ее в блок:
     содержимое остается в разметке и доступно скринридеру, ширины не занимает. */
  .rt-table thead{position:absolute; width:1px; height:1px; overflow:hidden}
  .rt-table thead tr{display:block; width:1px; height:1px; overflow:hidden}
  .rt-table thead th,.rt-table thead td{
    display:block; width:1px; height:1px; padding:0; overflow:hidden;
    white-space:nowrap; border:0;
  }
  .rt-table thead .rt-sort{display:none}   /* сортировка на телефоне — списком в панели */
  .rt-table colgroup{display:none}
  .rt-table tbody td{min-width:0}
  .k-name,.k-act,.k-reg{overflow-wrap:anywhere}
  .rt-table tbody tr{
    display:grid;
    grid-template-columns:minmax(0,auto) minmax(0,auto) minmax(0,1fr);
    grid-template-areas:
      "mesto bylo din"
      "name name name"
      "act act act"
      "reg reg reg"
      "v25 v25 v24";
    gap:2px 8px; align-items:baseline;
    padding:12px 16px; border-bottom:1px solid var(--hairline);
  }
  .rt-table tbody tr.rt-zebra{background:var(--zebra)}
  .rt-table tbody tr.rt-zebra td{background:transparent}
  .rt-table tbody td{padding:0; border:0; text-align:left}
  .k-mesto{grid-area:mesto}
  .k-bylo{grid-area:bylo}
  .k-name{grid-area:name; margin-top:8px}
  .k-act{grid-area:act}
  .k-reg{grid-area:reg; margin-top:4px}
  .k-v25{grid-area:v25; margin-top:8px}
  .k-v24{grid-area:v24; margin-top:8px; justify-self:end; text-align:right}
  .k-din{grid-area:din; justify-self:end; text-align:right}
  .k-mesto .mesto-num{font-size:24px; color:var(--primary); line-height:1.1}
  .k-bylo .bylo-num{display:none}
  .k-din .din{font-size:16px}
  .k-v25 .num{font-size:18px}
  .k-v25 .num::after{content:"\00a0млн руб."; font-size:13px; font-weight:400; color:var(--ink-soft)}
  .k-v24 .num{font-size:14px; font-weight:400; color:var(--ink-soft)}
  .k-v24 .num::before{content:"2024:\00a0"; font-size:13px}
  .k-v24[data-empty="1"]{display:none}
  .reg{font-size:13px; color:var(--ink-soft)}
  .act-inline,.sdv-inline{display:none}
  .k-act .act{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .k-act[data-open="1"] .act{-webkit-line-clamp:unset; overflow:visible}
  .act-more{display:inline-block}
  .k-act[data-short="1"] .act-more{display:none}
  .rt-table tbody tr.is-hit{outline:2px solid var(--primary); outline-offset:-2px}
  .rt-table tbody tr.is-hit td{outline:0}
}

.rt-empty{border:1px solid var(--hairline); background:var(--canvas-soft); padding:24px; margin-top:24px}
.rt-empty[hidden]{display:none}
.rt-empty__t{font-family:var(--display); font-size:24px; font-weight:700; line-height:1.14}
.rt-empty p{margin-top:12px; font-size:16px; line-height:1.45; color:var(--ink-soft); max-width:680px}
.rt-empty .btn{margin-top:24px}

/* =============== хаб: материалы выпуска =============== */
.mat-group{margin-top:48px}
.mat-group__title{
  font-size:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--primary); padding-bottom:8px; border-bottom:2px solid var(--primary);
}
.mat-list{display:grid; gap:0}
@media (min-width:1024px){ .mat-list{grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:48px} }
.mat{padding:24px 0; border-bottom:1px solid var(--hairline)}
/* minmax(0,…) обязателен: у ячейки сетки минимальная ширина по умолчанию равна
   ширине самого длинного слова, и на узком экране (в том числе при увеличении
   до 200 %) карточка отказывалась сжиматься и вылезала за край страницы */
.mat__top{display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start}
.mat__top--foto{grid-template-columns:auto auto minmax(0,1fr)}
@media (max-width:339px){ .mat__top--foto{grid-template-columns:auto minmax(0,1fr)} }
.mat__num{
  font-family:var(--display); font-weight:700; font-size:30px; line-height:1;
  color:var(--primary); font-variant-numeric:tabular-nums; min-width:2ch;
}
.mat__speaker{font-size:14px; font-weight:600; color:var(--ink-soft)}
.mat__title{margin-top:4px; font-size:21px; font-weight:700; line-height:1.16; text-transform:uppercase}
@media (min-width:1024px){ .mat__title{font-size:23px} }
.mat__title a{text-decoration:none}
.mat__title a:hover,.mat__title a:focus{text-decoration:underline}
.mat__sub{margin-top:8px; font-size:13px; line-height:1.35; color:var(--ink-soft)}
.mat__flags{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; align-items:center}
.mat__ad{display:inline-block; font-size:13px; color:var(--ink-soft); border:1px solid var(--hairline); padding:2px 8px}
.mat__actions{display:flex; flex-wrap:wrap; gap:16px; margin-top:4px; align-items:center}

/* =============== хаб: цифры =============== */
.cifry{background:var(--canvas-soft); padding-block:48px}
@media (min-width:1024px){ .cifry{padding-block:64px} }
.cifry__grid{display:grid; gap:0; margin-top:32px}
@media (min-width:768px){ .cifry__grid{grid-template-columns:1fr 1fr; column-gap:48px} }
.cifra{padding:24px 0; border-bottom:1px solid var(--hairline)}
.cifra__val{
  font-family:var(--display); font-weight:700; font-size:34px; line-height:1.08;
  font-variant-numeric:tabular-nums; letter-spacing:-0.3px;
}
@media (min-width:1024px){ .cifra__val{font-size:40px} }
.cifra__val--up{color:var(--positive-big)}
.cifra__lab{margin-top:8px; font-size:14px; font-weight:600; line-height:1.35}
.cifra__src{margin-top:8px; font-size:13px; line-height:1.35; color:var(--ink-soft)}
.cifry__foot{margin-top:24px; font-size:13px; color:var(--ink-soft)}

/* =============== хаб: печатная версия =============== */
.print__cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:32px}
.polosy{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media (min-width:768px){ .polosy{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1024px){ .polosy{grid-template-columns:repeat(4,1fr)} }
@media (min-width:1280px){ .polosy{grid-template-columns:repeat(6,1fr)} }
.polosa{border:0; background:none; padding:0; cursor:pointer; text-align:left}
.polosa img{width:100%; border:1px solid var(--hairline)}
.polosa figcaption{margin-top:4px; font-size:13px; color:var(--ink-soft)}
.polosa[hidden]{display:none}

.lb{position:fixed; inset:0; z-index:100; background:rgba(35,31,32,.92); display:none}
.lb[data-open="1"]{display:flex; align-items:center; justify-content:center}
.lb__img{max-width:92vw; max-height:88vh; width:auto; height:auto; object-fit:contain}
.lb__btn{
  position:absolute; min-width:44px; min-height:44px; padding:8px 16px;
  background:var(--canvas); color:var(--ink); border:1px solid var(--ink);
  font-size:14px; font-weight:600; cursor:pointer;
}
.lb__close{top:16px; right:16px}
.lb__prev{left:16px; top:50%; transform:translateY(-50%)}
.lb__next{right:16px; top:50%; transform:translateY(-50%)}
.lb__cap{position:absolute; bottom:16px; left:16px; color:var(--canvas); font-size:13px}
body[data-lock="1"]{overflow:hidden}

/* =============== участие в выпуске 2027 ===============
   Формы приема заявок в разделе нет сознательно: принимать заявку здесь некому,
   а форма, которая рапортует об успехе и ничего не отправляет, теряет клиента
   молча. Заявка живет на лендинге продаж, куда и ведет кнопка. */
.cta2027{background:var(--canvas-soft); border:1px solid var(--hairline); padding:24px}
@media (min-width:1024px){ .cta2027{padding:32px} }
.cta2027__lead{font-size:18px; line-height:1.5; max-width:680px}
@media (min-width:1024px){ .cta2027__lead{font-size:20px} }
.cta2027__skidka{
  margin-top:16px; border-left:3px solid var(--primary); padding-left:24px; max-width:680px;
  font-size:17px; line-height:1.45; font-weight:600;
}
.cta2027__act{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; align-items:center}
.cta2027__kontakt{margin-top:16px; font-size:14px; line-height:1.5; color:var(--ink-soft)}

/* =============== страница материала: открывающий экран =============== */
.opener{margin-top:24px}
.kicker{font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--primary)}
.opener h1{
  margin-top:16px; font-family:var(--display); font-weight:700;
  font-size:32px; line-height:1.08; letter-spacing:-0.3px;
}
@media (min-width:768px){ .opener h1{font-size:40px} }
@media (min-width:1024px){ .opener h1{font-size:46px} }
.opener__dek{margin-top:16px; font-size:18px; line-height:1.45; color:var(--ink-soft)}
@media (min-width:1024px){ .opener__dek{font-size:20px} }
.opener__meta{
  margin-top:24px; padding-top:12px; border-top:1px solid var(--hairline);
  display:flex; flex-wrap:wrap; gap:4px 16px;
  font-size:13px; line-height:1.35; color:var(--ink-soft);
}
.opener__meta b{color:var(--ink); font-weight:600}
/* лид — гротеск (DESIGN.md, токен lead): иначе лид и первый абзац корпуса
   набраны одним шрифтом одного кегля и лид перестает отличаться от текста */
.opener__lead{margin-top:32px; font-family:var(--sans); font-size:19px; line-height:1.5}
@media (min-width:768px){ .opener__lead{font-size:20px} }
.opener__grid{display:grid; gap:24px}
@media (min-width:1024px){
  .opener__grid{grid-template-columns:minmax(0,1fr) minmax(0,44%); gap:48px; align-items:start}
}
.opener__fig figcaption{margin-top:8px; font-size:13px; line-height:1.35; color:var(--ink-soft)}
.opener__fig img{border:1px solid var(--hairline)}
/* вертикальные портреты из журнала иначе уезжают на два экрана и рвут открывающий разворот */
@media (min-width:1024px){
  .opener__fig img{max-height:540px; width:auto; margin-inline:auto}
}
.opener__hero{margin-top:32px}
.opener--text h1{max-width:14ch}
@media (min-width:768px){ .opener--text h1{max-width:20ch} }
.rule{height:4px; background:var(--primary); width:96px; margin-top:24px}
.opener--text .opener__lead{border-left:3px solid var(--primary); padding-left:24px; max-width:680px}

/* портрет автора в колонке редакции */
.kol__author{
  display:flex; gap:16px; align-items:center; margin-top:32px;
  padding-top:16px; border-top:1px solid var(--hairline);
}
.kol__portret{width:96px; height:auto; flex:0 0 96px; border:1px solid var(--hairline)}
.kol__author p{font-size:15px; font-weight:600; line-height:1.35}
.kol__author span{display:block; font-weight:400; color:var(--ink-soft); margin-top:4px}

/* =============== липкое оглавление =============== */
.toc{
  position:sticky; top:0; z-index:40; background:var(--canvas);
  border-top:3px solid transparent;
  border-bottom:1px solid var(--hairline);
  margin-top:var(--gap-block);
}
.toc summary{
  display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center;
  min-height:44px; padding-block:10px; cursor:pointer; list-style:none;
  font-size:14px; font-weight:600;
}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{
  content:""; width:0; height:0; margin-left:auto; align-self:center;
  border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid var(--primary);
}
.toc[open] summary::after{border-top:0; border-bottom:6px solid var(--primary)}
.toc__now{font-weight:400; color:var(--ink-soft)}
.toc__list{max-height:56vh; overflow:auto; padding-bottom:16px; border-top:1px solid var(--hairline)}
.toc__list li{border-bottom:1px solid var(--hairline)}
.toc__list li:last-child{border-bottom:0}
.toc__list a{
  display:flex; gap:12px; align-items:baseline; min-height:44px; padding:10px 0;
  font-size:15px; line-height:1.35; text-decoration:none; color:var(--ink);
}
.toc__list a:hover,.toc__list a:focus{color:var(--primary); text-decoration:underline}
.toc__list a[aria-current="true"]{font-weight:600}
.toc__list a[aria-current="true"] .toc__n{background:var(--primary); color:var(--on-primary)}
.toc__n{
  flex:0 0 auto; min-width:28px; padding:2px 4px; text-align:center;
  font-size:13px; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--primary); border:1px solid var(--hairline);
}
@media (min-width:1024px){ .toc__list{columns:2; column-gap:48px} .toc__list li{break-inside:avoid} }

/* =============== тело материала =============== */
.body{margin-top:40px; margin-bottom:var(--gap-block)}
.body p{font-family:var(--serif); font-size:19px; line-height:1.62; margin-top:20px; hyphens:auto}
@media (max-width:767px){ .body p{font-size:18px} }
.body p:first-child{margin-top:0}

.body h2.q{
  font-family:var(--sans); font-weight:700; font-size:19px; line-height:1.35;
  margin-top:40px; scroll-margin-top:calc(var(--stick) + 24px); hyphens:none;
}
@media (min-width:1024px){ .body h2.q{font-size:20px} }
.body h2.q:first-child{margin-top:0}

.body h2.glavka{
  margin-top:56px; padding-top:24px; border-top:2px solid var(--primary);
  font-family:var(--display); font-weight:700; font-size:26px; line-height:1.14;
  scroll-margin-top:calc(var(--stick) + 24px);
}
@media (min-width:1024px){ .body h2.glavka{font-size:30px} }
.body h2 .glavka__n{
  display:block; margin-bottom:8px;
  font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--primary);
}

/* фотография внутри материала */
.fig{margin:32px 0}
.fig img{border:1px solid var(--hairline)}
.fig figcaption{margin-top:8px; font-size:13px; line-height:1.35; color:var(--ink-soft)}
.fig--hero{margin-top:24px}
.fig--razvorot{margin:0 0 32px}
.fig--razvorot img{border:1px solid var(--hairline)}
@media (min-width:1200px){ .fig--razvorot{max-width:1240px} }

/* абзац прямой речи: тот же корпус, но с линейкой, как отбивка в журнале */
.body blockquote.cit{margin-top:20px; border-left:2px solid var(--hairline); padding-left:16px}
.body blockquote.cit p{margin-top:0}

/* выносная цитата: абзац прямой речи, поднятый в кегль. Красная только линейка —
   сам текст цветом ink, иначе красного на полосе становится столько, что он
   перестает работать акцентом (доля акцента по площади задана в разделе 5) */
.pq{margin-top:40px; margin-bottom:8px; border-left:3px solid var(--primary); padding:8px 0 8px 24px; max-width:680px}
.pq p{font-family:var(--sans); font-weight:600; font-size:21px; line-height:1.3; margin:0; color:var(--ink); hyphens:none}
@media (min-width:1024px){ .pq p{font-size:23px} }
.pq cite{display:block; margin-top:12px; font-style:normal; font-size:14px; font-weight:600; color:var(--ink)}
.pq cite span{display:block; font-weight:400; color:var(--ink-soft)}

/* врезка с ключевыми цифрами материала: на широком экране уходит в поле справа
   от колонки чтения — то самое место, которое иначе пустует */
.side{margin:32px 0; padding:16px 0 16px 16px; border-left:2px solid var(--primary); background:var(--canvas)}
.side h2,.side h3{font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--primary); font-family:var(--sans); line-height:1.35; margin:0; border:0; padding:0}
.side ul{margin-top:12px}
.side li{font-size:15px; line-height:1.4; margin-top:8px; font-family:var(--sans)}
.side li+li{padding-top:8px; border-top:1px solid var(--hairline)}
.side li b{display:block; font-weight:600}
.side li span{color:var(--ink-soft)}
.side .side__src{margin-top:12px; font-family:var(--sans); font-size:13px; line-height:1.35; color:var(--ink-soft)}
@media (min-width:1200px){
  .side{float:right; clear:right; width:280px; margin:8px 0 24px 40px; padding-left:16px}
  .side--wide{float:none; width:auto; margin:32px 0; max-width:680px}
}

/* круглый портрет спикера в карточке материала — как в оглавлении журнала
   (полоса 4). Если спикера или портретного снимка нет, карточка остается
   двухколоночной, дыры на месте портрета не возникает. */
.mat__foto,.card__foto{
  width:64px; height:64px; border-radius:50%;
  object-fit:cover; object-position:center top; background:var(--canvas-soft);
}
@media (min-width:1024px){
  .mat__foto,.card__foto{width:88px; height:88px}
}
@media (max-width:339px){ .mat__foto,.card__foto{display:none} }

/* подпись автора и печатная версия */
.by{margin-top:40px; padding-top:16px; border-top:1px solid var(--hairline); font-size:14px; line-height:1.4}
.by b{font-weight:600}
.by span{display:block; color:var(--ink-soft); margin-top:4px}
.by .btn{margin-top:16px}

/* =============== маркировка рекламной статьи =============== */
.admark{margin-top:32px; border:1px solid var(--hairline); padding:12px 16px; max-width:680px}
.admark__t{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft)}
.admark__s{margin-top:4px; font-size:14px; line-height:1.4; color:var(--ink-soft)}
.adfoot{margin-top:40px; padding-top:16px; border-top:2px solid var(--primary); max-width:680px}
.adfoot__k{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft)}
.adfoot__n{margin-top:8px; font-size:17px; font-weight:700; line-height:1.2}
.adfoot__c{margin-top:8px; font-size:15px; line-height:1.45; color:var(--ink-soft)}
.erid{margin-top:8px; font-size:13px; color:var(--ink-soft)}

/* =============== предыдущий / следующий =============== */
.pn{border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); padding-block:24px}
.pn ul{display:grid; gap:24px}
@media (min-width:768px){ .pn ul{grid-template-columns:1fr 1fr; gap:48px} }
.pn a{display:block; min-height:44px; text-decoration:none; padding-block:4px}
.pn a:hover .pn__t,.pn a:focus .pn__t{color:var(--primary); text-decoration:underline}
.pn__k{font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft)}
.pn__t{display:block; margin-top:8px; font-size:17px; font-weight:700; line-height:1.2; text-transform:uppercase}
.pn__p{display:block; margin-top:4px; font-size:13px; color:var(--ink-soft)}
@media (min-width:768px){ .pn li:last-child{text-align:right} }

/* =============== дальше из выпуска =============== */
.next{margin-block:var(--gap-block)}
.next h2{font-family:var(--display); font-weight:700; font-size:28px; line-height:1.08; letter-spacing:-0.3px}
@media (min-width:1024px){ .next h2{font-size:34px} }
.cards{margin-top:32px; display:grid; gap:0}
@media (min-width:768px){ .cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:48px} }
@media (min-width:1200px){ .cards{grid-template-columns:repeat(3,minmax(0,1fr))} }
.card{padding:24px 0; border-bottom:1px solid var(--hairline)}
.card__top{display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:start}
.card__top--foto{grid-template-columns:auto auto minmax(0,1fr)}
@media (max-width:339px){ .card__top--foto{grid-template-columns:auto minmax(0,1fr)} }
.card__n{
  font-family:var(--display); font-weight:700; font-size:30px; line-height:1;
  color:var(--primary); font-variant-numeric:tabular-nums; min-width:2ch;
}
.card__k{font-size:14px; font-weight:600; color:var(--ink-soft)}
.card__t{margin-top:4px; font-size:19px; font-weight:700; line-height:1.16; text-transform:uppercase}
.card__t a{text-decoration:none}
.card__t a:hover,.card__t a:focus{text-decoration:underline}
.card__s{margin-top:8px; font-size:13px; line-height:1.35; color:var(--ink-soft)}
.next__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; align-items:center}

/* =============== подвал =============== */
.foot{border-top:1px solid var(--hairline); margin-top:var(--gap-block); padding-block:32px; font-size:13px; line-height:1.45; color:var(--ink-soft)}
.foot p{margin-bottom:8px}

/* =============== движение =============== */
tbody tr{animation:pojav .12s linear}
@keyframes pojav{from{opacity:.4}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important;
  }
}