/* Блог /blog/ — хаб и статьи. Подключается ПОСЛЕ dist-profile.css:
   <link href="/css/blog.css?v=…>. Пин ?v= обязателен и двигается при КАЖДОЙ правке файла:
   браузер иначе отдаёт закэшированный старый CSS к новой разметке.

   ОБЛАСТЬ ДЕЙСТВИЯ. Каждое правило начинается с body.vd-blog-page. Шелл выдаёт
   "vd-page vd-dist-page vd-blog-page", то есть страница НАСЛЕДУЕТ весь язык публичных
   страниц: токены --dp-*, крошки, .blk, .h2row, .side, .num, .reveal и хиро-карточка
   .cinema уже стилизованы dist-profile.css. Здесь они не переписываются, а НАСТРАИВАЮТСЯ
   под статью — и только под неё. Правило без префикса .vd-blog-page утекло бы на /d/{slug}
   и /catalog/{slug}/ — ровно тот класс регрессии, из-за которого глобальные селекторы общих
   классов у нас под запретом.

   ТЕМЫ. Переключение атрибутом (html[data-theme="dark"]), не медиазапросом. Своих цветов
   файл почти не заводит: всё считается от --card-bg / --text / --accent / --dp-*, поэтому
   обе темы получаются из одного набора правил. Исключение ровно одно и оно осознанное —
   содержимое .cinema: карточка хиро тёмная В ОБЕИХ темах (свой градиент), и токен текста
   на светлой теме сделал бы заголовок белым по белому. Там стоят литеральные alpha-белые,
   как у .ldico на лендинге.

   РИТМ. Проза узкая (мера чтения), фигуры и чек-лист — во всю колонку. Это не украшение:
   разная ширина — единственный способ показать границу «мы написали» / «витрина посчитала»
   без рамки вокруг каждого абзаца. */

/* ── Колонка страницы и мера чтения ───────────────────────────────────────────────────
   Обёртка 860px держит ОБЩУЮ левую границу для крошек, хиро, фигур и карточек: разъехавшиеся
   оси — первое, что видно на странице, где почти нет графики.

   Мера чтения задана отдельно и в ch, а не унаследована от обёртки. Прежняя редакция
   опиралась на 820px и комментарий «это ~70 знаков»; фактически в такой строке помещается
   под сотню — вдвое выше верхней границы удобочитаемой меры. Строка длиной ~62ch (около
   68 знаков основного текста) возвращает глазу нормальный возврат каретки, а высвободившаяся
   справа полоса даёт фигурам законное право быть шире прозы. */
body.vd-blog-page .seo-public-page-main__inner{max-width:860px;margin:0 auto}

/* ── Хиро: та же карточка .cinema, что у категорийных страниц ─────────────────────────
   Компонент общий, а не похожий: градиент, шум, радиус и слот водяного знака приезжают из
   dist-profile.css. Своего здесь три вещи, и каждая — следствие того, что у статьи нет
   ни CTA-кнопок, ни KPI-плитки:
     • --dp-cinema-col: текстовая колонка уже (у лендинга 660px), иначе знаку не остаётся
       места — он считает свою ширину именно от этого токена;
     • нижний паддинг обычный вместо 96px запаса под плитку;
     • радиус 28px вместо 34px: карточка статьи ниже лендинговой, и на меньшей высоте
       тот же радиус читается как «скруглили всё». */
body.vd-blog-page .cinema{--dp-cinema-col:520px;margin-top:4px;border-radius:28px;
  padding:clamp(30px,4.4vw,44px) var(--dp-cinema-pad) clamp(28px,3.6vw,38px)}
body.vd-blog-page .blog-hero{display:block}
/* Водяной знак. Слот (позиция, z-слой, снятие ниже 1000px) — общий .cinema__wm; здесь
   только рисование, как .ldico на лендинге. Ширина считается от остатка справа от текстовой
   колонки, поэтому знак физически не может лечь на заголовок: кончится место — кончится он.
   Цвет литеральный alpha-белый, а не токен: карточка тёмная в обеих темах. */
