/* ════════════════════════════════════════════════════
   ДДС·Сибирь — Терминал-дизайн (имплементация хэндофф-макета)
   Палитра: theme-graphite. Шрифты: Spectral + Manrope + JetBrains Mono.
   Содержит:
   - токены и базовые примитивы из tokens.css дизайн-пака,
   - переопределения для существующих legacy-классов (badge, btn,
     site-header, topbar, region-bar, sidebar, sw, ...), чтобы 40
     уже существующих страниц получили терминал-визуал без правок.
════════════════════════════════════════════════════ */

/* Шрифты подключаются в <head> из functions.php (handle 'dds-fonts') с
   preconnect и display=optional. Здесь был @import — он стоил мелькания:
   браузер узнавал о шрифтах только после загрузки И разбора этого файла,
   затем ждал ~740 мс ответа googleapis, рисовал страницу системными
   шрифтами и разом подменял все три семейства. Метрики Spectral/Manrope/
   JetBrains Mono не совпадают с системными — перевёрстывался весь текст.
   @import для внешних шрифтов НЕ возвращать. */

/* ── ТОКЕНЫ (theme-graphite, как выбрал пользователь) ── */
:root {
  /* Бумага и графит */
  --paper:        #ededea;
  --paper-2:      #e4e2dd;
  --card:         #ffffff;
  --card-2:       #f6f5f1;
  --line:         #d2cfc7;
  --line-2:       #e0ddd5;
  --line-3:       #ecebe5;

  /* Чернила */
  --ink:          #161613;
  --ink-2:        #2a2a25;
  --ink-3:        #55534b;
  --ink-4:        #87857c;
  --ink-5:        #b4b1a4;

  /* Акценты */
  --accent:       #c2410c;   /* терракот action */
  --accent-deep:  #8b3e1f;
  --accent-bg:    #faece0;
  --moss:         #34503a;
  --moss-bg:      #e2e5d8;
  --ochre:        #a48125;
  --rust:         #934a2c;
  --good:         #6f9054;
  --bad:          #b45c44;

  /* Тёмные оттенки для terminal-блоков */
  --dk-bg:        #161613;
  --dk-bg-2:      #4a453b;   /* второй ярус шапки — светлее --dk-bg */
  --dk-line:      #2e2d27;
  --dk-text:      #dbd5c2;
  --dk-text-dim:  #a8a596;
  --dk-text-faint:#777569;
  --dk-input:     #2a2925;
  --dk-border:    #3e3c36;

  /* Радиусы */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r:    6px;     /* legacy fallback */

  /* Шрифты — Spectral + Manrope + JetBrains Mono */
  --sans:  'Manrope', system-ui, -apple-system, sans-serif;
  /* Georgia ПЕРЕД Times New Roman — намеренно. При font-display: optional
     браузер может решить не применять веб-шрифт на этот визит вовсе, и тогда
     всё держится на запасном. Замер на 20px строке «Дом, который переедет
     с вами»: Spectral 283px, Georgia 284, Times New Roman 257. Georgia
     совпадает со Spectral по ширине почти точно — подмена не переставляет
     переносы и не меняет плотность полосы; Times у́же на десятую часть,
     и его видно сразу. */
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --mono:  'JetBrains Mono', 'Menlo', monospace;
  --ui:    var(--sans);   /* legacy alias */
  --hd:    var(--serif);  /* legacy alias */

  /* Тени */
  --sh:    0 1px 0 rgba(20,18,12,.04);
  --sh-md: 0 2px 8px rgba(20,18,12,.06);
  --sh-lg: 0 8px 24px rgba(20,18,12,.10);

  /* Гэпы */
  --gap: 24px;
  --gap-sm: 16px;

  /* Layout — фиксированный левый рейл */
  --rail-w: 220px;
  /* Высота шапки: t-header-inner (64) + t-regions (32, бордер внутри
     border-box) + border-bottom самой шапки (1) = 97.
     Строки намеренно разной высоты (2:1) — рост отделяет бренд-строку
     от полки регионов не только цветом, но и ритмом. */
  --header-h: 97px;

  /* Legacy-цвета — переопределены под графит */
  --forest:  var(--ink);
  --moss-l:  var(--moss);
  --fern:    var(--accent);
  --sage:    #9bc880;
  --lime:    #c8e0a0;
  --cream:   var(--paper);
  --birch:   var(--line);
  --sand:    var(--line-2);
  --ember:   var(--accent);
  --ember2:  var(--accent-deep);
  --amber:   var(--ochre);
  --navy:    #1a3a5a;
  --slate:   var(--ink-2);
  --stone:   var(--ink-4);
  --mist:    var(--ink-5);
  --white:   var(--card);
}

/* ── СБРОС / БАЗА ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scrollbar-gutter: stable — место под вертикальную полосу прокрутки
   резервируется ВСЕГДА, даже когда её нет.

   Грабли (июль 2026): при загрузке главной контент «расширялся и сужался».
   Причина не в обвязке: пока страница коротка (картинки не подгрузились,
   хвост ленты свёрнут), полосы прокрутки нет — контент занимает всю ширину;
   как только страница вырастает, полоса появляется и отнимает ~15px, из-за
   чего центральная колонка на глазах сужается. Замер это и показал:
   ширина окна 1280, ширина body 1265.

   Резерв убирает скачок в корне — без скриптов и на всех страницах сразу. */
html { scroll-behavior: smooth; overflow-x: hidden; scrollbar-gutter: stable; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01','cv11';
  /* Оба элемента обвязки — fixed, поэтому резервируем их место отступами:
     слева рейл, сверху шапка. */
  padding-left: var(--rail-w);
  padding-top: var(--header-h);
  overflow-x: hidden;
  /* 100%, а не 100vw: единица vw считает ширину ВМЕСТЕ с полосой прокрутки,
     поэтому body получался шире доступного места — лишние пиксели срезал
     overflow-x, но при появлении полосы это добавляло к скачку ширины. */
  max-width: 100%;
}
/* Те же отступы, но СЕЛЕКТОРОМ ПОСИЛЬНЕЕ — и это не дублирование, а защита.
   WordPress печатает из theme.json правило `body { padding: 0 }`
   (global-styles-inline-css), и его место в документе ПЛАВАЕТ: на одних
   страницах оно идёт до стилей темы, на других после — зависит от того,
   подгрузилась ли блочная библиотека. Специфичность у обоих одинаковая
   (0,0,1), поэтому при «после» побеждает WordPress, отступы обнуляются,
   и контент уезжает под фикс-рейл и фикс-шапку. Поймано на 404 от
   ?author=1: рейл занимает 0…220, а заголовок начинался с 64.
   `body[class]` даёт (0,1,1) и выигрывает при ЛЮБОМ порядке печати —
   у страницы WordPress всегда есть классы (body_class). Тот же приём уже
   применён к калькуляторам в style.css; здесь он закрывает вопрос разом
   для всех шаблонов, включая будущие. Не заменять обратно на `body`. */
body[class] {
  padding-left: var(--rail-w);
  padding-top: var(--header-h);
}
/* Подложек под шапку и рейл здесь БОЛЬШЕ НЕТ. Они закрашивали
   зарезервированные полосы, пока dds-chrome.js (подключённый в подвале) не
   построит обвязку. Смысл отпал: скрипт печатается сразу после <body>
   (header.php) и строит шапку с рейлом ДО разбора контента — закрашивать
   нечего, а лишние фиксированные слои только мешали разбираться, что на
   странице мелькает. Не возвращать: если обвязка снова опоздает, лечить
   надо порядок подключения, а не рисовать поверх. */

img, video, iframe { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; transition: color .15s; }
img { display: block; max-width: 100%; }
/* Обёртка <picture> (inc/webp-picture.php) не должна участвовать в раскладке.
   Без этого она встаёт флекс- или грид-элементом ВМЕСТО картинки, и все
   расчёты высот и object-fit начинают считаться от неё. `display: contents`
   убирает её собственный бокс: <img> остаётся ребёнком того же контейнера,
   что и раньше, и вёрстка не замечает подмены. */
picture { display: contents; }
button, input, textarea, select { font-family: inherit; color: inherit; }
button { cursor: pointer; border: none; background: transparent; }
h1, h2, h3, h4, h5 { font-weight: 500; letter-spacing: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: 0; }
::selection { background: var(--accent); color: #fff; }

/* ── LAYOUT ── */
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; }

