/* Лента блога и страница статьи - слой САЙТА.

   ЗАЧЕМ ФАЙЛ ПОЯВИЛСЯ. Классы `ls-blog__*` и `ls-post__*` печатались разметкой и не были
   объявлены НИГДЕ: замерено 04.09.2026 грепом по обоим зеркалам - ноль вхождений. Наружу это
   вышло ровно так, как обещает записанная грабля «класс, который ставят, но не объявляют, не
   даёт ни ошибки, ни следа»: заголовок статьи в ленте показывался браузерным синим с
   подчёркиванием, потому что он лежит внутри ссылки, а своего правила у него не было.

   КИТА У ЛЕНТЫ НЕТ, И ЭТО СКАЗАНО ВСЛУХ. Остальные части слоя - зеркала макетов и руками не
   правятся; лента блога у образца собрана СЕКЦИЯМИ, а тип секции в нашем проекте это целый
   пакет (раскладки, оси Customize, скелетон, плитка каталога, витрина). Пока пакета нет, лента
   печатается видом страницы, и стили ей нужны свои - но написаны они на тех же переменных, что
   читает весь слой, чтобы палитра, гарнитуры и скругления дела доставались ей даром.

   ЧИСЛА ЗДЕСЬ СВОИ, А НЕ СНЯТЫЕ, и это честная разница с зеркалами: сверять их не с чем.
   Каждое объявлено переменной на корне ленты - у пакета, который однажды придёт ей на смену,
   будет куда встать.

   УЗОСТЬ РЕШАЕТ КОНТЕЙНЕР, а не окно: правило проекта про всю вёрстку сайта. Порог 700 - тот
   же, что у секций. */

.ls-blog,
.ls-post{
  /* КОЛОНКА ЧТЕНИЯ УЖЕ ОБЩЕЙ ШИРИНЫ САЙТА, И ЭТО НЕ СПОР С НЕЙ. `--ls-max` (1536) - предел
     СЕКЦИИ, внутри которой раскладка сама решает, где текст, а где снимок. Здесь раскладки
     нет, есть строка текста: на 1536 она вышла бы под 250 знаков, то есть вчетверо длиннее
     читаемой. Контейнер сайта остаётся общим - сужается только содержимое, ровно как
     объявлено у `--ls-max`. */
  --ls-blog-max:760px;
  --ls-blog-gap:40px;

  padding-inline:var(--ls-page-gut, 24px);
  color:var(--ls-ink);
  font-family:var(--ls-text-face), system-ui, sans-serif;
}

.ls-blog{
  inline-size:min(100%, var(--ls-blog-max));
  margin-inline:auto;
  padding-block:64px 96px;
}

/* СТАТЬЯ ВО ВСЮ БУМАГУ, А КОЛОНКА ЧТЕНИЯ - У ДЕТЕЙ (SCRUM-479). Раскладкам шапки и подвала
   нужны три ширины, как на рынке: текст шапки 896, обложка и похожие статьи 1024, тело - колонка
   чтения. Hero выходит за поля бумаги целиком. Прежде вся статья была одной колонкой 760, и
   шапке шире тела было негде встать. */
.ls-post{
  --ls-post-wide:1024px;
  --ls-post-head:896px;

  padding-block:0 96px;
}
.ls-post > *{max-inline-size:var(--ls-blog-max);margin-inline:auto}

/* --- ЛЕНТА --- */

.ls-blog{display:flex;flex-direction:column;gap:var(--ls-blog-gap)}

/* Заголовок ленты - той же гарнитурой и того же рода, что заголовок статьи: это две страницы
   одного раздела, и разный вид читался бы как разные сайты. */
.ls-blog__h{
  margin:0;
  font-family:var(--ls-head-face), Georgia, serif;
  font-size:clamp(30px, 4.4cqi, 46px);
  line-height:1.15;
  font-weight:600;
}

.ls-blog__card{display:flex;flex-direction:column;gap:8px}

/* ОБЛОЖКА: своё число одно - доля сторон. Скругление, ширина и отступы приходят от слоя, то
   есть меняются вместе с темой дела; жёсткое соотношение нужно, чтобы карточки в ленте не
   прыгали по высоте от портретных и квадратных снимков. `cover` обрезает, а не сплющивает:
   растянутое лицо человек замечает мгновенно, обрезанный край - почти никогда. */
