/* ============================================================
   АСПЕКТПРОЕКТ · РАЗДЕЛ «ПУБЛИКАЦИИ»
   ------------------------------------------------------------
   Два файла делят этот один: список статей (/publikacii/) и шаблон
   статьи (/publikacii/shablon/) — блоков мало на страницу, отдельный
   файл на каждую был бы избыточным (design-system: свой файл заводится,
   только когда блоки страницы действительно уникальны).

   Общее (токены, шапка, подвал, .hero--page, .crumbs, .related, .cta,
   .closing, .faq/.faq-item*, .article-card/.articles__grid,
   .placeholder) — в base.css, подключается на всех страницах.

   Главное требование этого раздела — масштабируемость: до пяти статей
   в неделю пишет SEO-агент, добавление новой статьи не должно требовать
   правки вёрстки нигде, кроме самого списка. См. инструкции «КАК
   ДОБАВИТЬ СТАТЬЮ» в комментариях HTML обеих страниц.
   ============================================================ */

/* ============================================================
   СПИСОК СТАТЕЙ — /publikacii/
   ============================================================ */

/* Герой страницы — .hero--page без полосы фактов (в ТЗ на эту страницу
   стата нет, только H1 и подзаголовок). Секция короче примерно на
   90–100px синей плашки и без неё выглядит пустой — добавляем воздуха
   снизу через специфичность страницы, а не трогая общий .hero__inner
   (тот же приём, что на «О компании», o-kompanii.css). Три ступени —
   без явной отмены в медиазапросах общий адаптив .hero__inner для
   узких экранов (base.css) остался бы перебит зафиксированным значением. */
.hero .hero__inner { padding-bottom: 96px; }
@media (max-width: 1024px) {
  .hero .hero__inner { padding-bottom: 72px; }
}
@media (max-width: 768px) {
  .hero .hero__inner { padding-bottom: 48px; }
}

/* Секция списка — белая панель между фото-героем и бумажной «Заявкой»
   (design-system 4.5: соседние секции не совпадают по фону), тот же
   приём, что у .need/.cases на страницах услуг. */
.pub-list { padding: 110px 0 120px; background: var(--white); border-bottom: 1px solid var(--line); }

/* Сетка — ТЗ, раздел 3: auto-fill вместо фиксированных колонок, число
   статей заранее неизвестно и будет расти. minmax(320px, 1fr) — на
   1180px и ниже принудительно две колонки, на 768px и ниже одна
   (сама auto-fill математика к этим порогам не привязана, поэтому
   переопределяем явно — это средние ширины, рабочий диапазон заказчика,
   именно там нужен предсказуемый результат, а не то, что насчитает
   auto-fill). min-width:0 на карточке — в base.css (.article-card),
   действует и здесь. */
.pub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 40px 28px;
}
@media (max-width: 1180px) {
  .pub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .pub-list { padding: 72px 0; }
}
/* Одна колонка – только на телефоне: на 561–768 кадры во всю ширину
   вырастали до 728×455 (снимки заказчика 28.10.2026). */
@media (max-width: 560px) {
  .pub-grid { grid-template-columns: 1fr; }
}
/* Нечётная последняя карточка в двух колонках – во всю строку, кадр
   слева, текст справа (тот же приём, что у .cases__grid в base.css). */
@media (min-width: 561px) and (max-width: 1180px) {
  .pub-grid > .article-card:last-child:nth-child(odd) { grid-column: 1 / -1; display: flow-root; }
  .pub-grid > .article-card:last-child:nth-child(odd) .article-card__foto { float: left; width: calc(50% - 14px); margin-right: 28px; }
  .pub-grid > .article-card:last-child:nth-child(odd) .article-card__meta { margin-top: 0; }
}

/* Рубрики — сюда, когда появится семантическое ядро (ТЗ, раздел 3:
   «рубрики не делать, они появятся из ядра, которого ещё нет»).
   Место: строка чипсов между .section-head и .pub-grid, тем же приёмом,
   что переключатель .services__nav — один активный пункт подсвечен
   заливкой .services__nav-item.is-active. Сейчас — ничего, кроме этого
   комментария, не заводить. */