/* ── УТИЛИТЫ ── */
.mono  { font-family: var(--mono); font-feature-settings: 'tnum'; }
.serif { font-family: var(--serif); }
.upper { text-transform: uppercase; letter-spacing: .12em; }
.num   { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}

/* ── BADGES — терминал: точка + mono uppercase ── */
.badge {
  display: inline-flex; align-items: center;
  font-family: var(--mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); background: transparent;
  padding: 2px 0; line-height: 1;
  border-radius: 0;
  flex-shrink: 0;
}
.badge::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px;
  margin-right: 8px;
  background: var(--ink-3);
  border-radius: 0;
}
.badge-news       { color: var(--ink-2); background: transparent; }
.badge-news::before       { background: var(--accent); }
.badge-tech       { color: var(--ink-2); background: transparent; }
.badge-tech::before       { background: #2d5f7a; }
.badge-law        { color: var(--ink-2); background: transparent; }
.badge-law::before        { background: #6e3b1c; }
.badge-analytics  { color: var(--ink-2); background: transparent; }
.badge-analytics::before  { background: #4f3b6e; }
.badge-region     { color: var(--ink-2); background: transparent; }
.badge-region::before     { background: var(--moss); }
.badge-case       { color: var(--ink-2); background: transparent; }
.badge-case::before       { background: var(--ochre); }
.badge-interview  { color: var(--ink-2); background: transparent; }
.badge-interview::before  { background: #4a1060; }
.badge-krugozor   { color: var(--ink-2); background: transparent; }
.badge-krugozor::before   { background: #2f6d5b; }   /* тёмно-зелёный «горизонт» — отличим от прочих */
.badge-pro        { color: var(--ink-2); background: transparent; }
.badge-pro::before        { background: #1a3a5a; }
.badge-faq        { color: var(--ink-2); background: transparent; }
.badge-faq::before        { background: #0a4848; }

/* ── META ── */
.meta {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: var(--ink-3); flex-wrap: wrap;
  font-family: var(--mono);
}

/* ── СЕКЦИОННЫЙ ЗАГОЛОВОК (sh) — терминал ── */
.sh {
  display: flex; align-items: flex-end; justify-content: space-between;
  border-top: 1px solid var(--ink); border-bottom: none;
  padding: 10px 0 0; margin: 32px 0 18px;
}
.sh h2 {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--ink);
}
.sh h2::before { content: ':: '; color: var(--accent); }
.sh a {
  font-family: var(--mono); font-size: 11px; color: var(--accent);
  border-bottom: none;
}
.sh a:hover { color: var(--accent-deep); }

/* ── КНОПКИ ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 16px;
  font-size: 13px; font-weight: 500;
  font-family: var(--sans);
  border-radius: var(--r-sm);
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--card);
  cursor: pointer; transition: opacity .15s;
}
.btn:hover { opacity: .85; }
.btn-forest, .btn.btn-forest { background: var(--ink); border-color: var(--ink); color: var(--card); }
.btn-fern,   .btn.btn-fern   { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-ember,  .btn.btn-ember  { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-ghost,  .btn.btn-ghost  { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover, .btn.btn-ghost:hover { background: var(--card-2); border-color: var(--ink-3); opacity: 1; }
.btn-outline,.btn.btn-outline{ background: transparent; color: var(--ink); border-color: var(--ink); }

/* ── ГРИДЫ ── */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.g4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.g5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }

/* ── PHOTO PLACEHOLDERS (диагональ + подпись) ── */
.fi { display: flex; align-items: center; justify-content: center; }
.fill-a, .fill-b, .fill-c, .fill-d, .fill-e, .fill-f, .fill-g, .fill-h, .fill-i, .fill-j {
  position: relative;
}
.fill-a, .fill-b, .fill-c, .fill-d, .fill-e, .fill-f, .fill-g, .fill-h, .fill-i, .fill-j {
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px,
      transparent 1px, transparent 11px),
    linear-gradient(160deg, hsl(28 22% 76%) 0%, hsl(28 18% 50%) 60%, hsl(28 26% 30%) 100%);
}
.fill-b { background-color: hsl(200 18% 50%); background-image:
  repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 11px),
  linear-gradient(160deg, hsl(200 22% 78%) 0%, hsl(200 18% 50%) 60%, hsl(200 28% 28%) 100%); }
.fill-c { background-image:
  repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 11px),
  linear-gradient(160deg, hsl(18 26% 76%) 0%, hsl(18 22% 50%) 60%, hsl(18 30% 28%) 100%); }
.fill-d { background-image:
  repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 11px),
  linear-gradient(160deg, hsl(220 20% 60%) 0%, hsl(220 22% 36%) 60%, hsl(218 28% 20%) 100%); }
.fill-e { background-image:
  repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 11px),
  linear-gradient(160deg, hsl(36 24% 78%) 0%, hsl(32 20% 52%) 60%, hsl(28 26% 30%) 100%); }
.fill-f { background-image:
  repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 11px),
  linear-gradient(160deg, hsl(190 16% 64%) 0%, hsl(190 14% 40%) 60%, hsl(195 22% 22%) 100%); }
.fill-g { background-image:
  repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 11px),
  linear-gradient(160deg, hsl(55 22% 72%) 0%, hsl(50 18% 46%) 60%, hsl(45 24% 26%) 100%); }
.fill-h { background-image:
  repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 11px),
  linear-gradient(160deg, hsl(280 18% 72%) 0%, hsl(280 14% 44%) 60%, hsl(275 22% 24%) 100%); }
.fill-i { background-image:
  repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 11px),
  linear-gradient(160deg, hsl(10 24% 72%) 0%, hsl(10 20% 46%) 60%, hsl(8 26% 26%) 100%); }
.fill-j { background-image:
  repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0, rgba(255,255,255,.06) 1px, transparent 1px, transparent 11px),
  linear-gradient(160deg, hsl(155 18% 64%) 0%, hsl(155 16% 36%) 60%, hsl(160 24% 18%) 100%); }

/* ══════════════════════════════════════════════════════
   A. TOPBAR — теперь часть тёмного terminal-header
   (фактическая разметка генерируется partials.js)
══════════════════════════════════════════════════════ */
.topbar { display: none !important; }   /* legacy topbar выключаем — заменён */

/* ══════════════════════════════════════════════════════
   B. TERMINAL HEADER — генерируется partials.js
══════════════════════════════════════════════════════ */
.t-header {
  background: var(--dk-bg); color: var(--dk-text);
  border-bottom: 1px solid var(--dk-line);
  /* Именно fixed, а НЕ sticky. На html/body стоит overflow-x: hidden —
     он делает их скролл-контейнером и молча отключает sticky у потомков,
     из-за чего шапка уезжала вверх. fixed от overflow не зависит.
     Бонусом left/right:0 дают полную ширину поверх рейла сами — трюк с
     отрицательным полем и раздутой width больше не нужен. */
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 200;
  box-sizing: border-box;
}
.t-header-inner {
  display: flex; align-items: center;
  height: 64px; padding: 0 24px; gap: 20px;
}

/* Hamburger — только для мобильного drawer. На десктопе рейл виден всегда
   (свёрнутый — полосой значков), и управляет им кнопка на самом рейле. */