body.vd-blog-page .blog-wm{
  width:min(210px,calc(100% - var(--dp-cinema-col) - 2*var(--dp-cinema-pad) - 20px));
  height:auto;aspect-ratio:1;color:rgba(255,255,255,.09);
  fill:none;stroke:currentColor;stroke-width:.6;stroke-linecap:round;stroke-linejoin:round}
/* Заголовок. Селектор ДЛИННЕЕ, чем кажется нужным, и это не стиль, а необходимость:
   dist-profile.css держит `body.vd-dist-page .cinema h1` (0,2,2) — правило постера
   категории, 3.9rem с межстрочным 0.97. Оно выигрывало у короткого `.blog-hero__h1`
   (0,2,1) и печатало заголовок статьи плакатным кеглем. Добавленное звено .blog-hero
   поднимает вес до (0,3,1) и возвращает управление сюда.

   Кегль СОЗНАТЕЛЬНО ниже лендингового. У категории заголовок в два слова — он работает как
   вывеска; у статьи он длинный, и на той же величине превращает верх страницы в стену.
   ~41px на десктопе — редакторский размер: команда есть, стены нет. */
body.vd-blog-page .blog-hero .blog-hero__h1{margin:0;font-size:clamp(2.1rem,3.4vw,3.05rem);
  line-height:1.08;letter-spacing:-.03em;font-weight:700;text-wrap:balance;color:inherit}
body.vd-blog-page .blog-hero__lead{margin:16px 0 0;font-size:1.41rem;line-height:1.5;
  letter-spacing:-.012em;color:rgba(245,245,247,.76);max-width:48ch;text-wrap:pretty}
/* Хаб: заголовок раздела короткий, поэтому кегль ниже — «Блог» плакатным кеглем выглядел бы
   вывеской, а не оглавлением. */
body.vd-blog-page .blog-hero--hub .blog-hero__h1{font-size:clamp(1.9rem,2.9vw,2.5rem)}

/* Даты и время чтения. Табличные цифры (.num здесь не навесить — это <time>), приглушённый
   тон: метаданные важны читателю, но не соревнуются с заголовком за внимание. Прозрачность
   выбрана по КОНТРАСТУ на градиенте карточки, а не на глаз: на .52 строка давала 4.7:1 —
   впритык к порогу мелкого текста, и любое потемнение градиента увело бы её под порог. */
body.vd-blog-page .blog-dates{margin:20px 0 0;font-size:.9rem;font-weight:600;
  letter-spacing:.01em;color:rgba(245,245,247,.62);font-variant-numeric:tabular-nums lining-nums;
  display:flex;align-items:center;flex-wrap:wrap;gap:0 9px}
body.vd-blog-page .blog-dates__t,
body.vd-blog-page .blog-dates__r{white-space:nowrap}
body.vd-blog-page .blog-dates__sep{color:rgba(245,245,247,.34)}

/* ── Тело статьи ──────────────────────────────────────────────────────────────────────
   Секции берут ритм у section.blk (padding:40px 0 6px) из dist-profile.css. Проза идёт
   БЕЗ карточки — намеренно: карточка вокруг каждого абзаца превращает статью в набор
   плиток, а читать её надо подряд. Карточками выделено только то, что статьёй не является:
   числа из снимка, выноска и чек-лист.

   Разделитель между секциями — волосяная линия, а не отступ: при восьми разделах один
   только воздух перестаёт читаться как граница, а линия в полный тон превратила бы статью
   в таблицу. Он идёт между секциями, но не перед первой. */
body.vd-blog-page .blog-article{display:block}
body.vd-blog-page .blog-article .blk{padding:34px 0 4px}
body.vd-blog-page .blog-article .blk+.blk{
  border-top:1px solid color-mix(in srgb,var(--card-border) 52%,transparent)}