/* Пагинация — ТЗ, раздел 3: показывать, когда статей больше 12.
   Разметку взять из комментария внизу site/publikacii/index.html
   (там же — когда именно её включать) и раскомментировать вместо
   этого комментария. Номера — короткие круглые ссылки, стрелки —
   существующий компонент .hnav__arrow (та же лента навигации, что у
   «Как мы работаем»/«Благодарностей»), чтобы не заводить третий вид
   круглой кнопки-стрелки на сайте. */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 72px;
}
.pager__list { display: flex; align-items: center; gap: 6px; }
.pager__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 4px;
  font-family: var(--head);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink-2);
  border-radius: var(--radius);
  transition: background-color .2s, color .2s;
}
.pager__link:hover { background: var(--paper-2); color: var(--ink); }
.pager__link.is-active { background: var(--blue); color: #fff; }
.pager__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--line-strong);
  font-weight: 700;
}
@media (max-width: 480px) {
  .pager { gap: 12px; }
  .pager__list { gap: 2px; }
}


/* ============================================================
   ШАБЛОН СТАТЬИ — /publikacii/shablon/
   ============================================================ */

/* ---------- Блок 01 · Шапка статьи + обложка ----------
   Не .hero--page: там нет ни одной статьи с готовым фото-фоном, а
   у самого текста заголовок+даты+автор+время чтения — обычная,
   некрупная типографика, фото — отдельным элементом ниже, а не фоном
   под текстом (ТЗ, раздел 4: «Шапка статьи» и «Обложка» — два разных
   пункта состава). Хайрлайна под шапкой нет — правка 12.08.2026 по
   замечанию заказчика: «там, где идёт статья, линий быть не должно»,
   между блоками статьи никаких горизонтальных линий (закреплено в
   ДИЗАЙН-СИСТЕМЕ, раздел «Статьи»). Шапка и тело статьи — одно белое
   полотно статьи, визуально их делит обложка; остальные секции
   страницы разводятся чередованием фона paper/white (design-system
   4.5), а не линиями — цепочка расписана у .article-similar ниже.
   Первый экран страницы — метки листа нет (design-system 3.4),
   но блок всё равно считается первым, следующий за ним получит ЛИСТ 02. */
