/* ============================================================
   VM/Article · сторінка статті журналу
   figma: node-id=64:11 (hero 64:12, crumbs 64:23, body 64:25)
   ============================================================ */

.vm-article {
  --vm-a-hero-h: 800px;    /* высота шапки в макете */
  --vm-a-copy-w: 584px;    /* мера копии в шапке */
  --vm-a-side-w: 380px;    /* сайдбар в макете */
  --vm-a-avatar: 120px;
  /* Обкладинка в макете — квадрат 582 абсолютом: 145 от верха полосы,
     74 от правого края. 74 — не поле 80; поставлено как в макете, согласовать. */
  --vm-a-photo: 582px;
  --vm-a-photo-top: 145px;
  --vm-a-photo-right: 74px;

  /* Вертикальный ритм колонки текста (решение 2026-09-08).
     Три ступени вместо россыпи значений:
       block-gap    — между самостоятельными блоками (схема, промо, FAQ,
                      подписка, авторы). Равен полю страницы: блок читается
                      как отдельная полоса, а не как продолжение прозы;
       block-gap-sm — между блоком и его хвостом (оценка, источники);
       заголовок H2 остаётся на 56 — он внутри прозы, а не рядом с ней. */
  --vm-a-block-gap: var(--sc-space-20);
  --vm-a-block-gap-sm: var(--sc-space-12);

  box-sizing: border-box;
  display: block;
  /* Полоса шапки начинается под фиксированным навбаром, как в макете:
     навбар лежит поверх неё, а верхнее поле копии (160) его перекрывает */
  background: var(--background);
  color: var(--foreground);
}

.vm-article *,
.vm-article *::before,
.vm-article *::after { box-sizing: border-box; }

/* ---------- Шапка ---------- */

/* Полоса 800 на warm: копия во всю ширину с полями 160 / 56 / 40 / 80,
   обкладинка лежит абсолютом поверх (в макете она вне потока копии) */
.vm-article__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-block-size: var(--vm-a-hero-h);
  padding-block: var(--section-padding-y) var(--sc-space-10);
  padding-inline: var(--sc-pad-x) calc(var(--sc-band) + var(--sc-space-14));
  background: var(--warm);
}

.vm-article__hero-copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sc-space-6);
  min-inline-size: 0;
}

/* ---------- Возврат ----------
   Со статьи нужно уметь выйти: крошки лежат под шапкой статьи и до них
   надо доскроллить, а «Почати» в углу — это призыв записаться, а не выход.
   Поэтому строка возврата стоит первой в шапке, над плашками (2026-09-21). */

.vm-article__back {
  --back-arrow: var(--sc-space-3);

  align-self: start;
  justify-self: start;   /* в сетке шапки на мобильном иначе тянется на всю строку */
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-2);
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color var(--sc-dur-fast) var(--sc-ease);
}

.vm-article__back:hover { color: var(--foreground); }

.vm-article__back:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}

/* Стрелка влево — та же фигура, что знак «открыть» в полочках: две кромки
   в 1px, повёрнутые на 45°, отдельный ассет ради неё не нужен */
.vm-article__back-arrow {
  inline-size: calc(var(--back-arrow) / 2);
  block-size: calc(var(--back-arrow) / 2);
  border-inline-start: 1px solid currentColor;
  border-block-end: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--sc-dur-fast) var(--sc-ease-out);
}

.vm-article__back:hover .vm-article__back-arrow { transform: rotate(45deg) translate(-15%, 15%); }

@media (prefers-reduced-motion: reduce) {
  .vm-article__back,
  .vm-article__back-arrow { transition: none; }
}

/* Рубрика в плашке — ссылка на свою страницу: второй выход из статьи */
.vm-article__chip a {
  color: inherit;
  text-decoration: none;
}

.vm-article__chip:has(a):hover {
  border-color: var(--foreground);
}

.vm-article__chip a:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}

.vm-article__hero-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stack-gap-lg);
  max-inline-size: var(--vm-a-copy-w);
}

.vm-article__chips {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--card-gap);
}

/* Chip/Meta: рамка 1px, поля 10/6 */
.vm-article__chip {
  padding: var(--sc-chip-pad);
  border: var(--sc-line) solid var(--border);
}

.vm-article__title { margin: 0; }

.vm-article__dek {
  margin: 0;
  max-inline-size: var(--sc-measure);
  color: var(--muted-foreground);
}

/* Лид и ответ FAQ — контейнеры <div> с голыми <p> внутри (правка 2026-09-27).
   Поле из админки с автоформатированием отдаёт <p>…</p>, а <p> внутри <p> браузер
   разрывает: класс оставался на пустом абзаце, текст шёл без стиля, а второй абзац
   ответа — вообще без форматирования (замечание Николая). Теперь абзацев сколько угодно,
   кегль и цвет наследуются от контейнера. */
.vm-article__dek > *,
.vm-article__faq-a > * { margin: 0; }

.vm-article__dek > * + *,
.vm-article__faq-a > * + * { margin-block-start: var(--stack-gap-md); }

/* Байлайн: дата · автор · просмотры · время чтения.
   Разделитель — точка на ::before, у элементов с иконкой её нет:
   иконка сама отбивает пункт. Каждая подпись остаётся целым узлом
   (qTranslate), иконка лежит рядом, а не внутри текста. */
.vm-article__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Просветы плотные: пункты читаются одной строкой, а не четырьмя
     обрывками (правка 2026-09-13; было --stack-gap-sm) */
  column-gap: var(--sc-space-1_5);
  row-gap: var(--sc-space-2);
  margin: 0;
  color: var(--muted-foreground);
}

.vm-article__byline-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-1_5);
}

/* Имя автора — ссылка на блок «Автор статті» внизу (#author): плавная
   прокрутка и отступ под шапку — из base.css. Подчёркнута тонко, чтобы
   читалась как ссылка, но не спорила с заголовком (2026-09-30) */