.t-hamburger {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 32px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--dk-border);
  color: var(--dk-text); border-radius: 2px; cursor: pointer;
  padding: 0;
}
.t-hamburger:hover { background: rgba(255,255,255,.06); }
.t-hamburger span {
  display: block; width: 14px; height: 1.5px; background: currentColor;
  position: relative;
}
.t-hamburger span::before,
.t-hamburger span::after {
  content: ''; position: absolute; left: 0; width: 14px; height: 1.5px;
  background: currentColor; transition: transform .2s;
}
.t-hamburger span::before { top: -5px; }
.t-hamburger span::after  { top: 5px;  }
body.rail-open .t-hamburger span { background: transparent; }
body.rail-open .t-hamburger span::before { transform: translateY(5px) rotate(45deg); }
body.rail-open .t-hamburger span::after  { transform: translateY(-5px) rotate(-45deg); }
.t-logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.t-logo-mark {
  width: 30px; height: 30px; background: var(--accent);
  display: flex; align-items: center; justify-content: center; border-radius: 2px;
  flex-shrink: 0;
}
.t-logo-mark svg { width: 17px; height: 17px; color: #fff; }
.t-logo-texts { display: flex; flex-direction: column; line-height: 1.18; min-width: 0; }
.t-logo-name {
  font-family: var(--mono); font-size: 13.5px; font-weight: 500;
  color: var(--card); letter-spacing: .01em;
}
/* Одна строка — ТОЛЬКО в шапке: там ширины хватает, и бренд важнее поиска.
   Эти же классы переиспользуют рейл и футер, где ширина 220px и название
   обязано переноситься — поэтому правило строго ограничено шапкой. */
.t-header .t-logo-name { white-space: nowrap; }
/* Второе название в шапке: faint на графите при 9px не читалось (замер
   20.10.2026 на живой шапке) — тон dim и 10px. */
.t-header .t-logo-sub { color: var(--dk-text-dim); font-size: 10px; margin-top: 2px; }
.t-logo-sub {
  font-family: var(--mono); font-size: 9px; color: var(--dk-text-faint);
  margin-top: 3px; letter-spacing: .1em;
}

/* Поиск — не растягивается на всю свободную ширину: фиксированный
   комфортный размер, центрируется между логотипом и действиями
   (margin:auto делит свободное место поровну). */
.t-search {
  display: flex; align-items: center;
  flex: 0 1 380px; max-width: 380px; min-width: 160px;
  height: 32px; gap: 10px; margin: 0 auto;
  background: var(--dk-input); border: 1px solid var(--dk-border);
  border-radius: 2px; padding-left: 12px; cursor: pointer;
  transition: border-color .14s;
}
.t-search:hover { border-color: var(--dk-text-faint); }
.t-search svg { width: 14px; height: 14px; color: var(--dk-text-dim); flex-shrink: 0; }
.t-search-label { font-size: 13px; color: var(--dk-text-dim); flex: 1; }
.t-search-kbd {
  font-family: var(--mono); font-size: 10px;
  padding: 2px 6px; background: rgba(255,255,255,.06); color: var(--dk-text-dim);
  border: 1px solid var(--dk-border); border-radius: 2px; margin-right: 8px;
}

.t-header-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.t-date {
  font-family: var(--mono); font-size: 11px; color: var(--dk-text-faint);
}
.t-divider { width: 1px; height: 18px; background: var(--dk-border); }
.t-cta {
  height: 28px; padding: 0 12px; background: var(--accent);
  border: none; color: #fff; font-size: 11px; font-weight: 500;
  font-family: var(--sans); cursor: pointer; border-radius: 2px;
}
.t-cta:hover { background: var(--accent-deep); }

/* Значки каналов в шапке (dds-chrome.js). Пришли на место кнопки
   «Подписка»: форму подписки с главной убрали, а кнопка вела к ней.
   Рисунок штриховой, как поиск и рейл рядом, — фирменные логотипы
   мессенджеров в тёмную шапку не тащим. */
.t-msgr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 4px;
  border: 1px solid var(--dk-border); color: var(--dk-text-dim);
  transition: border-color .15s, color .15s, background .15s;
}
/* Оптический размер, а не геометрический: «пузырь» MAX кажется крупнее
   самолётика при одинаковой рамке, поэтому у Telegram значок чуть больше. */
.t-msgr svg { width: 16px; height: 16px; display: block; }
.t-msgr-tg svg { width: 18px; height: 18px; }
.t-msgr:hover { color: #fff; border-color: var(--accent); background: var(--accent); }
.t-msgr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.t-header-actions .t-msgr + .t-msgr { margin-left: -4px; }

/* — Полоса выбора региона под шапкой —
   Все 10 регионов + «Все» распределяются по всей ширине экрана.
   Каждый чип адаптивно меняет ширину под размер viewport,
   названия видны полностью. */
.t-regions {
  display: flex; align-items: stretch;
  min-height: 32px; padding: 0;
  /* Отделяем от шапки двумя приёмами сразу: полка СВЕТЛЕЕ шапки (фон
     --dk-bg уже почти чёрный, запас по яркости есть только вверх, вниз
     затемнение не читается) + акцентная линия шва. */
  background: var(--dk-bg-2);
  border-top: 2px solid var(--accent);
  font-family: var(--sans); font-size: 11px; color: var(--dk-text-dim);
}
.t-regions .t-r-label {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
  flex-shrink: 0;
}
.t-r-scroll {
  display: flex; align-items: stretch;
  gap: 0;
  flex: 1; min-width: 0;
}
.t-region-chip {
  /* Региональный чип — растягивается равномерно внутри .t-r-scroll. */
  flex: 1 1 auto; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 8px;
  border: none; border-left: 1px solid var(--dk-line);
  background: transparent; color: var(--dk-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--sans); font-size: 11.5px; font-weight: 400;
  letter-spacing: -.005em;
  transition: background .12s, color .12s;
  cursor: pointer; text-align: center;
}
.t-region-chip:first-child { border-left: none; }

/* «Все» — НЕ растягивается, остаётся компактной кнопкой по контенту.
   Стоит вне .t-r-scroll как прямой ребёнок .t-regions. */
.t-region-chip.t-r-all {
  flex: 0 0 auto;
  padding: 6px 14px;
  gap: 7px;
  border-right: 1px solid var(--dk-line);
}
.t-region-chip:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}
.t-region-chip.is-active {
  background: var(--accent); color: #fff;
  border-left-color: var(--accent);
}
/* Прячем левую границу у чипа, идущего сразу после активного,
   чтобы акцентный фон не упирался в полупрозрачную линию */
.t-region-chip.is-active + .t-region-chip { border-left-color: transparent; }

/* На узких экранах (планшеты в портрете и телефоны) перестаём растягивать
   чипы — включаем горизонтальный скролл с полными названиями, чтобы они
   не обрезались многоточием. */