.article-head { padding: 48px 0 0; background: var(--white); }
.article-head__inner { padding-bottom: 40px; }
.article-head__title {
  font-family: var(--head);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin-bottom: 24px;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
}
.article-meta__dates,
.article-meta__time {
  font-size: 13.5px;
  color: var(--ink-2);
}
.article-author { display: flex; align-items: center; gap: 12px; }
.article-author__avatar {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--line-strong);
}
.article-author__avatar svg { width: 20px; height: 20px; }
.article-author__name {
  font-family: var(--head);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.article-author__role { font-size: 12.5px; color: var(--ink-2); margin-top: 1px; }

/* Обложка уменьшена 12.08.2026 по замечанию заказчика: «сильно большая
   и забирает основной фокус внимания». Ограничиваем высоту, а не ширину:
   пропорция 16:9 сохраняется, картинка кадрируется по центру. 420px —
   примерно половина прежней высоты на 1440 (было ~745px). */
.article-head__cover { padding-bottom: 56px; }
.article-head__cover .article-cover,
.article-head__cover .placeholder--cover {
  max-height: 420px;
  object-fit: cover;
}
@media (max-width: 768px) {
  .article-head__cover .article-cover,
  .article-head__cover .placeholder--cover { max-height: 260px; }
}
/* Обложка — 16:9, а не карточная --wide 16:10 (ТЗ, раздел 4). Слой
   плейсхолдера — .placeholder--cover (base.css). Когда придёт реальное
   фото: заменить на <img class="article-cover" src="…" alt="…"
   width="1600" height="900" loading="lazy"> — height:auto ниже не даёт
   атрибутам перебить aspect-ratio (design-system 3.7, уже ловили баг
   с обложкой 500px вместо 200px на этом сайте). */
.article-cover { width: 100%; border-radius: 2px; }
img.article-cover { aspect-ratio: 16 / 9; object-fit: cover; height: auto; display: block; }

/* ---------- Блок 02 · Тело статьи ----------
   Единственная типографика, которой в брендбуке ещё не было (ТЗ,
   раздел 4). Ничего не выдумано: колонка ≤720px — из ТЗ; кегль абзаца
   16.5px и line-height 1.65 — верхняя граница диапазона «Основной
   текст» дизайн-системы (3.2: 15–16.5px/1.55–1.65), взята верхняя
   граница — это единственный длинный связный текст на сайте, всем
   остальным местам хватает и нижней; цвет --ink-2 — та же роль
   «Основной текст» по таблице токенов (там же). Заголовки — вес 800,
   промежуточных не вводить (правило жёсткое), отличаются кеглем и
   выведены между H3 карточки (19–27px) и H2 секции (32–54px) — по
   размеру они однозначно крупнее заголовка карточки и мельче заголовка
   маркетингового блока, середина есть, а токена для неё не было. Шаг
   между блоками — 20px абзацы, 48/36px перед h2/h3 — из принятой сетки
   отступов 8/10/16/20/24, увеличенной на тот же множитель, каким
   .section-head отличается от .sheet-label (56px против 32px). */
/* ПРАВКА 12.08.2026 по замечаниям заказчика к первой статье.
   Три изменения, все касаются только раздела «Публикации»:
   1. Тело статьи — на белом фоне, а не на бумажном. Длинный связный
      текст на --paper читается тускло, а белый даёт максимальный
      контраст; это же делает читаемыми синие акцентные врезки.
   2. Цвет основного текста --ink вместо --ink-2. Дизайн-система
      отводит --ink-2 роли «Основной текст», но на длинном чтении
      #66665F выглядит выцветшим — заказчик прочитал это как
      «прозрачный текст». Для статей принято исключение: тело --ink.
      На остальных страницах роль токена не меняется.
   3. Метка листа (.sheet-label) в статьях не используется —
      решение заказчика. Разделять разделы статьи горизонтальной
      линией с номером листа незачем: у длинного текста своя
      навигация — заголовки. */
/* Отступ снизу добавлен 12.08.2026: «нужно сделать отступ перед блоком
   „Вопросы и ответы“». Последний пункт списка «Что запомнить» упирался
   в границу бумажной секции вопросов — текст читался как обрезанный.
   96px — ритм секций сайта (110/120 у крупных, 96 у средних). */
.article { background: var(--white); padding-bottom: 96px; }
@media (max-width: 768px) {
  .article { padding-bottom: 64px; }
}

.article-body {
  max-width: 720px;
  margin: 0 auto;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink);
}
.article-body > * + * { margin-top: 20px; }

.article-body h2 {
  font-family: var(--head);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: 48px;
}
.article-body h3 {
  font-family: var(--head);
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-top: 36px;
}
/* Снятие верхнего отступа — только у ПЕРВОГО элемента самого тела
   статьи, поэтому комбинатор «>» обязателен: с появлением обёртки
   .article-section-head каждый обёрнутый H2 — первый ребёнок своей
   обёртки, и правило без «>» снимало бы 48px всем таким заголовкам. */
.article-body > h2:first-child,
.article-body > h3:first-child { margin-top: 0; }

.article-body strong { font-weight: 600; color: var(--ink); }
.article-body a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--blue-dark); }

/* Списки — тот же маркер-тире, что у .dash-list, пропорционально
   увеличенный под кегль тела статьи (родной .dash-list рассчитан на
   15px в карточках, здесь 16.5px). Нумерованный список — синий Onest,
   тот же приём «номер как элемент композиции», что у .scope-group__num. */
.article-body ul,
.article-body ol { padding: 0; }
.article-body li {
  position: relative;
  padding-left: 26px;
}
.article-body li + li { margin-top: 10px; }
.article-body ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--line-strong);
}
.article-body ol { counter-reset: article-ol; }
.article-body ol li { counter-increment: article-ol; }
.article-body ol li::before {
  content: counter(article-ol);
  position: absolute;
  left: 0;
  font-family: var(--head);
  font-weight: 700;
  font-size: 14px;
  color: var(--blue);
}

/* Цитата — синяя линия слева, тот же токен-приём, что у
   .founder__quote/.related__card::before, но на бумаге, а не на тёмном
   фоне, поэтому --blue, а не --blue-soft (design-system, «акцент на
   тёмном — blue-soft, на светлом — blue»). */