.ls-blog__shot{
  display:block;inline-size:100%;block-size:auto;aspect-ratio:16 / 9;object-fit:cover;
  border-radius:var(--ls-radius);margin-block-end:4px;
}
.ls-post__shot{
  display:block;inline-size:100%;block-size:auto;aspect-ratio:2 / 1;object-fit:cover;
  border-radius:var(--ls-radius);
}

/* Разделитель между карточками, а не рамка вокруг: карточка в рамке обещает нажатие по всей
   площади, а нажимается здесь заголовок. Последняя черты не носит - она отделяла бы ленту от
   подвала, у которого своя. */
.ls-blog__card + .ls-blog__card{border-block-start:1px solid var(--ls-line);padding-block-start:var(--ls-blog-gap)}

/* ССЫЛКА ОТДАЁТ ЦВЕТ ЗАГОЛОВКУ, А НЕ НАВЯЗЫВАЕТ СВОЙ. Без этой строки браузер красит
   заголовок системным синим и подчёркивает его - на живой странице так и было. */
.ls-blog__link{color:inherit;text-decoration:none;display:block}
.ls-blog__link:hover .ls-blog__ttl{text-decoration:underline;text-underline-offset:4px}
/* СВОЕГО РАДИУСА У КОЛЬЦА НЕТ - его наследует `outline`. Здесь стояло
   `border-radius: var(--ls-r-k, 4px)`, а `--ls-r-k` это безразмерный МНОЖИТЕЛЬ скругления
   (радиус/18), не длина: пока переменная не напечатана, работал запас `4px`, а как только
   рендерер её печатает, свойство становится невалидным и отбрасывается целиком. */
.ls-blog__link:focus-visible{outline:var(--ls-focus-w, 2px) solid currentColor;outline-offset:4px}

.ls-blog__ttl{
  margin:0;
  font-family:var(--ls-head-face), Georgia, serif;
  font-size:clamp(24px, 3.2cqi, 34px);
  line-height:1.2;
  font-weight:600;
}

.ls-blog__x{margin:0;color:var(--ls-muted);font-size:17px;line-height:1.6}

.ls-blog__m{margin:0;color:var(--ls-muted);font-size:14px}

/* ПУСТАЯ ЛЕНТА ГОВОРИТ ПРАВДУ И ВЫГЛЯДИТ НАМЕРЕННОЙ. Тот же цвет, что у прочих пояснений:
   пустое состояние - это состояние, а не поломка. */
.ls-blog--empty{color:var(--ls-muted);text-align:center}

/* --- СТРАНИЦА СТАТЬИ --- */

.ls-post__ttl{
  margin:0 0 12px;
  font-family:var(--ls-head-face), Georgia, serif;
  font-size:clamp(30px, 4.4cqi, 46px);
  line-height:1.15;
  font-weight:600;
}

.ls-post__m{margin:0;color:var(--ls-muted);font-size:14px}

/* РУБРИКИ И АВТОР (23.09.2026, редактор статьи). Пилюли над заголовком - как на странице статьи
   эталона: рамка линии слоя и полное скругление, текст мелкий; это ярлыки, а не кнопки, и
   нажатия не обещают. Автор в строке выходных данных - первым и чуть темнее даты. */