@media (max-width: 760px) {
  .t-r-scroll {
    overflow-x: auto; scrollbar-width: none;
    /* Скролл регионов: чёткий пошаговый переход к каждому чипу */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .t-r-scroll::-webkit-scrollbar { display: none; }
  .t-region-chip { flex: 0 0 auto; padding: 6px 12px; scroll-snap-align: start; scroll-snap-stop: always; }
}
.t-region-chip .t-r-name { color: inherit; font-weight: 400; }
.t-region-chip.is-active .t-r-name { font-weight: 500; }
/* Legacy-классы оставляем для совместимости (могут вернуться к коду/счётчику) */
.t-region-chip .t-r-code { font-weight: 500; color: var(--accent); letter-spacing: .04em; }
.t-region-chip.is-active .t-r-code { color: rgba(255,255,255,.8); }
.t-region-chip .t-r-n {
  font-variant-numeric: tabular-nums; font-size: 9.5px;
  padding: 1px 4px; border-radius: 2px;
  background: rgba(255,255,255,.06); color: var(--dk-text-faint);
}
.t-region-chip:hover .t-r-n { background: rgba(255,255,255,.1); color: var(--dk-text); }
.t-region-chip.is-active .t-r-n {
  background: rgba(0,0,0,.18); color: rgba(255,255,255,.85);
}
/* «Все регионы» — особый чип */
.t-r-all { padding-left: 4px; }
.t-r-all .t-r-dot {
  width: 8px; height: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 50%, var(--dk-text-faint) 50%, var(--dk-text-faint) 100%);
  border-radius: 50%;
}
.t-r-all:hover .t-r-dot { background: linear-gradient(135deg, #fff 0%, #fff 50%, var(--accent) 50%, var(--accent) 100%); }
.t-r-all.is-active .t-r-dot { background: #fff; }
/* Ссылка «карта →» в правом конце */
.t-r-map {
  flex-shrink: 0;
  font-family: var(--mono); font-size: 11px; color: var(--accent);
  padding-left: 10px; border-left: 1px solid var(--dk-line);
  letter-spacing: .04em;
}
.t-r-map:hover { color: #fff; }

/* ══════════════════════════════════════════════════════
   ЛЕВЫЙ РЕЙЛ — фиксированный 220px (генерируется partials.js)
══════════════════════════════════════════════════════ */
.t-rail {
  /* Начинается ПОД шапкой, а не под ней: шапка fixed и всегда занимает
     верхние --header-h пикселей вьюпорта. Раньше рейл стоял top:0 и прятался
     под шапку, а содержимое отжимала распорка в высоту шапки — распорка
     больше не нужна. */
  position: fixed; top: var(--header-h); left: 0; bottom: 0; width: var(--rail-w);
  background: var(--card-2);
  border-right: 1px solid var(--line);
  padding: 14px 0 20px; overflow-y: auto;
  z-index: 150;
}

/* Распорка .t-rail-brand и дубль логотипа .t-rail-brand-logo удалены:
   рейл стартует под шапкой, а логотип sticky-шапки виден всегда. */

/* ── Сворачивание рейла (только десктоп; на ≤1100 рейл и так drawer) ──
   Прячем целиком, а не превращаем в мини-полосу иконок: пункты различаются
   только подписью, точки у всех одинаковые — свёрнутый столбик точек
   нечитаем. Контент занимает освободившуюся ширину. */
@media (min-width: 1101px) {
  .t-rail { transition: width .22s cubic-bezier(.2,.7,.2,1); }
  body    { transition: padding-left .22s cubic-bezier(.2,.7,.2,1); }

  /* Свёрнутый рейл не уезжает с экрана, а сужается до полосы значков:
     меню видно всегда. Переопределяем саму --rail-w — ширина рейла и
     отступ контента считаются из неё и подтягиваются сами. */
  body.rail-collapsed { --rail-w: 56px; }

  body.rail-collapsed .t-rail-label,
  body.rail-collapsed .t-rail-count,
  body.rail-collapsed .t-rail-grouphead-label,
  body.rail-collapsed .t-rail-grouphead-rule { display: none; }

  /* Значки остаются как в списке: меню раскрыто по умолчанию, поэтому
     свёрнутая полоса — осознанный выбор того, кто разделы уже знает.
     Заманивать его крупными значками незачем, расшифровка — в подсказке. */
  body.rail-collapsed .t-rail-link { justify-content: center; padding: 8px 0; }
  body.rail-collapsed .t-rail { padding-top: 10px; padding-bottom: 12px; }
  body.rail-collapsed .t-rail-link:hover .t-rail-ic { color: var(--accent); }
  body.rail-collapsed .t-rail-grouphead { justify-content: center; padding-left: 0; padding-right: 0; }
  /* Пустая шапка второй группы превращается в разделитель */
  body.rail-collapsed .t-rail-group + .t-rail-group { border-top: 1px solid var(--line-2); padding-top: 10px; }
  /* Стрелка разворачивается: «‹‹» → «››» */
  body.rail-collapsed .t-rail-collapse svg { transform: rotate(180deg); }
}

/* Кнопка «свернуть» в шапке первой группы рейла: стоит на месте линии,
   поэтому не занимает ни пикселя лишней высоты. */
.t-rail-collapse {
  flex-shrink: 0; align-self: center;   /* grouphead выравнивает по baseline */
  width: 22px; height: 22px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line-2);
  border-radius: 3px; color: var(--ink-4); cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.t-rail-collapse svg { width: 13px; height: 13px; }
.t-rail-collapse:hover { color: var(--accent); border-color: var(--accent); background: var(--card); }
.t-rail-collapse:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* На мобиле рейл — drawer: его закрывают backdrop, Escape и гамбургер */
@media (max-width: 1100px) { .t-rail-collapse { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .t-rail, body { transition: none; }
}
.t-rail::-webkit-scrollbar { width: 6px; }
.t-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

.t-rail-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px 14px; border-bottom: 1px solid var(--line-2); margin-bottom: 14px;
}
.t-rail-logo .t-logo-mark { width: 24px; height: 24px; }
.t-rail-logo .t-logo-mark svg { width: 14px; height: 14px; }
.t-rail-logo .t-logo-name { color: var(--ink); font-size: 12px; }
.t-rail-logo .t-logo-sub { color: var(--ink-4); font-size: 8.5px; margin-top: 2px; }

.t-rail-group { margin-bottom: 14px; }
.t-rail-grouphead {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 18px;
}
.t-rail-grouphead-label {
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-4); font-weight: 500;
}
.t-rail-grouphead-rule { flex: 1; height: 1px; background: var(--line-2); }

.t-rail-link {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 18px;
  border-left: 2px solid transparent;
  font-size: 12.5px; color: var(--ink-2);
}
.t-rail-link:hover { background: var(--card); color: var(--ink); }
.t-rail-link.is-active {
  background: var(--card);
  border-left-color: var(--accent);
  padding-left: 16px;
  font-weight: 500;
  color: var(--ink);
}
.t-rail-link.is-active .t-rail-ic { color: var(--accent); }
.t-rail-link.is-accent .t-rail-ic { color: var(--accent); }
.t-rail-ic {
  font-family: var(--mono); font-size: 11px;
  width: 22px; color: var(--ink-4); font-weight: 500; flex-shrink: 0;
}
.t-rail-label { flex: 1; }
.t-rail-count {
  font-family: var(--mono); font-size: 10px; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════════════════════
   ТЁМНЫЙ ФУТЕР (генерируется partials.js)
══════════════════════════════════════════════════════ */
.t-footer {
  background: var(--dk-bg); color: var(--dk-text);
  padding: 36px 0 18px; margin-top: 0;
  border-top: 1px solid var(--dk-line);
  /* Живёт в колонке контента, правее рейла. Раньше растягивался на всю
     ширину viewport и z-index'ом перекрывал fixed-рейл — при прокрутке
     вниз подвал наезжал на боковое меню. Рейл всегда виден до низа. */
  box-sizing: border-box;
}
.t-footer-inner { padding: 0 28px; max-width: 1500px; margin: 0 auto; }
.t-footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 32px; padding-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.t-footer .t-logo-name { color: #fff; }
.t-footer .t-logo-sub { color: var(--dk-text-faint); }
.t-footer-about {
  font-family: var(--mono); font-size: 12px;
  color: var(--dk-text-dim); line-height: 1.6;
}
/* ВЫХОДНЫЕ ДАННЫЕ в подвале (ст. 27 Закона о СМИ, заполнены 19.08.2026).
   Первая строка — реестровое название и знак информационной продукции,
   ниже абзацем — свидетельство, учредитель, главный редактор и контакты
   редакции. Разметка в dds-chrome.js.
   Набор мелкий, но НЕ мельче 10px и с читаемым контрастом: выходные данные
   обязаны быть доступны читателю, а не спрятаны. */
.t-footer-issuer {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 10px; color: var(--dk-text-faint);
  letter-spacing: .04em;
}
/* Знак информационной продукции 16+ — рамкой, чтобы читался как маркировка,
   а не как часть названия. */
.t-footer-issuer .t-age {
  border: 1px solid var(--dk-text-faint); border-radius: 3px;
  padding: 1px 5px; line-height: 1.4; white-space: nowrap;
}
.t-imprint {
  margin: 8px 0 0; max-width: 46ch;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.65;
  color: var(--dk-text-dim);
}
.t-imprint a { color: var(--dk-text-dim); text-decoration: underline; }
.t-imprint a:hover { color: #fff; }

@media (max-width: 900px) {
  /* На телефоне подвал складывается аккордеоном, но выходные данные
     остаются видимыми: прятать их под раскрывашку нельзя. */
  .t-imprint { max-width: none; }
}
/* ЗАГОЛОВОК КОЛОНКИ — ЛЮБОГО УРОВНЯ. Разметку строит dds-chrome.js, и
   уровень там уже менялся (h2 → h4, сент. 2026). Пока стили ловили только
   h2, а скрипт печатал h4, заголовки теряли оформление и оставались
   ЧЁРНЫМ СЕРИФОМ НА ЧЁРНОМ подвале — видны были одни «плюсы» (22.09.2026,
   нашлось после того, как поднятая версия темы заставила браузеры
   перечитать CSS). Перечисляем уровни явно, чтобы следующая смена
   разметки не ломала подвал молча. */
.t-footer-col h2,
.t-footer-col h3,
.t-footer-col h4 {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--dk-text-faint); margin: 0 0 8px;
}
.t-footer-col h2::before,
.t-footer-col h3::before,
.t-footer-col h4::before { content: ':: '; color: var(--accent); }
.t-footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 6px; padding: 0; }
.t-footer-col ul a { font-size: 12.5px; color: var(--dk-text-dim); }
.t-footer-col ul a:hover { color: var(--accent); }
.t-footer-btm {
  display: flex; align-items: center; gap: 16px;
  padding-top: 14px; font-family: var(--mono); font-size: 11px;
  color: var(--dk-text-faint);
}
.t-footer-btm-links { display: flex; gap: 18px; margin-left: auto; }
.t-footer-btm-links a { color: var(--dk-text-faint); }
.t-footer-btm-links a:hover { color: var(--accent); }

/* ══════════════════════════════════════════════════════
   LEGACY-СОВМЕСТИМОСТЬ: переопределяем старые компоненты,
   чтобы 40 страниц с topbar/site-header/region-bar/sidebar
   получили терминальный вид без правки HTML.
══════════════════════════════════════════════════════ */

/* Старая шапка/topbar/tech-nav-bar/region-bar — скрываем (заменено) */
.site-header,
.tech-nav-bar,
.region-bar,
.audience-bar,
.site-footer,
.nav-drawer-overlay,
.nav-tab-handle,
.nav-tab-btn {
  display: none !important;
}

/* — old hero (на главной обнуляем — она будет переписана) — */

/* — Карточки статей (article cards) — терминал — */
.art-card {
  display: grid; grid-template-columns: 156px 1fr;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.art-card + .art-card { margin-top: 12px; }
.art-card:hover { border-color: var(--ink-3); box-shadow: var(--sh-md); }
.ac-img { overflow: hidden; height: 130px; position: relative; }
.ac-in  { width: 100%; height: 100%; transition: transform .35s; }
.art-card:hover .ac-in { transform: scale(1.04); }
.ac-body { padding: 13px 16px; display: flex; flex-direction: column; gap: 7px; }
.ac-body h3 {
  font-family: var(--serif); font-size: 17px; line-height: 1.3;
  font-weight: 500; color: var(--ink);
}
.ac-body h3 a:hover { color: var(--accent); }
.ac-body p { font-size: 12px; color: var(--ink-2); line-height: 1.55; flex: 1; }
.ac-foot {
  margin-top: auto; border-top: 1px solid var(--line-2); padding-top: 8px;
  display: flex; align-items: center; gap: 8px;
}
.ac-foot .meta { font-size: 10px; font-family: var(--mono); flex: 1; }
.ac-foot .read {
  font-size: 10px; font-family: var(--mono); font-weight: 500;
  color: var(--accent); flex-shrink: 0;
}
.ac-foot .read::after { content: ' →'; }

/* — Small card — */
.sm-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.sm-card:hover { border-color: var(--ink-3); box-shadow: var(--sh-md); }
.sm-card:hover .sc-in { transform: scale(1.05); }
.sc-img  { height: 130px; overflow: hidden; position: relative; }
.sc-in   { width: 100%; height: 100%; transition: transform .35s; }
.sc-body { padding: 13px; display: flex; flex-direction: column; gap: 6px; }
.sc-body h3 {
  font-family: var(--serif); font-size: 15px; line-height: 1.35;
  font-weight: 500; color: var(--ink);
}
.sc-body h3 a:hover { color: var(--accent); }
.sc-body p { font-size: 11px; color: var(--ink-2); line-height: 1.55; }
.sc-body .meta { font-size: 10px; }

/* — Tech card (старая plain-сетка технологий) — */
.tech-grid6 { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; margin-bottom: 24px; }
.tech-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px 10px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 7px;
  transition: border-color .15s, transform .15s;
}
.tech-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.tc-ico {
  width: 36px; height: 36px; border-radius: 4px;
  background: var(--card-2); border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
}
.tc-ico svg { width: 18px; height: 18px; color: var(--ink-2); }
.tc-name  { font-size: 12px; font-weight: 500; color: var(--ink); font-family: var(--serif); }
.tc-count { font-size: 10px; color: var(--ink-4); font-family: var(--mono); }
.tc-arrow { font-size: 11px; color: var(--accent); font-family: var(--mono); }

/* — Region card — */
.region-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 24px; }
.region-entry {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.region-entry:hover { border-color: var(--ink-3); box-shadow: var(--sh-md); }
.region-entry:hover .re-in { transform: scale(1.05); }
.re-img { height: 96px; overflow: hidden; position: relative; }
.re-in { width: 100%; height: 100%; transition: transform .35s; }
.re-body { padding: 11px 13px; }
.re-name {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .12em; color: var(--accent);
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px;
}
.re-cnt {
  background: var(--card-2); color: var(--ink-4);
  font-size: 9px; padding: 1px 6px; border-radius: 2px;
  font-family: var(--mono);
}
.re-body h4 {
  font-family: var(--serif); font-size: 13px; line-height: 1.35;
  font-weight: 500; color: var(--ink); margin-bottom: 4px;
}
.re-body h4 a:hover { color: var(--accent); }
.re-body .meta { font-size: 10px; }
.region-more {
  background: var(--card-2); border: 1px dashed var(--line);
  border-radius: var(--r-md); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; min-height: 168px;
}
.region-more svg { width: 28px; height: 28px; color: var(--ink-4); }
.region-more span { font-size: 12px; font-weight: 500; color: var(--ink-3); font-family: var(--mono); }
.region-more small { font-size: 10px; color: var(--ink-4); }

/* — Aud entries — */
.aud-entry-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.aud-entry {
  border-radius: var(--r-md); padding: 22px;
  border: 1px solid var(--line); background: var(--card);
}
.aud-entry:hover { border-color: var(--ink-3); }
.aud-priv {}
.aud-pro  {}
.ae-eyebrow {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--accent);
  margin-bottom: 8px;
}
.aud-pro .ae-eyebrow { color: #1a3a5a; }
.ae-title {
  font-family: var(--serif); font-size: 22px; font-weight: 500;
  color: var(--ink); margin-bottom: 14px; letter-spacing: 0;
}
.ae-links { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; }
.ae-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line-2);
  font-size: 12.5px; color: var(--ink);
}
.ae-link:last-child { border-bottom: none; }
.ae-link:hover { color: var(--accent); }
.ae-ico {
  width: 24px; height: 24px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--card-2); border: 1px solid var(--line-2);
  font-family: var(--mono); font-size: 10px; color: var(--accent);
}
.ae-ico svg { width: 12px; height: 12px; color: var(--accent); }
.aud-pro .ae-ico svg { color: #1a3a5a; }
.ae-text { flex: 1; }
.ae-text small { display: block; font-size: 10px; color: var(--ink-4); margin-top: 1px; font-family: var(--mono); }
.ae-arr { font-size: 12px; color: var(--ink-4); font-family: var(--mono); }

/* — Law cards — */
.law-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.law-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px; display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s;
}
.law-card:hover { border-color: var(--accent); }
.law-card .lc-type {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--accent);
}
.law-card h4 {
  font-family: var(--serif); font-size: 15px; line-height: 1.35;
  font-weight: 500; color: var(--ink);
}
.law-card h4 a:hover { color: var(--accent); }
.law-card p { font-size: 12px; color: var(--ink-2); line-height: 1.55; flex: 1; }
.law-card .meta { font-size: 10px; border-top: 1px solid var(--line-2); padding-top: 8px; margin-top: auto; }
.law-cta {
  background: var(--dk-bg); color: var(--card);
  border-radius: var(--r-md); padding: 20px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 24px;
}
.law-cta h3 { font-family: var(--serif); font-size: 18px; color: var(--card); font-weight: 500; margin-bottom: 4px; }
.law-cta p { font-size: 12px; color: var(--dk-text-dim); font-family: var(--mono); }