.article-body blockquote {
  border-left: 3px solid var(--blue);
  padding-left: 24px;
  font-family: var(--head);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}

/* Картинка с подписью — тот же радиус, что у обложки и карточек фото
   (8px), подпись мельче тела статьи, приглушённая, по центру.
   Отступы 44px сверху и снизу — закреплены 12.08.2026 по замечанию
   заказчика: общий шаг тела статьи (20px) изображению мал, картинка
   прилипала к тексту. Ориентир — чуть больше отступа H3 (36px):
   изображение весит визуально сильнее заголовка. Правило общее для
   всех будущих статей — любая figure внутри .article-body получает
   его автоматически. Подпись figcaption остаётся прижатой к картинке
   (10px ниже). С margin-top соседа снизу (20px у абзаца, 48px у H2)
   отступ схлопывается — действует больший из двух. */
.article-body figure { margin: 44px 0; }
.article-body img { width: 100%; height: auto; border-radius: 2px; display: block; }
.article-body figcaption {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: 10px;
  text-align: center;
}

/* Схема «Путь документации» (статья про стадии П и Р), 28.10.2026 —
   заказчик просил нарисовать вместо слота под картинку. Четыре шага
   на одной оси, как «Как мы работаем», но со своими рисунками. Над
   осью две зоны: серая — для разрешения (проектная, экспертиза),
   синяя — по чему строят (рабочая, стройка). Рисунки — svg, линии
   цветом текста, акцент синим, лист белый на тёплом сером. На
   телефоне шаги столбиком, ось слева. */