.vm-article__byline-author {
  color: inherit;
  /* Было ссылкой с подчёркиванием и прокруткой к блоку автора; с 2026-10-08 —
     просто текст: профиль автора стоит сразу под шапкой */
}

@media (hover: hover) and (pointer: fine) {
  .vm-article__byline-author:hover { color: var(--foreground); }
}

.vm-article__byline-author:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}

.vm-article__byline-author:active { color: var(--foreground); }

.vm-article__byline-item + .vm-article__byline-item::before {
  content: "·";
  /* просвет после точки задаёт gap пункта (6) — такой же, как column-gap до неё;
     прежний margin давал 12 после и 6 до (правка 2026-10-08) */
  color: inherit;
}

/* Мобильный: две строки — дата с автором, под ними просмотры и время.
   Сетка 2×2 разводит пункты попарно надёжнее, чем перенос флексом.
   Третий пункт начинает строку, поэтому точка перед ним не нужна. */
@media (max-width: 640px) {
  /* Перенос ставим сами: нулевая полоса на всю ширину между вторым и третьим
     пунктом. Сетка 2×2 не годится — колонка тянется по широкому пункту и
     разводит дату с автором. Строка-разделитель съедает один row-gap,
     поэтому здесь он вдвое меньше. */
  .vm-article__byline { row-gap: var(--sc-space-1); }

  .vm-article__byline-item:nth-child(1) { order: 1; }
  .vm-article__byline-item:nth-child(2) { order: 2; }

  .vm-article__byline::after {
    content: "";
    order: 3;
    flex-basis: 100%;
    block-size: 0;
  }

  .vm-article__byline-item:nth-child(3) { order: 4; }
  .vm-article__byline-item:nth-child(4) { order: 5; }
  .vm-article__byline-item:nth-child(3)::before { content: none; }
}

.vm-article__byline-icon {
  display: block;
  flex: none;
  inline-size: var(--sc-space-4);
  block-size: var(--sc-space-4);
  /* оптическая посадка на строку мелкого кегля */
  margin-block-start: -1px;
  opacity: 0.85;
}

/* Обкладинка — квадрат 582 в правой части полосы, как в макете.
   В ленте журнала это тот же кадр: переход из ленты сажает его ровно сюда. */
.vm-article__hero-media {
  position: absolute;
  inset-block-start: var(--vm-a-photo-top);
  inset-inline-end: calc(var(--sc-band) + var(--vm-a-photo-right));
  inline-size: var(--vm-a-photo);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--muted);
}

.vm-article__hero-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* ---------- Подпись к обложке ----------
   Источник кадра и пометка об обработке. Лежит на фото: рамка обложки
   абсолютная и с overflow: hidden, под ней в потоке места нет (2026-09-24).
   Скрим обязателен — текст на фото без него не читается (CLAUDE.md). */

.vm-article__credit {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  margin: 0;
  padding: var(--card-padding); /* то же поле, что у карточек: 28 / 20 на мобильном */
  color: var(--primary-foreground);
  background: linear-gradient(to top, var(--sc-black-alpha-60), var(--sc-black-alpha-0));
}

.vm-article__credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: var(--sc-space-0_5);
}

@media (hover: hover) and (pointer: fine) {
  .vm-article__credit a:hover { text-decoration: none; }
}

.vm-article__credit a:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}

/* ---------- Подхват перехода из ленты ----------
   Обкладинка приезжает из ленты уже в свою рамку (assets/js/article-intro.js):
   снимок стоит в тех же координатах, куда его привёл слайдер, и растворяется
   над своим фото. Пока он есть, своё фото скрыто — иначе кадр двоится. */

.vm-article__flyer {
  position: fixed;
  z-index: 91;
  inset-block-start: var(--flyer-y, 0px);
  inset-inline-start: var(--flyer-x, 0px);
  inline-size: var(--flyer-w, 0px);
  block-size: var(--flyer-h, 0px);
  object-fit: cover;
  pointer-events: none;
}

.vm-article__flyer.sc-is-landing {
  transition:
    inset-block-start var(--sc-dur-slow) var(--sc-ease-out),
    inset-inline-start var(--sc-dur-slow) var(--sc-ease-out),
    inline-size var(--sc-dur-slow) var(--sc-ease-out),
    block-size var(--sc-dur-slow) var(--sc-ease-out),
    /* снимок гаснет на последнем отрезке пути, уже стоя на месте обкладинки */
    opacity var(--sc-dur-fast) linear calc(var(--sc-dur-slow) - var(--sc-dur-fast));
}

.vm-article__flyer.sc-is-landing { opacity: 0; }

.vm-article__hero-media.sc-is-handoff img { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .vm-article__flyer { transition: none; }
}

/* ---------- Хлебные крошки ---------- */

/* Полоса крошек под шапкой: 50 в макете, линия снизу */
/* Полоса прочерчена сверху и снизу: верхняя линия отделяет её от шапки статьи.
   Высота 70 — та же, что у полосы крошек на главной блога (--vm-rubrics-h),
   чтобы при переходе из ленты в статью полоса не прыгала (решение 2026-09-08). */
.vm-article__crumbs {
  display: flex;
  --vm-a-crumbs-h: var(--sc-crumbs-h);   /* 70 — общая высота полосы крихт (base.css) */

  align-items: center;
  min-block-size: var(--vm-a-crumbs-h);
  padding: var(--sc-space-2) var(--sc-pad-x);
  border-block: var(--hairline) solid var(--border);
}

.vm-article__crumbs p {
  margin: 0;
  color: var(--muted-foreground);
}

.vm-article__crumbs a {
  color: inherit;
  text-decoration: none;
}

/* ---------- Полоса прочитанного ----------
   Control/Progress: дорожка muted, индикатор foreground. Липнет под шапкой
   и есть только на статье — по ней сразу понятно, что читаешь материал. */