/* — Company cards — */
.co-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 16px; }
.co-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s;
}
.co-card:hover { border-color: var(--ink-3); }
.co-logo {
  width: 40px; height: 40px; border-radius: 4px;
  background: var(--card-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 14px; font-weight: 500;
}
.co-logo svg { width: 20px; height: 20px; color: var(--ink-3); }
.co-name { font-size: 14px; font-weight: 500; color: var(--ink); font-family: var(--serif); }
.co-region { font-size: 11px; color: var(--ink-4); font-family: var(--mono); }
.co-tag {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  background: var(--card-2); border: 1px solid var(--line);
  padding: 2px 8px; border-radius: 2px;
}
.co-add {
  border: 1px dashed var(--line); background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 130px; border-radius: var(--r-md);
}
.co-add:hover { border-color: var(--accent); }
.co-add svg { width: 22px; height: 22px; color: var(--ink-4); }
.co-add span { font-size: 12px; font-weight: 500; color: var(--ink-3); font-family: var(--mono); }
.co-add small { font-size: 10px; color: var(--ink-4); text-align: center; }

/* — FAQ — */
.faq-list {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; margin-bottom: 24px;
}
.faq-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--line-2);
  transition: background .15s;
}
.faq-item:last-child { border-bottom: none; }
.faq-item:hover { background: var(--card-2); }
.fq-n {
  width: 26px; height: 22px; flex-shrink: 0;
  font-family: var(--mono); font-size: 10px; color: var(--ink-4);
  text-align: left; padding-top: 2px;
}
.fq-n::before { content: 'В.'; }
.faq-item h4 { font-size: 13px; color: var(--ink); line-height: 1.45; font-weight: 400; flex: 1; }
.faq-item h4 a:hover { color: var(--accent); }
.faq-item .fq-arr { font-size: 12px; color: var(--ink-4); flex-shrink: 0; margin-top: 3px; font-family: var(--mono); }