.ls-post__cats{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.ls-post__cat{padding:4px 12px;border:1px solid var(--ls-line);border-radius:var(--ls-r-pill,999px);font-size:14px;line-height:20px;color:var(--ls-ink)}
.ls-post__by{color:var(--ls-ink)}

/* ЦИТАТА, ЛИНИЯ, ТАБЛИЦА И ШИРИНА КАРТИНКИ - виды блока, которые ставит редактор статьи. Числа
   эталона (`redaktor-stati.md`, раздел 5), цвета - переменные слоя, чтобы палитра дела
   доставалась им даром. */
.ls-post__b .wp-block-quote,
.ls-rtx__b .wp-block-quote{
  margin-inline:0;padding-inline-start:1em;
  border-inline-start:3px solid var(--ls-line);
  color:var(--ls-muted);font-style:italic;
}
.ls-post__b .wp-block-quote p + p,
.ls-rtx__b .wp-block-quote p + p{margin-block-start:12px}
.ls-post__b .wp-block-separator,
.ls-rtx__b .wp-block-separator{border:0;border-block-start:1px solid var(--ls-line);margin-block:32px}
.ls-post__b .wp-block-table,
.ls-rtx__b .wp-block-table{overflow-x:auto}
.ls-post__b .wp-block-table table,
.ls-rtx__b .wp-block-table table{inline-size:100%;border-collapse:collapse}
.ls-post__b .wp-block-table th,
.ls-post__b .wp-block-table td,
.ls-rtx__b .wp-block-table th,
.ls-rtx__b .wp-block-table td{padding:12px 16px;border:1px solid var(--ls-line);text-align:start;vertical-align:top}
.ls-post__b .wp-block-table th,
.ls-rtx__b .wp-block-table th{font-weight:600}
.ls-post__b .wp-block-image img,
.ls-rtx__b .wp-block-image img{display:block;inline-size:100%;block-size:auto;border-radius:var(--ls-radius)}
.ls-post__b .wp-block-image.sc-img--medium,
.ls-rtx__b .wp-block-image.sc-img--medium{max-inline-size:70%}
.ls-post__b .wp-block-image.sc-img--small,
.ls-rtx__b .wp-block-image.sc-img--small{max-inline-size:400px;margin-inline:auto}
.ls-post__b .wp-element-caption,
.ls-rtx__b .wp-element-caption{margin-block-start:8px;font-size:14px;text-align:center;color:var(--ls-muted)}

/* ТЕЛО ПЕЧАТАЕТ ОБЩИЙ ПЕЧАТНИК БЛОКОВ, поэтому одеваются здесь ЕГО классы - разметка блоков
   ядра (`wp-block-heading`, `wp-block-list`) и два наших опознавателя (`sc-takeaways`,
   `sc-faq-q`/`sc-faq-a`). Свой список тегов вместо них устарел бы молча при первом новом виде
   блока.

   ЧИТАТЕЛЕЙ У ЭТИХ ПРАВИЛ ДВА - тело статьи и секция свободного текста (`ls-rtx__b`,
   09.09.2026). Печатник у них ОДИН, поэтому и одевалка одна: вторая копия правил в
   `richtext.css` разошлась бы с этой при первой правке, и разошлась бы та половина, которую
   сегодня никто не открывает. Селекторы поэтому названы парой, а не продублированы. */
.ls-post__b,
.ls-rtx__b{font-size:18px;line-height:1.7}

/* РИТМ ЗАДАЁТ ОДНО ПРАВИЛО, И БРАУЗЕРНЫЕ ПОЛЯ СНИМАЮТСЯ У ВСЕХ РАЗОМ.

   Замечание владельца 10.09.2026 со снимком: «сделай нормальные отступы между блоками» -
   заголовок «How it works» и список под ним стояли вплотную. Замерено: у списка
   `margin-block-start: 0`, потому что правило `.ls-rtx__b .wp-block-list{margin:0}` весит
   (0,2,0) и перебивает общий ритм (0,1,0). Сокращённое `margin` снимало поля не только у
   браузера, но и у нас - то есть чинило одно и ломало другое.

   Теперь поля браузера снимаются у ВСЕХ детей тела, а ритм ставится соседством. Список после
   этого получает те же 20 точек, что абзац, и правило ниже занимается только его отступом под
   маркеры. Читателей у этой шкалы двое - статья блога и секция свободного текста, - и правка
   достаётся обоим: у них один печатник и одна типографика. */
.ls-post__b > *,
.ls-rtx__b > *{margin-block:0}
.ls-post__b > * + *,
.ls-rtx__b > * + *{margin-block-start:20px}

/* СБРОС ПОЛЕЙ У АБЗАЦА ОГРАНИЧЕН ВЛОЖЕННЫМИ, И ЭТО ВТОРОЙ ЗАХОД ТОЙ ЖЕ БЕДЫ.

   Первая редакция писала `.ls-rtx__b p{margin:0}` - вес (0,1,1) против (0,1,0) у ритма, - и
   ритм не доставался НИ ОДНОМУ абзацу: заголовок и первый абзац стояли вплотную, замерено
   глазами на живой секции. Ровно та же болезнь была у списка часом раньше, только с другим
   селектором; лечить её вторым общим сбросом значило бы получить третью.

   Поля браузера снимает правило выше - оно ходит по прямым детям тела. Здесь остаются только
   ВЛОЖЕННЫЕ абзацы: у пункта списка, у врезки выводов, у подписи снимка. Там ритм не нужен -
   они часть своего блока, а не соседи по тексту. */
.ls-post__b li p,
.ls-rtx__b li p,
.ls-post__b figure p,
.ls-rtx__b figure p,
.ls-post__b blockquote p,
.ls-rtx__b blockquote p,
.ls-post__b .sc-takeaways p,
.ls-rtx__b .sc-takeaways p{margin:0}


.ls-post__b .wp-block-heading,
.ls-rtx__b .wp-block-heading{
  margin-block-start:44px;
  margin-block-end:0;
  font-family:var(--ls-head-face), Georgia, serif;
  line-height:1.25;
  font-weight:600;
}
.ls-post__b h2.wp-block-heading,
.ls-rtx__b h2.wp-block-heading{font-size:clamp(22px, 2.8cqi, 30px)}
.ls-post__b h3.wp-block-heading,
.ls-rtx__b h3.wp-block-heading{font-size:clamp(19px, 2.2cqi, 23px)}

/* Своих полей у списка нет - он живёт общим ритмом; здесь только место под маркеры. Вложенный
   список прижат к своему пункту: он его продолжение, а не соседний блок. */
.ls-post__b .wp-block-list,
.ls-rtx__b .wp-block-list{padding-inline-start:24px}
.ls-post__b .wp-block-list .wp-block-list,
.ls-rtx__b .wp-block-list .wp-block-list{margin-block-start:8px}
.ls-post__b .wp-block-list li + li,
.ls-rtx__b .wp-block-list li + li{margin-block-start:8px}

/* ВЫВОДЫ - ВРЕЗКА, И ОНА ОПОЗНАЁТСЯ КЛАССОМ, А НЕ МЕСТОМ. Печатник ставит `sc-takeaways`
   именно ради того, чтобы разбор нашёл её обратно; вид ей полагается свой - это блок, который
   читают вместо статьи, когда торопятся. */
.ls-post__b .sc-takeaways,
.ls-rtx__b .sc-takeaways{
  padding:20px 24px;
  border-inline-start:3px solid var(--ls-acc);
  background:color-mix(in oklab, var(--ls-acc) 6%, transparent);
  border-radius:var(--ls-r-k, 4px);
}

/* Вопрос и ответ идут парой, поэтому между ними зазор меньше, чем между парами. */
.ls-post__b .sc-faq-q,
.ls-rtx__b .sc-faq-q{margin-block-start:32px}
.ls-post__b .sc-faq-a,
.ls-rtx__b .sc-faq-a{margin-block-start:8px}

/* ВИД СТАТЬИ ИЗ «SITE SETTINGS - BLOG» (SCRUM-475): ширина колонки, «поделиться», похожие статьи.
   Средняя ширина - прежние 760 и атрибута не несёт. */
.ls-post[data-width="narrow"]{--ls-blog-max:640px}
.ls-post[data-width="wide"]{--ls-blog-max:960px}
.ls-post__back{margin-block-start:56px;padding-block-start:24px;border-block-start:1px solid var(--ls-line)}
.ls-post__back a{color:var(--ls-acc);text-underline-offset:3px}

/* --- ШАПКА СТАТЬИ: ЧЕТЫРЕ РАСКЛАДКИ (SCRUM-479) ---
   Числа - с рынка (замер 10.10.2026): текст шапки 896, обложка 1024 и доля 2:1, у Magazine
   колонка 300 и квадрат. Кегли и цвета - переменные слоя, как у всей статьи. */
.ls-post__hd{max-inline-size:var(--ls-post-wide);padding-block:64px var(--ls-blog-gap)}
.ls-post__hdT{max-inline-size:var(--ls-post-head);margin-inline:auto}
.ls-post__pic{margin:32px 0 0}

/* Minimal: шапка ниже и плотнее, из данных - только дата. */
.ls-post[data-head="minimal"] .ls-post__hd{padding-block-start:48px}
.ls-post[data-head="minimal"] .ls-post__pic{margin-block-start:24px}

/* Hero: обложка во всю бумагу под вуалью, текст прижат вниз. Вуаль и цвет текста - роли первого
   экрана (`--ls-veil-ink`, `--ls-ink-on-media`), а не белый и чёрный: на тёмной палитре запас
   читался бы как поломка. Без обложки - тонкий налёт чернил на бумаге и обычные чернила. */
.ls-post[data-head="hero"] .ls-post__hd{
  position:relative;isolation:isolate;display:flex;align-items:flex-end;
  max-inline-size:none;margin-inline:calc(-1 * var(--ls-page-gut, 24px));margin-block-end:var(--ls-blog-gap);
  min-block-size:clamp(360px, 60vh, 640px);padding:64px var(--ls-page-gut, 24px) 56px;
  color:var(--ls-ink-on-media, #fff);
}
.ls-post[data-head="hero"] .ls-post__hd[data-bare]{min-block-size:0;padding-block-start:96px;background:color-mix(in oklab, var(--ls-ink) 5%, var(--ls-paper, #fff));color:var(--ls-ink)}
.ls-post[data-head="hero"] .ls-post__hdIn{inline-size:100%}
.ls-post[data-head="hero"] .ls-post__pic{position:absolute;inset:0;z-index:-1;margin:0}
.ls-post[data-head="hero"] .ls-post__pic::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, color-mix(in oklab, var(--ls-veil-ink, #000) 72%, transparent), color-mix(in oklab, var(--ls-veil-ink, #000) 24%, transparent));
}
.ls-post[data-head="hero"] .ls-post__shot{block-size:100%;aspect-ratio:auto;border-radius:0}
.ls-post[data-head="hero"] .ls-post__m,
.ls-post[data-head="hero"] .ls-post__by,
.ls-post[data-head="hero"] .ls-post__cat{color:inherit}
.ls-post[data-head="hero"] .ls-post__m{opacity:.85}
.ls-post[data-head="hero"] .ls-post__cat{border-color:color-mix(in oklab, currentColor 45%, transparent)}

/* Magazine: крупный заголовок слева, справа квадратная обложка и данные столбиком. Без обложки и
   без данных правой колонки нет, и заголовок занимает всю ширину. */
.ls-post[data-head="magazine"] .ls-post__hdIn:has(> .ls-post__side){display:grid;grid-template-columns:minmax(0, 1fr) 300px;gap:32px;align-items:start}
.ls-post[data-head="magazine"] .ls-post__hdT{max-inline-size:none}
.ls-post[data-head="magazine"] .ls-post__ttl{font-size:clamp(34px, 5.6cqi, 60px);line-height:1.05;font-weight:700}
.ls-post[data-head="magazine"] .ls-post__side{display:flex;flex-direction:column;gap:24px}
.ls-post[data-head="magazine"] .ls-post__pic{margin:0}
.ls-post[data-head="magazine"] .ls-post__shot{aspect-ratio:1}
.ls-post[data-head="magazine"] .ls-post__m{display:flex;flex-direction:column;gap:8px}

/* --- ПОДВАЛ СТАТЬИ: ЧАСТИ, ПОРЯДОК ДАЁТ РАСКЛАДКА (SCRUM-479) --- */

/* «Поделиться» - по центру, кнопками-пилюлями. */
.ls-post__share{margin-block-start:56px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.ls-post__shareH{margin:0;font-size:14px;color:var(--ls-muted)}
.ls-post__shareL{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ls-post__shareA{
  display:inline-flex;align-items:center;min-block-size:40px;padding-inline:16px;border-radius:var(--ls-r-pill, 999px);
  background:color-mix(in oklab, var(--ls-ink) 6%, transparent);color:var(--ls-ink);font-size:14px;text-decoration:none;
}
.ls-post__shareA:hover{background:color-mix(in oklab, var(--ls-ink) 12%, transparent)}

/* Похожие - карточками шириной обложки, а не колонки чтения. Подложка - тонкий налёт чернил на
   бумаге, а не плоскость полосы: у части палитр полоса равна бумаге, и карточки пропадали
   (замер 10.10.2026, витрина). */
.ls-post__rel{max-inline-size:var(--ls-post-wide);margin-block-start:56px}
.ls-post__relH{margin:0 0 24px;font-family:var(--ls-head-face), Georgia, serif;font-size:clamp(22px, 2.8cqi, 30px);line-height:1.2;font-weight:600}
.ls-post__relL{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:24px}
.ls-post__relA{
  display:flex;flex-direction:column;gap:8px;block-size:100%;padding:20px;border-radius:var(--ls-radius);
  background:color-mix(in oklab, var(--ls-ink) 5%, var(--ls-paper, #fff));color:var(--ls-ink);text-decoration:none;transition:box-shadow .2s;
}
.ls-post__relA:hover{box-shadow:0 6px 20px color-mix(in oklab, var(--ls-ink) 12%, transparent)}
.ls-post__relT,
.ls-post__relX{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.ls-post__relT{-webkit-line-clamp:2;font-family:var(--ls-head-face), Georgia, serif;font-size:20px;line-height:1.25;font-weight:600}
.ls-post__relX{-webkit-line-clamp:3;color:var(--ls-muted);font-size:15px;line-height:1.5}

/* Предыдущая и следующая - две ячейки через черту; пустая ячейка держит место, и «следующая»
   не съезжает влево, когда предыдущей нет. */
.ls-post__nav{
  max-inline-size:var(--ls-post-head);margin-block-start:56px;padding-block-start:24px;border-block-start:1px solid var(--ls-line);
  display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px;
}
.ls-post__navA{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:var(--ls-radius);color:var(--ls-ink);text-decoration:none}
a.ls-post__navA:hover{background:color-mix(in oklab, var(--ls-ink) 5%, transparent)}
.ls-post__navA[rel="next"]{align-items:flex-end;text-align:end}
.ls-post__navL{font-size:13px;color:var(--ls-muted)}
.ls-post__navT{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:18px;line-height:1.3;font-weight:500}

.ls-post__shareA:focus-visible,
.ls-post__relA:focus-visible,
.ls-post__navA:focus-visible{outline:var(--ls-focus-w, 2px) solid currentColor;outline-offset:3px}

/* Похожих три в ряд только на широкой бумаге. */
@container ls (max-width: 1040px){
  .ls-post__relL{grid-template-columns:repeat(2, minmax(0, 1fr))}
}

/* --- УЗКАЯ ШИРИНА ---
   Порог и приём те же, что у секций: спрашивается ширина БУМАГИ, а не окна. */
@container ls (max-width: 700px){
  .ls-blog,
  .ls-post{--ls-blog-gap:32px}
  .ls-blog{padding-block:40px 64px}
  .ls-post{padding-block-end:64px}
  .ls-post__hd{padding-block-start:40px}
  .ls-post__pic{margin-block-start:24px}
  .ls-post[data-head="hero"] .ls-post__hd{min-block-size:clamp(320px, 60vh, 520px);padding-block:48px 32px}
  .ls-post[data-head="magazine"] .ls-post__hdIn:has(> .ls-post__side){grid-template-columns:minmax(0, 1fr);gap:24px}
  .ls-post__relL{grid-template-columns:minmax(0, 1fr)}
  .ls-post__nav{gap:8px}
  .ls-post__navA{padding:12px 8px}
  .ls-post__navT{font-size:16px}

  .ls-post__b,
  .ls-rtx__b{font-size:17px}
  .ls-post__b .wp-block-heading,
  .ls-rtx__b .wp-block-heading{margin-block-start:32px}
}

/* ПЕРВЫЙ БЛОК НЕ ОТБИВАЕТСЯ ОТ ВЕРХА: своё поле у тела уже есть, и отступ заголовка ложился
   сверху вторым. Заметно это стало ровно тогда, когда заголовок переехал внутрь текста и первым
   блоком стал именно он.

   СТОИТ В САМОМ КОНЦЕ НАМЕРЕННО, И ЭТО ЗАМЕР, А НЕ ВКУС. Вес у него и у правил заголовка
   одинаковый (0,2,0), решает порядок; первая редакция стояла выше широких правил - заголовок
   отбивался на 44 точки; вторая, поднятая над ними, всё равно проигрывала узкой ветке с её 32.
   Ниже последнего спорщика - единственное место, где правило работает на обеих ширинах. */
.ls-post__b > *:first-child,
.ls-rtx__b > *:first-child{margin-block-start:0}