/* Полоса висит под навбаром вне потока: sticky занимала 2px в потоке
   и сдвигала шапку относительно макета (обкладинка 145 → 147) */
.vm-article__progress {
  position: fixed;
  inset-block-start: var(--header-h, 80px);
  inset-inline: 0;
  z-index: 2;
  block-size: var(--sc-progress-h);
  background: var(--muted);
  overflow: hidden;
}

.vm-article__progress-bar {
  display: block;
  block-size: 100%;
  inline-size: 100%;
  background: var(--primary); /* фирменный синий (2026-09-12, было чёрное) */
  transform: scaleX(var(--article-progress, 0));
  transform-origin: left center;
}

/* ---------- Тело: колонка 844 + сайдбар 380 ---------- */

/* Гаттер между текстом и сайдбаром — в поле страницы (80), а не в разрядку
   секции (56): колонки читаются как две отдельные полосы, а не как один блок
   (решение 2026-09-08). Меру строки это не трогает — проза и так ограничена
   65ch, ужимается только ширина широких врезок. */
.vm-article__body {
  display: grid;
  grid-template-columns: minmax(0, 844fr) var(--vm-a-side-w);
  gap: var(--sc-space-20);
  padding: var(--section-padding-y) var(--sc-pad-x);
  align-items: start;
}

.vm-article__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-inline-size: 0;
}

/* ---------- Шеринг ---------- */

.vm-article__share {
  display: flex;
  align-items: center;
  gap: var(--stack-gap-md);
  color: var(--muted-foreground);
}

/* В сайдбаре (2026-10-07): подпись строкой, кнопки под ней */
.vm-article__sidebar .vm-article__share {
  flex-wrap: wrap;
  column-gap: var(--sc-space-1); /* кнопки встык, как плитки (4) */
  row-gap: var(--stack-gap-md);
}
.vm-article__sidebar .vm-article__share > span { inline-size: 100%; }

.vm-article__share-link {
  padding: var(--sc-chip-pad);
  border: var(--sc-line) solid var(--border);
  color: var(--foreground);
  text-decoration: none;
  transition: background-color var(--sc-dur) var(--sc-ease);
}

/* ---------- «Коротко» ---------- */

.vm-article__summary {
  margin-block-start: var(--sc-space-10); /* rhythm/40 */
  inline-size: 100%;
  /* как у блока авторов: линия снизу, 80 до неё и 80 после (2026-10-08) */
  padding-block-end: var(--vm-a-block-gap);
  border-block-end: var(--hairline) solid var(--border);
}

.vm-article__main > .vm-article__summary + * { margin-block-start: var(--vm-a-block-gap); }

.vm-article__summary-title {
  margin: 0 0 var(--sc-space-3);
  color: var(--muted-foreground);
  text-transform: uppercase;
}

.vm-article__summary-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-3);
}

/* Маркер — круг 6 по центру интерлиньяжа первой строки */
.vm-article__summary-list li {
  position: relative;
  padding-inline-start: var(--sc-space-5);
  max-inline-size: var(--sc-measure);
}

.vm-article__summary-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  --vm-a-dot: var(--sc-space-1_5);
  inset-block-start: calc((var(--p-lh) - var(--vm-a-dot)) / 2);
  inline-size: var(--vm-a-dot);
  block-size: var(--vm-a-dot);
  border-radius: var(--sc-round-full);
  background: var(--foreground);
}

/* ---------- Текст статьи ---------- */

/* ============================================================
   Тело статьи из редактора WordPress

   В ките у прозы есть классы (`vm-article__p`, `vm-article__h2`,
   роли `sc-t-*`) — так собрана статья-образец. Но редактор их не ставит:
   из поля wysiwyg приходит голый `<p>`, `<h2>`, `<ul><li>`. Поэтому те же
   правила продублированы по тегу внутри `.vm-article__main`: разметка из
   редактора выглядит точно так же, без единого класса (2026-09-23).
   Селекторы с `:not([class])`: элементы кита со своими классами (прямой ответ,
   подпись к фото, джерела) эти правила не задевают — у них свои отступы.
   Тег обёрнут в `:where()`, чтобы вес был как у одного класса: иначе они
   перебивали сквозное правило base.css «после фото отступ ноль».

   Контейнер — `.vm-article__main` или обёртка `.vm-article__content`: если в теме
   the_content() выводится внутри своего <div>, ему нужен этот класс, иначе
   правила «прямой потомок» не сработают (правка 2026-09-27). `:is()` держит вес
   как у одного класса.

   Что это значит для темы: тело статьи — одно поле wysiwyg, репитер не нужен.
   Репитер нужен только «модулям»: прямой ответ, чеклист, промо, врезка с
   фото, FAQ, подписка, автор, джерела — у каждого своя разметка, см. HANDOFF.
   ============================================================ */

:is(.vm-article__main, .vm-article__content) > :where(h2:not([class])) {
  margin: var(--sc-space-14) 0 0;
  max-inline-size: var(--sc-measure);
  font: var(--h2-weight) var(--h2-size) / var(--h2-lh) var(--font-headings);
  letter-spacing: var(--h2-ls);
}

:is(.vm-article__main, .vm-article__content) > :where(h3:not([class])) {
  margin: var(--sc-space-8) 0 0;
  max-inline-size: var(--sc-measure);
  font: var(--h3-weight) var(--h3-size) / var(--h3-lh) var(--font-headings);
  letter-spacing: var(--h3-ls);
}

:is(.vm-article__main, .vm-article__content) > :where(p:not([class]), ul:not([class]), ol:not([class])) {
  margin: var(--stack-gap-md) 0 0;
  max-inline-size: var(--sc-measure);
  font: 400 var(--p-size) / var(--p-lh) var(--font-sans);
}