/* — Missed cards — */
.missed-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.missed-card:hover { border-color: var(--ink-3); box-shadow: var(--sh-md); }
.missed-card:hover .mc-in { transform: scale(1.05); }
.mc-img { height: 140px; overflow: hidden; position: relative; }
.mc-in  { width: 100%; height: 100%; transition: transform .35s; }
.mc-body { padding: 12px 14px; }
.mc-body h3 {
  font-family: var(--serif); font-size: 14px; line-height: 1.4;
  font-weight: 500; color: var(--ink); margin: 7px 0 5px;
}
.mc-body h3 a:hover { color: var(--accent); }
.mc-body p { font-size: 11px; color: var(--ink-2); line-height: 1.55; }
.mc-body .meta { margin-top: 8px; border-top: 1px solid var(--line-2); padding-top: 7px; font-size: 10px; }

/* — CTA strip — */
.cta-strip {
  background: var(--dk-bg); color: var(--card);
  border-radius: var(--r-md); padding: 24px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-bottom: 24px; border: 1px solid var(--dk-line);
}
.cs-text h3 { font-family: var(--serif); font-size: 20px; color: var(--card); font-weight: 500; margin-bottom: 4px; }
.cs-text p { font-size: 12px; color: var(--dk-text-dim); font-family: var(--mono); }
.cs-btns { display: flex; gap: 10px; flex-shrink: 0; }

/* — SIDEBAR (legacy) — */
.sidebar { display: flex; flex-direction: column; gap: 22px; }
.sw {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
}
.sw-head {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink); background: var(--card-2);
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line-2);
}
.sw-head::before { content: ':: '; color: var(--accent); }
.sw-head a {
  color: var(--accent); font-weight: 500; font-size: 10px;
  text-transform: none; letter-spacing: 0;
}
.sw-head a::before { content: ''; }
.sw-body { padding: 14px; }

.sp { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.sp:last-child { border-bottom: none; padding-bottom: 0; }
.sp-img { width: 60px; height: 45px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--line-2); }
.sp-in { width: 100%; height: 100%; transition: transform .3s; }
.sp:hover .sp-in { transform: scale(1.08); }
.sp-bd h4 {
  font-family: var(--serif); font-size: 12.5px; line-height: 1.35;
  font-weight: 500; color: var(--ink); margin: 3px 0;
}
.sp-bd h4 a:hover { color: var(--accent); }
.sp-bd .meta { font-size: 10px; }

.sreg {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; border-bottom: 1px solid var(--line-2);
}
.sreg:last-child { border-bottom: none; }
.sreg a { font-size: 12.5px; color: var(--ink); }
.sreg a:hover { color: var(--accent); }
.sreg span {
  font-family: var(--mono); font-size: 10px; color: var(--ink-4);
  background: var(--card-2); padding: 2px 7px; border-radius: 2px;
}

.sub-w {
  background: var(--dk-bg); color: var(--card);
  border-radius: var(--r-md); padding: 18px;
}
.sub-w h3 { font-family: var(--serif); font-size: 16px; color: var(--card); font-weight: 500; margin-bottom: 4px; }
.sub-w p { font-size: 12px; color: var(--dk-text-dim); margin-bottom: 12px; line-height: 1.5; font-family: var(--mono); }
.sub-w input {
  width: 100%; background: rgba(255,255,255,.06); border: 1px solid var(--dk-border);
  color: var(--card); padding: 10px 11px; font-size: 12px; font-family: var(--sans);
  border-radius: 2px; margin-bottom: 8px; outline: none;
}
.sub-w input::placeholder { color: var(--dk-text-faint); }
.sub-w input:focus { border-color: var(--accent); }
.sub-w button {
  width: 100%; background: var(--accent); color: #fff; padding: 10px;
  font-size: 12px; font-weight: 500; border-radius: 2px;
  font-family: var(--sans); border: none; cursor: pointer;
}
.sub-w button:hover { background: var(--accent-deep); }

.tags-cloud { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-chip {
  display: inline-flex; align-items: center;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  padding: 3px 8px; border-radius: 2px;
  border: 1px solid var(--line); color: var(--ink-2);
  background: var(--card-2); letter-spacing: .04em;
}
.tag-chip:hover { border-color: var(--accent); color: var(--accent); }

.ad-slot {
  background: var(--card-2); border: 1px dashed var(--line);
  border-radius: var(--r-md); height: 110px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ad-slot .asl { font-family: var(--mono); font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-4); }
.ad-slot .ass { font-family: var(--mono); font-size: 10px; color: var(--ink-5); }

.propose-w { display: flex; flex-direction: column; gap: 8px; }
.propose-w p { font-size: 12px; color: var(--ink-3); line-height: 1.5; font-family: var(--mono); }
.propose-w input {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--sans); font-size: 12px; outline: none;
  background: var(--card-2);
}
.propose-w input:focus { border-color: var(--accent); }
.propose-w button {
  background: var(--accent); color: #fff; padding: 9px;
  border-radius: 2px; font-size: 12px; font-weight: 500; font-family: var(--sans);
}
.propose-w button:hover { background: var(--accent-deep); }

/* — Stat band (KPI на главной) — */
.stat-band {
  background: var(--dk-bg); color: var(--card);
  border-radius: var(--r-md); padding: 22px 28px;
  display: grid; grid-template-columns: repeat(4,1fr);
  margin-bottom: 24px; border: 1px solid var(--dk-line);
}
.sb-it { padding: 0 20px; border-right: 1px solid rgba(255,255,255,.08); }
.sb-it:first-child { padding-left: 0; }
.sb-it:last-child  { border-right: none; }
.sb-num { font-family: var(--serif); font-size: 30px; font-weight: 500; color: #fff; line-height: 1; margin-bottom: 4px; letter-spacing: -.02em; }
.sb-lbl { font-family: var(--mono); font-size: 11px; color: var(--dk-text-dim); line-height: 1.4; margin-bottom: 5px; }
.sb-tr  { font-family: var(--mono); font-size: 11px; font-weight: 500; }
.sb-tr.up { color: var(--good); }
.sb-tr.dn, .sb-tr.down { color: var(--bad); }

/* — Spec / topic cards (главная) — */
.spec-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 24px; }
.spec-card {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  min-height: 170px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px; color: var(--card);
  transition: transform .15s, border-color .15s;
  border: 1px solid var(--dk-line);
}
.spec-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.spec-card.sp1 { background: linear-gradient(160deg, hsl(30 22% 36%), hsl(28 28% 22%)); }
.spec-card.sp2 { background: linear-gradient(160deg, hsl(80 18% 36%), hsl(80 24% 22%)); }
.spec-card.sp3 { background: linear-gradient(160deg, hsl(140 14% 36%), hsl(150 22% 22%)); }
.spec-card::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0, rgba(255,255,255,.04) 1px, transparent 1px, transparent 11px);
  pointer-events: none;
}
.spec-card > * { position: relative; z-index: 1; }
.spec-card .sp-eyebrow {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.75);
  margin-bottom: 6px;
}
.spec-card h3 { font-family: var(--serif); font-size: 18px; line-height: 1.3; font-weight: 500; margin-bottom: 6px; color: #fff; }
.spec-card p  { font-size: 12px; color: rgba(255,255,255,.7); line-height: 1.5; margin-bottom: 10px; font-family: var(--mono); }
.spec-card .sp-cta { font-family: var(--mono); font-size: 11px; font-weight: 500; color: var(--accent); }
.spec-card .sp-cta::after { content: ' →'; }

/* — Experts (главная) — */
.experts-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 24px; }
.expert-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  transition: border-color .15s;
}
.expert-card:hover { border-color: var(--accent); }
.exp-avatar {
  width: 50px; height: 50px; border-radius: 2px;
  background: linear-gradient(155deg, hsl(28 18% 78%), hsl(28 16% 50%));
  color: rgba(255,255,255,.85); display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 18px; font-weight: 500; flex-shrink: 0;
  position: relative; overflow: hidden;
}
.exp-avatar::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0, rgba(255,255,255,.08) 1px, transparent 1px, transparent 9px);
}
.exp-body .exp-name { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.3; font-family: var(--serif); font-size: 14px; }
.exp-body .exp-role { font-size: 11px; color: var(--ink-3); line-height: 1.4; margin-top: 2px; font-family: var(--mono); }
.exp-body .exp-tag {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  margin-top: 4px; display: inline-block;
}