/* КЕГЛЬ ПРОЗЫ ЗАДАН НА КОНТЕЙНЕРЕ, а мера — в ch от него же. Так «сколько знаков в строке»
   считается в тех единицах, в которых мера и определена, и не разъедется, если кегль
   поменяют: em/ch внутри отсчитываются от 1.26rem, а не от 13.5px шелла.

   Почему ПРОЗА КРУПНЕЕ ОСТАЛЬНОГО САЙТА. База сайта — 13.5px: это плотный интерфейс
   каталога, где на экран надо уложить таблицу. У страницы, единственная работа которой —
   чтение подряд, требования обратные. При базовом кегле разрыв «h2 25px / текст 14px»
   давал отношение 1.75 — заголовки читались как вывески над мелким шрифтом. ~17px
   возвращают отношение к 1.5, то есть к нормальной текстовой иерархии. */
body.vd-blog-page .blog-prose{max-width:62ch;font-size:1.26rem}
body.vd-blog-page .blog-prose p{margin:0 0 1.05em;font-size:1em;line-height:1.72;
  letter-spacing:-.011em;color:color-mix(in srgb,var(--text) 86%,transparent);
  max-width:none;text-wrap:pretty}
body.vd-blog-page .blog-prose p:last-child{margin-bottom:0}
body.vd-blog-page .blog-prose b,body.vd-blog-page .blog-prose strong{color:var(--text);font-weight:620}

/* Маркированный список: свой маркер вместо disc — точка акцентом, выровненная по базовой
   линии первой строки. list-style снят, поэтому «схлопнуть» его правкой текста нельзя. */
body.vd-blog-page .blog-list{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:11px}
body.vd-blog-page .blog-list li{position:relative;padding-left:24px;font-size:.95em;
  line-height:1.6;letter-spacing:-.008em;color:color-mix(in srgb,var(--text) 86%,transparent)}
body.vd-blog-page .blog-list li::before{content:"";position:absolute;left:4px;top:.68em;
  width:6px;height:6px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 40%,transparent)}

/* ── Выноска ──────────────────────────────────────────────────────────────────────────
   Та мысль раздела, ради которой его цитируют. Панель в тон акцента, а не вертикальная
   черта слева: черта — самый заезженный приём цитаты, и рядом с четырьмя карточками данных
   она читалась бы как ещё один блок «из витрины». Шире прозы намеренно: выноска обязана
   ломать ритм чтения, иначе она не выноска, а абзац покрупнее. */
body.vd-blog-page .blog-pull{margin:26px 0 4px;padding:clamp(20px,2.7vw,26px) clamp(22px,3vw,30px);
  border-radius:var(--dp-r);border:1px solid var(--dp-accent-line);
  background:
    linear-gradient(150deg,var(--dp-accent-soft),color-mix(in srgb,var(--card-bg) 90%,var(--accent)))}
body.vd-blog-page .blog-pull p{margin:0;font-size:clamp(1.34rem,2.1vw,1.52rem);line-height:1.42;
  letter-spacing:-.022em;font-weight:600;color:var(--text);text-wrap:pretty;max-width:42ch}

/* ── Чек-лист карточками ──────────────────────────────────────────────────────────────
   Две колонки от 620px ширины сетки, одна на телефоне — auto-fit, а не фиксированные две:
   при нечётном числе пунктов последний занимает свою колонку и не растягивается на всю
   ширину, а список из трёх пунктов не выглядит обломанным.
   Номер — CSS-счётчик: в разметке его нет, значит перенумеровать при вставке пункта в
   середину нечего и забыть нечего. */
body.vd-blog-page .blog-checks{list-style:none;margin:24px 0 2px;padding:0;display:grid;gap:13px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));counter-reset:blogchk}
body.vd-blog-page .blog-check{counter-increment:blogchk;position:relative;display:grid;gap:7px;
  align-content:start;padding:18px 20px 19px;border-radius:var(--dp-r-sm);background:var(--card-bg);
  border:1px solid var(--card-border);box-shadow:var(--dp-shadow-sm)}
body.vd-blog-page .blog-check__t{font-size:1.15rem;font-weight:650;letter-spacing:-.018em;
  line-height:1.26;color:var(--text);padding-right:26px}
body.vd-blog-page .blog-check__t::after{content:counter(blogchk);position:absolute;right:18px;top:18px;
  font-size:.82rem;font-weight:700;line-height:1;color:var(--accent);opacity:.5;
  font-variant-numeric:tabular-nums lining-nums}