:is(.vm-article__main, .vm-article__content) > :where(ol:not([class])) {
  padding-inline-start: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-sm);
}

/* Маркированный список из редактора выглядит как чеклист шаблона: в макете
   статьи других маркированных списков нет, а из админки <ul> приходит без класса
   (замечание Николая 2026-09-27). Пункты и галочка — общие с .vm-article__checklist ниже. */
:is(.vm-article__main, .vm-article__content) > :where(ul:not([class])) {
  margin: var(--sc-space-5) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-sm);
}

:is(.vm-article__main, .vm-article__content) > :where(blockquote:not([class])) {
  margin: var(--sc-space-8) 0 0;
  max-inline-size: var(--sc-measure);
  padding-inline-start: var(--card-padding);
  border-inline-start: var(--hairline) solid var(--primary);
  font: 400 var(--p-large-size) / var(--p-large-lh) var(--font-sans);
}

:is(.vm-article__main, .vm-article__content) > :where(blockquote:not([class])) > p { margin: 0; }

:is(.vm-article__main, .vm-article__content) > :where(figure:not([class])) {
  margin: var(--vm-a-block-gap) 0 0;
  inline-size: 100%;
}

:is(.vm-article__main, .vm-article__content) > :where(figure:not([class])) figcaption {
  margin-block-start: var(--stack-gap-sm);
  color: var(--muted-foreground);
  font: 400 var(--p-mini-size) / var(--p-mini-lh) var(--font-sans);
}

/* Фото с подписью из редактора WordPress. Классический редактор отдаёт
   <figure class="wp-caption alignleft" style="width: 1158px"><img class="size-full wp-image-…">
   <figcaption class="wp-caption-text">, Gutenberg — <figure class="wp-block-image">
   с <figcaption class="wp-element-caption">. Классы, выравнивание и инлайн-ширину ставит
   сам WP: без этих правил кадр обтекался и вылезал на сайдбар (замечание Николая
   2026-09-27). Приводим к виду кадра кита: во всю колонку, без обтекания, воздух как у фото. */
:is(.vm-article__main, .vm-article__content) > :where(figure.wp-caption, figure.wp-block-image, div.wp-caption) {
  float: none;
  /* !important — единственный способ перебить style="width: …px" от WordPress */
  inline-size: 100% !important;
  max-inline-size: 100%;
  margin-inline: 0;
  margin-block: calc(var(--sc-media-gap) - var(--sc-media-own-gap, 0px));
}

:is(.vm-article__main, .vm-article__content) > :where(figure.wp-caption, figure.wp-block-image, div.wp-caption) + * {
  margin-block-start: 0;
}

/* Только картинки редактора: с классом wp-image-… где угодно в тексте, либо голый <img>
   прямо в теле или в абзаце. Картинки модулей кита (промо, автор) не задеваются */
:where(.vm-article__main, .vm-article__content) :where(img[class*="wp-image-"]),
:where(.vm-article__main, .vm-article__content) > :where(img:not([class])),
:where(.vm-article__main, .vm-article__content) > :where(p) > :where(img:not([class])) {
  display: block;
  float: none;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  margin: 0;
  background: var(--card);
}

:where(.vm-article__main, .vm-article__content) :where(.wp-caption-text, .wp-element-caption, figure.wp-caption > figcaption, figure.wp-block-image > figcaption) {
  margin: var(--stack-gap-sm) 0 0;
  padding: 0;
  max-inline-size: var(--sc-measure);
  color: var(--muted-foreground);
  font: 400 var(--p-mini-size) / var(--p-mini-lh) var(--font-sans);
  text-align: start;
}

/* Абзац с картинкой (так классический редактор вставляет фото без подписи) идёт
   на всю колонку, как кадр кита, а не на меру строки. :only-child не считает текст
   вокруг картинки — фото в абзаце с текстом тоже во всю колонку, так и задумано */
:is(.vm-article__main, .vm-article__content) > :where(p:has(> img:only-child)) {
  max-inline-size: none;
  margin-block: calc(var(--sc-media-gap) - var(--sc-media-own-gap, 0px));
}

/* Одиночная картинка с выравниванием внутри абзаца — тоже без обтекания */
:where(.vm-article__main, .vm-article__content) :where(img.alignleft, img.alignright, img.aligncenter, img.alignnone) {
  float: none;
  margin-inline: 0;
}

/* Ссылка внутри прозы — и из кита, и из редактора: подчёркивание кромкой,
   чтобы линия шла по базовой, а не резала выносные элементы */
:is(.vm-article__main, .vm-article__content) > p a,
:is(.vm-article__main, .vm-article__content) > ul a,
:is(.vm-article__main, .vm-article__content) > ol a,
:is(.vm-article__main, .vm-article__content) > blockquote a,
.vm-article__p a,
.vm-article__answer a,
.vm-article__faq-a a {
  color: inherit;
  text-decoration: none;
  border-block-end: var(--hairline) solid var(--primary);
  transition: color var(--sc-dur-fast) var(--sc-ease), border-color var(--sc-dur-fast) var(--sc-ease);
}

/* Наведение и фокус — только у этих же ссылок: селектор `.vm-article__main a:hover`
   зацепил бы и кнопку промо, она тоже <a>, и её текст темнел на тёмной заливке
   (замечание Николая 2026-09-23) */
:is(.vm-article__main, .vm-article__content) > p a:hover,
:is(.vm-article__main, .vm-article__content) > ul a:hover,
:is(.vm-article__main, .vm-article__content) > ol a:hover,
:is(.vm-article__main, .vm-article__content) > blockquote a:hover,
.vm-article__p a:hover,
.vm-article__answer a:hover,
.vm-article__faq-a a:hover { color: var(--primary); }