/* — Price grid — */
.price-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 14px; }
.price-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px;
  transition: border-color .15s;
}
.price-card:hover { border-color: var(--accent); }
.price-card .pc-label {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; color: var(--ink-4); margin-bottom: 6px;
}
.price-card .pc-value {
  font-family: var(--serif); font-size: 22px; font-weight: 500;
  color: var(--ink); line-height: 1.1; margin-bottom: 4px; letter-spacing: -0.02em;
}
.price-card .pc-unit { font-size: 11px; color: var(--ink-3); margin-bottom: 8px; font-family: var(--mono); }
.price-card .pc-tr   { font-family: var(--mono); font-size: 11px; font-weight: 500; }
.price-card .pc-tr.up { color: var(--good); }
.price-card .pc-tr.dn { color: var(--bad); }

/* — Region map — */
.region-map-wrap {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 22px 26px; margin-bottom: 24px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 22px; align-items: center;
}
.region-map-svg .rmap-region { fill: var(--card-2); stroke: var(--line); stroke-width: 1; cursor: pointer; transition: fill .15s, stroke .15s; }
.region-map-svg .rmap-region:hover, .region-map-svg .rmap-region.active { fill: var(--accent-bg); stroke: var(--accent); }
.region-map-svg .rmap-label { font-family: var(--mono); font-size: 9px; font-weight: 500; fill: var(--ink-3); text-anchor: middle; pointer-events: none; }
.region-map-svg .rmap-dot { fill: var(--accent); pointer-events: none; }
.region-map-info h3 { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.region-map-info p { font-size: 13px; color: var(--ink-2); line-height: 1.6; margin-bottom: 14px; }
.region-map-info .rmi-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.region-map-info .rmi-stats div { padding: 10px 12px; background: var(--card-2); border-radius: 2px; }
.region-map-info .rmi-stats div b { display: block; font-family: var(--serif); font-size: 18px; color: var(--ink); font-weight: 500; }
.region-map-info .rmi-stats div small { font-size: 11px; color: var(--ink-4); font-family: var(--mono); }

/* ══════════════════════════════════════════════════════
   SEARCH OVERLAY и AUDIENCE MODAL — терминал-стиль
══════════════════════════════════════════════════════ */
.search-overlay {
  position: fixed; inset: 0; z-index: 350;
  background: rgba(22,22,19,.55); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .22s, visibility .22s;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 80px 20px 20px;
}
.search-overlay.is-open { opacity: 1; visibility: visible; }
.search-dialog {
  background: var(--card); width: 100%; max-width: 680px;
  border-radius: var(--r-md); box-shadow: var(--sh-lg); overflow: hidden;
  transform: translateY(-12px); transition: transform .22s;
  border: 1px solid var(--ink);
}
.search-overlay.is-open .search-dialog { transform: translateY(0); }
.search-input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.search-input-wrap svg { width: 18px; height: 18px; color: var(--ink-3); flex-shrink: 0; }
.search-input-wrap input {
  flex: 1; border: none; outline: none;
  font-family: var(--sans); font-size: 15px; color: var(--ink); background: transparent;
}
.search-input-wrap input::placeholder { color: var(--ink-4); }
.search-input-wrap .search-close {
  width: 30px; height: 30px; border-radius: 2px;
  border: 1px solid var(--line); background: var(--card-2);
  color: var(--ink-2); font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.search-input-wrap .search-close:hover { background: var(--line); color: var(--ink); }
.search-suggest { padding: 12px 20px 18px; }
.search-suggest .ss-label {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--ink-4); margin: 8px 0 8px;
}
.search-suggest .ss-label::before { content: ':: '; color: var(--accent); }
.search-suggest .ss-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.search-suggest .ss-list a {
  font-family: var(--mono); font-size: 11px;
  padding: 4px 10px; border-radius: 2px;
  background: var(--card-2); border: 1px solid var(--line);
  color: var(--ink-2);
}
.search-suggest .ss-list a:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.search-suggest .ss-quick { display: flex; flex-direction: column; gap: 0; }
.search-suggest .ss-quick a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line-2);
  font-size: 12.5px; color: var(--ink-2);
}
.search-suggest .ss-quick a:hover { color: var(--accent); }
.search-suggest .ss-quick a:last-child { border-bottom: none; }
.search-suggest .ss-quick a .ss-tag {
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-bg);
  padding: 2px 7px; border-radius: 2px; flex-shrink: 0;
}

/* ── Живые результаты поиска (наполняет dds-script.js) ── */
.ss-results { min-height: 60px; max-height: min(52vh, 460px); overflow-y: auto; }
.ss-results .ss-hint {
  font-family: var(--sans); font-size: 13px; line-height: 1.6;
  color: var(--ink-3); padding: 10px 0 6px;
}
.ss-results .ss-note {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4); padding: 8px 0 4px;
}
.ss-results .ssr-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 8px 0;
  border-bottom: 1px dotted var(--line-2);
  text-decoration: none;
}
.ss-results .ssr-row:hover .ssr-t { color: var(--accent); }
.ss-results .ssr-row .dds-badge { flex-shrink: 0; }
.ss-results .ssr-t {
  flex: 1; min-width: 0;
  font-family: var(--sans); font-size: 14px; line-height: 1.35;
  color: var(--ink);
}
.ss-results .ssr-d {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-4);
  white-space: nowrap; flex-shrink: 0;
}
.ss-results .ssr-all {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 14px; padding: 11px 18px;
  background: var(--accent); color: #fff;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  border-radius: 3px; text-decoration: none;
  transition: background .14s;
}
.ss-results .ssr-all:hover { background: var(--accent-deep); }
@media (max-width: 900px) {
  .ss-results .ssr-d { display: none; }   /* дата — жертва ширины, тип и заголовок важнее */
  .ss-results .ssr-all { width: 100%; justify-content: center; }
}