.put-doc__ryad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 20px;
}
.put-doc__zona {
  grid-row: 1;
  padding-bottom: 10px;
  margin-bottom: 18px;
  border-bottom: 2px solid var(--line-strong);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-2);
}
.put-doc__zona--p { grid-column: 1 / 3; }
.put-doc__zona--r { grid-column: 3 / 5; border-color: var(--blue); color: var(--blue); }
.put-doc__shag { grid-row: 2; display: flex; flex-direction: column; min-width: 0; }
.put-doc__ris { display: block; aspect-ratio: 4 / 3; border-radius: 2px; background: var(--paper-2); }
.put-doc__ris svg { display: block; width: 100%; height: 100%; }
.pd-list { fill: #fff; stroke: var(--ink); stroke-width: 1.1; }
.pd-l { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.pd-l--tolst { stroke-width: 2; }
.pd-s { fill: none; stroke: var(--line-strong); stroke-width: 1; stroke-linecap: round; }
.pd-b { fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pd-b--tonk { stroke-width: 1; }
.pd-b--tolst { stroke-width: 2.4; }
.pd-tint { fill: var(--blue-tint); }
/* номер на оси и отрезок до следующего шага */
.put-doc__os { position: relative; display: block; height: 28px; margin: 16px 0 14px; }
.put-doc__os::before {
  content: '';
  position: absolute;
  top: 13px;
  left: 28px;
  right: -20px;
  height: 2px;
  background: var(--line-strong);
}
.put-doc__shag:last-child .put-doc__os::before { content: none; }
.put-doc__n {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--ink-2);
  border-radius: 2px;
  background: var(--white);
  font-family: var(--head);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.put-doc__shag--r .put-doc__n { border-color: var(--blue); color: var(--blue); }
.put-doc__shag--r .put-doc__os::before { background: var(--blue); }
.put-doc__h {
  font-family: var(--head);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.put-doc__h span { display: block; margin-top: 3px; font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: normal; color: var(--ink-2); }
.put-doc__t { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.put-doc__itog {
  align-self: flex-start;
  margin-top: 12px;
  padding: 6px 10px;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.put-doc figcaption { margin-top: 28px; }
@media (max-width: 640px) {
  .put-doc__ryad { grid-template-columns: minmax(0, 1fr); }
  .put-doc__zona { grid-column: auto; grid-row: auto; margin-bottom: 20px; }
  .put-doc__zona--r { grid-column: auto; margin-top: 4px; }
  .put-doc__shag {
    grid-row: auto;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 16px;
    padding-bottom: 28px;
  }
  .put-doc__shag > * { grid-column: 2; }
  .put-doc__os { grid-column: 1; grid-row: 1 / span 5; height: auto; margin: 0; }
  .put-doc__os::before { top: 28px; bottom: 0; left: 13px; right: auto; width: 2px; height: auto; }
  .put-doc__shag:nth-child(3) .put-doc__os::before { content: none; }
  .put-doc__ris { max-width: 240px; margin-bottom: 14px; }
}

/* Таблица — тонкие горизонтальные линии вместо клеток-рамок (оттиск
   бренда, п.5: «тонкие линии вместо рамок и теней»), шапка отделена
   утолщённой линией --ink, тот же характер, что у .faq__list.
   Обёртка .article-table-wrap скроллится по горизонтали (overflow-x) —
   узкая колонка тела статьи (720px) на 390px экране легко уже таблицы
   из 3–4 колонок; так таблица скроллится в своих границах, а не
   раздвигает страницу (design-system 3.6: горизонтального переполнения
   быть не должно нигде). Таблица остаётся обычной table — без display:
   block, чтобы не ломать выравнивание колонок. */
.article-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.article-body table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.article-body th,
.article-body td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.article-body th {
  font-family: var(--head);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--ink-2);
  border-bottom: 1.5px solid var(--ink);
}
.article-body td { color: var(--ink-2); }

@media (max-width: 480px) {
  .article-body th, .article-body td { padding: 10px 10px; }
}

/* ---------- Синяя панель сводной таблицы · .article-table-panel ----------
   Правка 12.08.2026 по замечанию заказчика: «может, таблицу тоже
   вынесем в синий фон? Выглядит неплохо и как такой отдельный раздел».
   Стилистика — .article-summary: тот же токен --blue-tint, радиус 8px,
   те же внутренние отступы (28/32, на ≤768px — 22/20). Панель — обёртка
   ВОКРУГ .article-table-wrap, а не класс на нём: фон и padding прямо
   на скролл-контейнере ненадёжны — правый внутренний отступ в конце
   горизонтальной прокрутки браузеры отдают по-разному. Скролл остаётся
   внутри панели, ширины сверх контейнера панель не добавляет
   (box-sizing: border-box глобально).
   ПРАВИЛО ИЗМЕНЕНО 12.08.2026, вторая итерация: «давай сделаем правило,
   что все таблицы идут в синем фоне». Изначально панель ставилась
   только на сводную таблицу, чтобы акцент не превратился в фон —
   заказчик решил иначе, и это его решение. Теперь панель обязательна
   для КАЖДОЙ таблицы статьи, в том числе в будущих статьях.
   Разделители строк внутри панели — --line-strong: обычный --line
   (#E5E4DE) на --blue-tint (#EEF2FE) почти пропадает, новых цветов
   не заводим — берём существующий токен потемнее. */
.article-table-panel {
  background: var(--blue-tint);
  border-radius: 2px;
  padding: 28px 32px;
}
.article-table-panel td { border-bottom-color: var(--line-strong); }

/* Текст таблиц — --ink, как и всё тело статьи. Роль токена «Основной
   текст» (--ink-2) на длинном чтении выцветает: заказчик дважды
   прочитал это как «текст теряется, сильно прозрачный» — сначала
   в теле статьи, потом в ячейках таблицы. Внутри синей панели разница
   заметнее: фон светлее белого по восприятию. */
.article-body td { color: var(--ink); }

/* ---------- Врезка «Коротко» · .article-summary ----------
   Новый компонент (ТЗ — статья «Проектная и рабочая документация»,
   раздел 6, единственный запланированный): выжимка ответа в начале
   статьи, чтобы читатель из поиска получил ответ в первом экране, не
   прокручивая. Нужен каждой следующей статье — поэтому живёт здесь,
   в общем файле раздела, а не в странице.
   Собран из существующего: фон --blue-tint — тот же токен, что у блока
   итога калькулятора («спокойный» синий, не спорит с CTA по яркости —
   требование ТЗ); кикер — типографика .sheet-label (Onest 600, 12px,
   трекинг 0.06em, uppercase); радиус 8px — как у обложки и картинок
   статьи. Текст — --ink, а не --ink-2: это главный ответ страницы,
   он на полтона плотнее остального тела. Никаких новых цветов,
   гарнитур и радиусов. На всех ширинах — одна колонка внутри тела
   статьи (720px), схлопывать нечего, меняется только внутренний отступ. */
.article-summary {
  background: var(--blue-tint);
  border-radius: 2px;
  padding: 28px 32px;
}
.article-summary__label {
  display: block;
  font-family: var(--head);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--blue);
  margin-bottom: 10px;
}
.article-summary p { color: var(--ink); }
.article-summary p + p { margin-top: 14px; }

/* ---------- Вынос на полях · .article-aside ----------
   Второй компонент статей (ТЗ — раскладка статьи с выносами):
   акцентная врезка с ключевой мыслью раздела. Стилистика — прямое
   продолжение .article-summary, одобренной заказчиком как опорный
   образец: тот же фон --blue-tint, тот же радиус 8px, текст --ink.
   Кикера нет — роль акцента играет жирное начало фразы (<strong>);
   тексты выносов заданы ТЗ дословно, не редактировать. Плотность:
   пять выносов на восемнадцать разделов, больше не добавлять —
   так они читаются как акценты, а не как второй текст.

   Правка 12.08.2026 по замечанию заказчика («не нравится, что правые
   сноски на хаотичной высоте — верхняя линия заголовка на уровне
   начала синего блока»): вынос больше не стоит после «своего» абзаца,
   а живёт в обёртке .article-section-head сразу ПОСЛЕ H2 раздела.
   Порядок чтения на всех ширинах: заголовок → вынос → текст раздела.

   Поведение по ширинам (ТЗ, раздел 4):
   · до 1180px включительно — обычный блок в потоке на всю ширину
     текстовой колонки, под заголовком своего раздела;
   · с 1181px — уходит в правую колонку, верх в верх с H2 (медиаблок
     ниже);
   · ≤768px — уменьшенные внутренние отступы, в ногу с .article-summary. */
.article-aside {
  background: var(--blue-tint);
  border-radius: 2px;
  padding: 22px 24px;
}
.article-aside p { color: var(--ink); }
.article-aside p + p { margin-top: 10px; }

/* Обёртка «H2 + вынос» — ниже 1181px это просто блок: заголовок и
   вынос встают в поток друг за другом. Отступы разделов не меняются:
   margin-top заголовка (48px) схлопывается сквозь обёртку (у неё нет
   рамок и паддингов), и сама обёртка как прямой ребёнок тела получает
   свои 20px от «> * + *» — побеждает 48px, как и раньше у голого H2.
   Выносу — 20px под заголовком: внутри обёртки шаг «> * + *» тела
   статьи до него уже не дотягивается. */
.article-section-head > .article-aside { margin-top: 20px; }

/* ---------- Раскладка ≥1181px: текст слева, выносы справа ----------
   Замечание заказчика: колонка 720px по центру на широком экране узка,
   справа пустота. Текст прижимается влево и растёт до 780px, справа —
   колонка выносов 300px с отступом 60px (ТЗ, раздел 2). Порог 1181 —
   тот же рубеж 1180, что у .pub-grid здесь и у сеток base.css.

   Механика — правка 12.08.2026 по замечанию заказчика («сноски на
   хаотичной высоте — верх синего блока на уровне верхней линии
   заголовка»). H2 и вынос лежат в общей обёртке .article-section-head;
   здесь обёртка получает position: relative, вынос — absolute с
   top: 0: верх выноса совпадает с верхом H2 всегда, в том числе когда
   заголовок в две строки (вынос равняется по первой). Прежний float
   так не умел — float не поднимается выше своей позиции в потоке и
   вставал по верху «своего» абзаца с разнобоем. Грид-обёртка «H2 |
   вынос» тоже не годится: высота общего ряда растянулась бы по
   выносу, и между заголовком и первым абзацем раздела появлялась бы
   дыра размером с вынос. Absolute поток не трогает вовсе.

   Числа связаны жёстко: ширина тела = 100% контейнера − 360px
   (колонка 300 + отступ 60), потолок 780px; вынос шириной 300px
   вынесен за правый край тела на те же 360px (right: -360px).
   На 1181px тело = 733px и правый край выноса совпадает с краем
   контейнера; к 1228px тело дорастает до 780px. Обе ширины заданы
   явно — колонка выносов не может ни схлопнуться, ни отжать текст.

   ЦЕНА РЕШЕНИЯ — помнить при вёрстке следующих статей: absolute
   выключен из потока, clear его больше не страхует. Вынос ОБЯЗАН
   быть короче своего раздела (до ближайшей таблицы, панели или
   следующего H2) — иначе наедет. Проверять на самом широком экране:
   там тело 780px, текст раздела занимает меньше всего строк, а вынос
   своей ширины 300px не меняет — запас минимален. На этой статье все
   пять выносов проверены 12.08.2026 на 1181/1250/1440, ближе всего
   таблица раздела «Формальное различие» — запас 110px.

   Таблицы, панель сводной таблицы и врезка «Коротко» шире тела на
   те же 360px — занимают текст и колонку выносов целиком (ТЗ: им
   тесно и в 720px). Выносы не липкие — обычный поток (ТЗ, раздел 5). */
@media (min-width: 1181px) {
  .article-body {
    width: calc(100% - 360px);
    max-width: 780px;
    margin: 0;
  }
  .article-section-head { position: relative; }
  .article-section-head > .article-aside {
    position: absolute;
    top: 0;
    right: -360px;
    width: 300px;
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
  }
  .article-body > .article-summary,
  .article-body > .article-table-wrap,
  .article-body > .article-table-panel {
    width: calc(100% + 360px);
  }
}

/* ---------- Блок 03 · Вопросы ----------
   Правка 12.08.2026: тело статьи белое (см. выше), поэтому вопросы —
   на бумаге: обычный .faq из base.css БЕЗ модификатора --white
   (design-system 4.5: соседние секции не совпадают по фону). Заодно
   ушли и линии border-top/bottom модификатора .faq--white — по
   замечанию заказчика между блоками статьи линий быть не должно.
   Линии ВНУТРИ аккордеона (.faq__list border-top, .faq-item
   border-bottom) — структура списка вопросов, они остаются. */

/* ---------- Блок 05 · Похожие статьи ----------
   Правка 12.08.2026: линии между блоками статьи убраны по замечанию
   заказчика, секции разводятся только чередованием фона (design-system
   4.5). Цепочка страницы статьи: шапка + тело — одно белое полотно →
   вопросы paper (.faq без модификатора) → услуги white
   (.related--white ниже) → похожие статьи paper → заявка white
   (.cta--white). Пока «Похожих» на статье нет, хвост короче: услуги
   white → заявка paper (обычный .cta). Сетка и карточки — общий
   .articles__grid/.article-card (base.css), третье место их
   использования, поэтому здесь не переопределяются. */
.article-similar { padding: 110px 0 120px; background: var(--paper); }

/* Перелинковка на услуги на белом — звено чередования фонов статьи
   (цепочка выше). Модификатор живёт здесь, а не в base.css: base общий
   для двенадцати страниц и в этой задаче неприкосновенен. Понадобится
   белая .related третьей странице — переносить в base.css с проверкой
   браузером (грабли: перенос правила меняет порядок каскада). */
.related.related--white { background: var(--white); }

/* ---------- Заявка на белом · .cta--white ----------
   Звено того же чередования: на странице с «Похожими статьями» заявка
   идёт за их бумажной секцией и поднимается на белый. Хайрлайна сверху
   больше нет — правка 12.08.2026, линий между блоками статьи не
   осталось. На нынешней статье «Похожие» скрыты, класс с заявки СНЯТ:
   она стоит за белой .related--white и остаётся на бумаге (умолчание
   .cta в base.css). Вернутся «Похожие» — вернуть заявке класс. */
.cta.cta--white { background: var(--white); }

@media (max-width: 768px) {
  .article-head { padding-top: 36px; }
  .article-head__inner { padding-bottom: 28px; }
  .article-head__cover { padding-bottom: 40px; }
  .article-body { font-size: 16px; }
  .article-body blockquote { font-size: 17px; }
  .article-summary { padding: 22px 20px; }
  .article-aside { padding: 22px 20px; }
  .article-table-panel { padding: 22px 20px; }
  .article-similar { padding: 72px 0; }
}