:is(.vm-article__main, .vm-article__content) > p a:focus-visible,
:is(.vm-article__main, .vm-article__content) > ul a:focus-visible,
:is(.vm-article__main, .vm-article__content) > ol a:focus-visible,
:is(.vm-article__main, .vm-article__content) > blockquote a:focus-visible,
.vm-article__answer a:focus-visible,
.vm-article__faq-a a:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}

/* Сноски в тексте (¹ ² ⁴) приходят символами — отдельной разметки не требуют */

/* Первый элемент тела не отбивается сверху: отступ даёт сам блок */
.vm-article__main > :where(:first-child:not([class])),
.vm-article__main > .vm-article__content:first-child > :where(:first-child:not([class])) { margin-block-start: 0; }

/* Обёртка текста из редактора, если тема выводит the_content() в своём <div>:
   во всю ширину колонки (у .vm-article__main flex-start) и без своих отступов —
   ритм задают абзацы внутри, как будто обёртки нет */
.vm-article__content {
  align-self: stretch;
  min-inline-size: 0;
  margin: 0;
}

.vm-article__h2 {
  margin: var(--sc-space-14) 0 0; /* rhythm/56 */
  max-inline-size: var(--sc-measure);
}

/* Первая фраза раздела отвечает на вопрос заголовка напрямую — так материал
   разбирают поиск и языковые модели. С 2026-09-28 это просто первый абзац,
   набранный лидом: без метки «Коротко», линии и отступа. Клиенту «Коротко»
   под каждым заголовком мешало, а Google прямо пишет, что дробить текст
   под ИИ не нужно. Итоговый блок «Коротко» — один, в начале статьи. */
.vm-article__answer {
  margin: var(--sc-space-6) 0 0;
  max-inline-size: var(--sc-measure);
}

.vm-article__p {
  margin: var(--stack-gap-md) 0 0;
  max-inline-size: var(--sc-measure);
}

.vm-article__checklist {
  margin: var(--sc-space-5) 0 0; /* rhythm/20 */
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-sm);
}

/* Пункт — голый <li>, как отдаёт репитер: ни класса, ни SVG внутри. Галочка
   рисуется псевдоэлементом, кегль задан по тегу (правка 2026-09-23 по замечанию
   Николая: «в li классы не обязательны»). */
.vm-article__checklist > li,
:is(.vm-article__main, .vm-article__content) > :where(ul:not([class])) > li {
  --vm-a-check: var(--sc-space-3_5);
  position: relative;
  padding-inline-start: calc(var(--vm-a-check) + var(--card-gap));
  max-inline-size: var(--sc-measure);
  font: 400 var(--p-size) / var(--p-lh) var(--font-sans);
}

.vm-article__checklist > li::before,
:is(.vm-article__main, .vm-article__content) > :where(ul:not([class])) > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc((var(--p-lh) - var(--vm-a-check)) / 2);
  inline-size: var(--vm-a-check);
  block-size: var(--vm-a-check);
  background: currentColor;
  /* та же галочка, что была в SVG (M2 7.5 L5.5 11 L12 3.5), обводкой в 1px */
  clip-path: polygon(10% 52%, 4% 60%, 39% 92%, 96% 22%, 88% 14%, 39% 76%);
}

/* ---------- Иллюстрация ----------
   Схема шире меры строки: она читается как объект, а не как проза,
   поэтому занимает всю колонку текста. Надписей на самом кадре нет —
   виды колоний названы в тексте раздела. */

/* Отступы сверху и снизу — сквозное правило о воздухе вокруг фото (base.css) */

.vm-article__figure-media {
  position: relative;
  display: block;
  background: var(--card);
}

.vm-article__figure-media img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.vm-article__figcaption {
  margin-block-start: var(--stack-gap-sm);
  color: var(--muted-foreground);
}

/* ---------- Инлайн-промо ---------- */

.vm-article__promo {
  display: flex;
  align-items: center;
  gap: var(--section-gap);
  inline-size: 100%;
  margin-block-start: var(--vm-a-block-gap);
  padding: var(--card-padding);
  background: var(--secondary);
}

.vm-article__promo-copy {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-sm);
  min-inline-size: 0;
}

.vm-article__promo-kicker {
  margin: 0;
  color: var(--muted-foreground);
  text-transform: uppercase;
}

.vm-article__promo-title { margin: 0; }

/* Button/Control · primary */
.vm-article__promo-cta,
.vm-article__subscribe-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: var(--control-square);
  padding-inline: var(--control-padding-x);
  border: var(--sc-line) solid transparent;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--primary-foreground);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  font: var(--button-weight) var(--button-size) / var(--button-lh) var(--font-headings);
  letter-spacing: var(--button-ls);
  transition: opacity var(--sc-dur) var(--sc-ease);
}

/* ---------- Навигация серии ---------- */

.vm-article__series {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-gap);
  inline-size: 100%;
  margin-block-start: var(--vm-a-block-gap); /* rhythm/48 */
  padding-block: var(--stack-gap-md);
  border-block: var(--hairline) solid var(--border);
  color: var(--muted-foreground);
}

.vm-article__series-next {
  color: var(--foreground);
  text-decoration: none;
  white-space: nowrap;
}

/* ---------- FAQ ---------- */

.vm-article__faq {
  inline-size: 100%;
  margin-block-start: var(--vm-a-block-gap);
}

.vm-article__faq h2 { margin: 0 0 var(--sc-space-6); }

.vm-article__faq-item {
  border-block-start: var(--hairline) solid var(--border);
}

.vm-article__faq-item:last-of-type {
  border-block-end: var(--hairline) solid var(--border);
}

.vm-article__faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--grid-gap);
  min-block-size: var(--control-square);
  padding-block: var(--stack-gap-md);
  list-style: none;
  cursor: pointer;
}

.vm-article__faq-q::-webkit-details-marker { display: none; }

/* Плюс-минус: линии в толщину кромок */
.vm-article__faq-sign {
  position: relative;
  flex: none;
  inline-size: var(--sc-space-3_5);
  block-size: var(--sc-space-3_5);
}