/* Класс modal-open используется поисковым оверлеем — оставляем */
body.modal-open { overflow: hidden; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  /* На мобиле рейл скрыт, отступ слева у body не нужен — обнуляем переменную.
     Это автоматически делает calc(-1 * var(--rail-w))=0 и calc(100% + var(--rail-w))=100%,
     благодаря чему шапка/футер тянутся честно во всю ширину без хаков. */
  :root { --rail-w: 0px; }
  /* [class] — та же специфичность (0,1,1), что у базового правила выше.
     Без неё правило с простым `body` (0,0,1) проигрывало бы ему и здесь.
     Сейчас результат совпал бы и так (переменная выше обнулена), но полагаться
     на это нельзя: тронешь --rail-w — и мобильная ветка молча отвалится. */
  body[class] { padding-left: 0; }
  .t-rail {
    /* Не убираем из DOM — превращаем в slide-out drawer (см. .rail-open ниже) */
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 280px; z-index: 250;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.2,.7,.2,1);
    box-shadow: 8px 0 24px rgba(0,0,0,.2);
  }
  body.rail-open .t-rail { transform: translateX(0); }
  .t-rail-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    opacity: 0; visibility: hidden;
    transition: opacity .2s, visibility .2s;
    z-index: 240;
  }
  body.rail-open .t-rail-backdrop { opacity: 1; visibility: visible; }
  body.rail-open { overflow: hidden; }

  /* Гамбургер виден только на планшете (901–1100): рейла нет, а нижней
     навигации ещё нет — иначе в разделы не попасть. На телефоне (≤900) его
     работу берёт кнопка «Ещё» в нижней панели.
     Диапазон задан явно, чтобы не гоняться !important с правилом ниже:
     здесь он нужен, чтобы перебить базовое display:none у самой кнопки. */
  @media (min-width: 901px) {
    .t-hamburger { display: inline-flex !important; }
  }

  .stat-band { grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px; }
  .tech-grid6 { grid-template-columns: repeat(3,1fr); }
  .region-grid, .co-grid, .price-grid { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 860px) {
  .g3, .g4 { grid-template-columns: 1fr 1fr; }
  .aud-entry-grid, .law-grid { grid-template-columns: 1fr; }
  .spec-grid, .experts-grid { grid-template-columns: 1fr 1fr; }
  .region-map-wrap { grid-template-columns: 1fr; }
  .t-header-actions .t-date { display: none; }
  /* НАЗВАНИЕ В ШАПКЕ НА ТЕЛЕФОНЕ — три короткие строки вместо одной длинной.
     Раньше здесь стояло display:none: в одну строку «Деревянное домостроение
     Сибири» занимает 186px при 10px и не оставляет места поиску, поэтому знак
     оставался без подписи и сайт на телефоне было нечем опознать.
     Разбивка на три слова снимает конфликт: замер 12.08.2026 — блок 78px
     против 186px в строку, и это даже у́же аббревиатуры «ДДС·Сибирь» (78 vs
     78 при 12,5px, но там теряется само название). Поиску остаётся 196px
     на 360px и 211px на 375px, подпись «Поиск по сайту» влезает целиком.
     Высота шапки не меняется: три строки по 9,5px — 35px в поле 64px.
     Ширину задаём контейнеру, перенос делает браузер: слова разной длины,
     а самое длинное («домостроение») и определяет колонку. */
  .t-header .t-logo-texts { max-width: 78px; }
  .t-header .t-logo-name {
    white-space: normal;
    font-size: 9.5px; line-height: 1.22; letter-spacing: .04em;
    text-transform: uppercase; font-weight: 600;
  }
  .t-header .t-logo { gap: 8px; flex: 0 0 auto; }
  /* «ДДС Сибирь» второй строкой — только с 861px: здесь название уже
     в три строки, четвёртая съела бы поле шапки. В подвале остаётся. */
  .t-header .t-logo-sub { display: none; }
  /* Подсказка «⌘ K» на сенсорном экране бессмысленна — клавиатуры нет.
     Освободившиеся 37px и оплачивают название. */
  .t-search-kbd { display: none; }
  .t-search { flex: 1 1 auto; max-width: none; margin: 0; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 14px; }
  .g3, .g4 { grid-template-columns: 1fr; }
  .region-grid, .co-grid, .price-grid, .spec-grid, .experts-grid { grid-template-columns: 1fr 1fr; }
  .stat-band { grid-template-columns: 1fr 1fr; }
  .tech-grid6 { grid-template-columns: repeat(2,1fr); }
  .art-card { grid-template-columns: 1fr; }
  .ac-img { height: 160px; }
  .law-cta, .cta-strip { flex-direction: column; align-items: flex-start; }
  .t-header-inner { gap: 10px; padding: 0 14px; }
  .t-search-label { font-size: 12px; }
  .t-cta { display: none; }
  .t-date { display: none; }   /* экономим место под поиск на узких */
  .t-divider { display: none; }
  /* Значки каналов на телефоне прячем вместе с остальным: там шапку
     занимает поиск, а «Будьте в курсе» есть ниже по странице. */
  .t-msgr { display: none; }
  /* Рейл на смартфоне — полная ширина минус 60px */
  .t-rail { width: min(280px, calc(100vw - 60px)); }
  /* Футер — стек 1 колонка */
  .t-footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .t-footer-btm { flex-direction: column; align-items: flex-start; gap: 8px; }
  .t-footer-btm-links { margin-left: 0; flex-wrap: wrap; gap: 12px; }
  /* Внутренние страницы — sticky aside выключаем */
  .article-layout { gap: 18px; }
}

/* ─── Универсальные пэддинги внутренних страниц на узких экранах ─── */
@media (max-width: 860px) {
  .t-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* ═══ НИЖНЯЯ НАВИГАЦИЯ — только телефон ═══
   Разделы в один тап большим пальцем. До неё единственным входом был
   гамбургер: два тапа и шторка на весь экран.
   Стиль свой, не iOS-подобный: графит, терракотовая линия, моно-подписи,
   острые углы. Скруглённая «пилюля» утащила бы в чужой язык. */
.t-tabbar { display: none; }

@media (max-width: 900px) {
  .t-tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 210;                       /* выше рейла (150), ниже шапки (200)… */
    background: var(--dk-bg);
    border-top: 2px solid var(--accent);
    /* Вырез под жест-бар на iPhone: без этого подписи упираются в полоску */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .t-tab {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 2px;
    min-height: 52px;                   /* мишень с запасом к норме 44 */
    background: transparent; border: none;
    border-right: 1px solid rgba(255,255,255,.07);
    color: var(--dk-text-dim); text-decoration: none; cursor: pointer;
    transition: color .12s, background .12s;
  }
  .t-tab:last-child { border-right: none; }
  .t-tab:active { background: rgba(255,255,255,.05); }
  .t-tab-ic { font-family: var(--mono); font-size: 17px; line-height: 1; }
  .t-tab-l  { font-family: var(--mono); font-size: 9.5px; letter-spacing: .02em; white-space: nowrap; }
  .t-tab.is-active { color: var(--accent); }

  /* Панель перекрывает низ страницы — освобождаем место под ней.
     Высота = 52 (мишень) + 2 (терракотовая рамка сверху) = 54. Рамку легко
     забыть: с padding-bottom: 52px последние 2px контента уезжали под панель.
     Держим одним токеном, чтобы высота и отступ не разошлись при правке. */
  :root { --tabbar-h: 54px; }
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
  /* Шторка рейла не должна уезжать под панель */
  .t-rail { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
}

/* Рейл на телефоне открывается кнопкой «Ещё» — гамбургер в шапке лишний */
@media (max-width: 900px) {
  .t-hamburger { display: none; }
}

/* ═══ Подвал: аккордеон на телефоне ═══
   Было 790px (94% экрана) из 21 ссылки — и всё это под нижней панелью,
   которая уже даёт навигацию. Ссылки не выкидываем (они нужны и людям,
   и поисковику), а складываем. */
.t-footer-col > summary { list-style: none; cursor: pointer; }
.t-footer-col > summary::-webkit-details-marker { display: none; }

/* Раскрытием секций управляет атрибут open, который проставляет
   dds-chrome.js при сборке (десктоп — open, телефон — свёрнуто) и меняет
   при пересечении границы 900px. Полагаться на CSS здесь НЕЛЬЗЯ: свежий
   Chrome прячет содержимое закрытого <details> через ::details-content
   (content-visibility), и авторский display:flex его не открывает — подвал
   на десктопе стоял пустым. Правила ниже — про вид списков в обоих
   состояниях, а не про сам показ/скрытие. */
@media (min-width: 901px) {
  .t-footer-col > ul { display: flex; }
  .t-footer-col > summary { cursor: default; pointer-events: none; }
}
/* Страховка на случай, если JS не проставил open: в новых Chrome содержимое
   закрытого <details> прячет ::details-content — открываем его напрямую.
   Правило намеренно отдельное: браузеры без этого псевдоэлемента выбросят
   его целиком, не тронув соседние. */
@media (min-width: 901px) {
  .t-footer-col:not([open])::details-content { content-visibility: visible; }
}

@media (max-width: 900px) {
  .t-footer-col:not([open]) > ul { display: none; }
  .t-footer-col[open] > ul { display: flex; }
  .t-footer { padding: 22px 0 14px; }
  .t-footer-grid { grid-template-columns: 1fr; gap: 0; }
  .t-footer-col {
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .t-footer-col > summary {
    display: flex; align-items: center;
    min-height: 46px;                     /* мишень пальцем */
    padding: 0 2px;
  }
  .t-footer-col > summary h2,
  .t-footer-col > summary h3,
  .t-footer-col > summary h4 { margin: 0; flex: 1; }
  /* Шеврон — единственный признак, что секция раскрывается */
  .t-footer-col > summary::after {
    content: '+';
    font-family: var(--mono); font-size: 15px; color: var(--accent);
    line-height: 1; flex-shrink: 0; padding: 0 4px;
  }
  .t-footer-col[open] > summary::after { content: '−'; }
  .t-footer-col > ul { padding: 2px 0 12px; }
  .t-footer-col > ul li a { display: block; padding: 8px 0; min-height: 40px; }

  /* Описание издания — оно есть на /about/, здесь только съедает экран.
     Класс стоит на самом <p>, а не на обёртке — селектор без вложенности. */
  p.t-footer-about { display: none; }

  /* Поисковый оверлей: подсказки и быстрые переходы — мишени под палец */
  .search-suggest .ss-list a { padding: 12px 14px; font-size: 12px; }
  .search-suggest .ss-quick a { padding: 13px 0; font-size: 13.5px; }
  .t-footer-btm { flex-direction: column; align-items: flex-start; gap: 10px; }
  .t-footer-btm-links { flex-wrap: wrap; gap: 10px 14px; }
}