body.vd-blog-page .blog-check__d{font-size:1.02rem;line-height:1.52;letter-spacing:-.006em;
  color:var(--text-secondary)}

/* ── Живой блок: общая оболочка ───────────────────────────────────────────────────────
   ЕДИНСТВЕННЫЕ места страницы, где есть цифры (см. routes/blog_public.py). Все четыре
   оформлены ОДИНАКОВО и намеренно: читатель обязан отличать «мы написали» от «витрина
   посчитала» по одному признаку на всей странице, иначе четыре разных оформления он
   прочитает как четыре разных по надёжности источника.

   Признак — карточка плюс короткая акцентная засечка сверху слева. Засечка, а не рамка
   акцентом и не градиент: четыре светящихся блока подряд превратили бы разбор в дашборд, а
   статья остаётся текстом, к которому есть доказательства. Шире прозы — по той же причине,
   что и выноска. */
/* ТОН ПОДПИСЕЙ. Не var(--text-tertiary), хотя по смыслу это именно третичный текст:
   на светлой теме он даёт 3.3:1 к карточке — ниже порога читаемости мелкого текста, и
   сноска «что это и на какую дату» оказалась бы самым важным, что хуже всего видно.
   Смесь со вторичным поднимает контраст до ~4.9:1, оставляя подпись тише основного
   текста. Считано, а не подобрано на глаз. */
body.vd-blog-page .blog-fig{position:relative;margin:26px 0 2px;padding:clamp(19px,2.8vw,25px);
  border-radius:var(--dp-r);background:var(--card-bg);border:1px solid var(--card-border);
  box-shadow:var(--dp-shadow-sm)}
body.vd-blog-page .blog-fig::before{content:"";position:absolute;left:clamp(19px,2.8vw,25px);top:-1px;
  width:34px;height:2px;border-radius:0 0 2px 2px;background:var(--accent);opacity:.9}
body.vd-blog-page .h2row--sub{margin:0 0 15px}
body.vd-blog-page .blog-fig__h{margin:0;font-size:1.2rem;font-weight:650;
  letter-spacing:-.018em;line-height:1.25;color:var(--text)}
/* Правая подпись «на какую дату». Своё правило нужно потому, что общий .h2row .side ставит
   0.84rem — рядом с подросшим заголовком фигуры она читалась бы петитом. Вес селектора
   равен исходному, спор решает порядок листов (blog.css подключается позже). */
body.vd-blog-page .blog-fig .side{font-size:.94rem;color:color-mix(in srgb,var(--text-tertiary) 40%,var(--text-secondary))}
body.vd-blog-page .blog-fig__note{margin:17px 0 0;padding-top:15px;
  border-top:1px solid color-mix(in srgb,var(--card-border) 66%,transparent);
  font-size:.95rem;line-height:1.5;color:color-mix(in srgb,var(--text-tertiary) 40%,var(--text-secondary));max-width:none}

/* ── Блок: разброс цен внутри категорий ───────────────────────────────────────────────*/
body.vd-blog-page .blog-spread{list-style:none;margin:0;padding:0;display:grid;gap:0}
body.vd-blog-page .blog-spread__row{display:grid;gap:10px;padding:16px 0;
  border-top:1px solid color-mix(in srgb,var(--card-border) 62%,transparent)}
body.vd-blog-page .blog-spread__row:first-child{border-top:0;padding-top:0}
body.vd-blog-page .blog-spread__row:last-child{padding-bottom:0}
body.vd-blog-page .blog-spread__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
body.vd-blog-page .blog-spread__n{font-size:1.17rem;font-weight:650;letter-spacing:-.018em;
  color:var(--text)}
body.vd-blog-page a.blog-spread__n{transition:color .2s}
body.vd-blog-page a.blog-spread__n:hover{color:var(--accent)}
body.vd-blog-page .blog-spread__m{font-size:.92rem;font-weight:600;color:color-mix(in srgb,var(--text-tertiary) 40%,var(--text-secondary));
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:.005em}
/* Три величины в ряд. auto-fit, а не фиксированные три колонки: на узком экране они
   встают в столбец сами, и подпись не отрывается от своего числа. */