.vm-article__faq-sign::before,
.vm-article__faq-sign::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: 1px;
  background: currentColor;
  transition: transform var(--sc-dur) var(--sc-ease), opacity var(--sc-dur) var(--sc-ease);
}

.vm-article__faq-sign::after { transform: rotate(90deg); }

.vm-article__faq-item[open] .vm-article__faq-sign::after {
  transform: rotate(0deg);
  opacity: 0;
}

.vm-article__faq-a {
  margin: 0 0 var(--sc-space-6);
  max-inline-size: var(--sc-measure);
  color: var(--muted-foreground);
}

/* ---------- Инлайн-подписка ---------- */

.vm-article__subscribe {
  display: grid;
  grid-template-columns: minmax(0, 504fr) 340fr;
  inline-size: 100%;
  margin-block-start: var(--vm-a-block-gap);
  background: var(--secondary);
}

.vm-article__subscribe-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--stack-gap-md);
  padding: var(--sc-space-10);
}

.vm-article__subscribe-kicker {
  margin: 0;
  color: var(--muted-foreground);
  text-transform: uppercase;
}

.vm-article__subscribe-title { margin: 0; }

.vm-article__subscribe-note {
  margin: 0;
  max-inline-size: var(--sc-measure);
  color: var(--muted-foreground);
}

.vm-article__benefits {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-sm);
}

.vm-article__benefits li {
  position: relative;
  padding-inline-start: var(--sc-space-6);
}

/* галочка — тот же знак, что в чеклисте */
.vm-article__benefits li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  --vm-a-tick: var(--sc-space-3);
  inset-block-start: calc((var(--p-small-lh) - var(--vm-a-tick)) / 2);
  inline-size: var(--vm-a-tick);
  block-size: var(--vm-a-tick);
  background: currentColor;
  clip-path: polygon(14% 52%, 8% 60%, 40% 92%, 96% 22%, 88% 14%, 39% 76%);
}

.vm-article__subscribe-form {
  --sc-form-gap: var(--stack-gap-sm);   /* шаг колонки — см. правило в base.css */

  /* Поле + кнопка читаются как одна группа: отбиваем её от текста шире,
     чем расстояние внутри группы (28 между полем и кнопкой).
     Колонка уже даёт свой шаг — добавляем недостающее до 40 */
  margin-block-start: calc(var(--sc-space-10) - var(--stack-gap-md));

  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-sm);
  --vm-a-form-w: 424px;   /* ширина формы подписки в макете */
  inline-size: 100%;
  max-inline-size: var(--vm-a-form-w);
}

.vm-article__field {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-1_5);
}

.vm-article__label {
  color: var(--field-label);
  text-transform: uppercase;
}

/* Form/Input: высота 48, поля 16, рамка 1px */
.vm-article__input {
  block-size: var(--field-height);
  padding-inline: var(--field-padding-x);
  border: var(--sc-line) solid var(--field-border);
  border-radius: var(--radius);
  background: var(--field-bg);
  color: var(--field-text);
  font: 400 var(--p-size) / var(--p-lh) var(--font-sans);
}

.vm-article__input::placeholder { color: var(--field-placeholder); }

.vm-article__input:focus-visible {
  outline: none;
  border-color: var(--field-border-focus);
  box-shadow: 0 0 0 var(--sc-field-ring-w) var(--field-focus-ring);
}

.vm-article__input[aria-invalid="true"] { border-color: var(--field-border-error); }

.vm-article__error {
  margin: 0;
  color: var(--field-text-error);
}

/* кнопка отбита от поля общим правилом --card-padding */
.vm-article__subscribe-cta { align-self: flex-start; }

.vm-article__subscribe-foot {
  margin: 0;
  color: var(--muted-foreground);
}

.vm-article__subscribe-visual {
  overflow: hidden;
  background: var(--muted);
}

.vm-article__subscribe-visual img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* ---------- Автори: полоса под шапкой — фото, ім'я, статус, профіль / соцмережі (2026-10-07) ---------- */

.vm-article__persons {
  --vm-a-person-photo: 96px; /* квадрат фото в рядке автора (56 → 72 → 96, правка 2026-10-08) */
  display: flex;
  flex-direction: column;
  inline-size: 100%; /* в начале колонки текста (2026-10-07) */
  border-block-end: var(--hairline) solid var(--border); /* только нижняя линия (верх и разделитель сняты 2026-10-08) */
  /* линия отбита от авторов и от следующего блока ритмом блоков статьи — 80 (56 на телефоне) */
  padding-block-end: var(--vm-a-block-gap);
}

.vm-article__persons + * { margin-block-start: var(--vm-a-block-gap); }

/* Рядки «Автор: Ім'я» / «Стаття перевірена: Ім'я» */
.vm-article__person {
  display: flex;
  align-items: stretch; /* колонка текста в рост фото: имя и статус к верху, иконки к низу (2026-10-08) */
  gap: var(--stack-gap-md);
  padding-block: var(--sc-space-4);
  min-inline-size: 0;
}

.vm-article__person > .vm-article__person-text { justify-content: space-between; }


.vm-article__person-label { font-weight: var(--sc-weight-medium); }

.vm-article__person-photo {
  flex: none;
  display: block;
  inline-size: var(--vm-a-person-photo);
  block-size: var(--vm-a-person-photo);
  overflow: hidden;
  background: var(--muted);
}

.vm-article__person-photo--sm { --vm-a-person-photo: 40px; }

.vm-article__person-photo img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center; /* поясные кадры: лицо не уходит за край */
}

.vm-article__person-text {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-0_5);
  min-inline-size: 0;
}

/* Имя и должность — одной группой, между ними 8 (правка 2026-10-08) */
.vm-article__person-head {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-2);
}

.vm-article__person-text p { margin: 0; }