body.vd-blog-page .blog-spread__nums{margin:0;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
body.vd-blog-page .blog-spread__cell{margin:0;padding:10px 12px;border-radius:var(--dp-r-sm);
  background:color-mix(in srgb,var(--dp-surface-2) 66%,transparent);
  border:1px solid color-mix(in srgb,var(--card-border) 58%,transparent)}
body.vd-blog-page .blog-spread__cell dt{margin:0;font-size:.77rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:color-mix(in srgb,var(--text-tertiary) 40%,var(--text-secondary))}
body.vd-blog-page .blog-spread__cell dd{margin:6px 0 0;font-size:1.2rem;font-weight:680;
  letter-spacing:-.018em;color:var(--text)}
/* Середина выделена рамкой акцента, а не размером: медиана — не «главное» число, это
   ориентир между границами, и увеличенный кегль соврал бы про её вес. */
body.vd-blog-page .blog-spread__cell--mid{border-color:var(--dp-accent-line);
  background:var(--dp-accent-soft)}
body.vd-blog-page .blog-spread__k{font-size:.96rem;font-weight:600;letter-spacing:-.006em;
  color:var(--text-secondary)}

/* ── Блок: возраст прайс-листов ───────────────────────────────────────────────────────
   Штрих-код: один штрих — один поставщик, слева свежие. Единичная диаграмма выбрана вместо
   полосы долей потому, что весь смысл блока — показать ХВОСТ, а в процентной полосе один
   поставщик из двух десятков стал бы четырёхпроцентной ниточкой.
   Цвета — токены наличия/транзита/заказа из dist-profile.css, то есть ровно та шкала
   «живое → остывшее», которой на сайте уже размечена доступность. Ступени между ними
   считаются color-mix, а не подобраны на глаз, поэтому в тёмной теме ряд остаётся ровным
   сам собой. */
body.vd-blog-page .blog-fresh__bars{display:block;width:100%;height:auto}
body.vd-blog-page .blog-fresh__t.is-b1{fill:var(--dp-stock)}
body.vd-blog-page .blog-fresh__t.is-b2{fill:color-mix(in srgb,var(--dp-stock) 58%,var(--dp-transit))}
body.vd-blog-page .blog-fresh__t.is-b3{fill:var(--dp-transit)}
body.vd-blog-page .blog-fresh__t.is-b4{fill:color-mix(in srgb,var(--dp-transit) 42%,var(--dp-order))}
body.vd-blog-page .blog-fresh__t.is-b5{fill:var(--dp-order)}
body.vd-blog-page .blog-fresh__leg{list-style:none;margin:15px 0 0;padding:0;display:flex;
  flex-wrap:wrap;gap:7px 18px}
body.vd-blog-page .blog-fresh__lg{display:inline-flex;align-items:center;gap:7px;
  font-size:.92rem;font-weight:600;letter-spacing:-.006em;color:var(--text-secondary)}
body.vd-blog-page .blog-fresh__lg b{color:var(--text);font-weight:680}
body.vd-blog-page .blog-fresh__sw{width:10px;height:10px;border-radius:3px;flex:none}
body.vd-blog-page .blog-fresh__sw.is-b1{background:var(--dp-stock)}
body.vd-blog-page .blog-fresh__sw.is-b2{background:color-mix(in srgb,var(--dp-stock) 58%,var(--dp-transit))}
body.vd-blog-page .blog-fresh__sw.is-b3{background:var(--dp-transit)}
body.vd-blog-page .blog-fresh__sw.is-b4{background:color-mix(in srgb,var(--dp-transit) 42%,var(--dp-order))}
body.vd-blog-page .blog-fresh__sw.is-b5{background:var(--dp-order)}
body.vd-blog-page .blog-fresh__lead{margin:15px 0 0;font-size:1.08rem;line-height:1.55;
  letter-spacing:-.006em;color:var(--text-secondary)}
body.vd-blog-page .blog-fresh__lead b{color:var(--text);font-weight:650}

/* ── Блок: режим переоценки цен ───────────────────────────────────────────────────────
   Три ячейки режимов + полоса их долей. Цвета — --mi-* из variables.css, те же, что у
   барометра на /d/{slug}: одна и та же величина, показанная на двух страницах разными
   цветами, читается как две разные величины.
   Активный режим рынка помечен фоном И словами в разметке (см. .blog-baro__now): одна
   подсветка сказала бы «здесь больше всего», а это другой факт — рынок считается по своим
   порогам и с самой полной корзиной совпадать не обязан. */
body.vd-blog-page .blog-baro__zones{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body.vd-blog-page .blog-baro__z{position:relative;display:grid;gap:3px;align-content:start;
  padding:13px 15px 14px;border-radius:var(--dp-r-sm);
  background:color-mix(in srgb,var(--dp-surface-2) 58%,transparent);
  border:1px solid color-mix(in srgb,var(--card-border) 56%,transparent);
  border-top-width:2px;border-top-style:solid}
body.vd-blog-page .blog-baro__z.is-z1{border-top-color:var(--mi-calm)}
body.vd-blog-page .blog-baro__z.is-z2{border-top-color:var(--mi-wave)}
body.vd-blog-page .blog-baro__z.is-z3{border-top-color:var(--mi-storm)}
body.vd-blog-page .blog-baro__z.is-now.is-z1{background:var(--mi-calm-bg)}
body.vd-blog-page .blog-baro__z.is-now.is-z2{background:var(--mi-wave-bg)}
body.vd-blog-page .blog-baro__z.is-now.is-z3{background:var(--mi-storm-bg)}
body.vd-blog-page .blog-baro__zn{font-size:.77rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;color:color-mix(in srgb,var(--text-tertiary) 40%,var(--text-secondary))}
body.vd-blog-page .blog-baro__zv{font-size:clamp(1.7rem,3vw,2.15rem);font-weight:720;
  letter-spacing:-.035em;line-height:1.05;color:var(--text)}
body.vd-blog-page .blog-baro__zu{font-size:.86rem;line-height:1.3;color:color-mix(in srgb,var(--text-tertiary) 40%,var(--text-secondary))}
body.vd-blog-page .blog-baro__now{margin-top:7px;font-size:.76rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;color:var(--text-secondary)}
body.vd-blog-page .blog-baro__bar{margin:13px 0 0;height:8px;border-radius:99px;overflow:hidden;
  display:flex;background:color-mix(in srgb,var(--dp-surface-3) 86%,var(--card-bg))}
body.vd-blog-page .blog-baro__bar>span{display:block;height:100%;min-width:2px}
body.vd-blog-page .blog-baro__bar>span.is-z1{background:var(--mi-calm)}
body.vd-blog-page .blog-baro__bar>span.is-z2{background:var(--mi-wave)}
body.vd-blog-page .blog-baro__bar>span.is-z3{background:var(--mi-storm)}
body.vd-blog-page .blog-baro__lead{margin:15px 0 0;font-size:1.08rem;line-height:1.55;
  letter-spacing:-.006em;color:var(--text-secondary)}
body.vd-blog-page .blog-baro__lead b{color:var(--text);font-weight:650}

/* ── Блок: из чего складывается видимая позиция ───────────────────────────────────────
   Полоса в языке .availbar с /d/{slug} (те же токены --dp-stock/--dp-transit и та же
   светлая лессировка сверху), но с ТРЕТЬИМ сегментом — пересечением. Именно ради него блок
   и существует: пересечение объясняет, почему склад и транзит нельзя сложить, и растворить
   его в складе значило бы убрать доказательство. */
body.vd-blog-page .blog-mix__bar{margin:0;height:18px;border-radius:9px;overflow:hidden;display:flex;
  background:color-mix(in srgb,var(--dp-surface-3) 88%,var(--card-bg));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08)}
body.vd-blog-page .blog-mix__bar>span{display:block;height:100%;min-width:2px;
  background-image:linear-gradient(180deg,rgba(255,255,255,.26),transparent 48%)}
body.vd-blog-page .blog-mix__bar>span.is-s1{background-color:var(--dp-stock)}
body.vd-blog-page .blog-mix__bar>span.is-s3{background-color:color-mix(in srgb,var(--dp-stock) 48%,var(--dp-transit))}
body.vd-blog-page .blog-mix__bar>span.is-s2{background-color:var(--dp-transit)}
body.vd-blog-page .blog-mix__leg{list-style:none;margin:15px 0 0;padding:0;display:grid;gap:9px}
body.vd-blog-page .blog-mix__lg{display:flex;align-items:center;gap:11px;font-size:1rem}
body.vd-blog-page .blog-mix__sw{width:10px;height:10px;border-radius:3px;flex:none}
body.vd-blog-page .blog-mix__sw.is-s1{background:var(--dp-stock)}
body.vd-blog-page .blog-mix__sw.is-s3{background:color-mix(in srgb,var(--dp-stock) 48%,var(--dp-transit))}
body.vd-blog-page .blog-mix__sw.is-s2{background:var(--dp-transit)}
body.vd-blog-page .blog-mix__ln{flex:1 1 auto;min-width:0;font-weight:600;letter-spacing:-.004em;
  color:var(--text-secondary)}
body.vd-blog-page .blog-mix__lg b{color:var(--text);font-weight:680;white-space:nowrap}
body.vd-blog-page .blog-mix__lp{flex:none;min-width:62px;text-align:right;color:color-mix(in srgb,var(--text-tertiary) 40%,var(--text-secondary));
  font-weight:600}
body.vd-blog-page .blog-mix__lead{margin:15px 0 0;font-size:1.08rem;line-height:1.55;
  letter-spacing:-.006em;color:var(--text-secondary)}
body.vd-blog-page .blog-mix__lead b{color:var(--text);font-weight:650}

/* ── Ряд ссылок «куда дальше» ─────────────────────────────────────────────────────────
   Капсулы в языке .bchip. Закрытый гейт снимает ссылку в рендере, а не прячет её здесь:
   display:none оставил бы анкор в DOM и в разметке для робота. */
body.vd-blog-page .blog-next{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0}
body.vd-blog-page .blog-next__a{display:inline-flex;align-items:center;gap:8px;
  padding:12px 19px;border-radius:999px;font-size:1.05rem;font-weight:620;letter-spacing:-.01em;
  color:var(--text);background:var(--card-bg);
  border:1px solid color-mix(in srgb,var(--card-border) 78%,var(--accent));
  box-shadow:var(--dp-shadow-sm);
  transition:transform .25s var(--vd-apple-ease-out),border-color .2s,color .2s,box-shadow .25s}
body.vd-blog-page .blog-next__a::after{content:"→";color:var(--accent);font-weight:700;
  transition:transform .25s var(--vd-apple-ease-out)}
body.vd-blog-page .blog-next__a:hover{transform:translateY(-2px);color:var(--accent);
  border-color:var(--dp-accent-line);box-shadow:var(--dp-shadow)}
body.vd-blog-page .blog-next__a:hover::after{transform:translateX(3px)}

/* ── Хаб: карточки статей ─────────────────────────────────────────────────────────────
   Сетка НА ВЫРОСТ: auto-fill с минимальной колонкой, а не «две колонки». При одной статье
   карточка занимает всю ширину (:only-child), при десятке сетка заполняется сама — и
   возвращаться сюда за вёрсткой второго десятка не придётся. Прежняя редакция жёстко
   ставила одну колонку «пока статей мало», то есть откладывала работу до момента, когда
   она станет срочной. */
body.vd-blog-page .blog-cards{list-style:none;margin:0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
body.vd-blog-page .blog-cards>li{display:flex}
body.vd-blog-page .blog-cards>li:only-child{grid-column:1/-1}
body.vd-blog-page .blog-card{flex:1 1 auto;display:grid;gap:10px;align-content:start;
  padding:clamp(20px,3vw,26px);border-radius:var(--dp-r);
  background:var(--card-bg);border:1px solid var(--card-border);box-shadow:var(--dp-shadow-sm);
  transition:transform .3s var(--vd-apple-ease-out),border-color .2s,box-shadow .3s}
body.vd-blog-page .blog-card:hover{transform:translateY(-2px);
  border-color:var(--dp-accent-line);box-shadow:var(--dp-shadow)}
body.vd-blog-page .blog-card__m{display:flex;align-items:center;flex-wrap:wrap;gap:0 9px;
  font-size:.86rem;font-weight:650;letter-spacing:.02em;color:color-mix(in srgb,var(--text-tertiary) 40%,var(--text-secondary));
  font-variant-numeric:tabular-nums lining-nums}
body.vd-blog-page .blog-card__date,
body.vd-blog-page .blog-card__read{white-space:nowrap}
body.vd-blog-page .blog-card__sep{color:color-mix(in srgb,var(--text-tertiary) 55%,transparent)}
body.vd-blog-page .blog-card__t{font-size:clamp(1.42rem,2.4vw,1.78rem);font-weight:660;
  letter-spacing:-.024em;line-height:1.2;color:var(--text);text-wrap:balance}
body.vd-blog-page .blog-card:hover .blog-card__t{color:var(--accent)}
body.vd-blog-page .blog-card__d{font-size:1.12rem;line-height:1.55;letter-spacing:-.006em;
  color:var(--text-secondary);max-width:64ch}
body.vd-blog-page .blog-card__go{display:inline-flex;align-items:center;gap:7px;margin-top:4px;
  font-size:1.02rem;font-weight:650;letter-spacing:-.008em;color:var(--accent)}
body.vd-blog-page .blog-card__go::after{content:"→";font-weight:700;
  transition:transform .25s var(--vd-apple-ease-out)}
body.vd-blog-page .blog-card:hover .blog-card__go::after{transform:translateX(3px)}

/* ── Телефон ─────────────────────────────────────────────────────────────────────────
   560px — канонический порог контентных блоков в dist-profile.css. Ниже него режимы
   барометра встают в столбец: три ячейки с крупным числом в ряд на телефоне дают либо
   перенос слова «поставщиков» в три строки, либо нечитаемый кегль. */
@media(max-width:560px){
  body.vd-blog-page .blog-hero__lead{font-size:1.2rem}
  body.vd-blog-page .blog-prose{font-size:1.19rem}
  body.vd-blog-page .blog-card__t{font-size:1.32rem}
  body.vd-blog-page .blog-next__a{padding:10px 16px;font-size:.98rem}
  body.vd-blog-page .blog-spread__nums{grid-template-columns:1fr 1fr}
  body.vd-blog-page .blog-spread__cell{padding:9px 11px}
  body.vd-blog-page .blog-baro__zones{grid-template-columns:1fr}
  body.vd-blog-page .blog-baro__z{grid-template-columns:1fr auto;align-items:center;
    padding:12px 14px}
  body.vd-blog-page .blog-baro__zn{grid-column:1;grid-row:1}
  body.vd-blog-page .blog-baro__zu{grid-column:1;grid-row:2}
  body.vd-blog-page .blog-baro__zv{grid-column:2;grid-row:1/3;text-align:right}
  body.vd-blog-page .blog-baro__now{grid-column:1/-1;margin-top:2px}
  body.vd-blog-page .blog-mix__lp{min-width:48px}
}

/* Ни одного из hover-подъёмов этого файла нет в списке dist-profile.css (там перечисление
   селекторов вручную, без wildcard), поэтому свой блок обязателен — иначе страница осталась
   бы единственной на сайте, игнорирующей системную настройку «меньше движения». */
@media (prefers-reduced-motion:reduce){
  body.vd-blog-page .blog-card,
  body.vd-blog-page .blog-next__a,
  body.vd-blog-page .blog-next__a::after,
  body.vd-blog-page .blog-card__go::after{transition:none}
  body.vd-blog-page .blog-card:hover,
  body.vd-blog-page .blog-next__a:hover{transform:none}
  body.vd-blog-page .blog-next__a:hover::after,
  body.vd-blog-page .blog-card:hover .blog-card__go::after{transform:none}
}