.vm-article__person-kicker {
  color: var(--muted-foreground);
  text-transform: uppercase;
}

.vm-article__person-name a {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-position: from-font;
}

.vm-article__person-role { color: var(--muted-foreground); }

/* Ссылки: профіль текстом, соцмережі — иконками 16 в ряд */
.vm-article__person-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sc-space-1); /* 4 между иконками (правка 2026-10-08; было 8) */
  margin-block-start: auto; /* к нижнему краю фото */
}

.vm-article__person-links a {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-position: from-font;
}

.vm-article__person-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--sc-space-6);  /* тап-зона 24 вокруг иконки 16 */
  block-size: var(--sc-space-6);
  text-decoration: none !important;
  color: var(--sc-neutral-600);
}

.vm-article__person-icon { display: block; }

@media (hover: hover) and (pointer: fine) {
  .vm-article__person-name a:hover { text-decoration: none; }
  .vm-article__person-links a:hover { text-decoration: none; }
  .vm-article__person-social:hover { color: var(--foreground); }
}

.vm-article__person-name a:focus-visible,
.vm-article__person-links a:focus-visible,
.vm-article__person-photo:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}

/* ---------- Цитата з підводкою: хто говорить → цитата → «Розповідає:» з фото праворуч ---------- */

.vm-article__quote {
  margin: var(--vm-a-block-gap) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-lg);
  inline-size: 100%;
}

.vm-article__quote-lead {
  margin: 0;
  max-inline-size: var(--sc-measure);
}

.vm-article__quote-lead a,
.vm-article__quote-who a {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-position: from-font;
}

/* Линия слева — через цитату и подпись (правка 2026-10-07; было: только у цитаты, подпись справа) */
.vm-article__quote-body {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-lg);
  padding-inline-start: var(--sc-space-6);
  border-inline-start: var(--sc-line) solid var(--foreground);
}

.vm-article__quote-text {
  margin: 0;
  max-inline-size: var(--sc-measure);
}

.vm-article__quote-text p { margin: 0; }

/* Подпись — слева, фото перед текстом */
.vm-article__quote-by {
  display: flex;
  align-items: center;
  gap: var(--stack-gap-md);
}

.vm-article__quote-who { font-weight: var(--sc-weight-medium); }

@media (hover: hover) and (pointer: fine) {
  .vm-article__quote-lead a:hover,
  .vm-article__quote-who a:hover { text-decoration: none; }
}

/* ---------- Автор (развёрнутый блок внизу — снят 2026-10-07, стили для отката) ---------- */

.vm-article__author {
  display: flex;
  gap: var(--section-gap);
  inline-size: 100%;
  margin-block-start: var(--vm-a-block-gap);
  padding-block-start: var(--sc-space-8);
  border-block-start: var(--hairline) solid var(--border);
}

.vm-article__avatar {
  flex: none;
  inline-size: var(--vm-a-avatar);
  block-size: var(--vm-a-avatar);
  object-fit: cover;
  /* Фото врача из системы — поясные и вертикальные кадры: при обрезке в квадрат
     держим верх, чтобы лицо не уходило за край (правка 2026-09-28) */
  object-position: top center;
}

.vm-article__bio {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap-sm);
  min-inline-size: 0;
}

.vm-article__bio p { margin: 0; }

.vm-article__author-kicker {
  color: var(--muted-foreground);
  text-transform: uppercase;
}

.vm-article__author-name a,
.vm-article__author-link {
  color: var(--foreground);
  text-decoration: none;
}

.vm-article__author-role,
.vm-article__author-bio {
  color: var(--muted-foreground);
  max-inline-size: var(--sc-measure);
}

/* ---------- Рейтинг и источники ---------- */

.vm-article__rating {
  display: flex;
  align-items: center;
  gap: var(--stack-gap-md);
  margin-block-start: var(--vm-a-block-gap-sm);
}

.vm-article__rating-note { color: var(--muted-foreground); }

/* Звёзды — кнопки: горят до наведённой/выбранной, после голоса замирают.
   Кнопка 12px мала для пальца — тап-зона 24 за счёт полей, без роста ряда */
.vm-article__stars {
  display: flex;
  gap: 0; /* шаг звёзд задают их боковые поля: 2+2 = 4, как в исходной картинке */
}

.vm-article__star {
  --vm-a-star: var(--sc-space-3);

  display: inline-flex;
  /* по вертикали поле 6 — тап-зона 24; по бокам 2, чтобы звёзды стояли плотно */
  padding: var(--sc-space-1_5) var(--sc-space-0_5);
  margin: calc(-1 * var(--sc-space-1_5)) 0;
  border: 0;
  background: none;
  color: var(--foreground);
  opacity: 0.25;
  cursor: pointer;
  transition: opacity var(--sc-dur-fast) var(--sc-ease), transform var(--sc-dur-fast) var(--sc-ease-out);
}

.vm-article__star svg { inline-size: var(--vm-a-star); block-size: var(--vm-a-star); display: block; }

.vm-article__star.sc-is-on { opacity: 1; }
.vm-article__star:hover { transform: scale(1.15); }

.vm-article__star:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: 0;
  opacity: 1;
}

.vm-article__rating.sc-is-voted .vm-article__star { cursor: default; }
.vm-article__rating.sc-is-voted .vm-article__star:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .vm-article__star { transition: none; }
  .vm-article__star:hover { transform: none; }
}

/* Мелкие подписи меру строки не держат: --sc-measure задан для прозы,
   а перечень источников и подпись к схеме набраны мини-кеглем — на нём
   65ch уже уводит строку в столбик посреди пустой колонки.
   Решение 2026-09-08: обе подписи идут на всю ширину колонки. */
.vm-article__sources {
  margin: var(--vm-a-block-gap-sm) 0 0;
  color: var(--muted-foreground);
}

/* ---------- Сайдбар ---------- */

.vm-article__sidebar {
  position: sticky;
  inset-block-start: calc(var(--sc-anchor-offset) + var(--stack-gap-md));
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-10);
}

.vm-article__toc-title,
.vm-article__services-title {
  margin: 0 0 var(--sc-space-3);
  color: var(--muted-foreground);
  text-transform: uppercase;
}

.vm-article__toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vm-article__toc-list li {
  display: flex;
  gap: var(--sc-space-4);
  padding-block: var(--stack-gap-md);
  border-block-start: var(--hairline) solid var(--border);
}

.vm-article__toc-list a {
  color: var(--foreground);
  text-decoration: none;
}

.vm-article__toc-num { color: var(--muted-foreground); }

.vm-article__services {
  padding: var(--card-padding);
  /* ПРОБА 2026-09-13: голубой 100 (--accent) вместо тёплого --secondary —
     карточка услуг читается как действие, а не как ещё один текстовый блок.
     Откат: background: var(--secondary). */
  background: var(--accent);
}

.vm-article__services-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vm-article__services-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--grid-gap);
  padding-block: var(--stack-gap-md);
  /* прожилки внутри карточки тоньше кромки — см. --sc-hairline-fine */
  border-block-start: var(--sc-hairline-fine) solid var(--border);
}

.vm-article__services-list li:first-child { border-block-start: 0; }

/* Услуга в теме — ссылка на страницу услуги (в ките просто текст). Вид как у
   пунктов содержания: цвет текста, без подчёркивания; :visited явно — иначе тема
   красит посещённые ссылки своим синим (замечание 2026-09-27) */
.vm-article__services-list a,
.vm-article__services-list a:visited {
  color: var(--foreground);
  text-decoration: none;
}

.vm-article__price {
  flex: none;
  color: var(--muted-foreground);
}

/* ---------- Состояния ----------
   В Figma их нет — обязательны по CLAUDE.md */

@media (hover: hover) and (pointer: fine) {
  .vm-article__share-link:hover { background: var(--muted); }
  .vm-article__promo-cta:hover,
  .vm-article__subscribe-cta:hover { background: var(--sc-primary-hover); }
  .vm-article__crumbs a:hover,
  .vm-article__toc-list a:hover,
  .vm-article__services-list a:hover,
  .vm-article__series-next:hover,
  .vm-article__author-link:hover { text-decoration: underline; }
}

.vm-article a:focus-visible,
.vm-article button:focus-visible,
.vm-article summary:focus-visible {
  outline: var(--sc-focus-w) solid var(--ring);
  outline-offset: var(--sc-focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  .vm-article__share-link,
  .vm-article__promo-cta,
  .vm-article__subscribe-cta,
  .vm-article__faq-sign::before,
  .vm-article__faq-sign::after { transition: none; }
}

/* ---------- Мобильный ---------- */

@media (max-width: 640px) {
  /* На узком экране ритм на ступень ниже: 80 съедало бы экран */
  .vm-article {
    --vm-a-block-gap: var(--sc-space-14);
    --vm-a-block-gap-sm: var(--sc-space-8);
  }

  /* Колонка: обкладинка первой, копия под ней. Фото не навылет, а в рамке
     полей: слева, справа, сверху от шапки и снизу до копии — ровно
     --page-margin-x (решение 2026-09-11). Шапка фиксированная, поэтому
     верхний отступ складывается из её высоты и поля. */
  .vm-article__hero {
    min-block-size: 0;
    padding-block: calc(var(--header-h, 80px) + var(--page-margin-x)) var(--section-padding-y-tight);
    padding-inline: var(--sc-pad-x);
    gap: var(--page-margin-x);
  }

  .vm-article__hero-media {
    /* Было static; relative — чтобы подпись к обложке считалась от кадра,
       а не улетала к шапке статьи (правка 2026-09-24). В потоке ведёт себя так же. */
    position: relative;
    /* Смещения из десктопного правила при relative уже работают — гасим их,
       иначе кадр уезжает влево и вниз на свои inset-ы */
    inset: auto;
    order: 1;
    inline-size: auto;
  }

  /* Копию раскладываем сеткой, вводную распускаем: строка возврата, плашки,
     заголовок, лид и подпись — отдельные строки (подсказка скролла убрана 2026-09-22) */
  .vm-article__hero-copy {
    order: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--section-gap) var(--sc-space-3);
  }

  .vm-article__hero-top { display: contents; }

  .vm-article__back { grid-area: 1 / 1; }
  .vm-article__chips { grid-area: 2 / 1; }


  .vm-article__title { grid-area: 3 / 1 / auto / -1; }
  .vm-article__dek { grid-area: 4 / 1 / auto / -1; }
  .vm-article__byline { grid-area: 5 / 1 / auto / -1; }

  /* Якоря на узком экране прячем (решение 2026-09-14): перечень разделов
     помогает, пока он липнет рядом с текстом, а в одну колонку он лишь
     отодвигает материал — читатель и так скроллит подряд. */
  .vm-article__toc { display: none; }

  /* Поля карточки подписки на узком экране те же 24, что у других карточек:
     40 съедали строку (правка 2026-09-14) */
  .vm-article__subscribe-copy { padding: var(--sc-space-6); }

  /* Сайдбар уходит под текст и перестаёт липнуть */
  .vm-article__body {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--section-gap);
  }

  .vm-article__sidebar { position: static; }

  .vm-article__promo,
  .vm-article__author {
    flex-direction: column;
    align-items: stretch;
    gap: var(--page-margin-x);
  }

  .vm-article__promo-cta,
  .vm-article__subscribe-cta { inline-size: 100%; }

  .vm-article__subscribe { grid-template-columns: minmax(0, 1fr); }
  .vm-article__subscribe-visual { order: -1; aspect-ratio: 16 / 9; }

  .vm-article__error[hidden] { display: none; }
}